Introduzione al Web e all'HTML

(continua)

Elementi di base dell'HTML

Allo scopo di introdurre i concetti di base del linguaggio HTML, riprendiamo e commentiamo il codice introdotto nel paragrafo precedente.

Le prime due righe, che appaiono molto complicate, costituiscono il cosiddetto DOCTYPE, che serve ad indicare al browser la versione di HTML che stiamo utilizzando: dato il carattere introduttivo di questa guida, evitiamo di scendere in ulteriori dettagli e, d'ora in avanti, ci limiteremo a copiare ed incollare queste due righe all'inizio di ogni documento HTML che scriveremo.

Gli elementi alla base della sintassi dell'HTML sono i cosiddetti tag o marcatori, costituiti da parole chiave racchiuse tra le parentesi angolari < e >: <html>, <title>, <p>, </h1> sono esempi di tag.

L'intero documento HTML, ad eccezione del DOCTYPE, comincia con il tag <html> e termina con il tag </html>. Ogni documento, poi, è diviso in due parti: un'intestazione, che inizia con il tag <head> e termina con </head>, e un corpo, che comincia con il tag <body> e termina con </body>.

Osservando i tag appena introdotti, osserviamo poi che, di ognuno di essi, esistono due versioni: quella con il solo nome tra parentesi angolari (<html>, <body>, ecc... ) e quella con il nome, sempre tra parentesi angolari, preceduto da una slash (</html>, </head>, ecc...); i primi sono detti tag di apertura, mentre i secondi tag di chiusura.

Tutti i tag che abbiamo incontrato finora ammettono un'apertura e una chiusura e sono detti tag contenitori, tuttavia, esistono anche tag che dispongono di una sola versione, che sono detti tag vuoti.

Il principio di funzionamento dei tag contenitori, dotati, come detto, di apertura e chiusura, è che essi marcano, ovvero, in qualche modo, qualificano, tutto ciò che contengono, cioè tutto ciò che è compreso tra il tag di apertura e quello di chiusura. Ad esempio, la coppia di tag <head> e </head> indica che tutto ciò che è compreso tra essi costituisce l'intestazione del documento. In ogni caso, tutto questo diventerà più chiaro non appena faremo degli esempi e prenderemo maggiore dimestichezza con l'HTML.

Riprendendo la descrizione del documento, troviamo, all'interno dell'intestazione, la coppia di tag <title> e </title>, che sevono ad identificare il nome della pagina web, che appare nella barra superiore della finestra del browser. Questo nome, talvolta, è detto titolo della pagina (dalla traduzione del nome del tag), ma non va confuso con i titoli, di cui parleremo tra breve, presenti nel corpo del documento. Nell'esempio precedente, il nome della pagina, racchiusa tra i due tag, era costituita dalla stringa La mia prima pagina web: provate a modificare, sempre con il Blocco Note, questa stringa, salvate la nuova versione del file (non dimenticate quanto detto prima sull'estensione html) e verificate l'effetto della modifica con il browser.

L'intestazione, oltre al titolo della finestra, può contenere, tramite altri tag, ulteriori informazioni sul documento, ma per il momento non ce ne occupiamo.

Venendo ora alla descrizione dei tag che compaiono all'interno del corpo, troviamo il tag <h1>, che, con la sua chiusura </h1>, racchiude del testo che costituisce un titolo di ptimo livello (cioè di livello gerarchico più alto), che viene mostrato dal browser in caratteri grandi; troviamo poi la coppia di tag <p> e </p> che, invece racchiude il testo di un paragrafo, che viene mostrato dal browser con caratteri di dimensioni normali.

Il corpo del documento

Come abbiamo detto, il corpo di un documento HTML è racchiuso tra i tag <body> e </body>: esso contiene tutto ciò che deve essere mostrato nella pagina, nonché come deve essere mostrato.

Proviamo a creare una pagina web in cui venga mostrata la poesia Alla sera di Ugo Foscolo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Poesia Alla sera</title>
</head>
<body>

Alla sera
(di Ugo Foscolo)

Forse perché della fatal quiete
tu sei l'imago a me sì cara vieni
o sera! E quando ti corteggian liete
le nubi estive e i zeffiri sereni,

e quando dal nevoso aere inquiete
tenebre e lunghe all'universo meni
sempre scendi invocata, e le secrete
vie del mio cor soavemente tieni.

Vagar mia fai co' miei pensier su l'orme
che vanno al nulla eterno; e intanto fugge
questo reo tempo, e van con lui le torme

delle cure onde meco egli si strugge;
e mentre io guardo la tua pace, dorme
quello spirto guerrier ch'entro mi rugge.

</body>
</html>

Salviamo il file con il nome poesia.html (come abbiamo imparato) e apriamolo con un browser.

<<<precedente indice successivo>>>

www.paolocaramanica.net

Introduzione al Web e all'HTML

Elementi di base dell'HTML

Il corpo del documento