Introduzione HTML/XHTML per principianti
By Claudio Fin

Creare una pagina web

Creare una pagina web non e' una cosa complessa o difficile e, contrariamente a quanto si potrebbe pensare, non e' richiesto alcun programma particolare. Un semplice editor di testo ASCII (come il blocco note di Windows®) e' piu' che sufficiente.

Alla base della maggior parte delle pagine multicolori che si incontrano navigando in internet, vi sono infatti dei semplici file in formato testo, che, oltre al contenuto vero e proprio, riportano anche delle indicazioni su come il contenuto dovra' apparire sullo schermo.

Queste indicazioni sono generalmente chiamate TAG. L'insieme dei tag e delle regole per usarli forma il linguaggio HTML. Piu' che un linguaggio sarebbe meglio definirlo come insieme di marcature del testo, HTML significa Hyper Text Markup Language, linguaggio di marcatura per ipertesti.

La parola ipertesto non deve spaventare, significa solo che nel testo contenuto in una pagina possono esserci dei link cliccabili che portano verso altre pagine, e questo permette di scegliere percorsi di lettura personalizzati tra le diverse pagine di un sito.

Esistono diversi programmi studiati apposta per realizzare una pagina web senza il bisogno di conoscere l'HTML, pero' una conoscenza base di questo linguaggio aiuta senz'altro a creare pagine migliori (anche usando poi uno di questi programmi), e consente di aggirare i loro limiti. In queste pagine si parlera' percio' solo di codice scritto interamente a mano tramite un editor di testo.

Nella testata di questa pagina c'e' scritto anche XHTML, perche' ormai conviene partire subito da questo nuovo standard, evitando in partenza di imparare le cattive abitudini consuete nella scrittura di pagine in HTML 4.

L'XHTML, almeno nella versione 1.0, differisce veramente poco dall'HTML, e' supportato da tutti i browser attuali, e, nella versione strict di cui si parla qui, porta subito ad uno stile di scrittura corretto e pulito.

Questa stessa pagina e' scritta in XHTML 1.0, per vederne il codice e' sufficiente cliccare sullo sfondo con il tasto destro del mouse e scegliere la voce visualizza sorgente pagina, HTML, o quella equivalente che sul vostro browser permette di vedere il codice (non importa se per ora sembra una gran confusione, in realta' le regole sono poche e semplici)

Se si da un'occhiata al codice si potranno notare i diversi tag, che sono racchiusi tra i simboli < e >, per esempio <p> <body> ecc...


Primi elementi pratici e sintattici


La struttura minimale che compone ogni pagina e' la seguente: 
<html>
    <head>
    </head>
    <body>
    </body>
</html>
Visualizza la pagina prodotta da questo codice...

Tutta la pagina e' racchiusa all'interno dei tag html e /html.
All'interno ci sono due sezioni dette head e body. La prima e' identificata dei tag head e /head, e serve a contenere delle informazioni per il browser, la seconda e' identificata dai tag body e /body, e serve a contenere il testo vero e proprio da mostrare sullo schermo.

Ogni pagina deve avere questa struttura di base, una sola sezione head e una sola sezione body nell'esatto ordine indicato, il tutto racchiuso tra i tag html e /html.

Anche se i browser HTML attuali accettano pagine strutturate in modo errato e visualizzano comunque qualcosa, non e' detto che continuino a farlo anche in futuro, e non e' detto che la pagina venga visualizzata nel modo desiderato (per esempio potrebbero mancare i colori, o l'incolonnamento voluto), pertanto e' meglio scrivere da subito il codice base corretto, e riempire poi la sezione body con i contenuti.

In particolare per avere un codice base XHTML valido, l'esempio precedente va riscritto cosi':

<!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" lang="it">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>La mia prima pagina XHTML</title>
</head>

<body>
  <p>Testo della pagina.</p>
</body>

</html>
Visualizza la pagina prodotta da questo codice...

Come si puo' vedere sono state fatte alcune aggiunte, soprattutto all'inizio per specificare il tipo di documento (DOCTYPE). Questo serve ai browser e ai validatori per capire come trattare il resto del testo, cioe' in base a quale specifica (DTD) tra quelle elaborate dal W3C (l'organo internazionale che si incarica di studiare degli standard mondiali per lo scambio di informazioni su internet).

Con il tag meta dell'esempio si indica la codifica dei caratteri da usare per la visualizzazione del documento (esistono anche altri usi del tag meta). Con il tag titlesi imposta il titolo della pagina, cioe' quello che compare in alto a sinistra sulla barra del titolo del browser (sarebbe bene dare un titolo ad ogni pagina). Per il resto si riconoscono le due sezioni principali indicate precedentemente, head e body.

Questo scheletro di base puo' essere usato come punto di partenza per la scrittura di ogni pagina. Il contenuto mostrato a video, lo ricordo, e' quello compreso tra i tag body e /body, in questo caso si tratta della frase: Testo della pagina.

Alcune righe del codice sono scritte un po' spostate a destra, questo non e' obbligatorio, ma aiuta a capire a colpo d'occhio cosa contiene che cosa, o cosa e' una continuazione della riga precedente. Questo spostamento a destra (indentazione) e' un buono stile di scrittura, che torna comodo soprattutto quando il testo diventa molto lungo e quando bisogna fare delle modifiche.

Una riga di codice molto lunga puo' essere difficile da leggere, ma puo' essere tranquillamente spezzata in piu' righe in corrispondenza degli spazi, per esempio la riga:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
puo' benissimo essere riscritta cosi': 
<meta http-equiv="Content-Type"
      content="text/html;
      charset=iso-8859-1" />

Si puo' notare che meta e' uno di quei tag singoli di cui si diceva prima, non esiste cioe' un /meta, ma il simbolo di chiusura e' inserito alla fine del tag stesso dopo uno spazio bianco. Questo spazio serve per garantire la compatibilita' con i browser piu' vecchi, e va inserito sempre in tutti i tag singoli prima del simbolo di chiusura.


Il testo e la scrittura

Abbiamo visto quali sono le condizioni di base per salvare una minipagina (contenente una sola frase) sul proprio disco. Da adesso in poi ci si puo' concentrare sul contenuto della sezione body, il corpo del documento mostrato a video.

Per prima cosa va ricordato che il browser interpreta il codice HTML come un'unica lunghissima riga, pertanto se non vengono inseriti degli appositi tag per andare a caporiga o per delimitare i paragrafi, il risultato sarebbe un monoblocco molto poco leggibile. La delimitazione di un paragrafo l'abbiamo gia' vista, si ottiene con i tag <p> </p>, tra un paragrafo e l'altro il browser aggiunge automaticamente una riga vuota. Per andare semplicemente a caporiga si usa il tag singolo <br />

<p>Questo testo e' contenuto in un paragrafo</p>
<p>Questo<br />e' un altro<br />paragrafo,
con dei tag &lt;br /&gt;<br />
per andare a caporiga.</p>
Risultato:
Questo testo e' contenuto in un paragrafo

Questo
e' un altro
paragrafo, con dei tag <br />
per andare a caporiga.

Se si guarda bene l'esempio si nota che nel codice ci sono delle strane serie di caratteri: &lt; e &gt;. Nel testo non si possono infatti usare tutti i caratteri che si vogliono, per esempio i simboli minore e maggiore < > sono riservati per identificare l'inizio e la fine dei tag. I doppi apici " servono per delimitare gli attributi dei vari parametri presenti nei tag stessi (quando presenti). Le lettere accentate della lingua italiana potrebbero essere visualizzate in modo sbagliato da browser di altre nazioni che usano una codifica dei caratteri diversa.

Per poter mostrare tutti questi caratteri nel nostro testo dobbiamo ricorrere alle entity, in pratica sequenze di caratteri precise che tutti i browser sostituiscono con il carattere corretto. La seguente tabella mostra alcune entity comuni, per esempio per visualizzare il simbolo © occorre scrivere &copy;. Siccome tutte le entity iniziano con il carattere &, anche questo e' riservato, e per visualizzarlo e' prevista l'apposita entity &amp;

Simbolo Codice entity
< &lt;
> &gt;
& &amp;
à &agrave;
è &egrave;
È &Egrave;
é &eacute;
ì &igrave;
ù &ugrave;
ò &ograve;
" &quot;
€ &euro;
© &copy;
® &reg;
α &alpha;
β &beta;
µ &micro;
± &plusmn;

Come si vede dalla tabella i doppi apici si ottengono con l'entity &quot;, e' pero' possibile racchiudere una frase tra doppi apici usando i tag <q> </q>

Questo testo ha una <q>quotatura</q>.
Risultato:
Questo testo ha una quotatura.

Con le entity, oltre alle lettere accentate (gravi e acute), possono essere visualizzate anche le lettere (maiuscole o minuscole) con l'accento circonflesso, con l'umblaut o con la tilde. La regola generale prevede di scrivere la lettera preceduta da & e seguita da circ;, uml; o tilde;. Per esempio:

Simbolo Codice entity
Ä &Auml;
ô &ocirc;
ñ &ntilde;

&nbsp;

Esiste un'ulteriore entity che non serve per visualizzare un carattere specifico, ma per dire al browser che li va inserito uno spazio non spezzabile su piu' righe e non collassabile. Questo serve per evitare che due parole separate da uno spazio possano essere visualizzate su righe differenti, o per fare si che tra due parole vi sia un numero di spazi ben preciso (il browser nel caso incontri piu' spazi uno dopo l'altro normalmente li riduce (collassa) ad uno solo. Esempo:

<p>Parola&nbsp;&nbsp;&nbsp;&nbsp;separata da 4 spazi non interrompibili</p>
<p>Parola        separata da 10 spazi normali</p>
Risultato:
Parola    separata da 4 spazi non interrompibili
Parola separata da 10 spazi normali

Stili fisici del testo

Abbiamo visto quali caratteri si possono usare e quali sono le regole per la suddivisione in paragrafi o per andare a caporiga. Per default (cioe' in assenza di altre specifiche) il browser mostra pero' il testo usando un solo tipo di carattere (il carattere di default impostato nelle opzioni del browser stesso), di dimensione e colore prefissati, allineato a sinistra. Lo sfondo della pagina, se non diversamente specificato, sara' anch'esso quello predefinito del browser, potrebbe essere per esempio uno sfondo uniforme grigio o bianco.

Per cambiare le cose sono disponibili alcuni tag usabili direttamente sul testo, e gli stili impostabili con l'apposito tag style nella sezione head. In particolare con l'HTML 4 si e' avuta un'esplosione di tag da usare mescolati con il testo, in grado di controllarne ogni attributo (colore, carattere, dimensioni ecc...), che ha portato a pagine pesanti da caricare e codici impossibili da leggere o correggere. Con XHTML (nella specifica strict) praticamente tutti questi tag sono scomparsi, in favore degli stili (CSS). L'uso degli stili ha moltissimi vantaggi, come la possibilita' di regolare con una sola modifica l'aspetto anche di decine di pagine, ma soprattutto la separazione fisica tra il contenuto vero e proprio e codice che ne regola l'aspetto.

Alcuni tag mescolati al testo sono comunque rimasti, come quello per il grassetto (<b>) o la scrittura obliqua (<i>). Vediamone alcuni:

Testo normale<br />
<b>Testo in grassetto</b><br />
<i>Testo obliquo (italic)</i><br />
<ins>Testo sottolineato</ins><br />
<del>Testo cancellato</del>
I risultati sono i seguenti:
Testo normale
Testo in grassetto
Testo obliquo (italic)
Testo sottolineato
Testo cancellato

I tag possono anche essere combinati assieme in modo nidificato, per esempio si puo' ottenere un testo in grassetto e sottolineato con:

<b><ins>Testo in grassetto sottolineato</ins></b>
Risultato:
Testo in grassetto sottolineato

Una cosa importantissima e' rispettare l'ordine di apertura e chiusura dei tag, in questo esempio apriamo prima il b e poi l'ins e vanno immaginati come una scatoletta dentro l'altra, per cui li chiudiamo a partire dal piu' interno e arriviamo al piu' esterno. Scrivere <b><ins>Testo</b></ins> e' un errore molto grave, che puo' sconvolgere o impedire la visualizzazione della pagina.

  Nidificazione corretta, una scatoletta dentro l'altra.
  ERRORE! Scatolette sovrapposte.

Titoli

Esiste un tag pensato per realizzare in modo semplice titoli e sottotitoli con dimensioni differenti. Questo e' il tag <h> che, seguito da un numero compreso tra 1 e 6, crea un testo ingrandito (1 piu' grande, 6 piu' piccolo):

<h1>Testo h1</h1>
<h2>Testo h2</h2>
<h3>Testo h3</h3>
<h4>Testo h4</h4>
<h5>Testo h5</h5>
<h6>Testo h6</h6>
Risultato:

Testo h1

Testo h2

Testo h3

Testo h4

Testo h5
Testo h6

I titoli per loro stessa natura si trovano da soli sulla riga, non e' pertanto necessario alcun tag di caporiga (e viene anche lasciato automaticamente un po' di spazio sopra e sotto al titolo).


Testo a spaziatura fissa

Alle volte e' utile mostrare il testo usando un carattere a larghezza fissa piuttosto che proporzionale, puo' essere il caso di un prospetto numerico dove gli incolonnamenti sono indispensabili, o di un codice di programmazione. Gli stessi esempi di codice HTML di questa pagina sono visualizzati con un font a larghezza fissa.

Ci sono fondamentalmente due tag predisposti per questa funzione: <pre> </pre> e <tt> </tt>. Il primo serve per creare un intero paragrafo formattato a larghezza fissa, gli spazi contigui in questo caso non vengono collassati, e quindi non e' necessario usare l'entity &nbsp; e non serve specificare un tag <br /> per andare a caporiga. Esempio:

</pre>
       Testo preformattato
       -------------------
        123456    7891011
        546354    9786876
        435243    3426534
</pre>
Risultato: 
       Testo preformattato
       -------------------
        123456    7891011
        546354    9786876
        435243    3426534

Il tag <tt> </tt> serve invece per scrivere solo una o alcune parole di un testo con font a larghezza fissa:

Questo testo contiene <tt>due parole</tt> con font a larghezza fissa.
Risultato:
Questo testo contiene due parole con font a larghezza fissa.

sup sub small big

Questi quattro tag permettono di realizzare la scrittura apice/pedice e di ridurre o ingrandire un frammento del testo relativamente alla dimensione del testo precedente. Esempi:

La scrittura <sup>apice</sup> e' utile per le formule matematiche
o per le unita' di misura: sezione di 25 mm<sup>2</sup>.<br />

Qui vediamo del <sub>testo sottoscritto (pedice)</sub><br />

Ora del <big>testo che <big>si ingran<big>disce
e </big>torna </big>nor</big>male.<br />

Oppure che <small>si rimpiccio<small>lisce e poi </small>torna </small>normale.
Risultato:
La scrittura apice e' utile per le formule matematiche o per le unita' di misura: sezione di 25 mm2.
Qui vediamo del testo sottoscritto (pedice)
Ora del testo che si ingrandisce e torna normale.
Oppure che si rimpicciolisce e poi torna normale.

Come si vede e' possibile aprire piu' tag big o small uno dentro l'altro, a patto di ricordarsi di mettere poi anche gli equivalenti tag di chiusura.


Ed ora una pagina di riassunto scritta usando esclusivamente le informazioni e i concetti forniti fino ad adesso.

E alcuni link di risorse utili riguardo l'HTML/XHTML.

URL Descrizione
www.w3schools.com/xhtml/default.asp Tutorial XHTML (inglese del W3C)
www.w3schools.com/xhtml/xhtml_reference.asp Lista dei TAG XHTML 1.0 (inglese del W3C)
www.html.it/guidebase.htm Tutorial HTML e web design
www.aspide.it/manuale Corso HTML base per principianti
www.web-link.it Tutorial HTML e web design
www.web-link.it/2meta.htm I tag meta
http://validator.w3.org Il validatore HTML/XHTML del W3C (inglese)

[Segue]
Questa pagina e' stata scritta con l'editor free pspad

Valid XHTML 1.0! Valid CSS!