Obiettivo
Mettere insieme struttura, navigazione, contenuti e organizzazione dei file.
Traccia
Crea un mini sito di quattro pagine collegate da un menu comune.
Requisiti richiesti
- Prepara quattro file: home, chi-siamo, servizi, contatti.
- Ripeti lo stesso menu in tutte le pagine.
- Usa percorsi relativi corretti.
- Controlla che ogni pagina abbia title e h1 specifici.
Consiglio: prima scrivi il contenuto in modo semplice, poi controlla la gerarchia dei titoli e solo alla fine pensa alla grafica.
Procedura guidata
- Crea un nuovo file con nome chiaro, ad esempio
10-mini-sito-finale.html. - Inserisci la struttura base del documento o lavora dentro il
mainse il layout è già pronto. - Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
- Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
- Valida il codice e correggi eventuali tag non chiusi o attributi mancanti.
Base di partenza
Il codice seguente non è l’unica soluzione possibile: usalo come riferimento e personalizzalo.
<header>
<nav aria-label="Menu principale">
<a href="index.html">Home</a>
<a href="chi-siamo.html">Chi siamo</a>
<a href="servizi.html">Servizi</a>
<a href="contatti.html">Contatti</a>
</nav>
</header>
<main>
<h1>Studio Web Locale</h1>
<p>Realizziamo pagine web semplici, chiare e facili da aggiornare.</p>
</main>Checklist di controllo
- ✓Semantica: i tag descrivono il ruolo reale dei contenuti.
- ✓Accessibilità: immagini, form e link sono comprensibili anche fuori dal contesto visivo.
- ✓Ordine: c’è un solo
h1e i titoli non saltano livello senza motivo. - ✓Percorsi: link, immagini e file collegati usano nomi corretti.
Continua gli esercizi
Passa alla traccia precedente o successiva mantenendo lo stesso metodo: struttura, controllo, miglioramento.