![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 7
Scarica il file menu.htm e leggi il codice corrispondente, soffermandoti, in particolare, nella parte di codice riferita al menu principale.
<div id="menu">
<a href="#" accesskey="1" title="archivio appuntamenti e news">bacheca</a> (1) |
<a href="#" accesskey="2" title="genitori a scuola, calendario delle riunioni e delle scadenze">genitori</a> (2) |
<a href="#" accesskey="3" title="spazio riservato ai docenti e ai loro materiali a disposizione delle classi">docenti</a> (3) |
<a href="#" accesskey="4" title="documentazione ufficiale, circolari, il piano dell'attività formativa, la storia della scuola ">materiali</a> (4) | <a href="#" accesskey="5" title="la scuola e il terriotrio: attività, eventi e progetti">territorio</a> (5)
</div>
Il menu principale è inserito all'interno del box #menu ed è costituito da cinque voci, bacheca – genitori – docenti – materiali - territorio.
Mi limito a commentare il codice della prima voce, dato che le considerazioni sono ovviamente estensibili alle altre.
La voce 'bacheca' è origine di link; il valore dell'attributo href (pagina destinazione del link), lasciato provvisariamente come # in modo da consentire la prova del suo funzionamento, deve essere naturalmente sostituito con il percorso del file corretto.
All'interno del tag <a> compare l'attributo accesskey, che consente l'attivazione dei link tramite tastiera. Per i valori da attribuire si consiglia di partire da quelli numerici (da 0 a 9), in modo da evitare possibili conflitti con le scorciatoie di tastiera proprie dei vari browser.
Un attributo importante è il title, che risulta utile per chiarire meglio il significato, o il contenuto, del link. Consiglio di utilizzarlo soprattutto nei menu, in quanto in questi casi l'informazione può essere molto d'aiuto a chi utilizza programmi di sintesi vocale. Nel contempo, è opportuno non utilizzarlo in combinazione dell'attributo alt (nelle immagini) e nei casi in cui il link è autoesplicativo.
All'esterno del link, è stato indicato (tra parantesi e dopo uno spazio) il numero corrispondente al valore dell'accesskey. E' possibile spostarlo all'interno del tag <a>...</a>, ottenendo l'estensione dell'area cliccabile.
Un'ultima considerazione. Le voci del menu sono separate dal carattere |. E’ un elemento che viene introdotto in caso di link contigui, per evitare il rischio di confusione tra i link a chi fa uso di sintesi vocali. In questo caso non è indispensabile, in quanto i link sono già separati tra di loro con il numero dell'accesskey, ma credo che comunque ne guadagni la leggibilità del menu.
