Ce este Etichetele de imagine HTML?
Următorul articol va oferi o prezentare a etichetelor de imagine HTML. Îi cunosc clișeul, dar permiteți-mi să încep spunând că o imagine valorează o mie de cuvinte. În cazul paginilor web, este în special adevărat. O imagine poate vinde vizitatorul cu ideea ta, poate impresiona pe cineva să-ți cumpere produsul și poate ajuta o pagină web să arate mult mai bine. În acest ghid, vom arunca o privire asupra modului în care putem adăuga IMG la paginile web și le vom alinia în mod corespunzător, alături de adăugarea de link-uri la ele.
Adăugarea de imagini la paginile web
Puteți adăuga IMG la o pagină HTML folosind butonul tag în documentul HTML, aici este sintaxa:
Aici, IMG îi spune browserului că eticheta este despre adăugarea unui IMG la document, iar „src =” specifică de unde să descarce imaginea.
Exemplu de pagină cu o imagine
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Iată rezultatul Codului:
Un fapt interesant în legătură cu aceste pagini HTML este că atunci când utilizați Eticheta IMG, imaginea nu este introdusă pe pagina web menționată, ci creează un spațiu de reținere în care imaginea este plasată odată descărcată.
Suport pentru browser și compatibilitate cu atribute
După cum vă așteptați, toate browserele moderne acceptă imagini și folosesc etichete IMG. Uneori, browserele mobile vor redimensiona imaginea pentru a o potrivi pe ecran dacă imaginea nu este setată ca receptivă.
Când vine vorba de compatibilitatea atributelor cu HTML 4.01 și HTML5 mai noi, majoritatea etichetelor vor funcționa, cu excepția alinierii, a chenarului, a hspace-ului și a spațiului, care pur și simplu nu sunt acceptate în acesta din urmă.
Imaginile ca link:
Vor fi momente în care doriți ca o imagine să funcționeze ca un link către o altă pagină. Puteți finaliza adăugând eticheta IMG în interiorul etichetei.
Setarea unei imagini ca fundal al unei pagini Web
Puteți atribui o imagine ca imagine de fundal a unei pagini web folosind proprietatea CSS de fundal imagine în elementul Corp al paginii.
Imagine de fundal
Setarea unei imagini pentru a pluti în browser
Putem folosi proprietatea CSS „float” pentru a seta o imagine să plutească în orice parte a ferestrei browserului. Haideți să aruncăm o privire la un exemplu care vă va ajuta să înțelegeți.
Aici, imaginea mașinii va pluti în partea dreaptă a textului.
Aici, imaginea mașinii va pluti în partea stângă a textului.
Atributele etichetei imaginii
Următoarele sunt atributele unei etichete de imagine.
1) Align
Valori posibile: sus, jos, mijloc, stânga sau dreapta.
Atributul alight este utilizat pentru a specifica alinierea unei imagini pe pagina web.
2) Alt
Tipul valorii: text
Alt este utilizat pentru a specifica textul alternativ al unei imagini a unei pagini web. În cazurile în care afișarea unui IMG nu este posibilă, browserul afișează acest text utilizatorului. Motoarele de căutare, cum ar fi Google și Bing, folosesc acest text alt pentru a afișa rezultate în Căutarea de imagini.
3) Border
Tip de valoare: pixeli
Este utilizat pentru a crea o bordură de grosime definită de utilizator în jurul imaginii. Nu funcționează în HTML5.
4) Originea încrucișată
Tipul valorii: Credențe de utilizare anonime
Acest atribut este utilizat atunci când dorim să specificăm modul în care ar trebui tratate fotografiile de origine încrucișată. Acest lucru este utilizat mai ales în cazurile în care sunt utilizate elemente pânză ale aplicațiilor web JavaScript.
5) Înălțimea
Tip de valoare: procente sau pixeli
Evident, aceasta este folosită pentru a indica înălțimea imaginii în pagina web HTML.
6) hspace
Tip de valoare: pixeli
Nerecomandat în HTML5, atributul hspace este utilizat pentru a specifica în pixeli cât spațiu alb trebuia să fie adăugat la stânga și la dreapta imaginii introduse.
7) ismap
Tipul valorii: URL-ul unei pagini
ismap pe care l-am folosit pentru a defini imaginea menționată ca o hartă a imaginii din partea serverului. Când utilizatorul face clic (sau atinge) în interiorul imaginii, browserele trimit coordonatele clicului (sau atinge) către serverul web ca URL.
8) longdesc
Tipul valorii: URL
Longdesc este utilizat pentru a oferi o descriere detaliată a unei imagini folosind o adresă URL. URL-ul utilizat în atribut este utilizat ca descriere a imaginii.
9) src
Tipul valorii: URL
src înseamnă sursă și este utilizat pentru a specifica adresa de la care browserul va prelua imaginea, această adresă URL poate fi aplicată unei imagini din interiorul unui director din același server și poate stoca și o imagine într-un server terț cu un alt nume de domeniu.
10) usemap
Tip de valoare: #mapname
Atributul usemap este utilizat pentru a defini imaginea pentru o hartă a imaginii din partea clientului. Un usemap este întotdeauna utilizat cu etichete HTML de hartă și zonă.
11) vspace
Tip de valoare: pixeli
Nu este acceptat în HTML5, atributul Vspace este utilizat pentru a seta numărul de pixeli care vor fi folosiți ca spațiu alb în partea de sus și de jos a imaginii de pe pagina web.
12) Lățime
Tip de valoare: pixeli
La fel cum sugerează și numele său, atributul lățime este folosit pentru a specifica lățimea unei imagini din interiorul paginii web HTML.
Concluzie - Etichete imagine HTML
Acum că am aruncat o privire asupra modului în care sunt adăugate imaginile în paginile HTML și cum să-și stabilească atributele, putem crea pagini web cu aspect atractiv într-un proiect web.
Pe lângă faptul că adăugați fler vizual la o pagină web, imaginile sunt valoroase, deoarece ajută și la optimizarea motorului de căutare. Adăugarea etichetelor și descrierilor alt corespunzătoare la imagini ajută motoarele de căutare să înțeleagă mai bine conținutul unei pagini web și să îmbunătățească clasamentul unei pagini web în multe cazuri.
Articole recomandate
Acesta este un ghid pentru etichetele de imagine HTML. Aici vom discuta despre atributele tag-ului de imagine împreună cu suportul browserului și compatibilitatea cu atributele. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- Un ghid simplu pentru comenzile HTML
- Introducere la ce este XHTML?
- Tutoriale despre atributele HTML
- Aplicații și utilizări principale ale HTML
- Diferite stiluri de listă în HTML
- Rame HTML
- Blocuri HTML