Cum să plasați o imagine pe o pagină html. Inserarea unui fișier grafic într-o pagină web

În timp ce călătoriți pe Internet, vedeți, desigur, diverse imagini, bannere, fotografii și imagini grafice pe multe site-uri. Astăzi vom învăța cum să inserăm imagini într-o pagină HTML.

Adăugarea unei imagini are loc în două etape: mai întâi, este pregătit un fișier grafic cu dimensiunea și formatul necesar, apoi este adăugat pe pagina web prin intermediul etichetei: . Documentul HTML în sine este destinat doar să afișeze imaginea necesară, în timp ce fără a-l schimba deloc.

Există câteva lucruri de luat în considerare atunci când vă pregătiți imaginile.

1. Deoarece pagina web este încărcată prin rețea, un factor semnificativ este dimensiunea („greutatea”) fișierului grafic, încorporat într-un document web. Cu cât este mai mic, cu atât imaginea va fi afișată mai rapid.

2. Destul de des, dimensiunile fizice ale unei imagini (lățime și înălțime) trebuie limitate (reduse) prin lățime și înălțime. De exemplu, setați lățimea la cel mult 700-800 de pixeli. În caz contrar, întreaga imagine nu va încadra în fereastra browserului și vor apărea bare de defilare.

Formate grafice pentru site-uri web

Cele două formate principale care sunt cele mai utilizate pentru grafica web sunt: GIFȘi JPEG. Asemenea calități precum multifuncționalitatea, versatilitatea, un volum mic de fișiere sursă cu o calitate suficient de bună au servit bine acestor formate, de fapt, definindu-le ca standard pentru imaginile web.

Există și un format: PNG, care este, de asemenea, acceptat de browsere atunci când adăugați imagini și este disponibil în două variante: PNG-8Și PNG-24. Cu toate acestea, popularitatea formatului PNG este mult inferioară ca recunoaștere față de formatele GIF și JPEG.

De obicei, un folder separat este creat pentru imagini (imagini) în directorul rădăcină și toate imaginile pentru site sunt plasate în el. Uneori există mai multe astfel de foldere (dacă structura site-ului o cere sau este mai ușor pentru tine să navighezi). Acest folder se numește cel mai adesea: img sau imagini (Imagini). În codul paginii web, scrieți calea completă către fișierul grafic (unde se află imaginea), precum și numele acestui fișier (imaginea) pe care doriți să îl introduceți în documentul html.

Scriem cod pentru a insera o imagine într-o pagină web

Pentru a insera imagini într-un document HTML, utilizați construcția specificată în Lista 8.1. Acest cod este introdus în locul dorit de pe pagina web (unde doriți să vedeți poza).

Pe pagina noastră dedicată mașinilor am pregătit și am inserat două imagini. Puteți vedea codul de încorporare pentru prima imagine în Lista 8.1.

Lista 8.1.

Iată cum va arăta prima imagine inserată pe pagina web a site-ului:

Și acum voi comenta mai detaliat ce este scris în Lista 8.1.

Imaginea în sine este „inserată” folosind eticheta: img src. Intrarea completă arată astfel: img src="img/mers1.jpg", Unde „img/mers1.jpg”– indică faptul că fotografia noastră se află în folderul: img, și numele fișierului grafic (imagine): mers1.jpg.

În principiu, acest lucru este deja suficient pentru a insera o imagine pe o pagină web, parametrii rămași sunt opționali, dar tot recomand să-i înregistrați întotdeauna, în caz contrar, imaginea poate fi supusă distorsiunilor geometrice.

Să ne uităm la opțiunile suplimentare:

border="0"– indică faptul că nu există niciun cadru în jurul imaginii, încercați să schimbați 0 cu un alt număr, de exemplu cu 1 , - corespunde grosimii cadrului din jurul imaginii în 1 pixel, 2 – corespunde grosimii cadrului din jurul imaginii de doi pixeli etc.

Important! Dacă intenționați să faceți o imagine un link, asigurați-vă că indicați valoarea: border="0".

width="400"– indică faptul că lățimea imaginii este: 400 pixeli(puneți un număr real pentru lățimea imaginilor dvs.).

înălțime="209"- indică faptul că înălțimea imaginii este: 209 pixeli(puneți un număr real pentru înălțimea imaginilor dvs.).

Dacă nu specificați parametrii: lăţimeȘi înălţime, atunci imaginea poate primi distorsiuni geometrice.

hspace="20"– indică o indentare de 20 de pixeli a textului în jurul imaginii.

align="left"– aceasta este o etichetă deja familiară pentru dvs.... Așa este, înseamnă aliniere la stânga, poate avea și sensul: dreapta- alinierea la dreapta.

alt="Vedere din față a mașinii" !}– aici este scris text alternativ, care este afișat când treceți mouse-ul peste imagine.

Exact în același mod, vom „insera” a doua imagine pe pagina web, singura diferență fiind că va fi aliniată la dreapta.

Comentarii la acest articol (lecție):

Vă rog să-mi spuneți unde exact ar trebui să creez folderul img?

Dosarul img este doar un nume convențional, îl poți numi cum vrei, atâta timp cât îl înțelegi mai târziu. Îl poți crea oriunde, pentru simplitate, creează-l în directorul rădăcină și pune toate imaginile acolo.

Chestia este că nu este afișată poza, ci doar inscripția. Ce poate fi greșit? Mulțumesc.

Aruncă o privire atentă la Lista 8.1 de mai sus. Ia totul pentru tine. În directorul rădăcină (unde se află toate fișierele HTML ale site-ului dvs.), faceți un folder img. Pune toate imaginile în acest folder. În listă, schimbați mers1.jpg cu numele fișierului dvs. Modificați, de asemenea, valorile de lățime și înălțime la dimensiunile reale ale fișierului dvs. Noroc.

Multumesc mult, totul a iesit.

Buna ziua.Am aceeasi situatie ca si vorbitorul precedent:Scriu codul ca al tau,schimb doar numele fisierului:in loc de mers.1/jpeg introduc link-ul Mercedes/jpeg.Apare doar o fereastra pe pagina cu inscripție în partea de sus „Vedere din față a mașinii”, și nu există nicio imagine. După părerea mea, browserul nu găsește calea către fotografie sau nu este scrisă corect. AICI ESTE CODUL MEU: b

Privește cu atenție codul img/mercedes/jpeg. Ați înțeles corect, browserul nu găsește calea către fișierul grafic. 2. Numele fișierului este incorect, vezi cum am mers1.jpg

Ei bine, am copiat codul si l-am lipit, am un oval fara poza, in oval e un link in partea de sus!

Buna ziua!Problema este aceeasi, am creat un folder numit img in acelasi loc cu documentele site-ului, in acest folder sunt salvate imagini cu numele 1.jpg, scriu totul ca in exemplul dvs.

Dacă ai observat că poza mea este în folderul img

Un articol foarte util pentru webmasterii începători. Singura avertizare la atributul „alt”. În raport cu figură, articolul oferă următoarea interpretare: „alt="Vedere din față a mașinii" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

aici este codul meu AȘA DE CE POZA ESTE PUNĂ ÎN LADO CÂND SARCINA PENTRU ESTE ESTE CENTRAL?

Și dacă iau o imagine de pe site-ul altcuiva, nu va fi o încălcare a drepturilor de autor?

Explicați de ce, atunci când încărcați un document HTML pe server, există spații goale în cadru în loc de imagini. Deși înainte de afișare, imaginile erau așa cum ar trebui să fie.

Dmitry, miracolele nu se întâmplă, ai greșit undeva, verifică toate căile către imagini, adică. cum sunt scrise imaginile în cod.

Acesta este codul meu, totul este dezvăluit pe pagină cu excepția imaginii, am încercat toată ziua în toate felurile posibile, dar nimic. te rog spune-mi ce sa fac

AndreyK, vă rog să mă contactați în scrisoarea mea. Nu pot introduce o imagine în niciun fel, introduc totul corect, dar nimic, apar doar cadrul și inscripția

Elvira, am citit scrisoarea ta, precum și toate celelalte comentarii și scrisori. Dar unde să răspund... la satul bunicului meu???

Nu știu de ce toată lumea este atât de supărată!? Trebuie doar să nu copiați și apoi să lipiți codurile, ci să le scrieți singur și totul va funcționa... iată textul pozei mele

Ți-am copiat lista, am lipit valorile mele - există o imagine. Apoi introdu același lucru mai jos (manual) nu există nicio imagine - ce miracol?

AndreyK te rog spune-mi unde este eroarea? Indiferent de câte ori încerc, nu funcționează((

Andrey, spune-mi de ce nu pot vedea poza. Codul meu: Există o inscripție, dar nicio imagine. Adresa mea: [email protected] Mulțumesc.

Si eu am patit mult timp, dar a mers! Într-adevăr, folderul imj trebuie deschis într-un document HTML.

Cu siguranță o voi încerca, mulțumesc

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Si eu am patit mult timp, se pare ca folderul cu poze ar trebui sa fie in acelasi loc cu index.html, multumesc Elena

Andrei introduc:

Andrei introduc: si nu am poza in document, doar o inscriptie!!!Adresa mea: [email protected]

codul meu...nici nicio poza. Dosarul img se află în același folder cu index... vă rog ajutați. [email protected] Mulțumesc!

Ei bine nu stiu. Am citit toate comentariile. Am încercat totul. Mi-am copiat și lipit informațiile. Nimic nu funcționează. Dosarul cu imagini (img) se află în același loc cu index.html. Dar nu există nicio imagine. În schimb există o cruce roșie și o inscripție.Lucrez în browserul IE. Iată ce am introdus:

M-am uitat la codul HTML al paginii în locul fotografiei din lecție: Codul de pe pagină este diferit de ceea ce este în listă. De ce? si, de altfel, pe pagina este subliniat codul “mers1.jpg”. Copierea cu subliniere a eșuat. Am încercat să-l introduc așa. Inca nicio poza. Ce s-a întâmplat?

Ne întrebăm, ne răspundem. Am suferit multă vreme și nu a fost introdusă poza. S-a dovedit: 1, în loc de eticheta src aveam srk 2. M-am încurcat când compuneam calea către imagine. Am redenumit folderul în IMG și totul a funcționat. Am petrecut aproape două zile pe asta, dar a meritat.

Iubește, dar acum îți vei aminti asta pentru tot restul vieții:) Glumesc, desigur, nu fi jignit. Dar serios, dacă o persoană nu lasă o adresă de retur, atunci îmi este aproape imposibil să-l ajut.

Bună ziua, spuneți-mi cum să plasez o imagine în sus, a doua dedesubt în stânga și a treia în partea de jos în dreapta))))

..........care este eroarea mea de a lipsi imaginea?

Totul în cod este corect, dacă nimic nu este dezamăgit, totul ar trebui să funcționeze. Dar scrieți numele fișierului (imaginea) cu litere englezești. Multe servere nu acceptă alfabetul latin.

Dar iată ce este ciudat... în timp ce numeam folderului cu nume diferite, imaginea nu a vrut să apară, deși calea a fost scrisă corect. Imediat ce am sunat la IMG, a apărut imediat. Care e siretlicul?

Marina, nu exista truc sau provocare :). În codul Listare 8.1. se indică faptul că această imagine se află în folderul: img. Dacă schimbați numele folderului pentru imagini de pe gazda dvs., apoi îl schimbați în listă, acesta este tot trucul.

Incerc sa inserez o imagine!!! Scriu totul folosind un blocnotes, fac totul corect, poate că nu merită să folosesc un blocnotes??

Și deschid totul în Mozilla Fire Fox cel mai recent))

Calea imaginii mele este C:Documents and SettingsdenisDesktopkoffevinogradwwwImg și poza în sine se numește gif, de asemenea, numele include 1.gif...Fac asta în notepad Am făcut-o și calea completă nu iese, mozilla nu vede fotografia exploratorului și o evidențiază cu o cruce roșie

Denis, redenumiți folderul Img în img, adică. totul cu majuscule și redenumiți și calea către acesta. Multe servere nu afișează corect majuscule.

Mai am aceeași întrebare: de ce nu imagini, ci doar inscripția. Am creat un folder separat pentru site: conține o pagină Web și un desen. Inserate: AJUTOR CARE ESTE EROAREA MEA DE POSTA: [email protected]

Cum să faci o imagine astfel încât să poată fi mărită sau redusă?

Din anumite motive, imaginea nu este centrată nici pentru mine. Care este captura?.. Codul este astfel:

Este dificil să găsești pe Internet un site web care să nu conțină imagini, iar acest lucru nu este surprinzător, deoarece acestea reprezintă partea principală a designului site-ului, ceea ce îi conferă un aspect memorabil. Un design bun de site este cheia dezvoltării sale de succes. Pentru a afișa imagini în html există o singură etichetă .

1. Sintaxa etichetelor

Descrierea imaginii" src ="URL " [atribute ]>

Vă rugăm să rețineți că această etichetă este singură și nu necesita eticheta de inchidere .

Atributul src este obligatoriu. Este folosit pentru a specifica adresa imaginii afișate. Puteți specifica o adresă URL absolută sau relativă. Dacă nu specificați adresa sau o scrieți cu o eroare, imaginea nu va fi afișată.

Atribut alt="descriere" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Atributele rămase sunt opționale; le vom analiza mai jos. Mai întâi, să dăm un exemplu simplu de ieșire a unei imagini în HTML.

2. Cum se inserează o imagine în html

Pentru a insera o imagine în html, utilizați eticheta . Ne-am uitat la sintaxa puțin mai sus. Să dăm exemple practice.

Exemplul 2.1. Folosind o etichetă

... ...

Acest cod

În acest exemplu, am indicat adresa directă a imaginii din imaginile de pe Yandex Photos. Cel mai adesea, sunt furnizate link-uri către imagini care se află la aceeași adresă URL. De exemplu, src="/img/kartinka.jpg", i.e. se indică adresa relativă.

Este posibil să plasați mai multe imagini la rând. Dacă nu se încadrează pe o linie, se vor muta automat pe următoarea.

Exemplul 2.2. Afișarea mai multor imagini în html una după alta

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

Dacă am plasa o altă imagine, ar fi pe o linie nouă, deoarece nu s-ar mai încadra în aceasta.

Exemplul 2.3. Utilizarea textului alternativ (alt) în img

Se recomandă includerea textului alternativ (atributul alt) în etichetă , pentru a vă asigura de cazul în care poza nu este disponibilă. Mai jos este un exemplu de utilizare a textului alternativ. În primul caz, nu am specificat dimensiunea imaginii, dar în al doilea o facem.

... Imagine exemplu" src ="321.jpg "> ...

Se convertește în următoarele pe pagină:

Dacă am plasa o altă imagine, ar fi pe o linie nouă, deoarece nu s-ar mai încadra în această linie.

Acum să aruncăm o privire mai atentă la toate atributele etichetei .

3. Etichetați atributele și proprietățile

1. Proprietatea align="parameter" - determină alinierea imaginii. Această valoare afectează și modul în care textul va curge în jurul imaginii. Poate accepta următorii parametri:

• alinierea stânga - stânga
• mijloc - aliniați mijlocul imaginii la linia de bază a liniei curente
• jos - aliniați marginea de jos a imaginii la textul din jur
• sus - marginea superioară a imaginii este aliniată la cel mai înalt element al liniei curente
• alinierea dreapta - dreapta

Exemplul 3.1. Alinierea unei imagini în html la dreapta

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

2. Proprietate alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• Afișează balonul la trecerea cu mouse-ul
• Dacă imaginile sunt dezactivate în browser, acest text este afișat

Acest atribut este, de asemenea, foarte important atunci când se clasifică imagini în Yandex Images și Google Images. Ar trebui adăugat la fiecare imagine, deoarece acesta este unul dintre factorii în algoritmii motoarelor de căutare.

Exemplul 3.2. Ieșirea unei imagini în html cu un cadru (chenar)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Se convertește în următoarele pe pagină:

4. Proprietate bordercolor="color" - setează culoarea chenarului care se înfășoară în jurul imaginii. Are sens doar dacă atributul de frontieră este mai mare decât 0.

Exemplul 3.3. Ieșirea unei imagini în html cu un cadru colorat

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Rezultatul poate fi văzut chiar mai sus.

Notă

Atributele border și bordercolor pot fi setate în stilurile CSS ale img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Property height="NUMBER" - setează înălțimea imaginii: fie în pixeli, fie ca procent. De exemplu, dacă o imagine are o dimensiune de 400x200 și specificăm o înălțime de 150 de pixeli, atunci este comprimată la 300x150 (cu 25% mai mică), adică. proporţional.

6. Property width="NUMBER" - setează lățimea imaginii: fie în pixeli, fie ca procent. De exemplu, dacă o imagine are o dimensiune de 1000x800 și lățimea este specificată ca 1200 pixeli, atunci este extinsă automat cu 20% la 1200x960.

7. Proprietatea hspace="NUMBER" - setează indentarea orizontală a imaginii în pixeli din alte obiecte html.

8. Proprietatea vspace="NUMBER" - setează spațiul vertical al imaginii în pixeli din alte obiecte html.

Notă

În loc de hspace și vspace, vă sfătuiesc să utilizați marja veche și dovedită (puteți citi mai multe despre aceasta în lecția despre descrierea stilurilor html). Permiteți-mi să vă reamintesc pe scurt:

• margin-top: X px; (X - liniuță de sus)
• margine-jos: Y px; (Y - liniuță de jos)
• margine-stânga: L px; (L - liniuță din stânga)
• margine-dreapta: R px; (R - liniuță din dreapta)

Setați indentările de la obiecte în pixeli. Sunt permise valori negative. În mod implicit, fie moștenește valoarea strămoșului, fie are valoarea 0.

De exemplu. Marginea din stânga este de 50 de pixeli, iar marginea de sus este de 10 pixeli.

... margine-sus: 10px; margine-stânga: 50px"src=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

În acest exemplu, indentarea din partea de sus a fost de 10 pixeli, în partea stângă de 50 de pixeli.

9. Proprietate class="class_name" - puteți atribui o clasă unei imagini pentru a seta stilul pentru toate imaginile acestei clase.

4. Cum să faci din imagine un link

Această întrebare apare în rândul tinerilor webmasteri. De fapt, este foarte ușor. Pentru a face acest lucru, trebuie doar să încadrați eticheta etichetă (link).

De exemplu

... Adresă_imagine"> ...

5. Cum să rotunjiți colțurile unei imagini

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-radius: 30px">

Dragă cititor, acum ați aflat mult mai multe despre eticheta html img. Acum vă sfătuiesc să treceți la următoarea lecție.

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 arăta astfel:

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

Imaginile HTML au câștigat mult timp o popularitate binemeritată în rândul creatorilor de site-uri web. Ele sunt folosite în mod activ în designul site-urilor web, pentru a suplimenta vizual informațiile text, pentru a crea link-uri și Dumnezeu știe ce altceva.

O componentă importantă a oricărei imagini este dimensiunea acesteia (volum, greutate) în kiloocteți, deoarece cu cât este mai mare, cu atât pagina HTML va dura mai mult pentru încărcare. Prin urmare, există trei formate cele mai comune pe Internet care conțin raportul optim între dimensiunea și calitatea imaginii - acestea sunt GIF, JPG (JPEG) și PNG.

Etichetă sau cum se inserează o imagine în HTML?

Pentru a insera o imagine într-o pagină HTML, utilizați eticheta . Acesta este cel mai comun inline (inline, nivel de linie) element, adică nu creează întreruperi de linie înainte și după sine până la început. Dar nu poate avea conținut, de vreme ce nu are o etichetă de închidere și este gol.

La etichetă sunt două atributul necesar este src, care specifică calea (URL) către imagine și alt, care afișează text alternativ atunci când browserul este dezactivat pentru afișarea imaginilor. Dacă este puțin probabil să uitați să specificați src, deoarece fără acesta imaginea pur și simplu nu se va încărca, atunci chiar și webmasterii experimentați uită foarte des de alt.

Atributul src folosește exact aceleași valori de adresă ca și atributul href al etichetei , duc doar la imagini. Ei bine, desigur, puteți specifica atât adrese absolute, cât și relative.

Exemplu de inserare a imaginilor într-o pagină HTML

Acestea sunt păsări diferite.

Rezultat în browser

Redimensionarea imaginilor în HTML

În mod implicit, toate browserele afișează imagini la dimensiunea lor naturală. Dar folosind atributele de lățime și înălțime ale etichetei le puteți modifica înălțimea și lățimea. Valorile sunt indicate în cifre, care indică dimensiunile în pixeli (nu este nevoie să puneți literele px la sfârșitul numerelor) sau procente, caz în care trebuie să puneți semnul % la sfârșit.

Exemplu de redimensionare a imaginilor

Rezultat în browser

Nu ar trebui să abuzați de redimensionare, deoarece atunci când reduceți vizual imaginile, volumul lor în kiloocteți nu scade și, în consecință, au nevoie de același timp pentru a se încărca. Și când măriți imaginile, pot apărea neclarități și alte distorsiuni.

Cu toate acestea, cel mai bine este să specificați întotdeauna dimensiunile imaginilor dvs., chiar dacă nu le schimbați. În acest caz, browserele nu vor aștepta să se încarce complet, ci le vor aloca spațiu și vor continua să încarce pagina în continuare, iar imaginile vor fi încărcate la sfârșit. Acest lucru permite utilizatorilor să nu aștepte obositoare și să înceapă să folosească site-ul mai repede. În plus, dacă browserele cunosc imediat dimensiunile, atunci când încarcă pagina nu vor trebui să se adapteze la imaginile care apar pe parcurs, ceea ce va ajuta la evitarea sărituri și zvâcniri inutile ale elementelor HTML care le înconjoară.

Alinierea imaginilor

În versiunile mai vechi de HTML, pentru a alinia imaginile la etichetă a existat un atribut de aliniere deja cunoscut de dvs., dar nu este prezent în HTML modern, așa că vom folosi și stilul care vă este deja familiar și, sper, a devenit nativ.

style="float:left" - împinge imaginea în partea stângă a casetei în care se află imaginea, cu tot textul curgând în jurul ei spre dreapta.

style="float:right" - apasă imaginea în partea dreaptă a blocului, iar textul curge în jurul acesteia spre stânga.

Un exemplu de aliniere a unei imagini la stânga.

Primul paragraf.

Text înainte de imagine.

După poză.

Ultimul paragraf.

Rezultat în browser

style="clear:left" - întrerupe fluxul de imagini aliniate la stânga.

style="clear:right" - întrerupe fluxul de imagini aliniate la dreapta.

style="clear:both" - întrerupe fluxul de imagini aliniate pe ambele părți.

Exemplu de întrerupere a fluxului de imagini

Primul paragraf.

Text înainte de imagine.

După poză.

Ultimul paragraf.

Rezultat în browser

Text indicativ pentru imagini în HTML

La fel ca multe alte etichete HTML, Există un atribut titlu care afișează un sfat explicativ de text atunci când treceți mouse-ul peste imagine.

title="Orice text."!}

Imagini de fundal

Imaginile ca fundal sunt folosite în HTML nu mai puțin decât pur și simplu schimbarea culorii de fundal, pe care am tratat-o ​​deja. Și acest lucru este destul de logic, deoarece cu ajutorul imaginilor puteți crea un fundal neuniform și mai colorat.

De obicei, imaginile care sunt mici ca dimensiune și volum (în kiloocteți) sunt folosite ca o probă pentru fundal și totul pentru că browserele procesează imaginile de fundal diferit de imaginile obișnuite. Ei iau această imagine mică și o acoperă, precum cărămizi, cu o întreagă secțiune a unei pagini HTML sau cu toată ea.

În versiunile anterioare de HTML, unele etichete aveau un atribut special de fundal care le permitea să aibă o imagine de fundal. Dar adevărul este că doar unele, și nu toate, de exemplu, eticheta bloc