Corso html 5. Di Roberto Abutzu. *********** 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_