3 – Strutturare i Contenuti di una Pagina Web
In questo modulo ci concentreremo su come organizzare in maniera chiara, coerente e semantica i contenuti di una pagina web. La struttura di una pagina HTML non riguarda solo l’aspetto visivo, ma anche la logica con cui i contenuti vengono organizzati. Una struttura coerente e semantica migliora la fruizione da parte degli utenti e rende la pagina più facilmente interpretabile dai motori di ricerca, aumentando l’accessibilità e l’usabilità del sito.
Impareremo ad utilizzare elementi semantici come <header>, <footer>, <section>, <article>, <aside> e <nav>, oltre a costruire tabelle e form di input per rendere la pagina interattiva e funzionale.
📌 Elementi Semantici
Gli elementi semantici forniscono significato al contenuto, aiutando sia i browser sia gli utenti a comprendere la struttura della pagina.
-
<header> contiene solitamente il titolo del sito o della pagina e i menu principali. È la sezione introduttiva che compare nella parte superiore della pagina.
-
<footer> racchiude informazioni di chiusura, come copyright, contatti o link utili. Si trova alla fine della pagina.
-
<section> definisce una sezione tematica del contenuto, ad esempio “Chi siamo” o “Servizi offerti”.
-
<article> è dedicato a contenuti indipendenti, come articoli di blog, news o post. Può essere condiviso autonomamente.
-
<aside> è utilizzato per contenuti laterali o correlati, come box informativi, link utili o citazioni.
-
<nav> raccoglie i link di navigazione principali, ad esempio il menu di un sito.
Esempio pratico di struttura semantica di pagina:
<body>
<header>
<h1>Il mio sito personale</h1>
<nav>
<a href="#home">Home</a>
<a href="#portfolio">Portfolio</a>
<a href="#contatti">Contatti</a>
</nav>
</header>
<section id="home">
<article>
<h2>Benvenuto nel mio sito</h2>
<p>Qui puoi trovare informazioni sul mio lavoro e i miei progetti.</p>
</article>
<aside>
<p>Notizie recenti: nuove pubblicazioni e aggiornamenti!</p>
</aside>
</section>
<footer>
<p>© 2025 Nome Cognome - Tutti i diritti riservati</p>
</footer>
</body>
Spiegazione delle scelte:
-
La struttura separa chiaramente intestazione, contenuto principale e footer.
-
<article> contiene contenuti autonomi, mentre <aside> aggiunge informazioni correlate senza interrompere il flusso principale.
-
<nav> permette agli utenti di spostarsi facilmente tra le sezioni della pagina.
📌 Tabelle HTML
Le tabelle servono per organizzare dati tabulari in righe e colonne. Una tabella HTML è composta da:
-
<table> → elemento principale della tabella.
-
<tr> → definisce una riga.
-
<th> → definisce l’intestazione della colonna (grassetto e centrato di default).
-
<td> → definisce una cella con il contenuto dei dati.
Esempio di tabella:
<table border="1">
<tr>
<th>Nome</th>
<th>Email</th>
<th>Ruolo</th>
</tr>
<tr>
<td>Mario Rossi</td>
<td>mario.rossi@email.com</td>
<td>Web Designer</td>
</tr>
<tr>
<td>Luisa Bianchi</td>
<td>luisa.bianchi@email.com</td>
<td>Content Creator</td>
</tr>
</table>
Spiegazione:
-
<th> è utilizzato per intestazioni di colonne, migliorando la leggibilità.
-
<tr> separa logicamente ogni riga, mentre <td> contiene i dati effettivi.
-
L’attributo border="1" aggiunge un bordo visibile, utile per esercitazioni e prototipi.
📌 Form di Input
I form permettono di raccogliere dati dagli utenti e sono essenziali per newsletter, contatti o registrazioni. Un form HTML si costruisce con <form> e contiene elementi di input come <input> e <textarea>.
Esempio pratico di form di contatto:
<form action="/invia-dati" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Inserisci la tua email" required>
<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio" rows="4" placeholder="Scrivi qui il tuo messaggio" required></textarea>
<button type="submit">Invia</button>
</form>
Spiegazione dettagliata:
-
<form action="/invia-dati" method="post"> specifica dove inviare i dati e con quale metodo.
-
Gli attributi id e name permettono di collegare label e input e di identificare i dati lato server.
-
placeholder fornisce un suggerimento visivo per l’utente.
-
required obbliga l’utente a compilare il campo prima di inviare il form.
-
<textarea> serve per messaggi più lunghi.
-
<button type="submit"> invia i dati al server.
📌 Consigli Operativi per la Lezione
Durante le tre ore di lezione, gli studenti dovranno:
-
Creare una pagina con header, footer e almeno due section, inserendo un article e un aside in ciascuna sezione.
-
Costruire una tabella con dati inventati (ad esempio elenco di contatti o prodotti).
-
Creare un form di contatto completo di input per nome, email e messaggio.
-
Verificare la coerenza semantica: ogni elemento deve avere senso nel contesto e migliorare la leggibilità.
📌 Obiettivi di Apprendimento
Al termine del modulo, gli studenti saranno in grado di:
-
Comprendere l’importanza della struttura semantica di una pagina web.
-
Utilizzare correttamente header, footer, section, article, aside e nav.
-
Costruire tabelle ben strutturate e accessibili.
-
Creare form di input con attributi utili all’usabilità e all’accessibilità.
-
Applicare le regole apprese per costruire pagine coerenti, leggibili e pronte per essere stilizzate con CSS o rese interattive con JavaScript.
Ecco una versione narrativa, approfondita e completa del Modulo 3 con l’esempio pratico del CV personale, comprensiva di spiegazioni dettagliate, motivazioni delle scelte, e guida passo passo agli esercizi. Il testo è pensato per essere didattico, narrativo e pronto per la lettura in aula o online.
🔹 Esempio: Creare un CV Personale Online
In questo esercizio praticheremo tutte le conoscenze acquisite sul Modulo 3, combinando elementi semantici, tabelle e form per creare un curriculum vitae online. L’obiettivo è realizzare una pagina chiara, leggibile e funzionale, che contenga informazioni personali, esperienze lavorative, istruzione, competenze e contatti.
📌 Struttura della Pagina
Ogni pagina HTML deve iniziare con la dichiarazione <!DOCTYPE html>, seguita dall’elemento <html> che racchiude tutto il contenuto. All’interno di <html>, <head> contiene informazioni come charset e titolo, mentre <body> ospita tutti gli elementi visibili.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>CV Personale</title>
</head>
<body>
<!-- Contenuti visibili andranno qui -->
</body>
</html>
Spiegazione:
-
<meta charset="UTF-8"> assicura che il testo venga interpretato correttamente con caratteri speciali.
-
<title> appare nella scheda del browser.
-
Il corpo della pagina <body> conterrà header, sezioni, articoli, aside, form e footer.
📌 Header e Navigazione
L’header contiene il nome del candidato e il menu di navigazione interno, facilitando lo spostamento tra le sezioni.
<header>
<h1>Mario Rossi</h1>
<nav>
<a href="#esperienza">Esperienza</a> |
<a href="#istruzione">Istruzione</a> |
<a href="#contatti">Contatti</a>
</nav>
</header>
Spiegazione:
-
<h1> è il titolo principale del CV.
-
<nav> raccoglie i link interni tramite attributi href="#id" per una navigazione fluida.
-
Il simbolo | serve solo da separatore visivo tra i link.
📌 Sezioni e Articoli
Le sezioni principali sono create con <section>, mentre <article> racchiude contenuti autonomi come esperienze o progetti.
<section id="esperienza">
<h2>Esperienza Lavorativa</h2>
<article>
<h3>Web Developer - Azienda XYZ</h3>
<p>Dal 2020 ad oggi, sviluppo siti web e applicazioni online.</p>
</article>
</section>
Spiegazione:
-
<section> delimita una sezione tematica.
-
<article> indica un contenuto indipendente, utile se vogliamo condividere questa sezione singolarmente.
-
Gli ID permettono ai link del nav di scorrere direttamente alla sezione corrispondente.
📌 Tabelle per l’Istruzione
Le tabelle organizzano dati in modo chiaro e leggibile.
<section id="istruzione">
<h2>Istruzione</h2>
<table border="1">
<tr><th>Anno</th><th>Corso</th></tr>
<tr><td>2018</td><td>Laurea in Informatica</td></tr>
<tr><td>2016</td><td>Diploma Liceo Scientifico</td></tr>
</table>
</section>
Spiegazione:
-
<th> definisce le intestazioni delle colonne.
-
<td> contiene i dati.
-
L’attributo border="1" è utile per esercitazioni e prototipi, facilitando la leggibilità.
📌 Contenuti Laterali con Aside
L’elemento <aside> serve per informazioni aggiuntive correlate.
<aside>
<h3>Competenze Tecniche</h3>
<p>HTML, CSS, JavaScript, Python, SQL</p>
</aside>
Spiegazione:
-
<aside> non interrompe il flusso principale.
-
Utile per competenze, link a portfolio o informazioni laterali.
📌 Form di Contatto
Il form permette agli utenti di contattare il candidato.
<section id="contatti">
<h2>Contatti</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Inserisci la tua email" required><br>
<label for="messaggio">Messaggio:</label><br>
<textarea id="messaggio" name="messaggio" placeholder="Scrivi qui il tuo messaggio" required></textarea><br>
<input type="submit" value="Invia">
</form>
</section>
Spiegazione:
-
<form> contiene tutti i campi di input.
-
Gli attributi id e name collegano le label ai campi.
-
required obbliga l’utente a compilare i campi.
-
<textarea> permette di scrivere messaggi più lunghi.
📌 Footer
Il footer chiude la pagina con informazioni generali.
<footer>
<p>© 2025 Mario Rossi</p>
</footer>
Spiegazione:
-
<footer> contiene informazioni di chiusura e copyright.
-
Può includere anche link a privacy, termini o contatti.
📝 Esercizi Operativi
-
Sezione Progetti:
Aggiungi una sezione “Progetti” con almeno 2 articoli descrittivi.
<section id="progetti">
<h2>Progetti</h2>
<article>
<h3>Sito Portfolio</h3>
<p>Progettazione e sviluppo di un portfolio personale online.</p>
</article>
<article>
<h3>App Gestione Task</h3>
<p>Applicazione web per gestire attività quotidiane con JavaScript.</p>
</article>
</section>
-
Link nel Aside:
Inserisci collegamenti a siti esterni che mostrano il portfolio.
<aside>
<h3>Portfolio Online</h3>
<a href="https://portfolio1.example.com" target="_blank">Portfolio 1</a><br>
<a href="https://portfolio2.example.com" target="_blank">Portfolio 2</a>
</aside>
-
Tabella dell’Istruzione:
Aggiungi righe per corsi extra o certificazioni.
<tr><td>2019</td><td>Corso avanzato di JavaScript</td></tr>
-
Form Personalizzato:
Aggiungi campo telefono o checkbox per newsletter.
<label for="telefono">Telefono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="Inserisci il tuo numero"><br>
<label><input type="checkbox" name="newsletter"> Iscriviti alla newsletter</label>
-
Riorganizzazione Nav:
Aggiungi link interni logici e prova il menu.
<nav>
<a href="#esperienza">Esperienza</a> |
<a href="#istruzione">Istruzione</a> |
<a href="#progetti">Progetti</a> |
<a href="#contatti">Contatti</a>
</nav>
✅ Risultati Attesi
Al termine di questo modulo, sarai in grado di strutturare contenuti complessi in pagine HTML usando correttamente elementi semantici, tabelle e form. Saprai creare un curriculum vitae online completamente funzionale e accessibile, pronto per essere arricchito con CSS e interattività tramite JavaScript nei moduli successivi.
Commenti
Posta un commento