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`_