html attributi tag img

Imparare l’HTML – Gli attributi delle immagini (img)

In questo nuovo articolo sul linguaggio HTML esamineremo gli attributi del tag <img>, per foto ed immagini.

La presenza di immagini in una pagina html aiuta gli utenti a seguire il contenuto, rende migliore l’estetica della pagina stessa e aumenterà il punteggio SEO con i motori di ricerca.

L’inserimento di una foto o un immagine non finisce però al tag <img> , ma dovranno anche essere aggiunti degli attributi.

Attributi

Gli attributi disponibili sono numerosi ed è bene ricordare almeno i più comuni:

Risorsa

L’attributo più importante src=”” serve a richiamare il file sorgente, cioè l’immagine da caricare. Tra le “virgolette” va inserito il percorso completo dell’immagine ed il formato.

Se il file è collocato nella stessa cartella della pagina html basterà digitare il nome dell’immagine con il formato giusto, altrimenti se il file si trova in una sottocartella (o in una cartella differente), dovremo scrivere tutto il percorso.

<img src="/foto.png" >    <!-- se l'immagine e la pagina sono nella stessa cartella -->


<img src="/desktop/immagini/foto.png" >  <!-- se l'immagine è collocata in una sottocartella -->

N.B. il linguaggio HTML è case sensitive, quindi digitare per esempio immagine.jpg è differente da immagine.JPG

Testo alternativo

<img src="#"  alt="testo alternativo">    <!-- alt è l'attributo del testo alternativo -->

Avevamo già visto questo attributo nell’articolo precedente su “i tag HTML da conoscere“, l’attributo alt serve a definire il testo alternativo a sostituzione dell’immagine, nel caso il browser non riesca a caricarla. Come nell’esempio:

testo alternativo immagine

Nel caso non venga caricata l’immagine il testo alternativo servirà a descrivere il contenuto dell’immagine stessa.

Questo attributo è molto importante e la sua assenza porterà ad una penalizzazione SEO.

Height & Width

Questi due attributi definiscono la dimensione dell’immagine caricata, non sono obbligatori, ma sono utili nel caso volessimo ridurre o aumentare la dimensione dell’immagine rispetto a quella di default.

Un esempio di codice è questo:

<img src="immagine.jpg" height="60" width="30">

Si possono costringere le dimensioni anche dichiarando uno solo dei due attributi, senza deformare l’immagine, e mantenere cosi le proporzioni originali.

<!-- ipotizziamo un immagine 100px per 100px -->

<img src="immagine100x100.jpg" height="60">  

<!-- dichiarando l'altezza di 60px, anche la larghezza verrà adattata a 60px; -->

Per maggiori dettagli riguardo gli attributi del tag <img> consiglio di visitare il sito w3school, che contiene una lista di attributi e tag più aggiornata.

Continua con: Creare tabelle

Leggi anche: I tag HTML da conoscere

Articoli Recenti

Condividi ora!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA