[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [volume] [parte]


Capitolo 471.   Struttura generale e intestazione

Un documento HTML si compone di un file di testo, all'interno del quale le informazioni sono circoscritte da elementi, delimitati da marcatori che aprono e chiudono gli elementi stessi. Per esempio, il marcatore <HTML> apre l'elemento HTML, mentre il marcatore </HTML> lo chiude.

Il file di testo, che costituisce il sorgente del documento o della pagina HTML, può contenere dei commenti, che non vengono mostrati dal navigatore. Questi commenti o annotazioni si delimitano tra <!-- e -->.

471.1   File «struttura-01.html»

Si scriva il testo seguente salvandolo nel file struttura-01.html:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Struttura HTML, esempio 01">
      6     <META NAME="Keywords" CONTENT="HTML, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Struttura di un documento HTML</TITLE>
     13 </HEAD>
     14 <BODY>
     15 
     16 </P>Struttura di un documento HTML. Bla bla bla bla bla bla bla bla bla
     17 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     18 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     19 bla.<P>
     20 
     21 </BODY>
     22 </HTML>

Questo primo esempio contiene un errore; lo si scopre facilmente con l'ausilio di uno strumento di controllo, come descritto nel capitolo iniziale:

nsgmls -s struttura-01.html 2>&1 | less[Invio]

nsgmls:struttura-01.html:16:3:E: end tag for element "P" which is not open
nsgmls:struttura-01.html:16:4:E: character data is not allowed here

Dall'analisi si viene a sapere che nella riga numero 16 e alla colonna numero 3 del file struttura-01.html appare un marcatore di chiusura per un elemento P che non è stato aperto; di conseguenza, alla riga 16, colonna 4, inizia del testo che non è ammissibile.

Osservando il sorgente proposto si comprende che il blocco di testo che inizia dalla riga numero 16 andrebbe scritto nel modo seguente:

     16 <P>Struttura di un documento HTML. Bla bla bla bla bla bla bla bla bla
     17 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     18 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     19 bla.</P>

Si corregga l'errore, si salvi con lo stesso nome e si verifichi nuovamente la correttezza del file (se ci sono altri errori si provveda alla loro correzione, controllando nuovamente fino a che il file risulta corretto).

Un file HTML, scritto secondo lo standard ISO 15445, inizia con la dichiarazione che appare nella prima riga dell'esempio già mostrato:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">

Questa indicazione è obbligatoria e viene usata in tutti i file di queste lezioni pratiche. Dopo la dichiarazione del tipo di documento si osservi che c'è un solo elemento, denominato HTML (dalla riga numero 2 alla riga 22). Questo elemento contiene l'elemento HEAD (dalla riga numero 3 alla riga 13) e l'elemento BODY (dalla riga numero 14 alla riga 21).

L'elemento HEAD viene usato per contenere informazioni relative al documento che non vengono visualizzate dal navigatore, mentre l'elemento BODY contiene ciò che viene visto normalmente.

L'elemento HTML (si osservi il marcatore di apertura alla riga 2) contiene l'attributo LANG, con il quale si dichiara l'utilizzo della lingua italiana per tutto il file, salvo indicazione diversa di elementi interni.

Gli elementi META contenuti nell'elemento HEAD sono descritti brevemente nella tabella successiva. Si osservi in particolare il fatto che sono tutti vuoti, pertanto non è stato scritto il marcatore di chiusura (essendo perfettamente superfluo).

Marcatore Descrizione
<META HTTP-EQUIV="Content-Type" \
  \CONTENT="text/html"; charset=us-ascii>
Dichiara il documento secondo lo standard MIME (Multipurpose internet mail extensions) e la codifica.
<META NAME="Description" \
  \CONTENT="Struttura HTML, esempio 01">
Dà una descrizione al documento, utile per i sistemi di indicizzazione delle informazioni che appaiono nella rete.
<META NAME="Keywords" CONTENT="HTML, esempio">
Dichiara le parole chiave più importanti per fare riferimento al documento attraverso i motori di ricerca.
<META NAME="Author" \
  \CONTENT="Tizio Tizi, tizio@brot.dg">
Dichiara le informazioni riferite agli autori del documento.
<META NAME="Date" \
  \CONTENT="2007.01.01">
Dichiara la data del documento.
<META NAME="Resource-type" LANG="en" \
  \CONTENT="Document">
Definisce il tipo di «risorsa», attraverso una denominazione che serve ai sistemi di indicizzazione delle informazioni.
<META NAME="Revisit-after" LANG="en" \
  \CONTENT="15 days">
Dice ai motori di ricerca di controllare nuovamente il file a intervalli di 15 giorni.
<META NAME="Robots" CONTENT="ALL">
Dichiara che è consentito espressamente a tutti i sistemi automatici di scansione dei documenti, come i motori di ricerca o i sistemi di indicizzazione, di acquisire tutto il contenuto.

Gli elementi META contengono principalmente informazioni che servono ai motori di ricerca, pertanto, alcune informazioni sono scritte espressamente in inglese, dichiarando il linguaggio con l'attributo LANG, come eccezione rispetto alla dichiarazione complessiva contenuta nell'elemento HTML.

Alla fine degli elementi META, alla riga numero 12, appare il titolo del documento, racchiuso nell'elemento TITLE.

Si salvi con il nome struttura-02.html questo file, modificando le informazioni dell'intestazione con qualcosa di appropriato, soprattutto mettendo al posto dell'autore i propri dati e indicando la data corretta del lavoro. Si ricordi di controllare la correttezza sintattica con gli strumenti già noti.

471.2   File «struttura-02.html»

Viene mostrato come dovrebbe apparire il file struttura-02.html dopo le modifiche richieste. Si osservi che il nome «Tizio Tizi», l'indirizzo di posta elettronica relativo e la classe devono essere sostituiti con i propri dati, eventualmente con un indirizzo di posta elettronica fasullo, se si preferisce mantenerlo anonimo:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Struttura HTML, esempio 02">
      6     <META NAME="Keywords" CONTENT="HTML, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Struttura di un documento HTML</TITLE>
     13 </HEAD>
     14 <BODY>
     15 
     16 <P>Struttura di un documento HTML. Bla bla bla bla bla bla bla bla bla
     17 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     18 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     19 bla.</P>
     20 
     21 </BODY>
     22 </HTML>

L'elemento BODY (righe da 14 a 21) contiene soltanto un elemento P, che serve a delimitare un blocco di testo (la lettera «p» sta per «paragrafo»). Se si osserva il risultato che si ottiene da un navigatore, si può notare che il titolo non fa parte del documento visualizzato, ma appare probabilmente in una posizione esterna a questo.

Figura 471.7. Aspetto del file struttura-02.html con un navigatore.

struttura-02.html

Dalla figura si può vedere che l'impaginazione del blocco di testo delimitato dall'elemento P dipende dalla dimensione del carattere e dall'ampiezza disponibile effettivamente, durante l'utilizzo del navigatore.

471.3   File «struttura-03.html»

Si salvi con il nome struttura-03.html il file usato in precedenza e lo si modifichi secondo il modello dell'esempio seguente:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Struttura HTML, esempio 03">
      6     <META NAME="Keywords" CONTENT="HTML, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Struttura di un documento HTML</TITLE>
     13 </HEAD>
     14 <BODY>
     15 
     16 <!-- Capitolo -->
     17 <H1>Struttura di un documento HTML</H1>
     18 
     19 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     20 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     21 bla bla bla bla bla bla bla bla bla bla.</P>
     22 
     23 <!-- Sezione -->
     24 <H2>Intestazione</H2>
     25 
     26 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     27 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     28 bla bla bla bla bla bla bla bla bla bla.</P>
     29 
     30 <!-- Sezione -->
     31 <H2>Corpo</H2>
     32 
     33 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     34 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     35 bla bla bla bla bla bla bla bla bla bla.</P>
     36 
     37 </BODY>
     38 </HTML>

Gli elementi H1 servono a delimitare il titolo di una sezione importante (di primo livello) del documento; gli elementi H2 si usano per il titolo di una sezione di livello inferiore, continuando così a decrescere fino a H6. Si osservi come potrebbe risultare il documento di esempio nella figura successiva.

Figura 471.9. Aspetto del file struttura-03.html con un navigatore.

struttura-03.html

L'esempio costituito dal file struttura-03.html si compone di un titolo di una sezione di livello uno, che contiene una descrizione e una serie di sezioni di livello due. Il significato che può avere una sezione di livello uno dipende dal contesto: se si trattasse di un libro, l'elemento H1 potrebbe essere usato per i titoli dei capitoli.

471.4   File «struttura-04.html»

Si salvi con il nome struttura-04.html il file usato in precedenza e lo si modifichi secondo il modello dell'esempio seguente:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Struttura HTML, esempio 04">
      6     <META NAME="Keywords" CONTENT="HTML, esempio">
      7     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      8     <META NAME="Date" CONTENT="2007.01.01">
      9     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     10     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     11     <META NAME="Robots" CONTENT="ALL">
     12     <TITLE>Struttura di un documento HTML</TITLE>
     13 </HEAD>
     14 <BODY>
     15 
     16 <H1>Introduzione</H1>
     17 
     18 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     19 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     20 bla bla bla bla bla bla bla bla bla bla.</P>
     21 
     22 <H1>Struttura di un documento HTML</H1>
     23 
     24 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     25 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     26 bla bla bla bla bla bla bla bla bla bla.</P>
     27 
     28 <H2>Intestazione</H2>
     29 
     30 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     31 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     32 bla bla bla bla bla bla bla bla bla bla.</P>
     33 
     34 <H2>Corpo</H2>
     35 
     36 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     37 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     38 bla bla bla bla bla bla bla bla bla bla.</P>
     39 
     40 <H1>Appendice</H1>
     41 
     42 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     43 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     44 bla bla bla bla bla bla bla bla bla bla.</P>
     45 
     46 <H1>Indice analitico</H1>
     47 
     48 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     49 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
     50 bla bla bla bla bla bla bla bla bla bla.</P>
     51 
     52 </BODY>
     53 </HTML>

L'esempio dovrebbe far comprendere meglio l'utilizzo degli elementi Hn. In questo caso il documento è strutturato come se si trattasse di un libro, composto da un'introduzione, un capitolo, un'appendice e un indice analitico.

Figura 471.11. Aspetto del file struttura-04.html con un navigatore.

struttura-04.html

Appunti di informatica libera 2007.02 --- Copyright © 2000-2007 Daniele Giacomini -- <daniele (ad) swlibero·org>


Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome struttura_generale_e_intestazione.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico]

Valid ISO-HTML!

CSS validator!