Modulo 3 — Collegamenti e Immagini -

Obiettivi formativi

Comprendere la logica dei collegamenti ipertestuali nel Web.
Usare correttamente il tag <a> con i relativi attributi.
Inserire immagini ottimizzate con testo alternativo e titoli descrittivi.
Gestire collegamenti interni, esterni e ancore di navigazione.

Table of Contents

1️⃣ L’ipertesto e il collegamento

Il termine ipertesto (da hypertext) indica un insieme di documenti collegati fra loro.
In HTML, il collegamento si realizza con il tag <a> (*anchor*), che crea un link
cliccabile verso un’altra risorsa.

<a href=”https://www.liceomasci.edu.it”>Visita il sito del Liceo Masci</a>

L’attributo href indica la destinazione; il testo tra i tag è ciò che l’utente clicca.

$\text{Collegamento} = \langle a\,href="URL" \rangle \text{testo} \langle /a \rangle$

2️⃣ Tipologie di link

Assoluti — contengono l’indirizzo completo (protocollo + dominio):
https://www.megistone.it/index.html
Relativi — collegano file interni alla stessa cartella:
pag2.html o img/foto.jpg
Ancora interna — collega due punti della stessa pagina.

<a href=”#fine”>Vai a fondo pagina</a>
… contenuto …
<h2 id=”fine”>Fine della pagina</h2>

3️⃣ Attributi utili di <a>

target="_blank" → apre il link in una nuova scheda.
title="descrizione" → mostra un suggerimento al passaggio del mouse.
download → consente di scaricare un file invece di aprirlo.

<a href=”brochure.pdf” download>Scarica la brochure</a>

4️⃣ Inserire immagini

Le immagini si inseriscono con il tag <img>, un elemento autonomo (senza tag di chiusura),
accompagnato da attributi fondamentali:

src — percorso o URL dell’immagine;
alt — testo alternativo (per accessibilità e SEO);
title — didascalia facoltativa;
width, height — dimensioni (in pixel o percentuale).

$\text{Immagine} = \langle img\,src="percorso"\,alt="descrizione" \rangle$

5️⃣ Link su un’immagine

Possiamo rendere cliccabile un’immagine racchiudendola all’interno del tag <a>:

6️⃣ Ottimizzazione e accessibilità delle immagini

Usare formati .jpg, .png, .webp secondo il tipo di contenuto.
Ridurre le dimensioni dei file per migliorare la velocità di caricamento.
Fornire sempre il testo alt descrittivo per i non vedenti.
Specificare il width per evitare salti di layout durante il caricamento.

7️⃣ Esempio completo

<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”utf-8″>
<title>Collegamenti e immagini</title>
</head>
<body>
<h1>Esempio di link e immagini</h1>
<p>Visita il <a href=”https://www.megistone.it” target=”_blank”>sito Megistone</a>.</p>
<a href=”https://www.liceomasci.edu.it” title=”Liceo Scientifico F. Masci”>
<img src=”liceo.jpg” alt=”Facciata del liceo” width=”300″>
</a>
<p><small>© 2025 Corso HTML – Modulo 3</small></p>
</body>
</html>

8️⃣ Esercizi guidati

🔹 Esercizio 1 — Link esterno e interno

Crea una pagina con un link a https://www.megistone.it e un’ancora che rimanda a fondo pagina.

🔹 Esercizio 2 — Immagine con descrizione

Inserisci un’immagine con attributi alt e title. Verifica il comportamento se l’immagine non è disponibile.

🔹 Esercizio 3 — Logo cliccabile

Rendi cliccabile il logo del tuo istituto con un link che apre in una nuova scheda.

9️⃣ Verifica lampo

Il tag <a> può contenere anche un’immagine → Vero.
L’attributo alt serve solo per la SEO → Falso.
Il tag <img> richiede un tag di chiusura → Falso.

Rubrica di valutazione

Criterio	Eccellente	Buono	Base	Da rivedere
Uso dei link	Corretto e diversificato	Quasi completo	Parziale	Errato
Accessibilità	Alt e title sempre presenti	Qualche mancanza	Parziale	Assente
Ottimizzazione immagini	Formati e dimensioni adeguate	Buono	Base	Nessuna ottimizzazione
Correttezza sintattica	Codice valido W3C	Minori warning	Un errore per tag	Errori diffusi

Compito di realtà:Realizza una pagina “Galleria di classe” con almeno tre immagini collegate a pagine diverse (una per ciascun gruppo o progetto).
Aggiungi didascalie, link esterni e testo alternativo descrittivo.

🔎 Storia dell’Ipertesto e nascita dei collegamenti

Il concetto di ipertesto nasce molto prima dell’invenzione del Web.
Nel 1945, lo scienziato americano Vannevar Bush, in un articolo intitolato
“As We May Think”, descrisse il Memex, una macchina ipotetica in grado di
collegare documenti e concetti tramite riferimenti incrociati, anticipando l’idea dei link digitali.

Negli anni Sessanta, Ted Nelson coniò i termini hypertext e
hypermedia, e sviluppò il progetto Xanadu, che mirava a creare una rete universale
di testi e immagini collegati. Sebbene Xanadu non divenne mai operativo su larga scala,
influenzò profondamente le idee successive sul collegamento ipertestuale.

Nel 1989 Tim Berners-Lee riprese questi concetti e li rese concreti con il
World Wide Web, progettando un linguaggio (HTML) in cui il collegamento non era più
teorico ma operativo. Il tag <a> divenne il cuore del Web, perché consentiva di unire
documenti sparsi in una rete logica di informazioni.

$\text{Hiperlink} = \text{Relazione tra due risorse: sorgente} \rightarrow \text{destinazione}$

L’evoluzione tecnica dell’elemento <a> ha introdotto nuovi attributi:

rel — specifica la relazione semantica tra le pagine (es. nofollow, noopener);
target — definisce la modalità di apertura (_blank, _self);
download — permette di scaricare file direttamente dal link.

Grazie a questi elementi, l’HTML è diventato il linguaggio che ha trasformato il sapere statico
in una rete di conoscenza navigabile e interattiva.

🧭 Evoluzione semantica e multimediale dell’immagine

Nei primi anni del Web, le immagini venivano inserite unicamente come elementi decorativi o informativi
tramite il tag <img>. Con l’avvento di HTML5 la rappresentazione visiva
è diventata anche semantica, cioè capace di comunicare il significato dell’immagine al browser
e ai lettori di schermo.

Per questo sono stati introdotti i tag <figure> e <figcaption>,
che raggruppano immagine e didascalia in un’unica unità logica:

<figure>
<img src=”esperimento.jpg” alt=”Circuito elettrico in laboratorio” width=”400″>
<figcaption>Esperimento di elettrotecnica nel laboratorio di fisica.</figcaption>
</figure>

Questa struttura è importante per l’accessibilità e per la
semantica del documento: un lettore di schermo riconosce che la didascalia appartiene
all’immagine e non a un testo generico.

HTML5 ha inoltre perfezionato il concetto di mappe immagine, introdotte già in HTML 4 con i tag
<map> e <area>. Questi consentono di rendere cliccabili
porzioni diverse di una stessa immagine, favorendo l’interattività in ambiti didattici e multimediali.

Le immagini moderne incorporano anche metadati EXIF (data, luogo, autore) e nuovi attributi
come loading="lazy" per il caricamento ritardato, che migliora le prestazioni della pagina.

$\text{Immagine moderna} = \text{contenuto visivo} + \text{significato semantico} + \text{metadati}$

L’immagine sul Web, dunque, non è più un semplice ornamento, ma un veicolo di conoscenza e un
elemento informativo completo.

Preview Modulo 4 — Liste e TabelleNel prossimo modulo imparerai a organizzare informazioni e dati attraverso
liste strutturate e tabelle HTML con intestazioni, righe e colonne.

Modulo 3 — Collegamenti e Immagini