Inserarea unei imagini în HTML. Etichete HTML pentru inserarea de imagini, imagini în HTML

26.06.2015

Salutare tuturor!
Continuăm să studiem cu sârguință elementele de bază ale HTML.
În această lecție vă voi spune, cum se inserează o imagine în HTML-document, cum să faci o imagine ca fundal, dimensiunea imaginii, înfășurarea textului în jurul unei imagini, cum să aliniați o imagine. Voi sprijini toate posibilitățile enumerate cu exemple și rezultate.
Deci, imaginile de pe paginile web pot fi fie de fundal, fie obișnuite. Care este diferența dintre o imagine de fundal și o imagine obișnuită?

Imagine de fundal plasat ca fundal deasupra căruia puteți insera alte imagini, text, tabele etc.

Imagine normală va îndepărta alte elemente ale paginii (alte imagini, text, tabele etc.). Folosind exemplul, vei vedea și înțelege totul.
Pentru paginile web, se recomandă utilizarea formatelor de imagine JPEG (JPG), GIF și PNG.

○ Cum să faci o imagine ca fundal înHTML

Pentru a face o imagine ca fundal pentru o etichetă trebuie să specificați atributul „background”:

Acum să ne uităm la exemplul complet. Introduceți fișierul imagine „fon.jpg” lângă fișierul HTML.

și introduceți acest cod în fișierul HTML:

Jpg">

Rezultatul va fi astfel:

Atenţie

Nume gresit:

Nume corect:

○ Cum se introduce o imagine înHTML

Pentru a insera o imagine într-un document HTML, utilizați eticheta cu parametrul „src”, care specifică calea sau adresa către imagine.

Acum să ne uităm la exemplul complet. Introduceți fișierul imagine „kartinka.jpg” lângă fișierul HTML și scrieți acest cod în fișierul HTML:

Buna ziua, aceasta este prima mea pagina de pe site.

Rezultatul va fi astfel:

Atenţie: Numele imaginii trebuie scris în latină, altfel imaginea nu va fi afișată.

Nume gresit:

Nume corect:

Cred că ai înțeles totul până acum. Acum să încercăm să combinăm cele două exemple împreună. Să creăm un fundal pentru pagina web, să inserăm o imagine și un text.

Jpg">

○ Cum să inserați o imagine dacă se află în folderul "img" sau "imagini"?

Dacă imaginea se află în folderul „img” sau „imagini”, atunci trebuie să specificați calea de la fișierul HTML la folderul „img” sau „imagini”, apoi introduceți doar numele imaginii cu extensia. Va arata asa:

Dacă fotografia se află pe alt site sau blog, atunci trebuie să indicați adresa site-ului și, dacă este necesar, folderul în care se află imaginea. Ei bine, desigur, trebuie să indicați numele imaginii cu extensia sa.

Postarea anterioară
Următoarea intrare

Instrucțiuni

Alegeți un format pentru o imagine animată pe baza propriilor capacități. Animațiile în formatele GIF și SVG pot fi create folosind programe gratuite (GIMP și respectiv Inkscape), în timp ce pentru a obține un applet animat în format SWF va trebui să utilizați pachetul software plătit Adobe Flash (a nu se confunda cu Adobe Flash gratuit). Jucător). De asemenea, rețineți că vizualizarea animațiilor în format GIF este posibilă în aproape toate browserele, mobil, format SWF - numai cu Flash Player instalat și format SVG - numai în browserele moderne, în principal pentru computere desktop.

Dacă nu doriți să creați singur o imagine animată, utilizați serviciile uneia dintre băncile gratuite de astfel de imagini. Animațiile în format GIF pot fi obținute, de exemplu, de pe site-ul AnimatedGifs, formatul SWF de pe site-ul Free Flash Animations și formatul SVG de pe site-ul Wikimedia Commons din categoria Animated SVG. Vă rugăm să respectați termenii licenței atunci când faceți imaginile disponibile publicului.

Pentru a insera o imagine GIF animată într-o pagină web, utilizați un cod HTML similar cu cel folosit pentru a insera imagini statice. Dacă imaginea se află în același folder de server ca și fișierul HTML, utilizați acest cod: . Dacă se află într-un alt folder de pe același server sau pe un alt server, modificați codul cu următoarea tăietură: . Inserați fișierele SVG în același mod, singura diferență fiind că au o extensie diferită: nu gif, ci svg.

Nu încercați să introduceți un fișier SWF folosind eticheta img src. Eticheta de încorporare este folosită pentru aceasta, iar codul devine vizibil mai greoi: , unde animatedimage.swf este numele fișierului SWF (sau calea completă către acesta), 320 este lățimea, 240 este înălțimea (aceste numere pot fi modificate la discreția dvs.).

Surse:

• Cum să puneți animație pe un avatar VKontakte

Puteți dezvolta imagini GIF animate într-o varietate de editoare grafice. Dar, potrivit multor experți, programul CorelDraw este cel mai potrivit pentru asta. Funcționalitatea sa largă permite chiar și unui designer amator să creeze animații GIF de calitate decentă.

Să începem treaba

Puteți crea animații în CorelDraw pentru orice versiune. Rulați acest program și deschideți un fișier nou în el. Introduceți orice, de exemplu – dragoste. Pentru a face acest lucru, faceți clic pe butonul Instrument Text din panoul grafic și plasați cursorul mouse-ului direct în câmp. După aceea, apăsați butonul stâng al mouse-ului și tastați dragoste.

Apoi trebuie să convertiți cuvântul pe care l-ați scris în curbe. Pentru a face acest lucru, selectați Conversie în curbe din meniu. Apoi, încercați să schimbați culoarea inscripției de dragoste. Selectați-l, faceți clic pe caseta de umplere și selectați culoarea dorită. După ce ați făcut acest lucru, faceți clic pe butonul OK.

Instrucțiuni despre cum să creați o animație GIF

După ce ați ales o culoare, faceți șapte copii ale acestei inscripții și aranjați-le orizontal într-o singură linie. În același timp, rotiți fiecare copie de la a doua la a opta cu o diferență de 45 de grade folosind câmpul Unghi de rotație. Acest lucru vă va ajuta să creați animație GIF cu efect de mișcare. După aceea, salvați fiecare ca fișier GIF separat. Astfel, ați primit opt ​​elemente de animație viitoare sub formă de GIF-uri. Acum tot ce trebuie să faceți este să le conectați împreună într-un obiect animat complet.

Pentru a crea o animație GIF, utilizați GIFCon32

Pentru a continua dezvoltarea animației GIF, rulați programul GIFCon32. Creați unul nou în el și adăugați modulul Image folosind comanda Insert-Image. După aceea, în fereastra care apare, selectați primul fișier GIF din opt și faceți clic pe OK. Apoi setați butonul radio la Utilizați o paletă locală pentru această imagine. Adăugați restul de 7 GIF-uri exact în același mod.

Mai rămâne doar puțin pentru a face o animație GIF. Înainte de modulul Image1, introduceți modulul de control selectând modulul Loop și executând comanda Insert-Control. Apoi introduceți cele 7 module de control rămase în același mod.

Odată ce începeți să editați proprietățile tuturor modulelor de control, selectați unul dintre ele și rulați comanda Blok-Edit. În fereastra nouă, faceți clic pe elementul Culoare transparentă și faceți clic pe culoarea care va deveni. Apoi setați Fundal în linia Eliminare după, iar în câmpul Întârziere setați valoarea la 20. Faceți clic pe OK și repetați întreaga procedură pentru toate modulele de control rămase.

Video pe tema

Vei avea nevoie

• - Programul SwishMAX.

Instrucțiuni

Rulați SwishMAX pentru a face swf animaţie. De exemplu, puteți face un banner cu efect animat. Această aplicație conține o bibliotecă de șabloane, pe baza acestora puteți realiza un banner de dimensiuni standard. Pentru a face acest lucru, selectați meniul Fișier, faceți clic pe comanda New From Template și selectați șablonul Banner complet (468x60) din listă. Apoi, accesați fereastra Scenă, accesați fila Film, setați culoarea de fundal la alb.

Selectați instrumentul Text și selectați o zonă dreptunghiulară pentru a seta direcția textului. Dacă dați clic pe spațiul de lucru cu mouse-ul, textul va fi poziționat vertical, dar acesta nu este potrivit pentru bannerul nostru. Accesați fila setări text din fereastra Scenă.

Introduceți textul dorit, selectați dimensiunea, culoarea și tipul fontului, precum și stilul. Faceți clic dreapta pe el pentru a selecta un efect pentru banner. Selectați efectul Surfin-Pass The Bucket din grupul Looping continuous, acesta va apărea pe cronologia animației.

Faceți dublu clic pe efectul de pe scara de animație pentru a-l personaliza: schimbați viteza, amplitudinea mișcării efectului, direcția. În aceeași fereastră puteți vizualiza rezultatul modificării setărilor. Faceți clic pe butonul Mai multe opțiuni pentru a accesa setările detaliate pentru efectul selectat. Salvați fișierul rezultat, pentru a face acest lucru, accesați meniul Fișier, selectați comanda Export, format fișier – Swf.

Creați un buton în format Swf. Pentru a face acest lucru, desenați o formă pentru butonul folosind instrumentele dreptunghi, formă automată sau elipsă într-un document nou. Apoi, adăugați textul necesar deasupra formularului. Setați setările dorite în fereastra Scenă. Apoi, în fereastra Aspect, accesați fila Script, faceți clic pe butonul Adăugare script, selectați comanda Browser/Rețea, apoi faceți clic pe getURL(...).

În acest câmp, introduceți linkul care va fi deschis după ce utilizatorul face clic pe butonul. Apasa Enter. Pentru a verifica linkul, faceți clic pe butonul Redați filmul, încercați să faceți clic pe butonul. Dacă browserul se deschide și se face clic pe linkul dorit, atunci tot ce rămâne este să salvezi butonul în format SWF.

Video pe tema

Surse:

• cum se creează un banner swf

Sistemul de operare Windows are o interfață ușor de utilizat și opțiuni de personalizare destul de bogate. În special, utilizatorul poate schimba pictograma implicită a folderului inserând o imagine în ea.

Pentru inserare imagini în HTML Cele două formate principale utilizate sunt GIF și JPEG. Formatul GIF poate stoca animații simple (banere dinamice), JPEG este grozav pentru imagini cu multe culori, cum ar fi fotografii. Al treilea format pentru grafica web este PNG, dar nu este utilizat pe scară largă în design web. Orice imagine în formatele GIF sau JPEG este inserată într-o pagină web folosind eticheta; nu există etichetă de închidere.

Prin atribut src este specificată adresa (URL-ul) fișierului imagine, adică. browserul găsește imaginea dorită în directorul site-ului folosind calea (URL) specificată în acest atribut. Pentru comoditate, toate imaginile site-ului sunt situate într-un folder separat, de obicei numit imagine. De exemplu, luați orice imagine, de preferință un format mic și salvați-o în imaginea folderului creat, cu numele primer.jpg. În continuare ne vom referi la el pentru antrenament.

Ei bine, să încercăm să inserăm o poză pe pagină? Scriem codul (cale - URL, scris în funcție de locația folderului cu imagini):

src="image/primer.jpg" >

Imaginile sunt probabil cele care formează ideea noastră generală despre World Wide Web. Sunteți de acord că oamenii își amintesc în general informațiile grafice mult mai bine decât informațiile text. Prin urmare, imaginile sunt o parte importantă a oricărui site web și a oricărei pagini web. Și de aceea vreau să vă spun cum să inserați o imagine în html.

Inserarea unei imagini în html folosind o etichetă

Cu siguranță știți că toate comenzile din html sunt executate folosind etichete. Așa că am venit cu propria noastră etichetă pentru imagini - . Este single, adică nu are o parte de închidere.

Cel mai important atribut al etichetei img este src (sursa) – calea către imagine. În ea scrieți adresa unde se află imaginea. Poate fi scris ca absolut ( website/images/images2/image.jpg) sau ca rudă ( images/images2/image.jpg).

Ambele căi duc la același fișier image.jpg, care se află în folderul image2. Acesta, la rândul său, se află în directorul de imagini, iar acesta se află în folderul rădăcină. Dacă notezi totul relativ, atunci când vei schimba numele de domeniu al site-ului tău, totul va rămâne operațional. De exemplu, editorul WordPress inserează adrese absolute în mod implicit. Dar personal, nu voi schimba domeniul și asta mi se potrivește.

Atribute suplimentare și design prin css

Deci, haideți să ne îndepărtam de la subiect.Pentru a afișa o imagine, este suficient să specificați atributul src, dar există multe alte atribute pentru designul acesteia.

• lățime și înălțime – lățimea și înălțimea imaginii. Poate fi setat în atributele corespunzătoare din eticheta img
• aliniere – alinierea imaginii în raport cu textul. În mod implicit, este aliniat la stânga. De asemenea, îl puteți pune în dreapta și în centru (dreapta, centru)
• alt – text alternativ care va fi afișat dacă utilizatorul a dezactivat afișarea imaginilor în browser. Este util să îl completați
• titlul este aproape același. Un fel de descriere a imaginii care va fi afișată când treceți cursorul peste ea
• vspace și hspace – spațiu vertical și orizontal al imaginii față de restul conținutului. Atenţie! Atributele sunt deja învechite și este mai bine să setați aceste indentări printr-o foaie de stil
• clasă – o clasă de stil care este atașată imaginii și îi aplică unele stiluri

Introdu o poză atât de drăguță. Îmi doresc foarte mult să cânt când mă uit la ea. Aici am adăugat o clasă de previzualizare imaginii și acum cu CSS putem accesa poza prin ea.

Previzualizare (Umplutură: 20px; Marja: 10px; Chenar: 5px portocaliu continuu; Transform: skewX(10deg); box-shadow: 0 0 15px 10px violet )

Bine? Este, evident, mai tare decât formatarea folosind numai HTML?

Lasă-mă să rezumam

Deci, pentru a afișa o imagine, trebuie doar să scrieți o etichetă img și să includeți în ea atributul src, care specifică calea către imagine. Toate celelalte sunt caracteristici suplimentare - aliniere, dimensiuni, text alternativ, rotații, cadre etc.

Și în cele din urmă, în mod ideal, toate acestea ar trebui scrise prin CSS. Adică, nu setați dimensiunile în atribute, ci adăugați o clasă de stil suplimentară imaginii, care va determina dimensiunile. Același lucru este valabil și pentru alinierea, care poate fi făcută în CSS folosind proprietatea text-align, precum și blocurile flotante.

Cred că acum aveți o idee despre cum să inserați o imagine în html și să o formatați în mod normal. Ne vedem în articolele următoare.

Sperăm că acest articol vă va fi de folos. Lectura placuta!

Imaginile ne permit instantaneu să înțelegem cât de interesant poate fi un anumit site sau articol pentru noi, creează o stare de spirit și pot dezvălui un subiect într-un mod nou. Uneori, o fotografie valorează cât o mie de cuvinte.

Dar nu ar trebui să participați la ele dacă nu aveți Instagram sau un magazin online. Este recomandabil ca imaginile:

• au fost informative
• se potrivesc cu schema de culori a site-ului dvs
• erau potrivite

Dacă nu aveți o fotografie potrivită, puteți folosi așa-numita fotostock (bancă foto) - un loc în care sunt stocate multe fotografii, ilustrații și grafice vectoriale. Există o mulțime de astfel de resurse, poate ați auzit chiar despre una dintre cele mai mari - Shutterstock, dar descărcările de acolo sunt plătite.

Pentru cei cărora nu le place să plătească în exces, la finalul articolului v-am pregătit primă- o listă cu mai multe bănci de fotografii de unde puteți descărca o cantitate imensă de materiale frumoase de înaltă calitate absolut gratuit :)

Formate de imagine

Există în principal 3 tipuri de imagini utilizate pe World Wide Web:

gif(Format de schimb grafic - format de schimb de imagini)

Acesta este primul format care a început să fie folosit pe Internet. Avantajele acestui format sunt disponibilitatea animatiiși de dimensiuni reduse, pagina se încarcă rapid. În plus, susține transparența. Dezavantaj - folosit doar 256 de culori(de fapt, de aceea dimensiunea este mică), adică nu poate fi folosit pentru imagini color.

jpeg, aka jpg(Grupul mixt de experți fotografici - Grupul mixt de experți fotografici - acesta este numele organizației de dezvoltare)

potrivit pentru crearea de imagini pline de culoare, de înaltă calitate, fotografii. Dimensiunea unor astfel de imagini este mare, așa că de obicei plasează o sarcină mare pe server. Dacă trebuie să comprimați un jpeg (pentru o greutate mai mică a imaginii), vă recomandăm să luați dimensiunea imaginii finale multiplu de opt , deci pierderea calității va fi minimă.

png(Grafică de rețea portabilă - Grafică de rețea portabilă. Pronunțat la fel ca ping, adică )

acest format a fost dezvoltat inițial pentru web, adică Imaginea cântărește de obicei puțin și nu încetinește pagina la încărcare. Acest format a fost creat pentru a înlocui gif-ul învechit, dar, spre deosebire de acesta, nu acceptă animația. Png-8, ca și gif, folosește doar 256 de culori. Format png-24 acceptă 16 milioane de culori, deși este deja destul de greu. Png-32 conține același număr de culori ca png-24 și, în plus, vă permite să obțineți o imagine cu fundal transparent , și puteți regla gradul de transparență. Când reduceți dimensiunea png, nu există nicio pierdere a calității culorii.

Să rezumam

gif- pentru animație

jpeg- pentru fotografii

png- pentru icoane, butoane, fundaluri, logo-uri, capturi de ecran, desene, texte, fotografii cu fundal transparent

Inserarea unei imagini într-un fișier html

Pentru a adăuga o imagine pe pagină, utilizați etichetă (din limba engleză imagine - imagine, imagine). Aceasta este o singură etichetă și nu necesită o etichetă de închidere. Această etichetă conține atribute în interior.

Atribut src(din sursa engleză - sursă) indică calea către fișier (locul în care se află imaginea). Dacă poza se află pe computerul tău (site-ul este încă în curs de dezvoltare) sau pe serverul tău, folosește un link relativ. Dacă imaginea este din rețea, atunci este necesară o legătură absolută. Citiți cum să faceți acest lucru în articolul „Link-uri”.

Deci, pentru a conecta o imagine la pagina dvs. web, trebuie să scrieți cod astfel:

atribut alt(din alternativa engleza - alternativa) indica textul pe care utilizatorul il va vedea daca imaginea nu se incarca. Calea este indicată incorect, imaginea a fost ștearsă, internet prost - pot exista multe motive și este de dorit ca persoana să înțeleagă ce se află în spatele acestei pictograme urâte.

Motoarele de căutare acordă o atenție deosebită să se asigure că acest atribut este completat. Iar validatorul html (o resursă pentru verificarea corectitudinii codului) va percepe absența atributului alt ca o eroare. Dacă toate atributele vor fi completate și vor conține, de asemenea, cuvinte cheie dacă este posibil - vizibilitatea site-ului dvs. va crește semnificativ, de exemplu. va fi afișat mai des în căutări. Aceasta este din domeniul SEO, iar în această etapă este suficient să știm că există un astfel de atribut, iar un site „live” trebuie să îl completeze. În timp ce site-ul se află pe discul nostru, acesta poate fi lăsat gol.

În exemplul de mai jos, am specificat în mod deliberat o cale inexistentă pentru imagine, astfel încât să puteți vedea cum funcționează atributul alt

Înălțimea și lățimea imaginilor

De asemenea, puteți seta înălțimea și lățimea imaginii dacă imaginea originală este de ex. mai mult decât ai nevoie.

În HTML5 se recomandă să faceți acest lucru folosind CSS sau atribut de stil , ca aceasta:

În acest exemplu, am luat 30% din lățime, nu din imaginea originală, ci din dimensiunea ferestrei browserului. Când lățimea = 100%, imaginea se deschide pe toată lățimea browserului. Amintiți-vă de această caracteristică la sută, ca unități de măsură.

Apropo, dacă am fi scris doar lățimea, rezultatul ar fi fost același, încercați:

De asemenea, puteți seta lățimea și înălțimea în pixeli.În cazul panda nostru, ale cărui dimensiuni inițiale sunt 1196 x 796 pixeli, pentru ca animalul să nu sufere atunci când este comprimat, trebuie să menținem proporțiile și aici nu te poți lipsi de un calculator. Să presupunem că vrem să reducem dimensiunea imaginii de 3 ori, apoi trebuie să setăm dimensiunile la 399 x 265 pixeli.

Vă rugăm să rețineți că dacă mărim imaginea proporțional, atunci este suficient să specificați un singur parametru, de exemplu. lăţime. Browserul inteligent în sine va calcula dimensiunea completă a imaginii.

Încercați să rulați acest cod și uitați-vă la rezultat:

Setați întotdeauna dimensiunile imaginii. De obicei, imaginile durează mai mult să se încarce decât restul codului html. Dacă browserul știe cât spațiu trebuie rezervat pentru imagini, poate continua să încarce site-ul fără a aștepta încărcarea imaginilor.

Puțină naftalină

Dacă vi se întâmplă să modificați codul unui site creat în HTML-4 sau chiar mai devreme, veți observa că dimensiunile imaginilor sunt setate folosind atribute de lățime Și înălţime. Aceasta este o metodă depreciată, deși încă valabilă în HTML5. Cu toate acestea, vă recomandăm să folosiți stilul, deoarece Atributele lățimii și înălțimii pot fi afectate de stilurile interne sau externe care vor locui în browser sau în fișierul dvs. CSS. Vom intra în mai multe detalii despre acest lucru când ne uităm la CSS, dar deocamdată uită-te la un exemplu despre modul în care stilurile afectează atributele înălțime și lățime.

Există 3 file în această fereastră: pe prima vedeți codul html, pe al 2-lea cod CSS și pe ultima - ca întotdeauna, rezultatul. Aceasta funcționează ca și cum prima filă ar fi un fișier index.html, a doua un fișier style.css și a treia un browser. Deci, acum CSS-ul nostru spune că toate elementele cu eticheta img au o lățime de 100%. Dimensiunile implicite ale atributelor de lățime și înălțime sunt în pixeli, deci nu este nevoie să adăugați nicio unitate aici.

Diferența de rezultate este evidentă :)

De asemenea, în versiunile mai vechi de html au fost utilizate următoarele atribute:

alinia, care a fost folosit pentru a alinia imaginea orizontal sau vertical.

hspace- indentare în stânga și în dreapta imaginii față de conținutul din jur (de exemplu, text sau o imagine adiacentă)

vspace- indentare deasupra și dedesubt de la imagine la conținutul din jurul acesteia.

frontieră- setați grosimea cadrului din jurul imaginii (în mod implicit este zero)

În zilele noastre, toată această manipulare (și multe altele) se face folosind CSS, așa că am decis să nu vă deranjam aici. Dacă încă sunteți interesat de cum să lucrați cu aceste atribute, scrieți în comentarii, vom adăuga acest articol :)

Plasarea unei imagini în cod

De unde ne punem eticheta depinde de modul în care va fi afișat în browser.

Exemplul nr. 1 - înainte de paragraful:

Elemente precum

ȘI

a se referi la elemente de bloc . Ele încep întotdeauna pe o linie nouă și ocupă toată lățimea disponibilă a ferestrei browserului. Daca esti pe primul loc , iar după el un element de bloc, de exemplu un paragraf, va fi mutat pe linia următoare.

Exemplul nr. 2 - la începutul paragrafului

Acesta este un element inline, se potrivește în interiorul unui element bloc și nu începe o linie nouă. În exemplul de mai sus, textul se înfășoară în jurul imaginii, deoarece codul înregistrată în interior

Legende pentru ilustrații

Pentru a marca sau semna o fotografie pe o pagină, utilizați etichetă