APPUNTI SPARSI SUL LINGUAGGIO HTML

The Name of the Game

L'acronimo HTML significa HyperText Markup Language, cioè un linguaggio che permette la creazione di ipertesti mediante l'uso di marcatori inseriti nel codice del documento.

I marcatori stabiliscono la struttura, la visualizzazione e in alcuni casi la semantica di parti del documento, e sono distinti dal testo normale (l'informazione veicolata dal documento) perché sono delimitati da parentesi angolari. Per esempio, per mettere una parte del testo in grassetto si appone un marcatore (per brevità, un tag) di apertura <b> prima della parte da mettere in grassetto e la sua chiusura </b> nel punto in cui il testo deve tornare normale. Così, l'effetto visivo in grassetto si ottiene con il codice:

<b>in grassetto</b>

Lo HTML è il linguaggio originale che permise lo sviluppo del World Wide Web (WWW), un database distribuito che funziona mediante la rete Internet. Il Web naque al CERN di Ginevra nel 1989, partendo da un'idea di Tim Berners-Lee, e lo stesso Berners-Lee scrisse la prima versione del linguaggio HTML.

Contenuti del documento

Questi "appunti sparsi" intendono fornire una presentazione della struttura di base del linguaggio HTML nella specificazione 4.01 che è, alla data attuale, la più recente. Per coerenza gli appunti non conterranno quelle parti del linguaggio che sono deprecate da tale specificazione, in particolare i tags che si occupano della formattazione del testo (dimensioni, colore, forma dei caratteri...). Tutte queste proprietà di visualizzazione possono meglio essere gestite con l'uso dei fogli di stile a cascata (CSS), che sono illustrati nel documento Appunti sparsi sui CSS.

La struttura di un documento HTML

Ogni documento HTML è costituito da tags e dal testo, che si trovano racchiusi fra i marcatori principali <html> e </html>. All'interno del listato possiamo distinguere due parti principali:

HEAD: la head si trova racchiusa fra i tags <head> e </head> ed è posizionata subito dopo l'apertura del documento con il marcatore <html>. Questa parte di intestazione della pagina contiene informazioni logiche sul documento, sui suoi contenuti e talvolta anche sulla sua formattazione e sulla relazione gerarchica che ha con altri documenti. Queste informazioni si trovano contenute in tags specifici; i più usati sono:
- <TITLE>...</TITLE>: la parte di testo che si trova fra questo tag e la sua chiusura viene assegnata alla pagina come titolo. All'interno di questo marcatore non si possono inserire altre istruzioni di formattazione, il browser le visualizzerebbe come testo normale senza interpretarle.
- <META>: può essere utilizzato per specificare la descrizione della pagina, parole chiave o altre informazioni non fornite da altre istruzioni. A causa della loro natura generica, gli lementi meta definiscono coppie chiave-valore associati. Pertanto tutti i comandi "meta" hanno la medesima struttura: <META NAME="XXX" CONTENT="YYY">.
  Ad esempio:
```
<META NAME="AUTHOR" CONTENT="Redazione del sito del liceo Marconi">
```
  definisce che l'autore di questo documento è la redazione del sito del liceo. In questo caso la chiave è author e il valore attribuito è redazione del sito del liceo.
- <BASE>: specifica l'URL base per tutti i link del documento. Deve quindi comparire prima di ogni collegamento che riferisca ad una risorsa esterna. L'HTML permette di utilizzare un solo elemento base per ogni documento.
BODY: è quella parte del listato che segue la head ed è compresa fra i tags <body> e </body>. Nel body troviamo sia il testo vero e proprio del documento, sia i tags che forniranno al broswer le informazioni per visualizzare correttamente il testo stesso (a loro volta contenute nel CSS).

Il codice di seguito riportato rappresenta lo "scheletro" di un documento HTML tipo. Vediamo contornati in due diversi colori la "head" e il "body":

<html>

<head>

Tags di intestazione

</head>

<body>

Corpo del documento

</body>

</html>

I titoli

I testi per risultare più chiari e leggibili vengono divisi per argomenti con titoli e sottotitoli, in ordine gerarchico. I titoli si trovano nel body, insieme al resto del testo e per distinguerli gli viene assegnata una formattazione diversa utilizzando i tags <Hn> </Hn> ("n" rappresenta un numero che può andare da 1 a 6).

Partendo dal tag <H1>, che di solito viene usato per il primo titolo, l'argomento generale del documento, fino al tag <H6> la loro formattazione si avvicina via via a quella del testo normale (infatti i primi sono più grandi, centrati e magari scritti maiuscoli). Per esempio:

<BODY>

<H1>titolo principale del documento</H1>

<H2>titolo del primo argomento</H2>

<H3>suddivisione del primo argomento</H3>

paragrafo

<H2>titolo del secondo argomento</H2>

<H3>suddivisione del secondo argomento</H3>

paragrafo

</BODY>

Ovviamente questo è solo un esempio e possono esserci più o meno argomenti, può non esserci bisogno di suddividerli ulteriormente oppure può servire creare suddivisioni di livello ancora inferiore (<H4>titolo</H4>); in ogni caso è meglio fare in modo di rendere il documento il più semplice e leggibile possibile.

Contenitori generici <DIV> e <SPAN>

DIV e SPAN sono contenitori generici che servono a suddividere il blocco di testo in diversi modi, in modo che ognuno possa scegliere quello più adatto alla propria circostanza.

Il <DIV> è l'elemento di tipo block per eccellenza e serve per andare a capo senza lasciare spazi tra i blocchi di testo, per esempio:

<DIV> blocco di testo x </DIV>

<DIV> blocco di testo y </DIV>

l'esempio verrebbe visualizzato in questo modo:

blocco di testo x

blocco di testo y

Lo <SPAN> invece, è un elemento inline, che quindi non va a capo, ma prosegue sulla linea del tag che lo include, come può essere il DIV. Per esempio:

<SPAN>blocco di testo x</SPAN>

<SPAN>blocco di testo y</SPAN>

L'esempio verrebbe visualizzato in questo modo:

blocco di testo x blocco di testo y