Mettere informazione in rete - Realizzare pagine per Internet
Le liste
Oltre ai normali capoversi, in un testo possono comparire anche elenchi ordinati di voci, o liste. Le liste possono essere numerate (ad ogni voce o paragrafo della lista è assegnato automaticamente un numero progressivo) o non numerate (ogni voce o paragrafo della lista è preceduto da una pallina). Ecco la sintassi delle liste non numerate:
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ul>
Il marcatore <ul> (che può essere ricordato come abbreviazione di unordered list) va posto all'inizio della lista, che va chiusa, come di consueto, con </ul>. Ad ogni voce della lista va premessa l'istruzione <li> (dall'inglese list item) e in coda va posto il relativo tag di chiusura (</li>). L'aspetto a video delle unordered list è il seguente:

prima voce

seconda voce

terza voce

1 numerazione normale (impostazione standard)
es.: <ol type="1">

I numeri romani es.: <ol type="I">

i numeri romani minuscoli es.: <ol type="i">

a lettere minuscole es.: <ol type="a">

A lettere maiuscole es.: <ol type="A">

Stili logici
<strong>...</strong>	Testo molto rilevante. Viene reso di norma in grassetto
<em>...</em>	Testo enfatizzato. Viene reso di norma in corsivo
<cite>...</cite>	Testo citato. Viene reso di norma in corsivo
<address>...</address>	Indirizzo. Viene reso in corsivo o in grassetto con un carattere piccolo, oppure impaginato a sinistra

Ecco invece i marcatori più noti per gli stili fisici:

Stili fisici
<b>...</b>	Grassetto
<u>...</u>	Sottolineato
<i>...</i>	Italico
<big>...</big>	carattere più grande
<small>...</small>	carattere più piccolo

 
Gli stili logici sono considerati preferibili rispetto agli stili fisici perché sono indipendenti dalla materia scritta e rispondono dunque meglio alla filosofia di base propria di un linguaggio di marcatura logico come SGML, che privilegia l'indipendenza dallo strumento di visualizzazione usato. Ad esempio,
<strong>Testo da evidenziare</strong>
produce in genere un testo in grassetto, ma potrebbe produrre su browser diversi un testo evidenziato in modi alternativi (ad esempio in grassetto italico, o in reverse, o colorato in rosso...). Inoltre, in linea di principio un'istruzione <strong> potrebbe essere usata anche per spiegare ad un sintetizzatore vocale (es. per la lettura di testi a non vedenti) di leggere le pagine utilizzando un volume più alto o una determinata inflessione di voce.
Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si può scrivere:
<b><i>Questa riga è in neretto e corsivo</i></b>
Una precisazione ulteriore va data per lo stile sottolineato. La sottolineatura è in genere utilizzata dai browser per segnalare visivamente il testo attivo attraverso il quale, agendo col mouse, si può seguire un legame ipertestuale. Il testo attivo è marcato in genere anche da un colore particolare, ma qualcuno potrebbe non avere il monitor a colori. Di conseguenza è meglio utilizzare il sottolineato

Il tag <hr>
Il tag <hr> ha lo scopo di inserire una linea separatrice fra paragrafi. Si tratta di un'istruzione secca che non richiede tag di chiusura. Alcuni attributi applicabili sono:

• size="n", dove n indica lo spessore della riga
  (es.: <hr size="5">);
• noshade, che serve a eliminare l'effetto 'ombra' della linea
  (es.: <hr noshade>);
• width="n% | n", che regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel
  (es.: <hr width="50%"> oppure <hr width="250">);
• align="left | center | right", per allineare la riga rispettivamente a sinistra, al centro e a destra
  (es.: <hr align="right" width="80%">
  nota: gli effetti di questo attributo, ovviamente, sono visibili solo se la linea ha una larghezza inferiore al 100% dello schermo.

Sfondi e dimensionamento dei caratteri
Prima di vedere come si inseriscono tabelle, link ipertestuali e immagini, esaminiamo alcune istruzioni che permettono di ottenere un controllo maggiore sull'aspetto della pagina Web. Si tratta di comandi non sempre inclusi nello standard HTML, e dunque non necessariamente riconosciuti da tutti i browser (ma sicuramente dai principali e più diffusi).
 
Gli attributi di <body>
Il primo gruppo di istruzioni comprende gli attributi che possono essere aggiunti al marcatore <body>. Il seguente attributo si può utilizzare per far sì che una immagine venga a costituire lo sfondo di una pagina:
background="file-grafico"
(es.: <body background="stucco.gif">)
Nel caso in cui l'immagine fosse più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie come mattonelle su una parete; Esempio:
<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body background="stucco.gif">
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
etc etc.

Il dimensionamento dei caratteri
Il secondo gruppo di istruzioni che è utile analizzare permette di controllare la dimensione dei caratteri. Abbiamo già visto che gli elementi per i titoli provocano un cambiamento di dimensione del font. Le istruzioni che elenchiamo ora danno la possibilità di avere un controllo molto più raffinato della dimensione del carattere, e permettono di ottenere effetti grafici molto particolari.
La dimensione del carattere in un documento HTML può essere espressa in termini assoluti o relativi. Nel primo caso (termini assoluti) si usa il seguente marcatore:
<font size="n">testo</font>
Dove n è un numero che va da 1 a 7, ad es.: <font size="4">testo</font>.
La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito.
Per esprimere la dimensione del font in termini relativi si usa la seguente marcatura:
<font size="+/- n">testo</font>
In questo caso n può variare da -2 a +4. Miscelando queste varie direttive è possibile ottenere effetti come questo:
<font size="+4">C</font><font size="+3">I</font><font size="-1">A</font><font size="+2">O</font>
che producono:
CIAO

La dimensione normale, espressa in termini assoluti, può essere modificata con il seguente marcatore inserito subito dopo l'istruzione <body>:
<basefont size="n">
(es.: <basefont size="4">)
Questa istruzione ha effetto su tutto il documento, non ha bisogno di tag di chiusura, e influisce sulle eventuali direttive di font relative. Se, ad esempio, diamo <font size="+1"> ad una parola in un documento con basefont pari a 3 (cioè lo standard), avremo dei caratteri più piccoli rispetto alla stessa parola, cui viene applicato il medesimo tag <font size="+1">, ma con basefont pari a 4. Un po' di esercizi saranno utili per familiarizzare con il meccanismo del dimensionamento relativo. È infine facile verificare che, in seguito a un basefont, anche il range di valori utili del dimensionamento relativo può variare. Ad esempio, con basefont uguale a 4, il range va da -3 a +3 (e non più da -2 a +4).

Incorporare immagini
World Wide Web è un sistema di pubblicazione multimediale. Questo significa che è possibile inad esempiorire in un documento informazioni non testuali, anche se il grado di integrazione di queste informazioni varia in base al loro tipo. Ad esempio, i browser Web possono gestire direttamente solo alcuni formati di file grafici, come il formato GIF o il formato JPEG.
Il marcatore che svolge la funzione di inclusione di una immagine all'interno di un testo ha la seguente sintassi:
<img src="file-grafico"> (es.: <img src="tigre.gif">)
Questo elemento non ha bisogno di un marcatore di chiusura poiché non marca una zona di testo, ma segnala solo la posizione in cui inserire una immagine. Il valore dell'attributo src può essere o il pathname del file grafico, se questo è presente nello stesso computer del file HTML, o la URL corrispondente a un file grafico contenuto in un qualsiasi host di Internet (es.: <img src="http://www.e-text.it/immagini/tigre.gif">).
Normalmente tutti i file che compongono una pagina Web risiedono nel disco rigido della medesima macchina. Il pathname del file grafico va espresso in relazione alla collocazione del file HTML. Se, ad esempio, entrambi sono collocati nella stessa directory, basterà specificare come valore di src solo il nome del file, in questo modo: <img src=''tigre.gif''> (è consigliabile, specialmente per i meno esperti, fare in questo modo le prime volte). Altrimenti si dovranno specificare anche i nomi delle directory (cartelle nel mondo Macintosh o windows 95/98) in modo relativo a quella in cui si trova il file HTML, separati dalla barra (/). In questo modo potremo realizzare siti Web più ordinati, nei quali ad es. le immagini siano conservate in directory separate.

Gli attributi di <img>
Il tag <img> dispone di svariati attributi. Vediamo i principali:

• align="left | right | top | bottom | middle | ecc." es.: <img src="tigre.gif" align="left">

L'attributo align influenza la disposizione dell'immagine rispetto al testo che la precede e la segue. Ad esempio align="left" fa sì che l'immagine si collochi alla sinistra del testo. La figura che segue aiuterà a capire meglio la funzione dell'attributo:

Da notare che se si vuole centrare una immagine nello schermo, non si deve ricorrere all'attributo align, ma si deve inserirla in un capoverso centrato (es.: <p align="center"><img src="tigre.gif"></p>) oppure in una sezione centrata (es.: <div align="center"><img src="tigre.gif"></p>).

• width="n | n%" e height="n | n%" es.: <img src="tigre.gif" width="296" height="181">

Gli attributi width ed height servono ad indicare le dimensioni in pixel dell'immagine. Sono molto utili perché consentono ai browser di ridurre drasticamente il tempo che trascorre tra la visualizzazione di tutte le immagini contenute nel documento (che tipicamente richiedono più tempo) e la visualizzazione del testo. Occorre quindi cercare di indicare sempre le dimensioni delle immagini; molti programmi per la creazione di pagine HTML, quali FrontPage o Netscape Composer, sono fortunatamente in grado di calcolare ed inserire automaticamente queste cifre per conto nostro.

Se agli attributi width ed height vengono forniti valori errati, ad esempio si scrive che una immagine larga 200 pixel è invece larga 400, il browser allarga l'immagine fino al valore indicato, come stirandola. Non è necessariamente un errore: ad esempio, un metodo per ottenere delle righe colorate nello schermo consiste nell'inserire una immagine di 2 pixel per lato, del colore desiderato, e stirarla alla larghezza opportuna.

A width ed height possono essere forniti anche valori percentuali. Ricollegandoci con l'esempio precedente: <img src="quadratino. gif" width="50%" height="2"> fa sì che l'immagine quadratino.gif (un minuscolo quadrato rosso di appena 2 pixel per lato) si allarghi fino al 50% dello schermo, diventando, in sostanza, una riga rossa.

• alt="descrizione" es.: <img src="tigre.gif" alt="Una tigre">

L'attributo alt ha lo scopo di inserire una descrizione dell'immagine. Tale descrizione viene visualizzata dai browser intanto che l'immagine viene prelevata; si sostituisce alle immagini se il browser ne ha disabilitato il prelievo automatico e, infine, appare sullo schermo ogni qualvolta il puntatore del mouse si porta sull'immagine. L'attributo è molto utile anche ai browser non grafici, come quelli per MS-DOS, o quelli utilizzati dai non vedenti.

• border="n" es.: <img src="tigre.gif" border="2">

Quando una immagine è associata a un altro documento (è cioè diventata ipertestuale, vedremo in seguito come si fa) appare circondata da una cornice. L'attributo border ne determina lo spessore in pixel. È possibile fare in modo che tale cornice non venga visualizzata: basta assegnare il valore zero all'attributo border (es.: <img src="tigre.gif" border="0">).

• lowsrc=''file-grafico'' es.: <img src="tigre.gif" lowsrc="tigre-l.gif">

Questo attributo è particolarmente utile con le immagini di grandi dimensioni, che possono richiedere molti secondi o addirittura minuti per essere prelevate. Con lowsrc possiamo far sì che il browser, mentre preleva l'immagine principale, ne visualizzi un'altra, con il medesimo soggetto, ma molto più veloce da scaricare (perché magari ne è stato ridotto il numero di colori).

• hspace="n" e vspace="n"

Abbiamo visto che con align possiamo spostare l'immagine a sinistra e a destra del testo, abbiamo anche visto però che il testo è immediatamente adiacente all'immagine, in modo antiestetico. Con hspace e vspace possiamo determinare la distanza in pixel tra l'immagine e il testo. La distanza in senso orizzontale è determinata da hspace (horizontal space), quella in senso verticale da vspace (vertical space). Es.: <img src="tigre.gif" align="left" hspace="10" vspace="5">.

Inserire dei link
I link in una pagina Web sono aree attive del testo che ci permettono, con un click del mouse, di saltare a un documento collegato. La prima cosa che occorre decidere è dunque quale parte del testo si vuole rendere attiva, e poi inserire il marcatore per definirla come tale. La sintassi è la seguente:
<a href="url del documento di destinazione">testo attivo</a>
A sta per anchor, ancora in inglese, e l'attributo href sta per riferimento ipertestuale, e deve contenere la URL completa del documento di destinazione.
Aggiungiamo nella nostra pagina prova.htm un link ipertestuale, modificando la riga contenente <li>computer</li> in:
<li>computer (visita il <a href="http://www.computer.com ">sito dei computer</a> più famoso</li>
Da adesso in poi, è sufficiente un click su Computer per collegarsi all'indirizzo Internet http://www.computer.com. Con il medesimo semplice meccanismo, possiamo inserire link ad altri documenti presenti sul nostro stesso sito, e addirittura a punti specifici di un documento. La sintassi del path per richiamare un documento all'interno del nostro stesso sito è la medesima utilizzata per richiamare le immagini. Quindi:

• <a href="mario.htm">testo cliccabile</a>
  si usa quando il file 'mario.htm' si trova nella stessa directory nella quale è memorizzato il file che contiene il link ('prova.htm' nel nostro caso).
• <a href="notizie/mario.htm">testo cliccabile</a>
  si usa quando il file mario.htm si trova in una sub-directory (notizie nel nostro caso) di prova.htm.
• <a href="../mario.htm">testo cliccabile</a>
  si usa se il file mario.htm si trova nella directory superiore rispetto a quella che contiene prova.htm.
• <a href="../notizie/mario.htm">testo cliccabile</a>
  si usa se il file mario.htm si trova in una directory (notizie nel nostro caso) che è gerarchicamente allo stesso livello di quella che contiene prova.htm.

Le tabelle
Le tabelle sono uno strumento sofisticato che l'HTML ci mette a disposizione per la gestione del testo e della grafica. Grazie alle tabelle il testo si può organizzare su più colonne, si possono creare zone con sfondi di colore diverso, e molto altro.
Creiamo una semplice tabella di una sola riga e due colonne. Ecco la sintassi:
<table>
<tr><td>prima cella</td><td>seconda cella</td></tr>
</table>
Ecco il risultato a video:

prima cella

seconda cella

Per vedere meglio come funziona, aggiungiamo subito un attributo a table, così che il bordo della tabella diventi visibile, e cambiamo <table> in <table border="1">. Ecco il risultato a video:

prima cella

seconda cella

Vediamo ora come aggiungere una seconda riga:
<table border="1">
<tr><td>prima cella</td><td>seconda cella</td></tr>
<tr><td>prima cella della seconda riga</td>
<td>seconda cella della seconda riga</td></tr>
</table>
Queste righe di codice vengono visualizzate nel modo seguente:

prima cella	seconda cella
prima cella della seconda riga	seconda cella della seconda riga

Notiamo alcune cose. Innanzitutto il testo appare attaccato al bordo sinistro delle singole celle, inoltre queste ultime, senza la necessità di ulteriori istruzioni, si sono automaticamente allargate così da contenere il testo senza andare a capo.
Vediamo nel dettaglio i singoli tag utilizzati, e poi i numerosi attributi applicabili:

• <table>
  ogni tabella inizia con <table> e si chiude con </table>. Il tag dispone dei seguenti attributi:

• <tr>
  è l'abbreviazione di table row, e determina l'inizio di una riga di una tabella. Si chiude come al solito con </tr>. Questi i due attributi applicabili:

align="left | center | right"
(es.: <tr align="right">)
left, center e right (rispettivamente: sinistra, centro, destra) indicano l'allineamento orizzontale di tutte le celle presenti nella riga.

valign="top | middle | bottom"
(es.: <tr valign="bottom">)
top, middle e bottom (rispettivamente: in alto, al centro, in basso) riguardano l'allineamento verticale di tutte le celle presenti nella riga.

• <td>
  si può usare solo all'interno di <tr></tr> e determina l'inizio e la fine di una singola cella. Anche questo tag dispone di alcuni attributi. Eccoli:

align="left | center | right"
(es.: <td align="center">)
analogamente a quanto avviene per <tr>, left, center e right indicano l'allineamento orizzontale, ma non di tutte le celle presenti nella riga, bensì delle sole celle in cui sono presenti.

valign="top | middle | bottom"
(es.: <td valign="top">)
top, middle e bottom riguardano l'allineamento verticale della singola cella.

nowrap
(es.: <td nowrap>)
fa sì che il testo contenuto nella cella non vada a capo (può quindi accadere che la cella diventi più larga dello schermo).

width="n | n%"
(es.: <td width="50%"> oppure <td width= "80">)
determina la larghezza della singola cella. Se ad esempio in una tabella con due celle si vuole che abbiano entrambe la stessa larghezza, si potrà scrivere in ognuna <td width="50%">. Se le celle sono quattro scriveremo <td width="25%">, e così via.

bgcolor="#rrggbb"
(es.: <table bgcolor="#FF0000"> oppure <table bgcolor="red">)
Inserendolo all'interno di un <td> facciamo in modo che cambi solo il colore di sfondo della cella che lo contiene. Questo attributo è riconosciuto solo dalle versioni più recenti dei browser.

rowspan="n"
(es.: <td rowspan="2">)
fa sì che una cella risulti alta n celle, dove n è un qualsiasi numero intero (es.: 2). Per maggiore chiarezza, vediamo una tabella in cui una cella ha l'attributo rowspan="2":

<table border="1">
<tr><td rowspan="2">prima cella, alta quanto due</td><td>seconda cella</td></tr>
<tr><td>seconda riga, con una sola cella</td></tr>
</table>

Eccone l'aspetto a video:

Da notare che nella seconda riga è stata creata una sola cella. Questo perché la prima cella, della prima riga, è alta quanto due celle, ed ha reso una eventuale seconda cella della seconda riga del tutto inutile!

colspan="n"
(es.: <td colspan="2">)
fa sì che una cella risulti larga n celle, dove n è un qualsiasi numero intero (es.: 2). Per maggiore chiarezza, vediamo anche nel caso di colspan un esempio concreto:

<table border="1">
<tr><td colspan="2">prima cella, larga quanto due</td></tr>
<tr><td>seconda riga, prima cella</td><td>seconda riga, seconda cella</td></tr>
</table>

A video, queste righe di codice produrranno il seguente risultato:

Come vedete, nella prima riga è stata creata una sola cella, larga quanto le due celle della seconda riga, prese insieme.A questo punto siamo in grado di costruire una tabella di questo tipo:

• _testo
  utilizzato per marcare dei caratteri come pedici. Ad esempio, H₂O appare così: H2O
• ^testo
  utilizzato per marcare dei caratteri come apici. Ad esempio, 12³ appare così: 123
• <tt>testo</tt>
  da typewriter, visualizza i caratteri a spaziatura fissa
• <blink>testo</blink>
  ecco un tag poco amato (perché se ne è spesso abusato). Fa lampeggiare il testo (non supportato da Internet Explorer).

• <pre>testo</pre>
  da preformatted e serve a rendere il testo a video così come è scritto, e con un font a spaziatura fissa: inoltre se all'interno del testo preformatted c'è un codice di ritorno a capo, questo è reso anche a video (contrariamente a quanto avviene di solito in HTML, dove è necessario un tag <p> oppure <br> per ottenere un ritorno a capo). Il comando pre ha un attributo:
• width="c" es.: <pre width="80">
• dove c indica il numero di caratteri oltre il quale il browser deve inserire comunque un codice di ritorno a capo
• <blockquote>testo</blockquote>
  indica le citazioni, rendendole graficamente come capoversi con un rientro sia a sinistra, sia a destra (di solito il tag è utilizzato più in virtù del suo effetto a video che del suo significato)
• <nobr>testo</nobr>
  disattiva l' "a capo" automatico dei browser
• <wbr>
  indica un "a capo" all'interno del testo marcato con <nobr>