![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 3
Scarica il file testata.htm e leggi il codice html corrispondente.
La prima parte di codice che deve essere presente è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
La Dichiarazione del Doctype è essenziale per produrre documenti xhtml strict validi. E' possibile copiare ed incollare il codice nelle prime righe del documento html che si sta creando.
La specificazione della lingua utilizzata (xml:lang="it" lang="it"), come attributo del tag <html>, è necessaria per specificare ai programmi di sintesi vocali il linguaggio usato. Nel caso di termini stranieri all'interno del contenuto, è necessario segnalare il cambio di lingua (es. <span xml:lang="en">book</span>.
Seguendo nel codice, si trova:
<head>
<title>Scuola Aperta, Lombardia </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="scuola, elementare, innovazione scolastica, Lombardia, disegni, creatività, bambini, bambine, docenti, studenti, genitori, accessibilità, pof" />
<meta name="Description" content="sito ufficiale di Scuola Aperta, via Porte Aperte sul Web, 11. Contiene informazioni di vita
scolastica e soprattutto tanti lavori e tante idee per fare scuola senza chiudersi agli altri." />
<style type="text/css">
<!--
@import url(../../strict/testata.css);
-->
</style>
</head>
Nella sezione <head> troviamo per prima cosa l'indicazione del title. E' importante inserirlo ed utilizzare un testo significativo della pagina a cui si riferisce. In questo caso è consigliabile riportare il nome della scuola.
Questo permetterà un duplice vantaggio: un aiuto a chi naviga con i sintetizzatori vocali, per capire subito in che pagina web sono entrati, e una buona indicizzazione della pagina nei motori di ricerca. A tal fine è consigliabile anche inserire i metatag relativi alle parole chiave ed alla descrizione del sito, utilizzando un numero limitato di termini, scelti tra quelli più significativi.
Il codice che precede </head> (la chiusura del tag) indica al browser che il file richiama un Foglio di Stile esterno importato, ove sono inserite tutte le informazioni di presentazione.
La scelta di importare, invece che di collegare, il Foglio di Stile, è dettata dall'esigenza di permettere una visualizzazione accettabile anche da parte dei browser, tipo Netscape 4.5, che gestiscono male i css.
Il codice prosegue con l’inizio del body:
<body>
<div id="testata">
<div id="logo"> <img src="images/scuolalog.gif" alt="Scuola Aperta [logo]" width="151" height="104" />
<span class="scuola">Scuola Aperta</span><br />via Porte Aperte sul Web, 11 - Lombardia
</div>
<div id="agg">ultimo aggiornamento <strong>10 maggio 2004</strong>
</div>
</div>
</body>
</html>
La testata della pagina è costituita da un contenitore (#testata), al cui interno sono posizionati due blocchi: #logo, che contiene il logo con accanto il nome e l'indirizzo della scuola, e #agg, con la data dell'ultimo aggiornamento.
