Tag img HTML viene utilizzato per visualizzare l'immagine sulla pagina web. Il tag HTML img è un tag vuoto che contiene solo attributi, i tag di chiusura non vengono utilizzati nell'elemento immagine HTML.

Vediamo un esempio di immagine HTML.

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

Produzione:

Attributi del tag HTML img

src e alt sono attributi importanti del tag HTML img. Tutti gli attributi del tag immagine HTML sono riportati di seguito.

modello di progettazione di fabbrica

1) src

È un attributo necessario che descrive la fonte o il percorso dell'immagine. Indica al browser dove cercare l'immagine sul server.

La posizione dell'immagine potrebbe trovarsi nella stessa directory o in un altro server.

2) tutto

L'attributo alt definisce un testo alternativo per l'immagine, se non può essere visualizzato. Il valore dell'attributo alt descrive l'immagine in parole. L'attributo alt è considerato utile per i potenziali SEO.

3) larghezza

È un attributo facoltativo utilizzato per specificare la larghezza per visualizzare l'immagine. Non è raccomandato ora. Dovresti applicare CSS al posto dell'attributo larghezza.

4) altezza

È pari a 3 l'altezza dell'immagine. L'attributo altezza HTML supporta anche elementi iframe, immagine e oggetto. Non è raccomandato ora. Dovresti applicare CSS al posto dell'attributo altezza.

Utilizzo degli attributi altezza e larghezza con il tag img

Hai imparato come inserire un'immagine nella tua pagina web, ora se vogliamo dare un'altezza e una larghezza per visualizzare l'immagine in base alle nostre esigenze, allora possiamo impostarla con gli attributi di altezza e larghezza dell'immagine.

Esempio:

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

Produzione:

Nota: provare sempre a inserire l'immagine con altezza e larghezza, altrimenti potrebbe sfarfallare durante la visualizzazione sulla pagina web.

Utilizzo dell'attributo alt

Possiamo usare l'attributo alt con etichetta. Verrà visualizzato un testo alternativo nel caso in cui l'immagine non possa essere visualizzata sul browser. Di seguito è riportato l'esempio per l'attributo alt:

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

Produzione:

Come ottenere un'immagine da un'altra directory/cartella?

Per inserire un'immagine nel tuo sito web, quell'immagine deve essere presente nella stessa cartella in cui hai inserito il file HTML. Ma se in alcuni casi l'immagine è disponibile in qualche altra directory, puoi accedere all'immagine in questo modo:

Nella dichiarazione precedente abbiamo inserito l'immagine nel disco locale E------>cartella immagini------>img/html-tutorial/39/html-image-2.webp.

Nota: se l'URL src sarà errato o scritto in modo errato, la tua immagine non verrà visualizzata sulla pagina Web, quindi prova a inserire l'URL corretto.

Utilizzo tag come collegamento

Possiamo anche collegare un'immagine ad un'altra pagina oppure possiamo utilizzare un'immagine come collegamento. Per fare questo, metti tag all'interno del etichetta.

elenca come array

Esempio:

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

Produzione:

Browser di supporto

Elemento	Cromo	CIOÈ	Firefox	musica lirica	Safari
	SÌ	SÌ	SÌ	SÌ	SÌ