![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 17
Scarica il file ritocco.htm e leggi il codice corrispondente.
Ci riferiamo, ora, alla parte di codice relativa al box #destra, che precede la scrittura <div id="footer">.
Considerate la natura didattica del sito e la necessità di ravvivare alcuni contenuti, si è pensato di aggiungere qualche elemento grafico nella parte libera della colonna di destra.
In questa pagina si propone di mettere in evidenza un disegno dei bambini e l'adesione della scuola al Progetto Porte Aperte sul Web.
<div class="disegno">
<img src="images/maggio.jpg" alt="il disegno del mese: maggio disegnato dai bambini di IIA"
width="150" height="107" />
</div>
Il div associato alla classe 'disegno' ha la funzione di ospitare il disegno del mese, il quale naturalmente richiede un ALT rappresentativo della sua funzione nel documento. Si consiglia di scrivere come testo alternativo la frase "il disegno del mese", che qualifica il ruolo della sezione. E' possibile, poi, aggiungere il titolo e l'autore dell'opera.
Può essere inoltre importante valorizzare la valenza didattica della descrizione del disegno da parte del suo autore; in questo caso, conviene aggiungere una descrizione lunga in una pagina a parte, utilizzando l'attributo longdesc, abbinato al relativo link (per un esempio, confronta l'home page di questo sito).
<p class="porte">Con il paragrafo associato alla classe 'porte' si inserisce il testo di adesione della scuola al Progetto Porte Aperte sul Web, seguito dall'immagine del logo del progetto stesso, alla cui home page si accede tramite link.
Scuola Aperta<br />
aderisce al Progetto<br />
Porte Aperte sul Web<br />
<a href="http://www.porteapertesulweb.it"><img src="images/logopa120.gif"
alt="link al sito esterno di Porte Aperte sul Web [logo]" width="120" height="31"
/></a>
</p>
Si ricorda che, nel caso il link parta da un'immagine, non si devono inserire contemporanemente gli attributi ALT (dell'immagine) e TITLE (del link), ma condensare le due informazioni all'interno del solo attributo ALT.
