vai al menu sezioni pagina

'Struttura' dal sito 4elementi.info ~ accessolibero

sei su: Home [0] > Creiamo? > Struttura


Contenuti

primo stadio veduta di piani alti di case a Siniscolasecondo stadio veduta di piani alti di case a Siniscola

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


Pensiamo la nostra pagina web come una sequenza di settori rettangolari orizzontali.
Il tag <div> ha in effetti questa funzione, creare sezioni impilate in blocco, e può essere utilizzato al meglio collegato alle classi o agli 'id' del Foglio di stile.

Così posso creare una sezione in cui il testo sia nero su sfondo bianco e una col testo nero su sfondo bianco:
potrò definire una classe 'sfondobianco' in cui l'attributo background-color sia impostato a #ffffff (bianco) e il colore del testo a nero (color:#000000).
E un'altra che chiamerò 'sfondonero' in cui il testo sia bianco su sfondo nero (background-color:#000000; color:#ffffff).
Poi creerò due blocchi di testo inseriti tra i rispettivi tag 'div', il primo definito come <div class="sfondobianco">, il secondo come <div class="sfondonero"> e li riempirò di testo.

Ma importante è decidere come sia distribuito il contenuto, sempre tenendo a mente che la visualizzazione di base non tiene conto della veste grafica, che viene applicata dopo.
Quindi inserirò un'intestazione, e utilizzerò il tag <h1>, non importa se visibile o meno.
Poi a seguire una sezione menu (forse due menu se il sito è multilingue), una sezione contenuti e una sezione a piè di pagina dove potrò inserire informazioni come il copyright, il webmaster con il suo contatto, altre note.

Le sezioni seguenti saranno contrassegnate da un'intestazione <h2>, visibile o invisibile, ad esempio se l'intestazione principale contrassegnata dal tag <h1> è 'Il sito di Francesco', le sottosezioni contrassegnate da <h2> potranno essere:

inizio elenco sottosezioni h2 di una pagina web: 3 voci
  1. La casa;
  2. La famiglia;
  3. Il mio lavoro.

Le sezioni contrassegnate da un'intestazione <h3>, ad esempio le sottosezioni della sezione La casa potrebbero essere:

inizio elenco sottosezioni h2 di una pagina web: 3 voci
  1. La casa inizio elenco sottosezioni h3 di una pagina web: 3 voci
    1. Il mio studio;
    2. La mia terrazza;
    3. Il mio giardino.
    fine elenco sottosezioni h3 di una pagina web

... sarebbe più realistico se Francesco avesse una villa ...

All'interno di ogni sezione (i blocchi di testo racchiusi tra i tag <div>), sotto l'intestazione (h1, h2, h3) il testo dovrebbe essere preferibilmente contenuto in paragrafi, i tag <p>.
La nostra pagina web segue gli schemi dell'editoria classica.
Può poi contenere immagini, richiamate all'interno del tag <img>, io preferisco contenere anche questi all'interno di un tag <p>.

Le sezioni possono essere separate da una riga, quella che si crea con il marcatore <hr>.
Attenzione a non usare i separatori immagine. Chi utilizza il lettore vocale viene avvertito che c'è una separazione se il codice contiene una riga, ma può non pensare a una separazione di sezioni se si sente descrivere un'immagine in un dato punto della pagina.

Il nostro sito, oltre che fondamentalmente accessibile, nasce come semantico, in quanto utilizza adeguatamente i marcatori del linguaggio Html.
Perchè l'accessibilità non ci sfugga, dobbiamo fare un bel ripasso e utilizzare adeguatamente TUTTE le specifiche del linguaggio Html, come un tempo...

Ripassiamo allora le liste, ricordandoci che quando enunciamo delle voci in sequenza dobbiamo vederle ~ nell'ottica di chi fruisce il sito con tecnologie che interpretano il codice ~ come Elenchi (ordinati e non) o Liste di descrizione.
Puoi trovare uno schema sintetico delle Liste a questo indirizzo http://www.webfract.it/GUIDA/Liste.htm.

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