lunedì 3 febbraio 2025

Corso di HTML: 3 Strutturare i contenuti

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>&copy; 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:

  1. Creare una pagina con header, footer e almeno due section, inserendo un article e un aside in ciascuna sezione.

  2. Costruire una tabella con dati inventati (ad esempio elenco di contatti o prodotti).

  3. Creare un form di contatto completo di input per nome, email e messaggio.

  4. 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

  1. 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>

  2. 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>

  3. Tabella dell’Istruzione:
    Aggiungi righe per corsi extra o certificazioni.

    <tr><td>2019</td><td>Corso avanzato di JavaScript</td></tr>

  4. 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>

  5. 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.

alle
Etichette: ,

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

Reti di computer e Internet Introduzione Prova a pensare alla vita quotidiana senza reti informatiche: niente messaggi WhatsApp, niente m...