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...
In particolare, ci concentreremo su:
- Come rappresentare...
by Weturtle Team
HTML
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:
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.
- 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:
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:
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
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:
- 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:
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:
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:
Un esempio è riportato di seguito:
Questa è la pagina completa che si otterrebbe utilizzando tutti i tag visti in questo tutorial:
PROVA LA FORMAZIONE! UNA LEZIONE E' GRATIS
Ti interessa l'argomento Coding?
Fai il login e guarda gratuitamente la lezione di prova del corso
Creare app con App Inventor 2 - ID SOFIA: 48653
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.
AUTORE
Weturtle Team
AUTORE
Weturtle Team
Scopri i corsi di formazione di WeTurtle
59.00€
Didattica Digitale
Roberto Faloppi
