TUTORIAL HTML – Lezione 3

In questa parte del tutorial vedremo come impaginare il sito web preparato fino ad ora, richiamando la struttura introdotta nella prima lezione. Abbiamo sperimentato quest’attività con ragazzi dai 9 ai 13 anni.

In particolare, ci concentreremo su:

• Come rappresentare header, body e footer con l’HTML;
• Come specificare quale parte della pagina occupa ciascuno di questi elementi.

Tecnologia:

• Linguaggio HTML;
• Computer;
• Notepad++ (scaricabile gratuitamente da qui)

L’header è la parte più in alto della pagina, e normalmente contiene le informazioni principali dell’intero sito: nome, logo, eventuali riferimenti ai social network. Può anche contenere il menu di navigazione.
Si può inserire l’header nel contenuto di "body", con la seguente sintassi:

Si può anche arricchire l’header di attributi per definire dove e come viene visualizzato all’interno della pagina web.
In questo caso la sintassi cambia in:

Dal momento che gli attributi sono estremamente numerosi, può essere utile fornire ai ragazzi un piccolo glossario ad hoc che ne contenta i più comuni
 

• margin-top: DISTANZA IN PIXEL DAL BORDO SUPERIORE DELLA SEZIONE;
• margin-left: DISTANZA IN PIXEL DAL BORDO SINISTRO DELLA SEZIONE;
• margin-bottom: DISTANZA IN PIXEL DAL BORDO INFERIORE DELLA SEZIONE;
• margin-right: DISTANZA IN PIXEL DAL BORDO DESTRO DELLA SEZIONE;
• border: NUMEROpx (per creare un bordo di cui decidiamo lo spessore);
• border: NUMEROpx solid COLORE (per definire un bordo continuo del colore scelto);
• border: NUMEROpx dotted COLORE (per definire un bordo puntinato del colore scelto);
• border: NUMEROpx dashed COLORE (per definire un bordo tratteggiato del colore scelto);
• background-color: COLORE DI SFONDO;
• width: LARGHEZZA IN PIXEL
• height: ALTEZZA IN PIXEL
• position:absolute; left: NUMERO PIXEL DA SINISTRA; top: NUMERO PIXEL DALL’ALTO (per definire la posizione dal vertice in alto a sinistra della pagina)

Gli studenti sono poi incoraggiati a creare il loro header, con tanto di logo rappresentativo del sito. Il logo può essere scaricato da internet, o creato da loro utilizzando un programma di grafica (Paint o Gimp sono adatti allo scopo).
Un esempio di codice per la realizzazione di un header è riportato di seguito:

Il menu di navigazione può essere inserito all’interno dell’header o, come nell’esempio riportato più avanti, in una sezione laterale della pagina.
Esso contiene i link necessari per accedere ad altre pagine dello stesso sito web. Dato che i ragazzi hanno scritto un’unica pagina web, teoricamente non sarebbe necessario inserire anche un menu. In ogni caso, è un ottimo esercizio per approfondire la struttura della pagina e per rendere il loro lavoro pronto ad essere ampliato con ulteriori pagine.
Il tag di riferimento è "nav" e la sintassi è analoga a quella dell' header vista poco fa.

Un esempio è riportato di seguito:

Il contenuto vero e proprio della pagina, che i ragazzi hanno scritto e formattato in HTML nelle scorse lezioni, va ora correttamente impaginato. Al riguardo ci sono diverse soluzioni, tra cui l’utilizzo del tag "section": si tratta di un contenitore generico, la cui sintassi è analoga a quella di "nav" e "header".
Un esempio è riportato di seguito:

Il footer (o pie’ di pagina) è la sezione della pagina che contiene, di solito, una breve presentazione degli autori, il copyright, ed altre informazioni aggiuntive. Può essere aggiunta utilizzando il tag "footer", anche qui in maniera analoga agli altri presentati.
Un esempio è riportato di seguito:

Questa è la pagina completa che si otterrebbe utilizzando tutti i tag visti in questo tutorial: