TUTORIAL HTML – Lezione 3

Tempo di lettura tutorial Tempo di lettura/visione: 4 min

Introduzione

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)

Header

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:

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Il corso gratuito "Collaborare a scuola con il digitale"

Un'area personalizzata con i tuoi contenuti preferiti

Una lezione di prova gratuita per ogni corso online

Dirette ed eventi dedicati agli utenti iscritti

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:

Menu di navigazione

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:

Contenuto della pagina

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:

Footer

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:

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Italia.

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

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

Introduzione

Header

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Menu di navigazione

Contenuto della pagina

Footer

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

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

Introduzione

Header

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Menu di navigazione

Contenuto della pagina

Footer

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

AUTORE

AUTORE

Scopri i corsi di formazione di WeTurtle

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio

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