Corso HTML e CSS (lezione 2)

Impariamo a costruire un sito Web

Lezione 2: La struttura HTML: I Document Types

Come abbiamo detto alla precedente lezione lo standard HTML non è poi così univoco come si potrebbe pensare. La prima cosa che si deve decidere quando ci si accinge a costruire un sito web in HTML è proprio cosa si vuol utilizzare, HTML o XHTML? E quale DTD (Document Type Description)?

Niente paura. Vediamo le differenze, scegliamo e poi dimentichiamoci pure tutto (o quasi :-)).

L’HTML è il linguaggio storico definito dal W3C, il World Wide Web Consortium che è l’organismo internazionale adibito per l’appunto alla definizione di questi standard. L’ultima versione comunemente accettata ed acquisita da tutti i browser in circolazione è la 4.01. Attualmente è in corso avanzato di definzione la versione 5 che introduce delle novità sensibili ed anche alquanto attraenti, ma purtroppo è supportata sinora solo dalle ultime versioni di pochi browser e non tutti nello stesso modo. Per di più bisogna fare i conti con le versioni dei browser utilizzati da molti utenti di Internet. La maggior parte non ci pensa neppure ad aggiornare il browser e la conseguenza di un utilizzo dell’HTML5 sarebbe che molti utenti non potrebbero vedere il sito correttamente. Questo è esttamente il contrario di quello che si vuole quando si realizza un sito internet. Quindi dimentichiamo l’ HTML5.

L’ XHTML è l’acronimo di eXtensible HyperText Markup Language, concepito allo scopo di estendere l’HTML con alcune proprietà tipiche dell’ XML. Attenzione si usa la parola estensione, ma in realtà si recepiscono delle regole più restrittive rispetto all’ HTML 4.01 senza aggiungere elementi di linguaggio. Le differenze principali dell’ XHTML nei confronti dell’ HTML sono:

  • tutti gli elementi e gli attributi devono essere scritti in minuscolo
  • tutti i valori degli attributi devono essere tra virgolette (“…”)
  • Tutti gli elementi non vuoti devono essere terminati col tag di chiusura
  • Tutti gli elementi vuoti devono essere terminati con uno spazio ed una barra ( /) [ ES. <br />]
  • Il valore di un attributo che contenga più spazi all’inizio o alla fine viene troncato riducendo gli spazi ad 1 solo
  • Tutti gli elementi che hanno un tag di apertura ed uno di chiusura non possono essere abbreviati anche se vuoti. Es. si deve scrivere <p> </p> e non <p />

Detto di queste differenze a grandi linee (i dettagli li vedremo quando tratteremo del linguaggio) diciamo subito che il consiglio è di adottare l’ XHTML 1.0 che è anche quello che useremo nel corso.

In ogni caso per completezza d’informazione bisogna dire che a seconda della scelta che si fa occorre chiarire con delle dichiarazioni specifiche nella pagina HTML che cosa si usa. Ma le differenze non si limitano alla scelta HTML verso XHTML; anche all’interno di queste due categorie vi sono differenze a seconda del modello adottato: transitional, strict o frameset. Questo si fa specificando il Document Type. Vediamoli in dettaglio:

1) HTML 4.01 Transitional 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”   “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
     <title>An HTML 4.01 Transitional standard template</title>
     <meta http-equiv=”content-type”   content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD (Document Type) contiene tutti gli elementi e gli attributi HTML, INCLUSI elementi di presentazione (come font) o deprecati (come center). I framesets non sono permessi.

2) HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
     <title>An HTML 4.01 Strict standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD contiene tutti gli elementi e gli attributi HTML, ma NON INCLUDE elementi di presentazione (come font) o deprecati (come center). I framesets non sono permessi.

3) HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”  “http://www.w3.org/TR/html4/frameset.dtd”>
<html>
<head>
     <title>An HTML 4.01 Frameset standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD contiene tutti gli elementi e gli attributi HTML, INCLUSI elementi di presentazione (come font) o deprecati (come center). I framesets sono permessi.

Tutti i tre precedenti Document Type Description sono evidentemente relativi all’ HTML e si prega di notare il tag <html> perché nei DTD dell’ XHTML descritti di seguito sono differenti.

4) XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
     <title>An XHTML 1.0 Transitional standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD contiene tutti gli elementi e gli attributi HTML, INCLUSI elementi di presentazione (come font) o deprecati (come center). I framesets non sono permessi. Da notare l’attributo xmlns nel tag <html>, che specifica il namespace xml del documento ed è richiesto nei documenti XHTML.

5) XHTML 1.0 Strict

<!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>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD contiene tutti gli elementi e gli attributi HTML, ma NON INCLUDE elementi di presentazione (come font) o deprecati (come center). I framesets non sono permessi. L’attributo xmlns nel tag <html>, specifica il namespace xml del documento ed è richiesto nei documenti XHTML.

6) XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
     <title>An XHTML 1.0 Frameset standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD contiene tutti gli elementi e gli attributi HTML, INCLUSI elementi di presentazione (come font) o deprecati (come center). I framesets sono permessi. L’attributo xmlns nel tag <html>, specifica il namespace xml del documento ed è richiesto nei documenti XHTML.

7) XHTML 1.1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
     <title>An XHTML 1.1 standard template</title>
     <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>
<body>
     <p> … </p>
</body>
</html>

Questo DTD è uguale a XHTML 1.0 Strict, contiene cioè tutti gli elementi e gli attributi HTML, MA NON gli elementi di presentazione (come font) o deprecati (come center). In più permette di aggiungere moduli (per esempio fornire supporto ruby per i paesi di lingua asiatica dell’Est). I framesets non sono permessi. L’attributo xmlns nel tag <html>, specifica il namespace xml del documento ed è richiesto nei documenti XHTML.

Questo è l’elenco dei DTD col rispettivo formalismo. Noi adotteremo il N. 5 XHTML 1.0 Strict. Da notare che queste sono già pagine web funzionanti. Potete copiarle o scaricarle tutte qui.

Ho registato su questa lezione un primo video che spiega le stesse cose. Se foste interessati si trova qui:

Alla prossima lezione prometto di essere meno noioso. 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.