🗓️ Scaletta della lezione

0–5'Ipertesto: cos'è
5–15'Link e percorsi
15–24'Immagini e alt
24–28'Audio e video
28–35'Laboratorio: indice degli appunti
35–40'Quiz

📋 Cosa devi sapere alla fine della lezione

1. Il collegamento ipertestuale

link 
<!-- Link esterno: apre un altro sito in una nuova scheda -->
<a href="https://developer.mozilla.org/it/" target="_blank" rel="noopener">Documentazione MDN</a>

<!-- Link interno: un'altra pagina dello stesso sito -->
<a href="glossario.html">Vai al glossario</a>

<!-- Link a una sezione della stessa pagina -->
<a href="#lezione-2">Vai alla lezione 2</a>

<!-- Link email -->
<a href="mailto:nome@scuola.it">Scrivi al docente</a>
🔒 target="_blank" e rel="noopener"

Quando apri un link esterno in una nuova scheda aggiungi rel="noopener": impedisce alla pagina aperta di controllare la tua. È una buona pratica di sicurezza.

2. Percorsi assoluti e relativi

Immagina la cartella del tuo progetto così:

cartella del progetto 
informatica/
├── index.html
├── appunti.html
├── img/
│   └── cpu.jpg
└── lezioni/
    └── lezione-4.html
Da quale fileVersoPercorso relativo
appunti.htmlindex.htmlindex.html
appunti.htmlimg/cpu.jpgimg/cpu.jpg
lezioni/lezione-4.htmlindex.html../index.html (.. = sali di una cartella)
lezioni/lezione-4.htmlimg/cpu.jpg../img/cpu.jpg
⚠️ Gli errori più comuni

Spazi e lettere maiuscole nei nomi dei file (Foto Gatto.JPG), percorsi del proprio PC (C:\Users\...) che online non esistono, barre rovesciate \ al posto di /. Usa sempre nomi minuscoli, senza spazi e senza accenti.

3. Le immagini

immagini 
<img src="img/cpu.jpg" alt="Processore montato sulla scheda madre" width="400">

<figure>
  <img src="img/von-neumann.png" alt="Schema dell'architettura di Von Neumann">
  <figcaption>Fig. 1 – L'architettura di Von Neumann</figcaption>
</figure>

L'attributo alt non è facoltativo: viene letto dai lettori vocali, compare se l'immagine non si carica e aiuta i motori di ricerca. Descrivi cosa mostra l'immagine, non “immagine1”.

Per il web usa i formati giusti: JPG/WebP per le foto, PNG per grafica con trasparenze, SVG per loghi e icone vettoriali.

4. Audio, video e contenuti incorporati

multimedia 
<video src="video/lezione-1.mp4" controls width="560"></video>

<audio src="audio/podcast.mp3" controls></audio>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ID_VIDEO"
        title="Video della lezione" allowfullscreen></iframe>

5. Laboratorio: l'indice cliccabile degli appunti

✍️ Compito (7 minuti)
  1. In cima agli appunti crea un elenco <ul> “Indice” con un link per ogni lezione (href="#lezione-1", ...).
  2. Verifica che ogni <h2> abbia l'id corrispondente e prova a cliccare.
  3. Aggiungi in fondo una sezione “Fonti” con un link esterno a MDN che si apra in una nuova scheda.
  4. Inserisci un'immagine dal web con un alt descrittivo.
🧪 Playground: indice cliccabile e immagini Apri a schermo intero ↗

Il codice che scrivi resta salvato in questo browser. Usa 💾 Esporta .html per scaricarlo e consegnarlo.

← Torna all'Indice Generale Lezioni