html54
Corso html 5, quarta lezione.
 Roberto Abutzu SU uiciechi.it, 2013-02.

Quarta parte: Body ed elementi strutturali.

`**********`

Cos' il Body e gli elementi strutturali?

Riprendiamo il discorso, introducendo la tag Body e iniziando a creare la struttura della nostra 
prima pagina web.

A questo punto, per non generare equivoci, devo fare una precisazione riguardante la nuova versione 
del linguaggio html, la versione 5, che semplifica di molto la creazione della struttura della 
pagina.

Con il termine "Struttura", intendo il layout della pagina, cio l'ossatura grafica e strutturata 
della pagina, come se fosse lo scheletro di un palazzo o il telaio di una vettura.

Quindi, quando stiamo creando la pagina, dobbiamo creare prima la struttura, perci,  come se, nel 
crearla, suddividessimo la pagina in tanti pezzi diversi, come se fossero dei veri e propri 
contenitori, ognuno adibito ad un ruolo ben specifico e che accoglier i contenuti che decideremo 
per ognuno di essi.

Facciamo una parentesi. Fino alla versione di html4, le pagine venivano composte a settori e ogni 
settore era identificato da una tag denominata ``div``. Il risultato era che le intestazioni, i 
menu, gli elenchi, i contenuti, il pi di pagina, eccetera, erano tutti all'interno di tag DIV 
inserite all'interno della pagina stessa. Ovviamente, per poter formattare con i css i contenuti 
delle tag DIV, bisognava dare ad ogni DIV un identificativo specifico ed univoco per distinguerlo. 
Questo identificativo si chiama Id e deve essere assolutamente unico per ogni pagina.

Faccio un esempio: ``div id="MenuNavigazione"`` contenuti che vedremo pi avanti ``/div``

Analizziamo questa stringa. La tag : ``div``, una tag di apertura che dopo aver inserito i 
contenuti,  chiusa con: ``/div``

Per, gli abbiamo assegnato anche un identificativo: Id, mettendo un uguale e tra le virgolette il 
nome che vogliamo assegnare a questo div. Come avete notato, tale ID  posizionato tra il nome 
della tag DIV e il segno di maggiore per completare e chiudere la tag.

L'identificativo id, possiamo assegnarlo ad ogni elemento, stando molto attenti a quello che 
scriviamo tra le virgolette. Infatti, non  possibile inserire spazi. Quando il nome  composto da 
pi parole, ma non  una regola, si pu scrivere la seconda parola con la lettera maiuscola, oppure 
separare le due parole con un segno di sottolineato o un trattino, solo per dare modo a chi legge 
di poter capire meglio quello che legge. E' importante riportarlo nel foglio di stile, css, 
esattamente come  stato scritto, perch altrimenti non funzioner.

Quindi, riassumendo:

1. L'identificativo Id non  altro che un attributo della tag Div.

2. Il valore dell'attributo  il nome inserito tra le virgolette.

3. L'identificativo, che sarebbe una sorta di etichetta univoca, pu essere dato a qualsiasi 
elemento purch unico per ogni pagina.

Tornando alla prima parte della spiegazione, con le versioni precedenti di HTML, trovavamo le 
pagine piene di tag Div ed i browser non avevano nessuna possibilit di distinguere un div da 
un'altro, se non si era oculati, inserendo un attributo ID per ognuno di essi.

Con l'html 5, questa problematica viene in buona parte risolta, dando delle nuove Tag specifiche ad 
alcuni settori della pagina stessa. Si precisa che il Tag Div  ancora utilizzato e valido per il 
W3C.

Allora, molto probabilmente vi chiederete come  strutturata attualmente una pagina. Vediamolo 
subito, considerando solo le tag contenute all'interno della tag Body.

Nota bene: si fa presente che nella tag Body abbiamo tutti gli elementi visibili nella pagina che 
il navigatore vede a schermo.

Di seguito, c' l'elenco delle tag e per ogni tag,  scritta la tag, un segno di uguale e il 
significato:

``header`` = L'intestazione del sito, quella visibile all'utente. Pu contenere anche pi livelli.

``nav`` = indica il menu di navigazione principale del sito.

``aside`` = significa Di fianco, e all'interno  possibile aggiungere contenuti aggiuntivi, che 
restano graficamente su un lato.

``hgroup`` = questa tag, possiamo utilizzarla per racchiudere pi livelli di intestazione, dandogli 
cos una gerarchia indipendente dalle altre intestazioni della pagina. Poi vedremo nei dettagli e 
sar pi chiaro.

``section`` = Questa tag, pu contenere una porzione di contenuti nella pagina, e viene quasi 
sempre preceduta da una intestazione. Su questa tag, ci sono un po' di polemiche in rete, in quanto 
non  chiaro quando pu sostituire la tag Div.

``div`` = Questa era la pi usata in passato, e ogni tipologia di contenuto pu essere inserito 
dentro alle tag Div.

``footer`` = questa tag  il pi di pagina dove di solito vengono inseriti il Copyright e i dati 
del creatore del sito, o anche i dati aziendali.

Per eseguire un esercizio pratico di come vengono usati questi tag, apriamo il nostro file 
index.html e, all'interno, tra le tag ``body`` e ``/body``, inseriremo le tag sopra elencate. 
Potete anche selezionarle e copiarle direttamente nel vostro file index.html, anche se io consiglio 
di prendere la buona abitudine di scriverle direttamente, se non altro, per acquisirne mentalmente 
la struttura e non avere pi il bisogno di andare a leggerle. Questo aiuta ad apprendere meglio in 
futuro il percorso che stiamo facendo.

Aperto il file index.html, inserite dopo l'apertura della tag Body, quindi, dopo la tag ``Body``, 
quanto segue:

``header``

``hgroup``

``h1`` Sito html 5 ``/h1``

``h2`` corso html per non vedenti ``/h2``

``h3`` Il sito scritto tutto in codice ``/h3``

``/hgroup``

``nav``

``h1`` Menu di navigazione ``/h1``

``p`` Qui inseriremo il nostro menu principale ``/p``

``/nav``

``/header``

``div id="content"`` ``!-- inizio contenuti --``

``h2`` Html 5 presentazione del corso ``/h2``

``p`` qui inseriremo i contenuti. ``/p``

``/div`` ``!-- chiuso contenuti --``

``footer``

``p`` pi di pagina ``/p``

``small`` Copyright ``/small``

``/footer``

Scritte o copiate le tag come indicato sopra, abbiamo una struttura minima e potremo iniziare a 
inserirci ulteriori contenuti.

Nota importante! La struttura  di fondamentale importanza per svariati motivi:

1. I siti hanno la stessa struttura in quasi tutte le pagine, cambiando poi solo i contenuti. 
Quindi, una buona struttura, permette di risparmiare parecchio tempo nello sviluppo del sito. Per, 
prima di creare una struttura,  fondamentale avere un'idea ben chiara di quanti tipi di pagine si 
vogliono utilizzare ed avere, quindi, idea anche della struttura delle pagine successive.

2. Utilizzando i fogli di stile a cascata, per la formattazione degli elementi sulla pagina, questa 
viene applicata una sola volta alla struttura e si ripete automaticamente per tutte le pagine del 
sito che hanno la stessa struttura.

3. Una struttura programmata in modo corretto consente ai browser di caricare il sito con rapidit, 
perch non c' alcun bisogno di personalizzare le informazioni degli elementi previsti dai 
contenuti delle pagine. L'adattamento delle informazioni sui contenuti  previsto dall'html 5, 
quindi, vedremo successivamente come far in modo che anche i browser datati possano caricare la 
nostra pagina esattamente come l'abbiamo creata.

4. Riguardo all'accessibilit per i disabili visivi, avere i settori delle pagine correttamente 
identificati dalle Tag univoche e specifiche, ci snellisce e ci agevola nella navigazione delle 
pagine e ci consente di operare, anche su pagine molto grandi, senza mai perdere l'orientamento, 
cosa che accadeva spesso quando una pagina era stata strutturata con centinaia di div.

Prima di passare all'inserimento dei contenuti ed ulteriori Tag, controlliamo con  una panoramica 
del codice, cosa abbiamo inserito nella nostra index.html fino a questo punto.

Tralasciando la tag html di apertura e chiusura della pagina ed utilizzando i vari tag aperti e 
chiusi con al loro interno la spiegazione di cosa conterranno, il nostro file index.html  formato 
dal seguente codice:

``head`` Contiene le informazioni non visibili che vedremo in seguito ``/head``
``body`` contiene tutti gli elementi della pagina visibili dal navigatore. ``/body``

All'interno della tag body, abbiamo diviso in:

``header`` contiene le  Intestazioni del sito, racchiuse all'interno della tag ``hgroup`` 
intestazioni ``/hgroup`` chiusa da ``/header``

``nav`` Questa Tag racchiuder tutti gli elementi del menu principale del nostro sito. ``/nav``

Questa tag, pu anche essere tranquillamente contenuta all'interno della tag Header.

Chiusa la tag Header con il codice di chiusura ``/header``, abbiamo aperto una tag Div con la tag 
``div id="content"``, dandogli un identificativo con il nome content. Ripeto che l'identificativo 
sarebbe il nome proprio della tag Div. Notate di fianco alla tag Div, un commento. Ricordate, 
specialmente in presenza di tag Div, inserite sempre dei commenti sia all'apertura, sia alla 
chiusura, perch se riprendete il lavoro, anche se fosse per apportare una qualche modifica, 
serviranno a ricordare per quale motivo avete previsto quella tag.

Intestazione di secondo livello e poi i contenuti della Home Page.

Chiusura della tag Div content, con il codice ``/div``, con un commento.

Apertura della Tag Footer con il codice ``Footer``.

Un paragrafo nel quale ho inserito dei contenuti fittizi del pi di pagina e che poi sostituiremo 
con quelli veri.

Una tag Smal con codice ``small`` contenuto Smal ``/small`` che Scrive il carattere di dimensioni 
ridotte e si usa, quasi sempre, per il copyright e per le cose che non si vogliono far risaltare 
troppo.

Chiusura tag Footer con il codice ``/footer``

Ovviamente, come indicato gi sopra, tutte queste Tag devono essere contenute tra l'apertura della 
tag Body, con il codice ``body``, e la sua chiusura con il codice ``/body``.

Ho inserito anche dei paragrafi con i codici ``p`` contenuto paragrafo ``/p`` solo  per dare delle 
indicazioni quando si apre la index.html con il browser.

Vi spiego subito cos' la tag paragrafo, anche se poi la vedremo meglio successivamente.

``p`` Qui inseriremo del testo. ``/p`` Potete notare che  molto semplice.

Ecco spiegato come si compone la tag di apertura del paragrafo: segno minore, lettera p, segno 
maggiore.

Ecco spiegato come si compone la tag di chiusura del paragrafo: segno minore, la barra con shift 
pi 7, lettera p, segno maggiore.

Nota importante: anche se l'Html 5 non crea differenze tra maiuscole e minuscole, la lettera p di 
questa tag, ma in genere tutto il testo delle tag, deve sempre essere minuscolo, altrimenti  il 
validatore del W3C ci dar un messaggio di errore per ogni volta che inseriamo una maiuscola.

Vi rimando alla prossima parte, Nella quale inizieremo a vedere i seguenti elementi: le 
Intestazioni, i Link, le liste e creeremo il nostro menu principale per la navigazione del sito.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_

