home page con xhtml strict

Lezione 11 - Il contenuto principale

Il codice xhtml commentato

Scarica il file contenuto.htm e leggi il codice corrispondente, soffermandoti, in particolare, nella parte di codice riferita al contenuto centrale (quella interna ai tag <div id="contenuto> e </div>).

<div class="notizia">
<h1>Notizia della settimana</h1>
<p class="testonotizia"><img src="images/gaddaneve120.jpg" alt="la scuola sotto la nevicata" width="120" height="90" />(...)</p>
</div>
<div class="notizia">
<h1>Appuntamenti</h1>
<p class="testonotizia"><img src="images/dis1.jpg" alt="disegno con due bambini, un cane e un gatto" width="120" height="67" /><strong>Gioved&igrave; 20 maggio</strong></p>
<p class="testonotn">(...)</p>

<p class="testonotizia"><img src="images/logopa.gif" alt="Porte Aperte sul Web [logo]" width="233" height="60" />
<strong>Marted&igrave; 18 maggio</strong></p>
<p class="testonotizia">Il Gruppo di <a href="http://www.porteapertesulweb.it" title="link al sito esterno di Porte Aperte sul Web: tutorial, consigli ed indicazioni per costruire siti scolastici accessibili">Porte Aperte sul Web</a>(...)</p>
</div>
(...)

Come si può vedere, per applicare la formattazione (con le caratteristiche definite nel foglio di stile), non è stato qui utilizzato –come in precedenza- il selettore id, in quanto quest'ultimo viene utilizzato per definire una sezione in modo univoco.
Ogni selettore id del foglio di stile, cioè, può essere richiamato solo una volta nella pagina html e collegato quindi solo ad un elemento, con una relazione, appunto, univoca. In altri casi, come in questo relativo alle notizie di contenuto, si utilizza il selettore class. Con questo selettore, nel foglio di stile, si possono definire caratteristiche di formattazione che possono poi essere ripetute e applicate più volte, a più elementi di contenuto, nella pagina html.
Nel caso in cui la sezione debba essere ripetuta è quindi necessario definire una classe nel foglio di stile.

All'interno del contenitore notizia troviamo un titolo (tag <h1>) e un paragrafo (tag <p>, (associato alla classe .testonotizia), a sua volta contenente, in alcuni casi, un'immagine.

Questa struttura si ripresenta invariata negli altri blocchi, ad eccezione di quello relativo agli 'Appuntamenti'. In questo caso, come si vedrà meglio con l'analisi del Foglio di Stile, la presenza di più notizie all'interno dello stesso contenitore (Appuntamenti) ci ha indotto ad introdurre un'ulteriore classe (.testotn) per migliorare l'aspetto grafico.

I link esterni con xhtml strict

Nella pagina contenuto.htm è presente un link ad un sito esterno: <a href="http://www.porteapertesulweb.it" title="link al sito esterno di Porte Aperte
sul Web:...">Porte Aperte sul Web</a>.
È importante sottolineare che con xhtml strict è vietato utilizzare l'attributo target, ad esempio per aprire, con target="_blank", i link su finestra indipendente.

La gestione dei testi

Un lavoro da cui non si può prescindere è quello relativo alla cura e alla gestione dei testi, sia a livello di scrittura, sia a livello di struttura gerarchica, che devono essere destinati alla pubblicazione sul web.
Il web è un mezzo di comunicazione con precise e peculiari caratteristiche, che vanno tenute presenti quando ci si appresta a predisporre dei testi per la pubblicazione on line.

Le problematiche legate alla scrittura del web sono affrontate in una specifica sezione di questo sito, curata da Cristina Cuppi, e, in modo ancora più approfondito e completo, in alcuni siti professionali di riferimento.

Tra questi, citiamo www.mestierediscrivere.com, curato da Luisa Carrada, e www.comuniconline.it, curato da Alessandro Lucchini e Claudio Maffei.
In questa occasione ci limitiamo a sottolineare come la scrittura per il web, così come l'attenzione ad individuare testi sostitutivi (ALT) adatti per descrivere le funzioni delle immagini, possa costituire spunto per interessanti percorsi didattici in grado di coinvolgere gli studenti di ogni ordine e grado.

La questione della struttura dei testi chiama in causa l'utilizzo dei tag predefiniti” per i titoli <h1>, <h2>, <h3>, ..., che permettono di definire la struttura gerarchica di un documento, favorendo, tra l'altro, lo scorrimento del contenuto secondo livelli di profondità (titolo1, titolo2, paragrafo, ecc.). .
Ricordando che in xhtml strict è vietato utilizzare il tag <font> per definire gli attributi di un testo, è comunque sconsigliabile l'uso di classi css laddove si può ottenere lo stesso effetto definendo lo stile dei tag <h1>, <h2>, <h3>, ..., valorizzando, in questo modo, la valenza strutturale del titolo.

lezione precedente - sommario - lezione successiva