vai al menu sezioni pagina

'Esempio' dal sito 4elementi.info ~ accessolibero

sei su: Home [0] > Creiamo? > Esempio di struttura


Contenuti

primo stadio figure danzanti senza volto, particolare di muralesecondo stadio figure danzanti senza volto, particolare di murale

menu di navigazione [2] ~ contenuti [3] ~ menu lingua [7]


Creiamo una semplice pagina web con tre sezioni: un'intestazione, una sezione contenuti, una sezione piè di pagina.

Teniamo a mente che stiamo costruendo una pagina la cui leggibilità prescinde dallo stile grafico, che poi potremo apporre.

Nella sezione <body> del documento inserirò tre tag <div>, che potrò nominare:

inizio elenco dei nomi delle sezioni del documento di esempio: 3 voci
  • Intestazione
  • Contenuti
  • Note
fine elenco dei nomi delle sezioni del documento di esempio

Il browser leggera in sequenza i <div> come blocchi di testo nell'ordine in cui li abbiamo inseriti.
Possiamo iniziare a riempirli di contenuti.

Cominciamo a contrassegnare ogni blocco di contenuti con una riga di intestazione:

Per la sezione 'Intestazione'
Una descrizione della sezione tra tag <h1> (ad esempio, "Titolo")
Per la sezione 'Contenuti'
Una descrizione della sezione tra tag <h2> (ad esempio, "Programma")
Per la sezione 'Note'
Una descrizione della sezione tra tag <h3> (ad esempio, "Copyright e Contatto con il webmaster")

Ora inseriamo i contenuti utilizzando i tag <p> e le Liste (<ul>, <ol>, <dl>, <dt> e <dd> secondo il contesto).
La sezione contenuti potrebbe contenere un messaggio di benvenuto tra tag <p> e una lista di rappresentazioni in una Lista di definizioni.

La immagino così:

Benvenuti alla stagione operistica 2009~2010 del Teatro I Musici

(questa frase la racchiuderei tra i tag <p>)

Creiamo ora un programma:

inizio elenco delle serate della stagione teatrale 2009: 4 voci
  • Giacomo Puccini, Tosca, 9, 10 e 12 settembre 2009
  • Giuseppe Verdi, Aida, 14, 16 e 18 novembre 2009
  • Vincenzo Bellini, Norma, 4, 7 e 21 dicembre 2009
  • Gaetano Donizetti, Roberto Devereux, 9, 10 e 12 marzo 2010
fine elenco delle serate della stagione teatrale 2009

(questo è un elenco strutturato come Lista non ordinata, il tag <ul>).

L'organico della compagnia teatrale:

inizio elenco descrittivo della Compagnia teatrale: 1 voce con 7 definizioni
Orchestra e Coro della Compagnia stabile del Teatro I Musici
Soprani Anna Gaudio, Lena Fiore
Mezzosoprani Lara Salici, Jenny Monti
Contralto Denise Carli Valenti
Tenori Canio Marenghi, Giulio Galli
Baritoni Lino Furli, Ino Masori
Bassi John Woodstock, Antonio Mari
Direttore Loris Martelli
fine elenco descrittivo della Compagnia teatrale

(questo elenco è stilato come Lista di descrizione, racchiuso tra tag <dl>: l'unica voce è racchiusa tra tag <dt> e le descrizioni tra tag <dd>).

I blocchi di testo possono essere separati da una riga orizzontale, quella che il browser crea quanto legge il tag 'hr': questo accorgimento migliora la leggibilità, soprattutto se viene disabilitato il Css (Foglio di stile).

All'interno del terzo blocco creato con i tag <div>, quello destinato alle note a piè di pagina, inseriamo pure il nostro nome come webmaster e ~ se proprio vogliaaaamo ~ le note del Copyright.

Andiamo a vedere il risultato?

Ancora la pagina non è del tutto accessibile, e se mi segui vedremo perchè, e non è neppure formattata con lo stile, ma questo è il bello della diretta... seguimi...

vai al menu sezioni pagina

Certificati di accessibilità e contatto con il webmaster

webmaster: dalziani [6]

xhtml valido

css valido

vai al menu sezioni pagina

Menu di navigazione

vai al menu sezioni pagina

Menu di scelta della lingua

vai al menu sezioni pagina
fine documento