In questa guida affronteremo il linguaggio XHTML (extensible HTML), sottolineandone le
specifiche e le differenze dall'HTML tradizionale.
E' pertanto necessaria una minima conoscenza di HTML.
Sono corredati alla guida dei tutorial pratici, con l'obiettivo di proporre alcuni spunti di
applicazione del linguaggio.
XHTML è l'acronimo di Extensible HyperText Markup Language e si tratta di una estensione del
linguaggio HTML.
Come percettibile dal nome, XHTML si pone come obiettivo quello di estendere HTML a tutte i
dispositivi utilizzabili per la consultazione dei siti web, tramite la tecnologia XML.
E' spettacolare l'avvento di XML negli ultimi anni: esso ha permesso la creazione di linguaggi
estensibili, quali XHTML, XMLDOM, ecc e di linguaggi di distribuzione semplice, come RSS.
La distribuzione delle informazioni in formato RSS, caratterizzato da una struttura semplice e
facilmente riutilizzabile, sta diventando un fenomeno sempre più comune nel web, e sono
sempre di più i siti che mettono a disposizione i loro contenuti in questo formato.
XHTML non è da intendersi come un linguaggio in sostituzione del tradizionale HTML, bensì
come uno strumento per la correzione di alcuni difetti di HTML, per la standardizzazione dello
stesso.
Come vedremo nelle lezioni successive, XHTML non propone una nuova sintassi, bensì
presenta la struttura di HTML con alcune correzioni.
Scrivere codice XHTML valido presenta quindi molteplici vantaggi, fra cui una maggiore
visibilità da parte di qualsiasi dispositivo.
Nelle prossime lezioni vedremo HTML e XHTML a confronto.
Il confronto tra i due linguaggi deve partire innanzitutto dall'analisi della struttura portante
della pagina web.
Il documento HTML si compone in questo modo:
<html>
<head>
<title>Pagina HTML </title>
</head>
<body>
Qui il codice del corpo.
</body>
</html>
Mentre il documento XHTML ha una composizione leggermente diversa:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>Pagina XHTML </title>
</head>
<body>
Qui il codice del corpo.
</body>
</html>
Da notare il fatto che all'inizio di dichiari tramite un !DOCTYPE che il documento è scritto in
XHTML secondo gli standard W3C.
Questo non implica comunque la validità del codice inserito.
Si indica solo che il documento deve essere interpretato come XHTML.
Quindi, la riga sotto si dichiara un Namespace XML (xmlns) e la lingua del documento, in
questo caso l'italiano.
Scendiamo di poche righe e troviamo un TAG, che dovrebbe essere presente anche nei
documenti HTML, ma che spesso viene omesso, che indica la certificazione ISO dei documenti
HTML.
In poche parole quindi un documento XHTML necessita di tre informazioni in più nella struttura
base:
- !DOCTYPE che ne specifichi la decifratura
- Namespace XML
- Certificazione ISO.
Un'altro aspetto da notare di XHTML è la conformazione sintattica della scrittura dei TAGs.
Con HTML 4.01 i TAGs possono essere scritti in maiuscolo o minuscolo, poichè vengono
interpretati senza problemi.
XHTML pone invece una scrittura univoca, standard, ossia il minuscolo.
I TAGs vanno rigorosamente in minuscolo altrimenti si rischia che non vengano interpretati.
Ecco un esempio.
HTML 4.01:
<html> - VALIDO
<HTML> - VALIDO
XHTML:
<html> - VALIDO
<HTML> - NON VALIDO
Nella prossima lezione vedremo i !DOCTYPE disponibili per XHTML, ossia le diverse
interpretazioni del documento XHTML.
Abbiamo visto nella lezione precedente come sia necessario impostare un DOCTYPE nel
documento XHTML.
Questo TAG definisce il tipo di XHTML utilizzato nel documento, e quindi a quali standard
corrisponda.
Esistono tre tipologie di !DOCTYPE:
STRICT
Come intuibile dal nome, esso etichetta un documento di struttura semplice, chiusa, rigida.
Non permette infatti definizioni CSS di colori, fonts, ecc. all'interno della pagina, ossia non
posso scrivere
....
<html>
<head>
<style type="text/css" />
body {
...
}
</style>
Possono comunque essere caricate informazioni CSS da un foglio esterno.
TRANSITIONAL
In poche parole ammette la dichiarazione di elementi di stile all'interno della pagina, anche se
è vantaggioso in termini di accessibilità dichiarare le informazioni di stile in file esterni.
FRAMESET
Indicato per documenti che utilizzano strutture a FRAMES (Frameset) o che presentano al loro
interno un iFRAME.
Scrittura
Ecco quindi come dovremo scrivere ciascun DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Nella prossima lezione vedremo alcune differenze nella sintassi dei TAGs del corpo della
pagina.
In questa lezione vedremo il comportamento dei tags del corpo della pagina nel linguaggio
XHTML.
E' comunque doveroso spendere qualche parola riguardo al fatto che XHTML presenta una
suddivisione dei TAGs in moduli.
Nella lezione precedente ci siamo occupati del Structure Module, ossia dei TAGs che
definiscono la struttura base, portante di un documento XHTML, quali html, head, body, ecc.
Esistono altri tre moduli:
- Text Module (elementi testuali della pagina)
- Hypertext Module (elementi di collegamento della pagina)
- List Module (elementi per la definizione delle liste)
Si tratta di una distinzione a livello puramente didattico.
Gestione dei tags
I Tags HTML si suddividono in chiusi e vuoti.
Un esempio di TAG chiuso:
<div>Ciao ciao</div>
Un esempio di TAG vuoto:
<img src="pippo.gif">
XHTML non prevede la presenza di TAGS vuoti, ma, non potendo gestirne la chiusura con
"</img>", si aggiunge una "/" prima della chiusura del TAG, ottenendo questo risultato:
<img src="pippo.gif" />
Rispettano questi criteri tutti i TAGS che non presentano chiusura.
Gestione degli attributi
Così come esistono TAGs vuoti, esistono attributi vuoti.
Ecco un esempio di attributo pieno:
<img src="..." />
e uno di attributo vuoto o non dichiarato:
<frame noresize>
Bisognerà quindi dichiarare gli attributi vuoti in questo modo:
<frame noresize="true">
con valori TRUE o FALSE.
Nella prossima lezione vedremo nel dettaglio la gestione dei TAGs di un FORM.
I criteri dichiarati in questa lezione sono universali, ossia valgono per qualsiasi TAG.
XHTML ha portato cambiamenti sintattici anche nei TAGs che compongono un FORM, e in
particolare, sottolineeremo due aspetti.
Inserire l'ID del tag
Risulta obbligatorio secondo le specifiche XHTML inserire l'ID in un TAG componenente il form,
che deve essere univoco nel documento, quindi non possono essere presenti due tags con lo
stesso ID.
Al contrario possono essere presenti due tags con lo stesso NAME.
Quindi il tag di apertura di un form e gli input compresi nel gruppo FORM devono rispettare
questa regola.
Elementi vuoti nel form
Riprendiamo quanto detto in precedenza riguardo gli attributi vuoti, che anche nei tags di un
form devono essere dichiarati.
Questi attributi sono principalmente CHECKED negli INPUT di tipo RADIO e SELECTED nelle
OPTION, che devono essere settati a TRUE o FALSE.
Per validare il codice XHTML della propria pagina, Il W3C (World Wide Web Consortium) mette
a disposizione un servizio gratuito che tramite la digitazione del URL della pagina o l'UPLOAD
del file, consente di verificare la correttezza dei documenti e segnala eventuali errori, di modo
che sia possibile correggerli.
A questo link potrete raggiungere la risorsa:
http://validator.w3.org
E' comunque presente un'ampia documentazione sul linguaggio XHTML al sito
http://www.w3.org.
In questo tutorial vedremo come realizzare un sito TABLELESS, ossia un sito senza l'utilizzo del
TAG TABLE.
Per capire ciò che intendiamo realizzare cliccate qui.
Il sito a questo link contiene codice XHTML e CSS che rispetta gli standard W3C e quindi ha
visibilità garantita da tutti i browser.
La struttura del sito può sembrare in apparenza a tabelle, ma guardando il codice è possibile
vedere come siano stati usati dei DIV disposti in maniera particolare, con un bordo di 1px tali
da formare un layout a 2 colonne e header.
Il layout in questione è probabilmente il più utilizzato dai webmaster poichè consente una
navigazione eccellente e pratica.
Il vantaggio dell'utilizzo dei DIV al posto di una struttura con i classici TAGs <table>, ecc sta
nel fatto che la pagina è accessibile e consente una navigazione migliore da parte di tutti i
browser.
L'impaginazione a tabelle è scorretta e tipica di alcuni anni fa quando il linguaggio CSS era al
suo stadio primordiale o ancora non esisteva.
Come è visibile dal codice della pagina in questione, si ha un DIV #testata con margine di 5px
sia a destra sia a sinistra, poi un DIV #destra con margine 5px da destra e dall'alto e 170 da
sinistra. Ma perchè 170 da sinistra?
Questo margine serve a creare uno spazio in cui porre il DIV #sinistra, che conterrà il menu.
Il DIV #sinistra avrà di particolare position:absolute che gli consente di essere posizionato in
qualsiasi punto della pagina anche sopra al testo.
Combinando distanze dai margini e larghezza dei DIV, si può ottenere facilmente una struttura
accessibile.
Abbiamo poi aggiunto nella pagina la possibilità di ingrandire il carattere del testo del DIV
#destra.
Ecco il codice:
<div align="right">
<a href="#" onclick="document.getElementById('destra').style.fontSize='12px';return
false;">12px</a>
<a href="#" onclick="document.getElementById('destra').style.fontSize='14px';return
false;">14px</a>
<a href="#" onclick="document.getElementById('destra').style.fontSize='16px'; return
false;">16px</a>
</div>
Esso è stato presentato in un tutorial da Michele Sassi e lo utilizzo in questo tutorial
semplicemente per mostrarvi un esempio di script per il "font-resize".
I siti a lungo caricamento non interessano a nessuno
Come da titolo, possiamo affermare che un veloce caricamento della pagina è importantissimo
in un sito web.
E' quindi consigliato evitare filmati WMA inseriti nella pagina, che l'utente impiegherebbe molto
a visualizzare. Optate piuttosto per animazioni Flash. Alla stessa maniera è sconsigliato
realizzare un layout tapezzato di immagini da 1 MB ciascuna.. I visitatori scapperebbero
impauriti.
L'ideale è una struttura grafica semplice, accogliente e VELOCE. Si sa infatti che la grafica
impressiona i visitatori fino ad un certo punto, poi tocca ai contenuti.
CSS
In questo tutorial vedremo come realizzare un menu a schede con i CSS.
Si tratta sicuramente di una tipologia di menu elegante ed interessante.
Probabilmente molti non lo crederanno, ma non utilizzeremo immagini o codici complessi. Solo
ed esclusivamente codice XHTML e CSS.
Supponiamo di avere un sito a cinque pagine, ed ecco il codice CSS da inserire nelle pagine:
<style type="text/css">
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448;
}
#navlist li a:visited { color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#corrente {
background: white;
border-bottom: 1px solid white;
}
</style>
Da notare di questo codice come si lavori sui bordi dei DIV: vi è un contenitore globale con un
bordo inferiore, e la voce del menu che corrisponde alla pagina corrente viene presentata
senza bordo.
Quindi inseriamo nella prima pagina questo codice:
<div align="center">&nbsp;</div>
<div id="contenitoremenu">
<ul id="navlist">
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
<li><a href="#">pagina due</a></li>
<li><a href="#">pagina tre</a></li>
<li><a href="#">pagina quattro</a></li>
<li><a href="#">pagina cinque</a></li>
</ul>
</div>
Da notare di questo codice la riga
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
che imposta come link corrente quello alla pagina 1, ossia presenta in modo diverso il link della
pagina corrente.
Dovrete quindi impostarlo diversamente a seconda della pagina.
A voi il compito di personalizzare il set di colori.
Possiamo personalizzare questo codice in diverse maniere, aggiungendo effetti al nostro menu.
