HTML/Fondamenti

Wikibooks, manuali e libri di testo liberi.

Tutti i moduli · Copertina · Sviluppo · modifica il box

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[modifica]

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[modifica]

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[modifica]

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 verrano 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[modifica]

Una distinzione importante da fare tra gli elementi di una pagina HTML è quella tra i cosidetti 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, iniziano 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[modifica]

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: !-- il mio commento --

Ecco un esempio:

 html 

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

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

 /html 

Consigli sulla scrittura[modifica]

Indentazione[modifica]

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 no case-sensitive è 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.