Progetto finale: pagina portfolio
Un portfolio riunisce navigazione, sezioni, link, immagini e contatti in una pagina comprensibile.
1. Il concetto, spiegato da zero
Un portfolio riunisce navigazione, sezioni, link, immagini e contatti in una pagina comprensibile.
Prima disegna una scaletta dei contenuti, poi costruisci header, main e footer. Aggiungi link descrittivi, un progetto raccontato e una call to action. Valida la pagina su schermi diversi.
2. Un esempio ragionato
Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.
<header><h1>Portfolio di Ada</h1></header>
<main>
<section><h2>Chi sono</h2><p>Sto imparando HTML.</p></section>
<section><h2>Progetti</h2><article><h3>Il mio sito</h3><p>Una pagina accessibile.</p></article></section>
</main>
<footer><a href="mailto:esempio@example.org">Contattami</a></footer>Come leggere questo esempio
- Prima di eseguire, immagina come apparirà il risultato nel browser.
- Spiega con parole tue in che modo “progetto finale: pagina portfolio” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Non aggiungere solo elementi decorativi: chi legge deve capire chi sei, cosa sai fare e come contattarti.
3. Adesso tocca a te
Obiettivo dell’esercizio: Crea la prima versione del tuo portfolio semantico.
Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.
Laboratorio: metti alla prova il codice
HTML · htmlL’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.
Output / esito del controllo
Il risultato comparirà qui.
Mostra la soluzione di riferimento
<header><h1>Portfolio di Ada</h1></header>
<main>
<section><h2>Chi sono</h2><p>Sto imparando HTML.</p></section>
<section><h2>Progetti</h2><article><h3>Il mio sito</h3><p>Una pagina accessibile.</p></article></section>
</main>
<footer><a href="mailto:esempio@example.org">Contattami</a></footer>Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.
4. Verifica e ripasso
Quiz: hai capito il concetto?
Quale delle seguenti affermazioni è corretta per questo capitolo?
Prima disegna una scaletta dei contenuti, poi costruisci header, main e footer. Aggiungi link descrittivi, un progetto raccontato e una call to action. Valida la pagina su schermi diversi.
Progetto finale completo: Portfolio personale accessibile
Devi presentare a un potenziale datore di lavoro competenze e progetti usando solo markup corretto.
Le quattro tappe del progetto
- Progetta sezioni Chi sono, Competenze, Progetti e Contatti.
- Crea una navigazione interna con landmark semantici e gerarchia h1/h2/h3.
- Aggiungi immagini con alt appropriati e un modulo con label associate.
- Controlla il markup con un validatore e la navigazione da tastiera.
Che cosa consegnare
index.html con contenuto originale, titoli chiari, metadati SEO e controlli di accessibilità.
Come valutarti
Il progetto è riuscito quando tutte le funzionalità descritte funzionano con dati normali e casi limite. Rileggi i messaggi di errore, documenta come avviare il codice e conserva una copia di lavoro nel tuo IDE. Puoi aggiungerlo al tuo portfolio personale.
5. Come proseguire
Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.