Struttura della pagina

Ringraziamento a HTML.IT dal quale ho attinto per queste pagine

www.html.it/

Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html.

Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola così.

Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

... altri tag ...

</html>

Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>) Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera
Corpo (<body>) Qui è racchiuso il contenuto vero e proprio del documento

Ci occuperemo in seguito della head (l'argomento verrà ripreso poi nella conclusione della guida. Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>

Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo.

Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>HTML.it</title>
</head>
<body>
   <!-- Scriveremo qui -->
>
   Qui il nostro contenuto

</body>
</html>

D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.

 

Separare il layout dal contenuto

L'HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio <p>qui il mio testo</p>) e i tag che indicano uno stile o una colorazione del contenuto (ad esempio <font color="red">, che colora il testo di rosso) si trovavano mischiati allo stesso livello.

Tuttavia vari anni di Web hanno fatto nascere l'esigenza di separare il contenuto dalla presentazione del contenuto medesimo.

Se per esempio io avessi tutti i titoli del mio documento in rosso e in grassetto, e a un certo punto decidessi di trasformarli in verde e in corsivo, con l'HTML classico (cioè l'HTML 3.2) dovrei andare a modificarmi a mano ogni tag contente le indicazioni della formattazione.

Quindi:

<p>
  <font color="red">
    <b>titolo 1</b>
  </font>
</p>

diventerebbe:

<p>
  <font color="green">
    <i>titolo 1</i>
  </font>
</p>

Ma se questa operazione non comporta difficoltà su una singola pagina, diventa insostenibile (o quantomeno difficoltosa, tanto che converrebbe scrivere un programma che effettuasse la conversione al posto nostro) su website molto grandi, a volte di centinaia di pagine.

Proprio per questo - come dicevamo - da un certo punto in poi è nata l'esigenza di separare il contenuto (la scritta "titolo 1"), dalla formattazione (il colore rosso e il grassetto). Per farlo è necessario utilizzare i fogli di stile, e il contenuto della pagina vista pocanzi diventerebbe qualcosa di questo genere:

<p class="formattaTitoli">
  titolo 1
</p>

la colorazione del testo verrebbe affidata alla classe "formattaTitoli", descritta altrove del documento, o su un file separato. Dunque basta editare la classe "formattaTitoli" per cambiare l'aspetto anche di centinaia di pagine.

È importante sapere da subito che alcune cose che stiamo imparando hanno la possibilità di essere espresse con una soluzione più elegante, e che consente al webmaster di gestire più agevolmente i propri siti. Alcuni elementi descritti nella guida corrente sono addirittura "deprecati"dal W3C, cioè destinati a cadere in disuso (come il tag <font>): man mano che li incontreremo (perché allo stato attuale del Web è ancora importante conoscerli) vi avvertirò che esistono altre soluzioni applicabili tramite i fogli di stile. Tuttavia in questo contesto non esamineremo i fogli di stile (detti anche CSS: "Cascading Style Sheets"), perché è un argomento che presuppone già la conoscenza del linguaggio HTML. Per questo vi rimandiamo all'apposita guida ai CSS di HTML.it, che se vorrete potrete consultare dopo aver letto la guida all'HTML.

 

Fai click qui per tornare in cima al documento.