HTML Eticheta IMG guvernează inserarea de imagini și alte obiecte grafice statice într-o pagină web. Această etichetă comună acceptă mai multe atribute obligatorii și opționale care adaugă bogăție capacității dvs. de a proiecta un site web captivant, axat pe imagine.
Un exemplu de etichetă HTML IMG complet formată arată astfel:
Atribute obligatorii ale etichetei IMG
src = "/ cale / către / imagine.jpg"
Singurul atribut de care aveți nevoie pentru a afișa o imagine pe o pagină web este src atribut. Acest atribut identifică numele și locația fișierului imagine care trebuie afișat.
alt = "Descrierea imaginii"
Pentru a scrie XHTML și HTML4 valide, fișierul alt este de asemenea necesar un atribut. Acest atribut este utilizat pentru a oferi browserelor non-vizuale text care descrie imaginea. Browserele afișează textul alternativ în moduri diferite. Unii îl afișează ca o fereastră pop-up atunci când puneți mouse-ul peste imagine, alții îl afișează în proprietăți când faceți clic dreapta pe imagine, iar alții nu o afișează deloc.
Folosește text alternativ pentru a oferi detalii suplimentare despre imagine care nu sunt relevante sau importante pentru textul paginii web. Nu uitați însă că în cititoarele de ecran și în alte browsere numai text, textul va fi citit în linie cu restul textului de pe pagină. Pentru a evita confuzia, utilizați text alternativ descriptiv care spune (de exemplu) „Despre web design și HTML” în loc de „logo”.
alt textul este, de asemenea, esențial pentru SEO (Search Engine Optimization). Roboții folosiți de motoarele de căutare, precum Google, pentru a explora conținutul de pe site-uri, nu pot „vedea” imagini. Se bazează pe alt text pentru a determina ce este pe pagină.
În HTML5, alt atributul nu este întotdeauna necesar, deoarece puteți utiliza un legendă pentru a adăuga mai multe descrieri. De asemenea, puteți utiliza acest atribut pentru a indica un ID care conține o descriere completă:
aria-describedby = "Descrierea imaginii"
Textul alternativ nu este, de asemenea, necesar dacă imaginea este pur decorativă, cum ar fi o imagine în partea de sus a unei pagini web sau pictograme. Dar dacă nu sunteți sigur, includeți text alternativ pentru orice eventualitate.
Atribute de dimensionare
width = "500"și.
înălțime = "500"În funcție de design, utilizați. înălţime și. lăţime
În general, veți dori ca dimensiunea imaginii să fie setată în CSS. Cel mai adesea, acesta va fi rezultatul dimensiunilor containerului părinte al unei imagini. Această abordare permite cea mai mare flexibilitate atunci când se adaptează la diferite dimensiuni de ecran. Cu toate acestea, există încă cazuri în care poate doriți să specificați dimensiunile imaginii ca atribute HTML.
Alte atribute IMG utile
title = "Numele descriptiv al imaginii"Atributul este un atribut global care poate fi aplicat oricărui. Element HTML. Mai mult,. titlu
Majoritatea browserelor acceptă titlu atribut, dar o fac în moduri diferite. Unii afișează textul ca o fereastră pop-up, în timp ce alții îl afișează în ecranele de informații atunci când utilizatorul face clic dreapta pe imagine. Puteți utiliza titlu atributul pentru a scrie informații suplimentare despre imagine, dar nu conta pe aceste informații fie ascunse sau vizibil. Cu siguranță nu ar trebui să utilizați acest lucru pentru a ascunde cuvintele cheie pentru motoarele de căutare. Această practică este acum penalizată de majoritatea motoarelor de căutare.
usemap = ""și.
ismap = ""Aceste două atribute setează partea client () și partea server (ISMAP) hărți cu imagini
longdesc = "O descriere mai detaliată a imaginii dvs.". longdesc
Atribute IMG învechite și învechite
Mai multe atribute sunt acum învechite în HTML5 sau învechite în HTML4. Pentru cel mai bun HTML, ar trebui să găsiți alte soluții în loc să utilizați aceste atribute.
border = "3"
align = "left"Acest atribut vă permite să plasați o imagine în interiorul textului și să faceți ca textul să curgă în jurul acestuia. Puteți alinia o imagine la dreapta sau la stânga. A fost depreciat în favoarea. float proprietate CSS
hspcace = "10"și.
vspace = "10". hspace și. vspace atributele adaugă spațiu alb orizontal ( hspace) și vertical ( vspace
lowsrc = "/ cale / către / lowres.jpg". lowsrc atributul oferă o imagine alternativă atunci când sursa dvs. de imagine este atât de mare încât se descarcă extrem de lent. De exemplu, este posibil să aveți o imagine de 500 KB pe care doriți să o afișați pe pagina dvs. web, dar 500 KB ar dura mult timp pentru descărcare. Deci, creați o copie mult mai mică a imaginii, poate în alb și negru sau pur și simplu extrem de optimizată, și o puneți în. lowsrc
lowsrc atributul a fost adăugat la Netscape Navigator 2.0 la etichetă. A făcut parte din nivelul DOM 1, dar a fost apoi eliminat din nivelul DOM 2. Suportul pentru browser a fost incomplet pentru acest atribut, deși multe site-uri susțin că este acceptat de toate browserele moderne. Nu este depreciat în HTML4 sau învechit în HTML5 deoarece nu a fost niciodată o parte oficială a niciunei specificații.
Evitați să utilizați acest atribut și, în schimb, optimizați imaginile, astfel încât acestea să se încarce rapid. Viteza de încărcare a paginilor este o parte critică a unui bun design web, iar imaginile mari încetinesc enorm paginile - chiar dacă utilizați lowsrc atribut.