Introduzione

Non ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all'utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l'idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell'HTML si rivelò una manna inaspettata. Con mia grande sorpresa molte persone si familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML

L'HTML e i browser

L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.

Il Browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti:

scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo

legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html

Oltre ad Internet Explorer, il browser più diffuso, esistono altri browser: prima di tutto lo "storico" Netscape Navigator, con cui la Microsoft ha ingaggiato una vera e propria guerra (vincendola). Poi il browser open source Mozilla, che nasce da Netscape e ha la particolarità di essere a codice aperto, cioè con la possibilità per gli sviluppatori di vedere com'è fatto il programma. Una parte di utenti (si tratta sempre di una minoranza comunque rispetto allo strapotere di Internet Explorer) utilizza poi Opera, un browser norvegese celebre per la sua velocità di visualizzazione delle pagine. Ovviamente esistono anche molti altri browser. Per ciascuno di essi esistono poi differenti versioni a seconda del sistema operativo (Windows, Mac OS, Linux, o altri).

è importante sin dall'inizio acquisire una mentalità multi-browser, perché il mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il codice HTML, quanto piuttosto nel sapere come il codice HTML verrà visualizzato sul computer dell'utente: infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme più svariate.

I files scaricati dal web vengono memorizzati in una particolare cartella del computer che prende il nome di cache.

In Internet Explorer è possibile visualizzarla utilizzando i comandi:

Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file

In Mozilla:

Modifica > Preferenze > Avanzate > Cache

In questo modo verrà mostrato il percorso della cartella in cui i documenti vengono temporaneamente memorizzati.

La visualizzazione di un file html da parte del browser prende il nome direndering della pagina. Motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina.

Il compito del linguaggio HTML è dunque quello di spiegare al browser come i vari files relativi al documento in esame devono essere disposti all'interno della pagina che stiamo visualizzando.

In qualsiasi momento è possibile visualizzare il codice HTML delle pagine che stiamo visitando. Con Internet Explorer:

Visualizza > HTML

Con Mozilla :

Visualizza > Codice Sorgente

oppure si può effettuare la stessa operazione, utilizzando il tasto destro del mouse per visualizzare il menù a tendina, e scegliendo poi la voce corrispondente.

Come funziona un browser

HTML è l'acronimo di Hypertext Markup Language("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java, e sono linguaggi di scripting il PHP, l'ASP, il PERL, il JavaScript).

Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag".

Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.

Il linguaggio HTML, pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione: se vi dimenticate di chiudere un tag, non verranno prodotti dei messaggi di errore; se non rispettate la sintassi probabilmente non otterrete la visualizzazione della pagina che desiderate, ma nient'altro. A volte vi troverete persino a dover adottare dei "trucchetti", non proprio da manuale, pur di visualizzare la pagina correttamente con ogni browser.

Suggerimenti: Può succedere - soprattutto a chi è alle prime armi - di continuare a modificare un file, ma di non riuscire a vederne le modifiche. Questo succede perché la pagina visualizzare è sempre quella vecchia memorizzata nella cache. Quando state elaborando pagine per il web, ricordatevi di impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina.

In Internet Explorer:

Strumenti > Opzioni Internet > Generale > Impostazioni >

Ricerca versioni più recenti delle pagine memorizzate:

all'apertura della pagina

In Mozilla:

Modifica > Preferenze > Avanzate > Cache >

Confronta la pagina nella cache con la pagina in rete

ogni volta che vedo una pagina

Prima di cominciare davvero: lo standard HTML

L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'HTML si è evoluto in XHTML (si tratta dell'HTML riformulato come linguaggio XML - ne sono già state rilasciate due versioni).

La versione dell'HTML che esamineremo in questo corso è l'ultima rilasciata: si tratta dell'HTML 4.01 del 24 dicembre 1999.

Anche se abbiamo detto che l'HTML si è evoluto in XHTML ci sono delle ottime ragioni per incominciare a studiare l'HTML e non l'XHTML:

di fatto l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web

alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. L'HTML è più immediato e consente di incominciare subito a produrre documenti web

chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

Le estensioni dei file e le impostazioni del browser

Per iniziare a scrivere pagine web avete bisogno di:

uno o più browser per visualizzare le pagine

un editor testuale per scrivere il codice HTML (potete usare il blocco note di Windows, o altri editor testuali come Ultra Edit oppure Html Kit, che è gratuito.

durante questo corso non utilizzeremo editor visuali: né FrontPage, né DreamWeaver, né GoLive, o altri. Su HTML.it troverete delle guide appositamente scritte per loro.

L'estensione del file

Aprite una pagina con il blocco note, e salvate il file in qualche cartella del vostro computer. Il file dovrà avere estensione "html", ad esempiomiaPagina.html.

Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm, ma questo avveniva perché il dos e poi Windows 3.1 non erano in grado di gestire i file con nomi di grandezza superiore a 8 caratteri ed estensione superiore alle 3 lettere. Dunque .html era diventato .htm, così come .jpeg era diventato .jpg.

Il problema delle estensioni è stato ampiamente superato sin dai tempi di Windows 95, e di conseguenza oggi il webmaster può decidere se attribuire ai files estensione .html o .htm. Siccome stiamo parlando di linguaggio HTML, personalmente preferisco l'estensione .html, ma è una questione di gusti (HTML.it, ad esempio, continua con il vecchio metodo).

Se avete dato alla pagina l'estensione .html o .htm, il browser dovrebbe essere in grado di aprire il file in automatico cliccandoci su due volte. Per modificare la pagina utilizzate i comandi Visualizza > HTML, cambiate il codice, salvate, utilizzate il pulsante "aggiorna" del browser e dovreste visualizzare le modifiche.

Se invece il file non è associato al browser, ma continua ad apparire come documento di testo, evidentemente questo avviene perché l'estensione non è .html, ma .html.txt, alcuni sistemi operativi hanno infatti la cattiva abitudine di nascondere l'estensione dei file (con il pretesto di rendere più usabile il sistema operativo stesso).

Per visualizzare l'estensione del file in sistemi Windows andate in una cartella e quindi:
Strumenti > Opzioni cartella > Visualizzazione

E poi togliere la spunta da:
"Nascondi le estensioni dei file per i tipi di file conosciuti"

infine premere il pulsante:
"Come cartella corrente"

I TAG dell'HTML: come scriverli

Struttura di un tag

Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi>contenuto</TAG>

Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:

<P align="right">testo</P>

dall'esempio è evidente che la struttura di un attributo è: attributo="valore"

Quindi in definita la struttura di un tag sarà:

<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:

<TAG attributi>

Ecco un esempio di immagine:

<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">

come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".

Annidamento e indentazione

Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.

Ad esempio:

<TAG1 attributi>
 contenuto 1

 <TAG2>
  contenuto 2
 </TAG2>

</TAG1>

Potremmo quindi avere ad esempio:

<P align="right">
 testo 1

  <P align="left">
    testo 2
  </P>

</P>

L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.

Come si può vedere già nell'esempio, è una buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento.

In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.

Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio:

<P align="right">testo 1<P align="left"> testo 2 </P></P>

con:

<P align="right">
 testo 1
 <P align="left">
   testo 2
 </P>
</P>

per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!

I commenti

Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

<!-- questo è un commento -->

e ci permette di "commentare" i vari punti della pagina. Ad esempio:

<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->

Maiuscolo o minuscolo?

L'HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.

<P ALIGN="RIGHT">

<p align="right">

vengono letti allo stesso modo dal browser.

Fino a qualche tempo fa, per aumentare la leggibilità del codice, era buona norma scrivere in maiuscolo il nome del tag (es: ) e in minuscolo gli attributi (es: align="right"). Quindi:

<P align="right">

Tuttavia oggi, per analogia con l'XHTML (che è figlio dell'XML e dell'HTML ed è"case sensitive", sensibile a maiuscole/minuscole - cfr. guida XHTML) è consigliabile scrivere tutto in minuscolo, per abituarsi già al linguaggio che verrà. Maiuscolo e minuscolo, in ogni caso non costituiscono errore.

Fino a questo momento - per rendere più chiare le differenze - abbiamo utilizzato la vecchia abitudine di alternare maiuscolo e minuscolo differenziando tag e attributi, d'ora in poi invece tutta la sintassi HTML della guida sarà in minuscolo.

Struttura della pagina

Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html.

Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

... altri tag ... 

</html>

Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>)	Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera
Corpo (<body>)	Qui è racchiuso il contenuto vero e proprio del documento

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>

Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo.

Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>HTML.it</title>
</head>
<body>
   <!-- Scriveremo qui -->
>
   Qui il nostro contenuto

</body>
</html>

D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.

L'HTML e i fogli di stile (CSS)

Separare il layout dal contenuto

L'HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio qui il mio testo) e i tag che indicano uno stile o una colorazione del contenuto (ad esempio , che colora il testo di rosso) si trovavano mischiati allo stesso livello.

Tuttavia vari anni di Web hanno fatto nascere l'esigenza di separare il contenuto dalla presentazione del contenuto medesimo.

Se per esempio io avessi tutti i titoli del mio documento in rosso e in grassetto, e a un certo punto decidessi di trasformarli in verde e in corsivo, con l'HTML classico (cioè l'HTML 3.2) dovrei andare a modificarmi a mano ogni tag contente le indicazioni della formattazione.

Quindi:

<p>
  <font color="red">
    <b>titolo 1</b>
  </font>
</p>

diventerebbe:

<p>
  <font color="green">
    <i>titolo 1</i>
  </font>
</p>

Ma se questa operazione non comporta difficoltà su una singola pagina, diventa insostenibile (o quantomeno difficoltosa, tanto che converrebbe scrivere un programma che effettuasse la conversione al posto nostro) su website molto grandi, a volte di centinaia di pagine.

Proprio per questo - come dicevamo - da un certo punto in poi è nata l'esigenza di separare il contenuto (la scritta "titolo 1"), dalla formattazione (il colore rosso e il grassetto). Per farlo è necessario utilizzare i fogli di stile, e il contenuto della pagina vista pocanzi diventerebbe qualcosa di questo genere:

<p class="formattaTitoli">
  titolo 1
</p>

la colorazione del testo verrebbe affidata alla classe "formattaTitoli", descritta altrove del documento, o su un file separato. Dunque basta editare la classe "formattaTitoli" per cambiare l'aspetto anche di centinaia di pagine.

È importante sapere da subito che alcune cose che stiamo imparando hanno la possibilità di essere espresse con una soluzione più elegante, e che consente al webmaster di gestire più agevolmente i propri siti. Alcuni elementi descritti nella guida corrente sono addirittura "deprecati"dal W3C, cioè destinati a cadere in disuso (come il tag ): man mano che li incontreremo (perché allo stato attuale del Web è ancora importante conoscerli) vi avvertirò che esistono altre soluzioni applicabili tramite i fogli di stile. Tuttavia in questo contesto non esamineremo i fogli di stile.

Gli elementi HTML e i fogli di stile

Un altro concetto importante è che gli elementi vengono classificati nella trattazione a fogli di stile secondo tre tipologie:

Elementi di blocco	Sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form.
Elementi "inline"	Sono gli elementi che - non andando a capo - possono essere integrati nel testo, come i collegamenti o le immagini
Liste	Lista numerate, o non numerate

La guida che state leggendo, senza entrare minuziosamente in questa classificazione, ne tiene conto, in modo da rendere più agevole il passaggio da una formattazione inserita nel codice HTML, a una formattazione che utilizzi i fogli di stile. Infatti, man mano che comincerete a costruire siti web, sentirete l'esigenza di passare a una formattazione avanzata.

Le due cose tuttavia non vanno sentite in contrapposizione: i fogli di stile sono semmai un arricchimento e un'espansione del codice HTML, viceversa non è possibile apprendere i fogli di stile senza conoscere il codice HTML.