Uită-te la oricare pagină web online astăzi și veți observa că împărtășesc anumite lucruri în comun. Una dintre aceste trăsături comune este imaginea. Imaginile potrivite adaugă atât de mult la prezentarea unui site web. Unele dintre aceste imagini, cum ar fi sigla unei companii, ajută la marca site-ului și conectează entitatea digitală la compania dvs. fizică.
Cum se adaugă o imagine într-o pagină web folosind HTML
Pentru a adăuga o imagine, o pictogramă sau o grafică la pagina dvs. web, trebuie să utilizați eticheta în codul HTML al unei pagini. Tu plasezi.
IMGeticheta în. HTML exact unde doriți să se afișeze grafica. Browserul web care redă codul paginii va înlocui această etichetă cu graficul corespunzător odată ce pagina este vizualizată. Revenind la exemplul logo-ului companiei noastre, iată cum puteți adăuga acea imagine pe site-ul dvs.:
Atributul SRC
Privind 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ă fie afișat pe pagină. În exemplul nostru folosim un fișier numit „logo.png”. Acesta este graficul pe care browserul web l-ar afișa atunci când a redat site-ul.
De asemenea, veți observa că, înainte de acest nume de fișier, am adăugat câteva informații suplimentare, „/ images /”. Aceasta este calea fișierului. Slash-ul inițial înainte îi spune serverului să se uite în rădăcina directorului. Apoi va căuta un folder numit „imagini” și, în final, fișierul numit „logo.png”. Folosirea unui dosar numit „imagini” pentru a stoca toate elementele grafice ale unui site este o practică destul de obișnuită, dar calea fișierului dvs. ar fi schimbată în ceea ce este relevant pentru site-ul dvs.
Atributul Alt
Al doilea atribut necesar este textul „alt”. Acesta este „textul alternativ” care se afișează 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:
- Calea fișierului este incorectă
- Numele fișierului incorect sau ortografia greșită
- Eroare de transmisie
- Fișierul a fost șters de pe server
Acestea sunt doar câteva posibilități pentru motivul pentru care imaginea specificată poate lipsi. În aceste cazuri, textul nostru alternativ va fi afișat în schimb.
Pentru ce se utilizează textul alternativ?
Textul alternativ este, de asemenea, utilizat de software-ul de citire a ecranului pentru a „citi” imaginea unui vizitator cu deficiențe de vedere. Deoarece nu pot vedea imaginea ca noi, acest text le permite să știe ce este imaginea în sine. Acesta este motivul pentru care este necesar text alternativ și de ce ar trebui să precizeze clar care este imaginea!
O neînțelegere obișnuită a textului alternativ este că acesta este destinat scopurilor motorului de căutare. Nu este adevarat. În timp ce Google și alte motoare de căutare citesc acest text pentru a determina care este imaginea (amintiți-vă, nu vă pot „vedea” nici imaginea), nu ar trebui să scrieți text alternativ pentru a face apel numai la căutare motoare. Autorul text alternativ clar, destinat oamenilor. Dacă puteți adăuga și câteva cuvinte cheie în etichetă care să atragă motoarele de căutare, este în regulă, dar asigurați-vă întotdeauna textul alternativ își îndeplinește scopul principal, afirmând care este imaginea pentru oricine nu poate vedea grafica fişier.
Alte atribute ale imaginii
.
IMG.
eticheta are, de asemenea, alte două atribute pe care le puteți vedea în utilizare atunci când puneți o imagine 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:
.
LĂŢIME.
și.
ÎNĂLŢIME.
atributele indică browserului dimensiunea imaginii. Apoi, browserul știe exact cât spațiu din aspect trebuie alocat și poate trece la următorul element de pe pagină în timp ce imaginea se descarcă. Problema utilizării acestor informații în HTML este că este posibil să nu doriți întotdeauna ca imaginea dvs. să fie afișată la acea dimensiune exactă. De exemplu, dacă aveți un.
site web receptiv
ale cărui dimensiuni se modifică pe baza ecranului vizitatorilor și a dimensiunii dispozitivului, veți dori, de asemenea, ca imaginile dvs. să fie flexibile. Dacă specificați în HTML care este dimensiunea fixă, veți fi foarte greu să înlocuiți cu responsive.
Interogări media CSS
. Din acest motiv și pentru a menține o separare de stil (CSS) și structură (HTML), este recomandat să NU adăugați atribute de lățime și înălțime la codul dvs. HTML.
O notă: dacă lăsați aceste instrucțiuni de dimensionare dezactivate și nu specificați o dimensiune în CSS, browserul va afișa oricum imaginea la dimensiunea sa implicită.
Editat de Jeremy Girard