Guida di HTML (base)

Formattare il testo (1)

Ora che abbiamo visto quella che è l'ossatura generale di una pagina web, possiamo concentrarci sul contenuto vero e proprio che viene mostrato nel browser: i tag da inserire tra <body> e </body>.

Come abbiamo già accennato, i tag HTML sono dei marcatori che, in un documento HTML, servono a definire le porzioni di testo che hanno qualche caratteristica particolare.

Avevamo fatto l'esempio del grassetto:

Questo è un testo <b>formattato</b>!

In questo esempio la parola formattato avrà la caratteristica particolare di essere visualizzata in grassetto. Ad ogni tag di apertura (nell'esempio <b>) corrisponde un tag di chiusura (nell'esempio </b>), formato dal nome del tag preceduto da una barra (/, che in inglese è detta slash).

Osservazione: tutti gli elementi visti nell'articolo precedente (html, head, title e body) seguono l'identico meccanismo: sono aperti da un <TAG> e chiusi da un </TAG>.

Attributi

Un tag può essere anche più complesso di una semplice parola, proviamo a visualizzare questa pagina (occhio al tag body!):

<html>
<head>
<title>Sfondo colorato!</title>
</head>

<body bgcolor="yellow">
We all live in a yellow submarine... - The Beatles
</body>
</html>

Noteremo che lo sfondo della pagina diventa giallo. Questo, come si può intuire, è dovuto all'attributo bgcolor (riga 6), che serve a specificare una caratteristica di body: il colore di sfondo (bgcolor sta per background color, che in inglese significa, appunto, colore dello sfondo).

Un attributo, quindi, è una sorta di opzione, che aggiunge delle caratteristiche ad un tag (in questo caso aggiunge il colore dello sfondo per body). Gli attributi si trovano all'interno dei tag, dopo il nome, e sono sempre scritti nella forma attributo="valore".

I seguenti sono tutti esempi di tag con attributi:

  • <p align="center"> - Denota un paragrafo in cui il testo è centrato
  • <table border="2"> - Denota una tabella con bordo spesso 2 pixel
  • <hr width="80%" align="center"> - Denota un separatore orizzontale largo 80% (si intende l'80% della larghezza della finestra) e allineato al centro.

Si osservi che, anche se alcuni attributi sono applicabili a più tag diversi (negli esempi, "align" è applicato sia a "p" che ad "hr"), in generale ogni tag ha i suoi attributi, e non è detto che questi siano applicabili ad altri tag.

Paragrafi e titoli

Studiando l'HTML, la prima cosa di cui si parla è la gestione del testo.

Come di consueto, inizio con un esempio; proviamo a copiare questo testo

<html>
<head>
<title>Her Majesty</title>
</head>

<body>
HER MAJESTY

Her Majesty's a pretty nice girl,
but she doesn't have a lot to say
Her Majesty's a pretty nice girl
but she changes from day to day

I want to tell her that I love her a lot
But I gotta get a bellyful of wine
Her Majesty's a pretty nice girl
Someday I'm going to make her mine, oh yeh,
someday I'm going to make her mine.

                               The Beatles
</body>
</html>

Provando ad aprire questa pagina con un browser web, si ottiene un'amara sorpresa: il testo, che nel codice è molto ordinato e diviso in strofe, nel browser viene visualizzato tutto di seguito, ignorando la separazione delle righe, e gli spazi che precedono l'ultima riga:

Visualizzazione del codice non lavorato

Questo avviene perchè in HTML il testo non si lascia mai "libero", ma va sempre inserito all'interno di qualche tag: vediamo ora come formattare correttamente questa pagina, utilizzando i tag basilari dell'HTML.

Paragrafi

La prima cosa che andremo a fare è dividere le due strofe. Per fare questa cosa in HTML si usano i paragrafi.

Un paragrafo è un blocco di testo, e non si usa solo per separare le strofe di canzoni e poesie, ma anche per rendere più piacevole da leggere un testo in prosa; si può notare che questo stesso articolo è diviso in molti paragrafi. Il concetto è lo stesso del "punto e a capo" quando si scrive un tema: se, dopo un punto, il discorso perde attinenza con quanto detto prima del punto, il testo va a capo e, in questo caso, inizia un nuovo paragrafo.

Per completezza, aggiungo che, quando si parla di libri o articoli, con paragrafo si intende una sotto-sezione di un capitolo. Ad esempio, i paragrafi di questo capitolo della guida di HTML sono "Attributi", "Paragrafi e titoli", "HTML e formattazione" e "In breve...". Attenzione però, in HTML il significato di "paragrafo" è molto più simile a quello di "punto e a capo". Ad esempio, questo testo scritto in piccolo, nel codice HTML è il terzo paragrafo della sezione "Paragrafi" (il primo è quello che inizia con "La prima cosa...", ed il secondo inizia con "Un paragrafo...").

Il tag HTML per il paragrafo è il tag <p>:

<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
<p>Terzo paragrafo</p>
...

Per suddividere il testo precedente nelle due strofe è sufficiente racchiudere ciascuna strofa tra i tag <p> e </p>:

HER MAJESTY

<p>
Her Majesty's a pretty nice girl,
but she doesn't have a lot to say
Her Majesty's a pretty nice girl
but she changes from day to day
</p>

<p>
I want to tell her that I love her a lot
But I gotta get a bellyful of wine
Her Majesty's a pretty nice girl
Someday I'm going to make her mine, oh yeh,
someday I'm going to make her mine.
</p>

                               The Beatles

Il risultato ottenuto è il seguente:

Suddivisione in paragrafi

Meglio, ma c'è ancora molto da fare...

Attributi

Il tag <p> dispone di un attributo di formattazione: align. Esso può assumere i seguenti valori:

  • left - il testo del paragrafo sarà allineato a sinistra.
  • right - il testo del paragrafo sarà allineato a destra.
  • center - il testo del paragrafo sarà centrato.
  • justify - il testo del paragrafo sarà giustificato (ovvero tutte le righe hanno la stessa larghezza; si usa sui testi lunghi).

Per capirne il funzionamento, si provi a sostituire, nella pagina di esempio, <p> con <p align="center">, e a variare poi il valore dell'attributo per vedere cosa succede.

È necessario dire che questo attributo, ed in generale tutti gli attributi di formattazione fisica (vedi il paragrafo "HTML e formattazione"), oggi è considerato obsoleto, e quindi sconsigliato nella scrittura di siti web moderni, in cui per decorare le pagine si usano i fogli di stile. Di questo parlerò meglio al termine del capitolo.

Andare a capo

Il prossimo passo sarà mandare a capo il testo, alla fine delle righe, come è scritto nel codice.

Per fare questo potremmo usare i paragrafi, creandone uno per ogni riga; però così facendo si perderebbe l'unità di ciascuna strofa, ottenendo un insieme di righe.

Quello che invece vogliamo fare è mandare il testo a capo senza interrompere il paragrafo. Per fare questo si utilizza il tag <br> (che sta per line break, termine inglese per indicare l'inizio di una nuova riga di testo.)

<p>Questo testo va a capo<br />senza interrompere il paragrafo</p>

Questo codice sarà visualizzato come:

Questo testo va a capo
senza interrompere il paragrafo

Graficamente, la differenza sta nel fatto che <br /> non lascia spazio tra una riga e l'altra, mentre generalmente paragrafi sono separati da un po' di spazio bianco.

È da notare un fatto particolare: br non ha un tag di chiusura. Fino ad ora abbiamo sempre visto tag scritti nella forma <TAG>testo compreso</TAG>. È intuitivo, però, che un tag come <br /> non è fatto per marcare una porzione di testo, ma piuttosto per inserire un elemento (in questo caso un ritorno a capo).

I tag come <br /> (ne vedremo altri durante il corso), che non prevedono una chiusura, in HTML sono scritti aggiungendo uno slash (/) dopo il nome, come si vede nell'esempio qua sopra.

Il nostro documento a questo punto si trasforma in:

HER MAJESTY

<p>
Her Majesty's a pretty nice girl,<br />
but she doesn't have a lot to say<br />
Her Majesty's a pretty nice girl<br />
but she changes from day to day<br />
</p>

<p>
I want to tell her that I love her a lot<br />
But I gotta get a bellyful of wine<br />
Her Majesty's a pretty nice girl<br />
Someday I'm going to make her mine, oh yeh,<br />
someday I'm going to make her mine.<br />
</p>

                               The Beatles

Il risultato ormai è molto simile a quello che vogliamo ottenere:

Aggiunta del tag <br /> per spezzare le righe

Separatore orizzontale

Giacchè abbiamo parlato di <br />, apro una parentesi su un tag simile: <hr />.

Questo tag serve ad inserire nel documento un separatore orizzontale:

<p>Testo sopra la riga</p>
<hr />
<p>Testo sotto la riga</p>

<hr size="10" noshade />
<p>Altra riga</p>
<hr width="80%" size="5" align="center" />
<p>Altro testo</p>

Uso del tag hr

Le opzioni disponibili per questo tag sono:

  • width - specifica la larghezza della barra.
  • size - specifica l'altezza della barra.
  • align - specifica l'allineamento (left, center, o right).
  • noshade - visualizza l'intera barra in un colore uniforme.

Attenzione! Vale lo stesso discorso degli attributi di <p>: si tratta di attributi obsoleti, che oggi è sconsigliato utilizzare (si veda alla fine dell'articolo).

Spazi bianchi

L'ultima cosa che manca al nostro documento sono gli spazi bianchi prima dell'ultima riga.

In HTML lo spazio è considerato un carattere speciale (entity); tanti spazi consecutivi, vengono trattati come se fossero uno spazio solo (si dice che vengono "condensati" in un unico spazio).

Esiste tuttavia un modo per inserire quanti spazi si vuole: utilizzare il codice &nbsp;. Questo illeggibile codice, viene automaticamente tradotto dal browser in uno spazio bianco; più &nbsp; non vengono condensati in uno spazio solo:

<p>Questi sono tre spazi: "&nbsp;&nbsp;&nbsp;"</p>

Questo codice produrrà il testo Questi sono tre spazi: "   ".

È facile contare il numero di spazi che, nell'esempio, precedono le parole "The Beatles", sono 31. Trucco: per non contare i caratteri a mano si può leggere il valore che ci interessa direttamente nell'editor; infatti, quando il cursore è posizionato su un certo carattere, la barra di stato solitamente ne indica il numero:

Uso del tag hr

Nell'immagine si vede che la 'T' è il trentaduesimo carattere, quindi il numero di spazi bianchi è 31.

Con il metodo descritto, inserire 31 spazi è un'operazione banale (e, a dirla tutta, neppure troppo elegante):

HER MAJESTY

<p>
Her Majesty's a pretty nice girl,<br />
but she doesn't have a lot to say<br />
Her Majesty's a pretty nice girl<br />
but she changes from day to day<br />
</p>

<p>
I want to tell her that I love her a lot<br />
But I gotta get a bellyful of wine<br />
Her Majesty's a pretty nice girl<br />
Someday I'm going to make her mine, oh yeh,<br />
someday I'm going to make her mine.<br />
</p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Beatles

Ora la pagina è come la volevamo:

Altri caratteri speciali

Un elenco completo delle entities (i caratteri speciali dell'HTML) può essere trovato qui.

Si noti che, oltre ad un sacco di caratteri strani e improbabili, anche tutte le lettere accentate sono caratteri speciali in HTML. Infatti, per ragioni legate alla codifica (bisognerebbe scrivere un articolo apposta, per entrare nei dettagli), questi caratteri spesso non sono interpretati correttamente; il seguente è un esempio in cui l'uso dei simboli permette di visualizzare correttamente le lettere accentate, anche quando la codifica è male interpretata dal browser:

Visualizzazione non corretta di caratteri speciali.

Esercizio 1: scrivere, utilizzando i codici giusti, una pagina HTML che contenga la frase "È così bello usare Linux perché è più veloce.".

Esercizio 2: scrivere, utilizzando i codici giusti, una pagina HTML che contenga la frase "Il tag <b> serve a scrivere in grassetto una parte di testo.".

Esercizio 3: scrivere, utilizzando i codici giusti, una pagina HTML che contenga la frase "Con il codice &nbsp; posso inserire uno spazio, e con &amp; una &".

Titoli

Un altro importante elemento nell'HTML sono i titoli.

L'HTML mette a disposizione 6 livelli di titoli. I tag per questi sei livelli sono molto simili tra loro, e vanno da <h1> ... </h1> (primo livello) a <h6> ... </h6> (sesto livello):

<h1>Titolo della sezione</h1>
<p>Testo della sezione</p>

Il titolo è una parte di testo in particolare rilievo rispetto alle altre. Mano a mano che il livello dei titoli aumenta, essi diventano più piccoli e meno evidenti. Tuttavia la parte importante non è l'aspetto estetico (si vedrà in altre guide che esso può essere completamente stravolto utilizzando i fogli di stile), ma il concetto che sta alla base della gerarchia dei titoli.

I titoli infatti sono pensati per essere annidati:

<h1>La Bibbia</h1>
<p>La Bibbia cristiana si divide in Antico Testamento e Nuovo Testamento.</p>

<h2>Antico testamento</h2>
<p>L'Antico Testamento è composto da 46 libri.</p>
<h3>Genesi</h3>
<p>La Genesi è il primo libro dell'Antico Testamento.</p>
<h3>Esodo</h3>
<p>L'Esodo è il secondo libro dell'Antico Testamento.</p>
<p>...</p>

<h2>Nuovo testamento</h2>
<p>Il Nuovo Testamento è composto da Vangeli, Atti, Lettere e Apocalisse</p>
<h3>Vangelo secondo Matteo</h3>
<p>Il Vangelo secondo Matteo è, assieme a Marco e Luca, uno dei tre vangeli sinottici.</p>
<h3>Vangelo secondo Marco</h3>
<p>Il Vangelo secondo Marco è, assieme a Matteo e Luca, uno dei tre vangeli sinottici.</p>
<p>...</p>

In questa schematica rappresentazione della struttura della Bibbia, è evidente come gli <h3> siano sotto-sezioni degli <h2>, i quali a loro volta sono sotto-sezioni del titolo principale (La Bibbia), marcato con <h1>:

Titoli annidati nella descrizione della struttura della Bibbia

Come esempio molto più semplice, possiamo ultimare il lavoro sul testo dei Beatles, marcando la prima riga come titolo (riga 7):

<html>
<head>
<title>Her Majesty</title>
</head>

<body>
<h1>HER MAJESTY</h1>

<p>
Her Majesty's a pretty nice girl,<br />
but she doesn't have a lot to say<br />
Her Majesty's a pretty nice girl<br />
but she changes from day to day<br />
</p>

<p>
I want to tell her that I love her a lot<br />
But I gotta get a bellyful of wine<br />
Her Majesty's a pretty nice girl<br />
Someday I'm going to make her mine, oh yeh,<br />
someday I'm going to make her mine.<br />
</p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Beatles</p>
</body>
</html>

Il risultato è una pagina web decisamente ben formattata:

Il risultato finale

HTML e formattazione

Prima di chiudere il capitolo, è necessario fare chiarezza su un punto fondamentale dell'HTML: la distinzione tra formattazione fisica e formattazione logica.

Cosa vuol dire questa cosa?

Probabilmente non ci avete fatto caso, ma fino ad ora abbiamo usato i tag HTML per due scopi molto differenti tra loro:

  • Definire l'aspetto del testo e delle pagine (formattazione fisica).
  • Definire la struttura logica del testo e delle pagine (formattazione logica).

Il tag <b> è un classico esempio di formattazione fisica: non dà informazioni sul significato del testo in grassetto, serve solo a dire che quel testo deve essere, in ogni caso, visualizzato in grassetto. Anche gli attributi come align, width e size, visti per i tag <p> e <hr/>, o l'attributo bgcolor di body, sono attributi di formattazione fisica, come si può facilmente intuire.

Il tag <h1>, invece, fornisce anzitutto un'importante indicazione logica sul ruolo del testo racchiuso tra <h1> e </h1>: esso deve essere inteso come un titolo. Il fatto che poi i titoli siano diversi anche fisicamente (generalmente un titolo è scritto più grande del testo normale) è un effetto secondario, e a discrezione del browser; infatti può capitare che due browser diversi formattino i titoli in modo diverso. Anche i tag <html>, <head>, <title>, <body> e <p> sono tag che danno informazioni logiche.

Questa distinzione può sembrare sottile o perfino inutile, ma in realtà sta assumendo sempre maggiore importanza nel mondo del web.

Per molti anni, infatti, l'HTML è stato utilizzato, mischiando questi due concetti, per curare sia l'aspetto fisico, sia la struttura logica delle pagine; infatti in HTML sono presenti moltissimi tag e attributi che si occupano esclusivamente dell'estetica delle pagine (come, ad esempio, il tag <font>, che modifica il carattere ed il colore del testo, o il tag <center> che rende centrati tutti gli elementi marcati).

Oggi però questo stile è considerato obsoleto; è consigliato, invece, usare l'HTML per definire la sola struttura logica di una pagina web, ed affidare l'aspetto estetico ai fogli di stile CSS.

Un foglio di stile è un documento che, allegato ad una pagina web (in HTML esistono TAG apposta per inserire i fogli di stile), dice al browser come devono essere disegnati tutti gli elementi che la compongono. Ad esempio, con i fogli di stile si possono specificare cose come il colore dello sfondo, la dimensione dei titoli, e perfino la disposizione degli elementi; un foglio di stile può stravolgere completamente l'aspetto di una pagina web:

Una pagina web che utilizza i fogli di stile. La stessa pagina web, senza il foglio di stile.

Qua sopra è visualizzata la stessa pagina web, con (a sinistra) e senza (a destra) il foglio di stile associato.

In questa guida non vedremo come usare i fogli di stile (per questo sarà scritta una guida apposta). Non ho neanche intenzione di soffermarmi troppo sui tag, ormai obsoleti, di formattazione fisica: le pagine che andremo a creare saranno volutamente scarne ed essenziali, in modo da poter essere "colorate" in seguito, utilizzando i fogli di stile.

In breve...

In questo capitolo abbiamo visto che:

  • Tutti gli elementi HTML sono marcati utilizzando dei tag, nella forma <TAG>testo compreso</TAG>.
  • Un tag può avere degli attributi, che specificano alcuni aspetti del tag; in questo caso la forma è: <TAG attributo1="valore1" attributo2="valore2" ... >testo compreso</TAG>. Esempio: <p align="center">Paragrafo con testo allineato al centro</p>.
  • Nel codice HTML, gli spazi multipli, ed il ritorno a capo sono ignorati.
  • Per andare a capo e facilitare la lettura del testo si usano i paragrafi: <p>Questo è un paragrafo</p>.
  • Per andare a capo, senza interrompere il paragrafo, si usa il tag <br />.
    • È interessante il fatto che il tag <br /> non dev'essere chiuso. Al posto del tag di chiusura si inserisce una barra (/) dopo il nome del tag.
  • Per inserire un separatore orizzontale si usa il tag <hr />.
  • In HTML esistono dei simboli speciali detti entities, che è preferibile inserire usando degli appositi codici. Il codice per lo spazio bianco è &nbsp;.
  • Per inserire un titolo di primo livello (il più grande) su utilizza il tag <h1>Titolo</h1>. Un titolo di primo livello può avere sotto-titoli di secondo livello (<h2>Sotto-titolo</h2>). Un titolo di secondo livello può avere dei sotto-titoli di terzo livello, e così via fino al livello 6, che è l'ultimo.
  • Per molti anni l'HTML è stato usato per descrivere l'aspetto estetico delle pagine web. Oggi questo compito è invece svolto dai fogli di stile CSS.
  • In HTML esistono molti tag e attributi dedicati all'estetica delle pagine, ma, poichè sono considerati obsoleti, in questa guida non gli dedicheremo molto spazio, in modo da concentrarci sugli elementi fondamentali per scrivere del buon codice, che potrà essere arricchito seguendo la guida sui CSS.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag