L'elemento HTML img viene utilizzato per inserire un'immagine all'interno di una pagina web.
Di seguito sono elencati gli elementi, gli attributi e le caratteristiche dell'elemento
img:
img è un elemento autonomo e non richiede un tag di chiusura.
src: questo attributo è obbligatorio e specifica l'URL dell'immagine che si
desidera visualizzare sulla pagina.
alt: questo attributo specifica il testo alternativo che viene visualizzato se
l'immagine non può essere caricata o se il cursore viene posizionato sopra l'immagine.
Questo attributo è anche importante per l'accessibilità della pagina, in quanto fornisce una
descrizione testuale dell'immagine per i lettori di schermo.
width: questo attributo specifica la larghezza dell'immagine in pixel.
height: questo attributo specifica l'altezza dell'immagine in pixel.
title: questo attributo specifica il testo che viene visualizzato quando il
cursore viene posizionato sopra l'immagine.
loading: questo attributo specifica come l'immagine dovrebbe essere caricata.
Il valore predefinito è "auto", ma è possibile impostare il valore su "lazy" per ritardare
il caricamento dell'immagine fino a quando non viene visualizzata sulla pagina, migliorando
così le prestazioni della pagina.
L'elemento HTML a viene utilizzato per creare un collegamento ipertestuale (link) tra una
pagina
web e un'altra pagina web o una specifica posizione all'interno della stessa pagina. Di seguito sono
elencati gli elementi, gli attributi e le caratteristiche dell'elemento a:
a richiede un tag di chiusura.
href: questo attributo è obbligatorio e specifica l'URL della pagina web di
destinazione o la posizione all'interno della stessa pagina (anchor).
alt: questo attributo specifica il testo alternativo che viene visualizzato se
l'immagine non può essere caricata o se il cursore viene posizionato sopra l'immagine.
Questo attributo è anche importante per l'accessibilità della pagina, in quanto fornisce una
descrizione testuale dell'immagine per i lettori di schermo.
target: questo attributo specifica dove deve essere aperta la pagina web di
destinazione. Il valore predefinito è "_self", che apre la pagina nella stessa finestra o
scheda
del browser. È possibile impostare il valore su "_blank" per aprire la pagina in una nuova
finestra o scheda.
rel: questo attributo specifica il tipo di relazione tra la pagina corrente e
la
pagina web di destinazione. Ad esempio, il valore "nofollow" indica ai motori di ricerca di
non
seguire il link.
title: questo attributo specifica il testo che viene visualizzato quando il
cursore viene posizionato sopra il link.
l'attributo href può rimandare anche all'id di un elemento.
L'API Dummy images genera immagini casuali sulla base dei parametri che aggiungiamo al percorso. Ad esempio, se ci serve un'immagine di dimensione 600x400, background rosso, testo "Immagine" di colore nero: https://dummyimage.com/600x400/ff0000/000000.png&text=Immagine.
Per l'esercizio usiamo questo servizio come fonte per l'immagine, da inserire nell'attributo src.
a che manda ad una nuova scheda l'immagine, e a destra l'immagine effettiva dentro un img.a, rendiamo l'immagine cliccabilep con del lorem ipsum, ognuno con id uno, due, tre...a con href #uno, #due, #tre...© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.