<img>
<ul>
<table>
<form>
Corso HTML · Impariamo a creare pagine web
Lezione 5
Ripasso e progetto finale
Tutto quello che sai, in un unico sito.
Il punto della situazione
Quello che sai già fare
1
Struttura e testo
html · head · title · body · h1 · p · b · i
2
Immagini ed elenchi
img · ul · ol · li
3
Tabelle e link
table · tr · td · a href
4
Form e input
form · input · select · textarea
Lezione 5 — Ripasso e progetto finale
02 / 11
Il progetto finale
Un mini-sito di
3 pagine
collegate
Home.html
La copertina
titolo, immagine, menu
↔
Programma.html
La tabella
orario / prezzi
↔
Iscriviti.html
Il form
iscrizione
Lezione 5 — Ripasso e progetto finale
03 / 11
Da pagine a sito
Collegare le pagine: il menu
Il link a un'altra pagina ha come
href
il
nome del file
— niente
http
.
<a
href
=
"Home.html"
>
Home
</a>
|
<a
href
=
"Programma.html"
>
Programma
</a>
|
<a
href
=
"Iscriviti.html"
>
Iscriviti
</a>
come si vede
Home
|
Programma
|
Iscriviti
Lezione 5 — Ripasso e progetto finale
04 / 11
Pagina 1 di 3
Home
Home.html
Il
menu
di navigazione in alto
Un
titolo
grande e centrato
Un'
immagine
di copertina
Un
paragrafo
di benvenuto
Home
|
Programma
|
Iscriviti
Festival della Scienza
copertina.jpg
Benvenuti al festival! Tre giorni di esperimenti, ospiti e laboratori per tutti.
Lezione 5 — Ripasso e progetto finale
05 / 11
Pagina 2 di 3
Programma
Programma.html
Lo
stesso menu
in alto
Una
tabella centrata
Bordo
spesso e colorato
Riga di
intestazione
evidenziata
Home
|
Programma
|
Iscriviti
Giorno
Evento
Ven
Apertura
Sab
Laboratori
Lezione 5 — Ripasso e progetto finale
06 / 11
Pagina 3 di 3
Iscriviti
Iscriviti.html
Lo
stesso menu
in alto
Un
form
con nome ed email
Una scelta
radio
(giorno)
Il pulsante
Invia
Home
|
Programma
|
Iscriviti
Nome:
Email:
Giorno:
Sab
Dom
Invia
Lezione 5 — Ripasso e progetto finale
07 / 11
Prima di consegnare
La checklist che alza il voto
✓
<title>
col tuo nome su
ogni
pagina
✓
Lo
stesso menu
in cima a tutte e tre
✓
I
link
tra le pagine funzionano
✓
Ogni tag
aperto è chiuso
✓
Le
immagini si vedono
(percorso giusto)
✓
Provata
salvando e ricaricando
Lezione 5 — Ripasso e progetto finale
08 / 11
Attenzione
Gli errori che fanno perdere punti
✗
Tag non chiuso
<b>ciao → manca </b>
✗
Nome file sbagliato nel link
href="home.html" ≠ Home.html
✗
Virgolette mancanti
size=30 → size="30"
✗
Percorso immagine sbagliato
src="foto.jpg" ma è in Immagini/
Lezione 5 — Ripasso e progetto finale
09 / 11
La mappa completa
Tutto il corso in un colpo d'occhio
LEZ 1
Introduzione
html
head · title
body
h1 · p
b · i · u
font
LEZ 2
Immagini
ed elenchi
img · src
alt · width
a + img
ul · ol
li · type
LEZ 3
Tabelle
e hyperlink
table · tr
td · border
colspan
a href
target · mailto
LEZ 4
Form
e input
form
input · type
radio · check
select
textarea
LEZ 5
Progetto
finale
3 pagine
menu
link tra file
tutto
insieme!
Lezione 5 — Ripasso e progetto finale
10 / 11
</>
Progetto finale
Costruisci il tuo sito
«Il festival» — 3 pagine collegate
1
Home
: menu, titolo, immagine, benvenuto
2
Programma
: menu + tabella col bordo colorato
3
Iscriviti
: menu + form completo
Apri l'esercizio del progetto finale: la checklist si spunta da sola. In bocca al lupo! →