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 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.
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!
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:
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?
Crea il tuo account gratuito con 3 click… e ottieni i vantaggi!
ISCRIZIONE RIUSCITA!
Benvenuto nella Community di WeTurtle. Ora sei pronto per iniziare la tua formazione!
Clicca su INIZIA e potrai accedere alla tua Area Riservata.
Benvenuto nella Community di WeTurtle. Ora sei pronto per iniziare la tua formazione!
Ti abbiamo inviato una email con le informazioni relative alla lezione di prova.
Clicca sul bottone qui sotto e potrai accedere al contenuto. Buona visione!
Benvenuto nella Community di WeTurtle. Ora sei pronto per iniziare la tua formazione!
Clicca sul bottone qui sotto e otterrai il pdf del contenuto. Buona lettura!
Benvenuto nella Community di WeTurtle. Ora sei pronto per iniziare la tua formazione!
Clicca sul bottone qui sotto e salverai il contenuto tra i tuoi preferiti. Buona lettura!
Benvenuto nella Community di WeTurtle. Ora sei pronto per iniziare la tua formazione!
Clicca sul bottone qui sotto e potrai scaricare l'ebook che hai scelto. Buona lettura!
ISCRIZIONE NON RIUSCITA!
Hai inserito un indirizzo email già presente nel nostro database.
Se non riesci a eseguire il login effettua la procedura per il recupero della password o scrivi a info@weturtle.org.
SI È VERIFICATO UN PROBLEMA!
L'iscrizione non è andata a buon fine. Prova a ripetere la procedura.
Se continui a riscontrare problemi contattaci via mail a info@weturtle.org.