Etiqueta HTML img s'utilitza per mostrar imatges a la pàgina web. L'etiqueta HTML img és una etiqueta buida que només conté atributs, les etiquetes de tancament no s'utilitzen a l'element d'imatge HTML.

Vegem un exemple d'imatge HTML.

fmovies

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Sortida:

Atributs de l'etiqueta HTML img

Els src i alt són atributs importants de l'etiqueta HTML img. Tots els atributs de l'etiqueta d'imatge HTML es donen a continuació.

1) src

És un atribut necessari que descriu l'origen o el camí de la imatge. Indica al navegador on cercar la imatge al servidor.

La ubicació de la imatge pot estar al mateix directori o en un altre servidor.

2) tot

L'atribut alt defineix un text alternatiu per a la imatge, si no es pot mostrar. El valor de l'atribut alt descriu la imatge amb paraules. L'atribut alt es considera bo per als potencials SEO.

3) amplada

És un atribut opcional que s'utilitza per especificar l'amplada per mostrar la imatge. Ara no es recomana. Hauríeu d'aplicar CSS en lloc de l'atribut width.

4) alçada

H3 l'alçada de la imatge. L'atribut d'alçada HTML també admet elements iframe, imatge i objectes. Ara no es recomana. Hauríeu d'aplicar CSS en lloc de l'atribut d'alçada.

Ús de l'atribut d'alçada i amplada amb l'etiqueta img

Heu après com inserir una imatge a la vostra pàgina web, ara si volem donar una mica d'alçada i amplada per mostrar la imatge segons el nostre requisit, podem configurar-la amb els atributs d'alçada i amplada de la imatge.

Exemple:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Sortida:

Nota: sempre intenteu inserir la imatge amb alçada i amplada, en cas contrari pot parpellejar mentre es mostra a la pàgina web.

Ús de l'atribut alt

Podem utilitzar l'atribut alt amb etiqueta. Mostrarà un text alternatiu per si la imatge no es pot mostrar al navegador. El següent és l'exemple per a l'atribut alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Sortida:

Com obtenir una imatge d'un altre directori/carpeta?

Per inserir una imatge a la teva web, aquesta ha d'estar present a la teva mateixa carpeta on has posat el fitxer HTML. Però si en algun cas la imatge està disponible en un altre directori, podeu accedir a la imatge així:

A la declaració anterior hem posat la imatge al disc local E------>carpeta d'imatges------>img/html-tutorial/39/html-image-2.webp.

Nota: si l'URL src és incorrecte o mal escrit, no mostrarà la vostra imatge a la pàgina web, així que proveu de posar l'URL correcte.

Ús etiqueta com a enllaç

També podem enllaçar una imatge amb una altra pàgina o podem utilitzar una imatge com a enllaç. Per fer-ho, posa etiqueta dins del etiqueta.

normalització rdbms

Exemple:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Sortida:

Navegadors compatibles

Element	Chrome	IE	Firefox	Òpera	Safari
	Sí	Sí	Sí	Sí	Sí