Lezione 3 · 45-60 minuti

🖼️ Le immagini

Obiettivo: aggiungere immagini alla pagina e imparare i tag "vuoti" e gli attributi.

🎒 Ci serve

Una o più immagini tue (una foto, un disegno, uno screenshot) in formato .jpg o .png
Le pagine create nelle lezioni precedenti

🧠 Un po' di teoria

In origine il web era fatto solo di testo, ma il bello è che oggi è pieno di immagini, colori, video e altri effetti. Iniziamo dalle immagini: in HTML servono un tag nuovo, img, e un concetto nuovo, gli attributi.

🔨 Costruisci: aggiungi le immagini

Nella cartella mio-primo-sito, crea una sottocartella chiamata immagini e mettici dentro una foto o un disegno che ti rappresenta, per esempio sport.jpg.

In hobby.html, prima della lista, inserisci un tag img, che rappresenta l'immagine che vuoi mostrare:

<img src="immagini/sport.jpg" />

Salva e aggiorna: è comparsa l'immagine?

Osserva bene questo tag: noti qualcosa di diverso rispetto a p, strong o li? Ti aiuto, ci sono almeno due differenze:

     *il tag img è "vuoto": non racchiude altro contenuto ed è "auto-chiuso" — un unico tag <img ... /> invece di <img>...</img>
     *può contenere informazioni aggiuntive, chiamate attributi. In questo caso l'attributo src (source, sorgente) indica dove si trova il file dell'immagine rispetto al file principale.

Nota anche l'uso della barra "/" come separatore del percorso: ogni "/" rappresenta l'ingresso in una sottocartella. Per questo immagini/sport.jpg significa "vai nella cartella immagini, poi prendi il file sport.jpg".

Aggiungi anche gli attributi alt (una descrizione, mostrata se l'immagine non si carica) e title (un testo che appare quando ci passi sopra col mouse):

<img src="immagini/sport.jpg" alt="Foto mentre gioco a calcio" title="Il mio sport preferito" />

Prova ad aggiungere anche width e height (larghezza e altezza, in pixel), per esempio width="300". Cosa cambia se metti un numero molto piccolo o molto grande?

Hai imparato come rappresentare le immagini in HTML: img indica un'immagine, src dice dove si trova, alt/title/width/height sono altri attributi comuni.

🚀 Sfide

⭐ Stella

Aggiungi una seconda immagine alla pagina hobby.html.

⭐⭐ Cometa

Aggiungi un'immagine anche a chi-sono.html, con alt e title compilati per bene.

⭐⭐⭐ Razzo

Prova a usare solo width (senza height), poi solo height (senza width): cosa succede alle proporzioni dell'immagine nei due casi?

📝 Quiz: mettiti alla prova

Qual è la differenza principale tra img e gli altri tag come p?

img è un tag "vuoto", auto-chiuso.

img non può stare dentro body.

Non c'è nessuna differenza.

Quale attributo indica dove si trova il file dell'immagine?

alt

title

src

A cosa serve l'attributo alt?

Ingrandisce l'immagine.

È una descrizione, mostrata se l'immagine non si carica.

Cambia il colore dell'immagine.

📚 Da guardare o leggere

Il tag img su MDN — tutti gli attributi disponibili, con esempi.