HTML/Fondamenti

Alcune premesse si rendono necessarie per poter consultare e capire nel modo migliore questo wikibook. Molti degli elementi cui si farà cenno potranno essere compresi solamente leggendo i prossimi due paragrafi.

Prima di incominciare, è bene prendere famigliarità con alcuni termini, che verranno usati spesso nel corso del libro:

il browser (o web browser o anche interprete) è il programma che si occupa di visualizzare il contenuto delle pagine web (come Google Chrome, Mozilla Firefox, Internet Explorer, Opera o Safari).
il W3C (World Wide Web Consortium) o W3 è un'organizzazione, nata con l'avvento del Web, che si occupa tra le altre cose di uniformare gli standard web.

Tag, attributi e valori

La struttura di un documento HTML si basa su tre importanti concetti: il tag, l'attributo, e il valore.

Il tag è l'unità fondamentale, potremmo definirla l'istruzione che fa capire al browser come interpretare il codice e visualizzarlo sul monitor. Attraverso i tag possiamo definire molti elementi di un documento: paragrafi, colore del testo, collegamenti ipertestuali e quant'altro. Ogni tag è caratterizzato da tre componenti:

<, il segno di minore
il suo nome
>, il segno di maggiore

I tag normalmente prevedono anche una chiusura, che serve per delimitare dove finisce il codice interessato da quel particolare tag:

<, il segno di minore
/, una slash
il suo nome
>, il segno di maggiore

La slash (/) comunica al browser che si tratta, per l'appunto, di un tag di chiusura.

All'interno dei tag vi è quindi il contenuto, ossia quello che verrà formattato secondo le regole del tag in cui è compreso. Per fare il punto della situazione, la sintassi comune alla maggior parte dei tag è la seguente: <nome tag>contenuto che verrà formattato</nome tag>

Ad esempio il tag <h1> serve per determinare i titoli e quindi rendere il testo al suo interno più grande rispetto al resto della pagina. Ecco ad esempio un codice che visualizzerà sul nostro browser un titolo (non vi preoccupate del resto del codice, verrà analizzato in seguito).

<html>
  <head>
  </head>
  <body>
    <h1>Wikibooks</h1>
  </body>
</html>

In realtà non tutti i tag necessitano di essere chiusi e altri sono addirittura proprio privi del relativo tag di chiusura e verranno affrontati nel corso del libro.

Tutti i tag supportano degli attributi, cioè dei parametri opzionali che servono a definire alcune proprietà specifiche. Ogni attributo è costituito da un nome che indica di che attributo si tratta e di un valore che determinerà. Un attributo permette ad esempio di visualizzare il testo allineato a destra o a sinistra, o del colore rosso piuttosto che nero.
Gli attributi relativi ad un tag devono essere inseriti nel tag di apertura, in questo modo: <nometag attributo="valore" altro_attributo="valore"> contenuto </nometag>

Ora che abbiamo capito com'è strutturato un tag possiamo passare ad analizzare la struttura di una pagina.

Struttura generale di una pagina HTML

Tutte le pagine web hanno la seguente struttura a livello di codice HTML:

<html>

 <head>
   codice
 </head>

 <body>
   codice
 </body>

</html>

Il tag <html> (che si chiude in fondo) indica al browser che il documento è stato formattato in HTML e pertanto il suo contenuto dovrà essere interpretato secondo le specifiche del linguaggio.

Il tag <head> (che si chiude con </head>) serve a delimitare l'intestazione del documento, che conterrà informazioni opzionali come il titolo della pagina, l'autore, la data di creazione, il set di caratteri utilizzato, molto spesso informazioni per i motori di ricerca, ecc... In poche parole, il codice scritto fra i due tag non andrà a influenzare l'aspetto grafico della pagina.

Tra i tag <body> e </body> è presente invece il corpo vero e proprio del documento e della pagina web, ciò che effettivamente poi verrà visualizzato sul browser.

L'HTML è un linguaggio no case-sensitive (cioè non sensibile alle maiuscole), pertanto scrivere i tag tutti in maiuscolo o in minuscolo è indifferente, anche alternandoli non cambia nulla.
I seguenti esempi codificano una pagina identica, sia dal punto di vista sintattico sia da quello dell'interpretazione del browser:

<html> 
 <head></head>
  <body>
  </body>
</html>

<HTML> 
 <HEAD></HEAD>
  <BODY>
  </BODY>
</HTML>

<htMl> 
 <HeAd></hEAD>
  <bODY>
  </BOdy>
</HTml>

Queste tre pagine mostreranno lo stesso risultato sul browser dell'utente.

Convenzioni di questo libro

I tag non saranno scritti in modo particolare ma nel contesto di una frase saranno scritti su sfondo grigio. Quando è necessario per riconoscere le loro parti costituenti si seguiranno le convenzioni qui sotto:

Gli attributi dei tag verranno scritti in grassetto.
I valori saranno scritti in corsivo.

Ogni argomento affrontato verrà accompagnato da un esempio di codice, che si potrà copiare e incollare sul proprio editor di testo preferito. La struttura di una pagina rimane, come abbiamo visto, sempre la seguente:

<html> 
 <head></head>
  <body>
  </body>
</html>

Qualora tutti questi elementi non fossero presenti ma un esempio fosse costituito solo dal seguente codice:

<body>codice</body>

è perché l'intestazione e il resto del documento HTML possono essere ritenuti irrilevanti ai fini dell'esempio. Quindi il codice di cui sopra dovrà essere inserito nella struttura generale della pagina.

Elementi block e in-line

Una distinzione importante da fare tra gli elementi di una pagina HTML è quella tra i cosiddetti block-elements (elementi blocco) e gli in-line elements (elementi in linea) chiamati anche text-elements (elementi testo).

Le diversità tra questi due tipi di elementi potrebbero sembrare non importanti ma è molto utile capire la loro differenza; il concetto di elementi block e in-line è molto importante inoltre nei CSS o, come li abbiamo anche definiti nell'introduzione, Fogli di stile.

generalmente, gli elementi block possono contenere elementi in-line e altri elementi block e, quando vengono inseriti, incominciano una nuova riga o lasciano dei margini sopra e sotto di essi.
generalmente, gli elementi in-line possono contenere solo testo e altri elementi in-line. Gli elementi in-line, come suggerisce la parola stessa, vengono visualizzati sulla riga corrente e non vanno perciò a capo.

Inserire dei commenti

Come ogni buon programmatore sa, è molto importante inserire dei commenti all'interno del codice, così facendo infatti il codice sarà comprensibile anche a distanza di tempo, ma non solo. Se per qualsiasi ragione, il sito dovrà essere sottoposto ad una manutenzione da parte di esterni, il commento faciliterà il compito. I commenti sono molto utili e non verranno letti dal browser, di conseguenza la pagina non verrà influenzata dalla presenza o meno dei commenti. Questi potranno però essere visualizzati da chiunque attraverso il codice sorgente del sito.

Nell' HTML inserire commenti è molto semplice infatti basta usare la seguente sintassi: 

Ecco un esempio:

<html>

 <head>
  <!-- Qui ci va il titolo -->
 </head>

 <body>
  <!-- qui ci va il contenuto della pagina -->
 </body>

</html>

Consigli sulla scrittura

Indentazione

L'indentazione è la tecnica attraverso cui il codice viene rientrato a mano a mano che si entra in sotto-tag. Nel seguente wikibook si cercherà di adottare questa tecnica nel miglior modo possibile e si invita chiunque ad utilizzarla in quanto rende il codice più leggibile che non se si trovasse tutto su una riga, o suddiviso senza criterio. Ecco due esempi:

<html>
<head></head><body><div>testo testo</div><a href="http://it.wikibooks.org/">Wikibooks</a>
<a href="http://it.wikipedia.org/">Wikipedia</a>
</body>
</html>

<html>
  <head></head>
    <body>
     <div>testo testo</div>
     <a href="http://it.wikibooks.org/">Wikibooks</a>
     <a href="http://it.wikipedia.org/">Wikipedia</a>
    </body>
</html>

Il fatto che l'HTML sia un linguaggio non sensibile alle maiuscole è molto utile nel momento in cui bisogna scrivere molto codice e ognuno potrà utilizzare lo stile che preferisce. Tra gli stili più usati ne elenchiamo alcuni:

Tutto maiuscolo: si scrivono tutti i tag indiscriminatamente in maiuscolo e gli attributi e i valori in minuscolo, ciò aumenta la leggibilità del testo se correttamente indentato
Maiuscoli alcuni tag: si scrivono in maiuscolo solamente i tag principali come <html>, <head> e <body>.
Tutto minuscolo: tutti i tag vengono scritti in minuscolo, con il rischio di confondersi con gli attributi, una corretta indentazione tuttavia risolve il problema. Quest'ultimo stile è inoltre consigliato se si vuole mantenere la compatibilità con l'XHTML.