Uitați-vă la orice pagină web online astăzi și veți observa că aceștia împărtășesc anumite lucruri în comun. Una dintre aceste trăsături comune este imaginile. Imaginile corecte adaugă atât de mult la prezentarea unui site web. Unele dintre aceste imagini, ca și logo-ul unei companii, ajută la marcarea site-ului și conectarea acestei entități digitale la compania dvs. fizică.
Pentru a adăuga o imagine, o pictogramă sau o grafică în pagina web, trebuie să utilizați eticheta în codul HTML al unei pagini. Plasați eticheta IMG în HTML exact în locul în care doriți să fie afișată grafica. Browserul web care redă codul paginii va înlocui această etichetă cu graficul corespunzător după vizualizarea paginii. Revenind la exemplul firmei noastre, iată cum ați putea adăuga acea imagine pe site-ul dvs.:
Imagine atribute
Privind la codul HTML de mai sus, veți vedea că elementul include două atribute. Fiecare dintre ele este necesară pentru imagine.
Primul atribut este "src". Acesta este literalmente fișierul imagine pe care doriți să îl afișați pe pagină. În exemplul nostru folosim un fișier numit "logo.png". Aceasta este grafica pe care browserul web o va afișa când a redat site-ul.
De asemenea, veți observa că înaintea acestui nume de fișier am adăugat câteva informații suplimentare, "/ images /". Aceasta este calea de fișier. Slash-ul inițial indică serverului să examineze rădăcina directorului. Apoi va căuta un dosar numit "imagini" și, în final, fișierul numit "logo.png". Folosirea unui dosar numit "imagini" pentru a stoca toate graficele site-ului este o practică destul de frecventă, dar calea dvs. de fișier ar fi schimbată în ceea ce este relevant pentru site-ul dvs.
Al doilea atribut necesar este textul "alt". Acesta este "textul alternativ" care este afișat dacă imaginea nu se încarcă din anumite motive. Acest text, care în exemplul nostru citește "Logo-ul companiei", va fi afișat dacă imaginea nu se încarcă. De ce s-ar întâmpla asta? O varietate de motive:
- Căsuța incorectă a fișierului
- Numele de fișier incorect sau greșeala
- Eroare de transmisie
- Fișierul a fost șters de pe server
Acestea sunt doar câteva posibilități pentru care imaginea specificată poate să lipsească. În aceste cazuri, în locul nostru ar apărea alt text.
Alt text este, de asemenea, folosit de software-ul de citire a ecranului pentru a "citi" imaginea unui vizitator care este afectat de vedere. Deoarece nu pot vedea imaginea ca și noi, acest text le permite să știe ce este imaginea în sine. Acesta este motivul pentru care alt text este necesar și de ce ar trebui să precizeze clar ce este imaginea!
O neînțelegere comună a altui text este că este destinată scopurilor motorului de căutare. Nu este adevarat. În timp ce Google și alte motoare de căutare nu citesc acest text pentru a determina ce este imaginea (nu uitați, nu pot "vedea" imaginea dvs.), nu ar trebui să scrieți alt text pentru a face apel numai la motoarele de căutare. Autor text clar alt care este destinat oamenilor. Dacă puteți adăuga și câteva cuvinte cheie în eticheta care apelează la motoarele de căutare, este bine, dar întotdeauna asigurați-vă că textul alt serveste scopul său principal, afirmând ce este imaginea pentru oricine nu poate vedea fișierul grafic.
Alte atribute
Eticheta IMG are, de asemenea, două alte atribute pe care le puteți vedea atunci când plasați un grafic pe pagina dvs. web - lățimea și înălțimea. De exemplu, dacă utilizați un editor WYSIWYG precum Dreamweaver, acesta adaugă automat aceste informații pentru dvs. Iată un exemplu:
Atributele WIDTH și HEIGHT indică browserului dimensiunea imaginii. Apoi, browserul știe exact cât spațiu trebuie să aloce în structura și poate trece la următorul element din pagină în timpul descărcării imaginii. Problema cu utilizarea acestor informații în codul HTML este că este posibil să nu doriți ca imaginea să fie afișată la acea dimensiune exactă. De exemplu, dacă aveți un site web receptiv al cărui dimensionare se modifică pe baza unui ecran de vizitatori și a dimensiunii dispozitivului, veți dori și imaginile dvs. să fie flexibile. Dacă precizați în HTML ce este dimensiunea fixă, veți găsi foarte greu să suprascrieți cu interogări media CSS receptive. Din acest motiv, și pentru a menține o separare a stilului (CSS) și a structurii (HTML), este recomandat să nu adăugați atribute de lățime și înălțime codului dvs. HTML.
O notă: Dacă lăsați oprit aceste instrucțiuni de dimensionare și nu specificați o dimensiune în CSS, browserul va arăta oricum imaginea la dimensiunea ei implicită.
Editat de Jeremy Girard