Obiettivo della lezione
Inserire immagini in modo corretto, usando percorsi ordinati, testo alternativo e dimensioni gestibili.
Spiegazione
Le immagini si inseriscono con il tag img. L’attributo src indica il file, mentre alt descrive l’immagine per accessibilità, SEO e casi in cui l’immagine non si carica.
Il testo alternativo non deve essere una lista di parole chiave: deve spiegare l’immagine in modo utile.
Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.
Codice di esempio
Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.
<img src="assets/img/aula-informatica.jpg" alt="Aula informatica con computer per corso HTML">Errori comuni
- Lasciare
altvuoto quando l’immagine trasmette informazioni. - Usare immagini enormi non ottimizzate.
- Scrivere percorsi sbagliati rispetto alla cartella della pagina.
Esercizio pratico
Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.
- Apri il tuo editor.
- Crea o aggiorna un file
.htmlo.asp. - Inserisci il codice della lezione.
- Modifica testi e attributi.
- Apri la pagina nel browser e controlla il risultato.
Lezioni collegate
Continua il laboratorio
Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.