Pagina personale | HTML5-LAB

Obiettivo

Realizzare una pagina “chi sono” ordinata, leggibile e pronta per essere impaginata con CSS.

Traccia

Crea una pagina personale completa con biografia, immagine, competenze e contatti.

Requisiti richiesti

Usa header, main e almeno due section.
Inserisci un solo h1 e titoli secondari ordinati.
Aggiungi una foto con attributo alt descrittivo.
Crea una lista di competenze e almeno due link di contatto.

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 01-pagina-personale.html.
Inserisci la struttura base del documento o lavora dentro il main se 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.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <title>Profilo di Martina Rossi</title>
</head>
<body>
  <header>
    <h1>Martina Rossi</h1>
    <p>Studentessa di web design interessata a HTML, CSS e accessibilità.</p>
  </header>
  <main>
    <section>
      <h2>Chi sono</h2>
      <img src="img/martina.jpg" alt="Ritratto di Martina Rossi">
      <p>Mi occupo di contenuti digitali e sto imparando a costruire pagine web semantiche.</p>
    </section>
    <section>
      <h2>Competenze</h2>
      <ul>
        <li>Scrittura per il web</li>
        <li>Struttura HTML5</li>
        <li>Impaginazione di base</li>
      </ul>
    </section>
  </main>
  <footer>
    <p><a href="mailto:martina@example.com">Scrivimi</a></p>
  </footer>
</body>
</html>

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 h1 e 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.

Precedente Successivo