(Corrado Del Buono)
Il livello DIV#INTESTAZIONE accoglierà il nome, la descrizione, l’indirizzo ed eventualmente altre informazioni (certificato di qualità, telefono, contatti, …) relativi all’istituto; per differenziare il testo utilizzeremo il tag H1 per il nome, il tag H2 per la descrizione e il tag ADDRESS per le altre informazioni, i cui parametri sono stati assegnati all’interno del foglio di stile.
Da notare che le istruzioni relative ai titoli (H1 e H2), costruite anteponendo il nome del livello al tag, sono valide esclusivamente se compare, nella pagina web, un tag H1 o H2 all’interno del DIV#INTESTAZIONE; questo piccolo accorgimento consente di formattare diversamente i titoli H1 e H2 che saranno utilizzati nel DIV#CONTENUTI della pagina web.
I contenuti del DIV#INTESTAZIONE sono i primi ad essere letti dai software vocali utilizzati dagli ipovedenti in quanto il livello è utilizzato immediatamente dopo il tag BODY; per evitare che tali software leggano sempre l’intestazione in ogni pagina visitata del sito, è stato posizionato un link prima del tag H1, che consente di saltare l’intestazione e di passare direttamente ai contenuti della pagina.
Nella pagina web, all’interno del DIV#INTESTAZIONE, utilizzeremo, quindi, la seguente struttura:
<body>
<div id=”intestazione”>
<p><a href="#contenuti" title="Vai ai contenuti della pagina" accesskey="p">Vai ai contenuti della pagina [P]</a></p>
<H1>Nome della scuola</H1>
<H2>Descrizione del tipo di scuola, ad esempio, Istituto di Istruzione Superiore</H2>
<ADDRESS>Indirizzo e Città</ADDRESS>
<ADDRESS>Telefono, Fax, Mail</ADDRESS>
</div>
<div id=”sinistra”></div>
<div id=”contenuti”></div>
</body>
Il menu di una pagina web deve assumere la struttura di un elenco puntato, in quanto è costituito, di fatto, un elenco di voci. La sua struttura, quindi, è la seguente:
<li>voce uno</li>
<li>voce due</li>
…
</ul>
Il tag UL rappresenta il contenitore dell’elenco, mentre i tag LI rappresentano le singole voci dell’elenco.
Le singole voci del menu indirizzano verso altre pagine web del sito e quindi sono, di fatto, dei collegamenti ipertestuali; questi ultimi si costruiscono all’interno del tag A e, per essere accessibili, devono essere integrate da alcune informazioni per l’utente, ovvero dei tag TITLE e ACCESSKEY che illustrano la descrizione del link e le modalità di accesso da tastiera, in alternativa al mouse.
Se vogliamo creare un collegamento ipertestuale verso un’altra pagina web (supponiamo, corsi.htm) ed assegnare ad essa il tasto di accesso rapido “c”, dobbiamo utilizzare il seguente codice (all’interno del tag LI del menu):
Abbiamo detto in precedenza che il menu dovrà essere collocato all’interno del DIV#SINISTRA; per personalizzare la sua formattazione e posizione (ad esempio, creare dei pulsanti opportunamente distanziati tra di loro) occorre creare un nuovo livello (nell’esempio proposto, il livello si chiama #MENU) nel quale inserire l’elenco puntato e modificare le sue caratteristiche all’interno del foglio di stile CSS.
Pertanto, il codice da utilizzare all’interno del DIV#SINISTRA della pagina web sarà:
<div id=”menu”>
<ul>
<li><a href="index.htm" title="Home page" accesskey="h">HOME [h]</a></li>
<li><a href="corsi.htm" title="Corsi di studio" accesskey="c">Corsi [c]</a></li>
<li>…</li>
</ul>
</div>
</div>
©2009 - E' vietata la riproduzione, anche parziale, di questo editoriale.
Web MASTER & DESIGNER Corrado Del Buono
© 2009 - Tutti i diritti riservati - CONTATTI