Mettere informazione in rete

[ vai a Sezione 01 ] [ Sezione 02 ]

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. Vediamo il listato della nostra pagina di prova con aggiunto questo attributo in <body> e quindi vediamone l'effetto a video:

<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>
<h3>Il mio tempo libero</h3>
<ul>
<li>letteratura</li>
<li>cinema (qui sotto la classifica dei miei film preferiti)</li>
<ol>
<li>Blade Runner</li>
<li>Oltre il giardino</li>
<li>Delicatessen</li>
</ol>
<li>sport</li>
</ul>
<h3>Il lavoro</h3>
<dl>
<dt>Scuola di Giornalismo di Perugia</dt>
<dd>insegno l'applicazione delle nuove tecnologie alla professione di giornalista</dd>
<dt>Laterza</dt>
<dd>in collaborazione con alcuni colleghi ho scritto un manuale su Internet</dd>
<dt>RAI</dt>
<dd>ho progettato il sistema informativo della trasmissione Media/Mente</dd>
</dl>
</body>
</html>

Ecco il risultato a video:

Figura 109
Figura 109
Allo sfondo di colore uniforme si è sostituita una immagine che vuole ricordare una parete stuccata

Ovviamente abbiamo precedentemente provveduto a creare, oppure a prelevare da qualche archivio, l'immagine usata per lo sfondo. Quando si ricorre a simili accorgimenti, si consideri che la leggibilità del testo impaginato può diminuire, specie se i colori dell'immagine non contrastano sufficientemente con quelli usati per i caratteri.

In alternativa all'attributo 'background', si può usare:

bgcolor="#colore RGB"

(es.: <body bgcolor="#FFFFFF">)

che permette di assegnare un colore allo sfondo. Notate che per indicare il colore occorre utilizzare il sistema RGB in notazione esadecimale. RGB sta per Red, Green, Blue, i tre colori fondamentali e che, come è noto, miscelati opportunamente producono tutti i colori dello spettro. Per motivi strettamente informatici, la miscelazione degli indici RGB avviene in notazione numerica esadecimale (una notazione che ha base 16, e utilizza le dieci cifre della notazione decimale più le lettere fino alla F, ovvero: 0 1 2 3 4 5 6 7 8 9 A B C D E F, dove B, ad esempio, vale 11, e F vale 15).

Sembra complicato, ma vediamo come risolvere il problema nella pratica. Immaginiamo di voler ottenere, per il nostro sfondo, un bianco. Tornando indietro con la memoria ai nostri studi scolastici115, ricorderemo che il bianco si ottiene con la somma di tutti i colori dell'iride. Nel nostro caso perciò dovremo assegnare ai nostri 3 indici (red, green, blue) il massimo valore, che nella notazione esadecimale si scrive FF, cioè: <body bgcolor=''#FFFFFF''> (FF per il rosso, FF per il verde, FF per il blu). Volendo ottenere il nero, ovvero la sottrazione di tutti i colori, assegneremo ai nostri tre indici il valore più basso (zero, 00 in esadecimale), quindi: <body bgcolor=''#000000''>. Ancora, sapendo che il giallo è ottenuto con la somma di rosso e verde, scriveremo: <body bgcolor=''#FFFF00''>. Volendo ottenere, infine, un giallo più pallido, aggiungeremo un po' di blu nella nostra tavolozza elettronica, passando da 00 a 77: <body bgcolor=''#FFFF77''>.

Vi sembra ancora complicato? Niente paura, per fortuna ci sono due scappatoie. La prima consiste nel ricorso a programmi appositamente realizzati, come Color Manipulation Device, o a programmi di grafica come Paint Shop Pro, Corel Photo-Paint o BME (per Macintosh), grazie ai quali è sufficiente un click del mouse sul colore desiderato per vedersi restituire il suo valore numerico. L'altra scappatoia consiste nel ricorso al nome per esteso del colore, secondo questo elenco:

Nome del colore Descrizione
Aqua Verde acqua
Black Nero
Blue Blu elettrico
Fuchsia Fucsia
Gray Grigio
Green Verde
Lime Verde limone
Maroon Bordeaux
Navy Blu scuro
Olive Verde oliva
Purple Viola
Red Rosso
Silver Grigio chiaro
Teal Grigio verde
White Bianco
Yellow Giallo

Es.: <body bgcolor=''yellow''>. Quest'ultima soluzione è decisamente la più semplice, ma riduce a 16 il numero di colori che possiamo adottare (contro i 16 milioni della notazione esadecimale).

Dove trovare i programmi che abbiamo citato? Per prelevare una copia di Color Manipulation Device (shareware Windows), la URL è http://www.meat.com/software/cmd.html; per prelevare una copia di Paint Shop Pro (shareware Windows): http://www.jasc.com; per ulteriori informazioni su Corel Photo-Paint (commerciale Windows): http://www.corel.com/; per prelevare una copia di BME (freeware Macintosh): http://www.softlogik.com/. Se siete nell'imbarazzo della scelta, consigliamo l'ottimo Paint Shop Pro.

La notazione esadecimale appena vista può essere adoperata per attribuire un colore anche al testo e ai link ipertestuali presenti nella nostra pagina HTML. Ecco la sintassi per ottenere una pagina bianca con il testo rosso scuro:

<body bgcolor="#FFFFFF" text="#990000">

All'interno del tag <body> possiamo aggiungere altri attributi, oltre a 'text', i quali ci consentono di determinare i colori dei link ipertestuali, secondo questo schema:

  • link="#colore RGB" indica il colore dei link
  • vlink="#colore RGB" indica il colore dei link già attivati
  • alink="#colore RGB" indica il colore dei link mentre si attivano con il mouse

Ad esempio:

<body bgcolor="#FFFFFF" text="#990000" link="00FF00" vlink="#00AA00" alink="#FFFF00">

fa sì che lo sfondo sia bianco, il testo rosso scuro, i link (cioè le parole 'cliccabili') verdi, i link visited, cioè già visitati, verde scuro e i link attivi (active link) gialli. Occorre prestare molta attenzione alla scelta dei colori: c'è infatti il rischio di rendere la pagina illeggibile.

Un altro consiglio di stile relativo alle immagini di sfondo riguarda naturalmente la dimensione: evitate di scegliere per lo sfondo immagini troppo 'pesanti' (che cioè occupano troppa memoria): intasano inutilmente la rete, e rallentano la visualizzazione della pagina.

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. Naturalmente questi marcatori contravvengono a tutti i principi del markup funzionale... ma l'occhio vuole la sua parte!

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 inserire 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 pathname116 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) in modo relativo a quella in cui si trova il file HTML, separati dalla barra (/)117. In questo modo potremo realizzare siti Web più ordinati, nei quali ad es. le immagini siano conservate in directory separate.

Facciamo qualche esempio pratico per chiarirci le idee. Immaginiamo che il file HTML sul quale stiamo lavorando (prova.htm) si trovi nella directory 'testi' e l'immagine da inserire (tigre.gif) in una directory 'immagini' contenuta all'interno di 'testi', come dalla figura seguente:

Figura 110
Figura 110
In una struttura come questa, la sintassi del comando <img> contenuto in prova.htm è <img src="immagini/tigre.gif">

Il path in tal caso sarà 'immagini/tigre.gif'. Ovvero abbiamo indicato al browser di 'entrare' nella directory 'immagini' e di cercare lì il file grafico.

Immaginiamo ora una situazione diversa. Le directory 'testi' e 'immagini' sono allo stesso livello gerarchico (cioè 'immagini' non è più contenuta all'interno di 'testi'). Come dalla figura seguente:

Figura 111
Figura 111
In una struttura come questa, la sintassi del comando <img> contenuto in prova.htm è <img src="../immagini/tigre.gif">

Questa volta il path - partendo da 'prova.htm' - sarà '../immagini/tigre.gif'. Ovvero abbiamo prima indicato al browser di uscire dalla directory 'testi' (con '../') e poi gli abbiamo detto di 'entrare' nella directory 'immagini'.

Ovviamente, nel caso in cui la struttura fosse più ramificata, è sufficiente da un lato fornire le ulteriori sub-directory (es.: <img src="immagini/natura/felini/tigre.gif">), dall'altro risalire tante volte quante necessario (es.: <img src="../../../immagini/tigre.gif">).

È anche possibile fornire dei pathname assoluti, iniziando il percorso dalla directory di root. In tal caso, il path dell'esempio riportato in figura 110 si scriverebbe <img src="/testi/immagini/tigre.gif">, e quello dell'esempio riportato in figura 111 <img src="/immagini/tigre.gif">. Come avrete notato, ciò che ha reso assoluti i path è stato il carattere '/' inserito all'inizio.

Di solito è meglio evitare i path assoluti, sia perché legano le nostre pagine HTML in modo rigido al computer che le ospita, sia perché ci costringono a ricrearne la struttura all'interno del nostro PC.

Per il nostro file 'prova.htm' adottiamo l'indirizzamento più semplice, collochiamo l'immagine 'tigre.gif' nella stessa directory di 'prova.htm' e aggiungiamo perciò la seguente riga:

<img src="tigre.gif">

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:

Figura 112
Figura 112
Le funzioni dell'attributo align

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>letteratura</li>' in:

<li>letteratura (visita la <a href="http://www.liberliber.it">biblioteca telematica</a> di Liber Liber</li>

Tutto qui. Da adesso in poi, è sufficiente un click su 'biblioteca telematica' per collegarsi all'indirizzo Internet 'http://www.liberliber.it'. 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="biografia/mario.htm">testo cliccabile</a>
    s
    i usa quando il file 'mario.htm' si trova in una sub-directory ('biografia' 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="../biografia/mario.htm">testo cliccabile</a>
    si usa se il file 'mario.htm' si trova in una directory ('biografia' nel nostro caso) che è gerarchicamente allo stesso livello di quella che contiene 'prova.htm'.

Per inserire il link a un punto specifico di un altro documento (o anche a un punto specifico del documento che si sta leggendo) è necessario ricorrere preventivamente a un altro attributo del comando '<a>', cioè 'name="testo"' (es.: <a name="start"></a>). La funzione dell'attributo 'name' è quella di assegnare un nome a una parte del documento, così che in seguito vi si possa far riferimento. Facciamo subito un esempio pratico, e assegnamo il nome 'start' alla parte iniziale del nostro file 'prova.htm', aggiungendo la riga evidenziata:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body bgcolor="#FFFFFF" text="#990000">
<a name="start"></a>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
ecc.

Ora è possibile riferirsi alle prime righe del file 'prova.htm' con il nome 'start'. La sintassi per invocare la parte di testo chiamata 'start' è la seguente: 'file che contiene il riferimento interno' + '#' + 'nome assegnato al riferimento interno'. Es.:

<a href="prova.htm#start">testo cliccabile</a>

Il meccanismo è lo stesso se la URL si riferisce a un altro sito. Ad esempio:

<a href="http://www.liberliber.it/support/
index.html#iscrizione">testo cliccabile</a>

Oltre che definire link tra documenti di World Wide Web, con il tag '<a href>' è anche possibile permettere ai futuri visitatori della nostra pagina di inviarci dei messaggi di posta elettronica. Questa la sintassi: 'mailto:' + 'indirizzo e-mail'. Ad esempio:

<a href="mailto:rossi@liberliber.it">Fai click qui per scrivermi</a>

Prima di proseguire, diamo un'occhiata al nostro file 'prova.htm' così da ripassare alcuni degli ultimi comandi visti (sono in evidenza):

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body bgcolor="#FFFFFF" text="#990000">
<a name="start"></a>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h3>Il mio tempo libero</h3>
<ul>
<li>letteratura (visita la <a
href="http://www.liberliber.it">biblioteca telematica</a> di Liber Liber)</li>
<li>cinema (qui sotto la classifica dei miei film preferiti)</li>
<ol>
<li>Blade Runner</li>
<li>Oltre il giardino</li>
<li>Delicatessen</li>
</ol>
<li>sport</li>
</ul>
<h3>Il lavoro</h3>
<dl>
<dt>Scuola di Giornalismo di Perugia</dt>
<dd>insegno l'applicazione delle nuove tecnologie alla professione di giornalista</dd>
<dt>Laterza</dt>
<dd>in collaborazione con alcuni colleghi ho scritto un manuale su Internet</dd>
<dt>RAI</dt>
<dd>ho progettato il sistema informativo della trasmissione Media/Mente</dd>
</dl>
<hr width="80%" align="center" noshade>
<p><img src="tigre.gif" width="296" height="181" alt="Foto di una tigre" hspace="10" vspace="5" align="left"><font size="+1" color="#000000">Testo qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi.</font></p>
<p align="center"><a href="prova.htm#start">Fai click qui per tornare in cima al documento.</a></p>
<p align="center"><a href="mailto:rossi@liberliber.it">Fai click qui per scrivermi.</a></p>
</body>
</html>

Ecco il risultato a video delle ultime righe in HTML:

Figura 113
Figura 113
Un click sulla penultima riga ('Fai click qui per tornare in cima al documento') sposta in alto la finestra del browser, un click sull'ultima riga ('Fai click qui per scrivermi') consente invece l'invio di una e-mail all'indirizzo specificato

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, come ormai dovrebbe apparirci intuitivo, si chiude con </table>. Il tag dispone dei seguenti attributi:

    border="n"
    (es.: <table border="1">)
    come abbiamo già potuto verificare, rende visibile il bordo della tabella. Il valore n è in pixel.

    cellpadding="n"
    (es.: <table cellpadding="10">)
    è lo spazio tra il bordo della tabella e il testo contenuto all'interno delle celle.

    cellspacing="n"
    (es.: <table cellspacing="5">)
    è la distanza tra una cella e un'altra.

    width="n | n%"
    (es.: <table width="100%"> oppure <table width="250">)
    la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel.

    height="n | n%"
    (es.: <table height="80%"> oppure <table height="100">)
    come widht, ma relativamente all'altezza della tabella.

    bgcolor="#rrggbb"
    (es.: <table bgcolor="#FF0000"> oppure < table bgcolor="red">)
    determina il colore di sfondo della tabella. La sintassi di rrggbb è la medesima vista per attribuire colori allo sfondo del documento o ai caratteri. In alternativa ai valori esadecimali si possono anche qui usare i nomi dei colori, in inglese (red, green, ecc.). Questo tag è riconosciuto solo dalle versioni più recenti dei browser.

  • <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">)
questo attributo lo abbiamo già visto applicato all'intera tabella. 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:

prima cella, alta quanto due seconda cella
seconda riga, con una sola cella

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! È facile confondersi le idee; prima di proseguire, se non vi è tutto chiaro, fate qualche altra prova (ad esempio, provando a costruire una tabella con una cella alta quanto tre celle118).

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:

prima cella, larga quanto due
seconda riga, prima cella seconda riga, seconda cella

Come vedete, nella prima riga è stata creata una sola cella, larga quanto le due celle della seconda riga, prese insieme. Se non siamo riusciti a confondervi abbastanza le idee, provate a creare una tabella che produca a video un risultato di questo tipo119...

prima cella, alta due righe

seconda cella (centrata) della prima riga

seconda riga, prima cella seconda riga, seconda cella

Ora che abbiamo visto come funzionano le tabelle, sfruttiamole per disporre diversamente le ultime due righe della nostra pagina 'prova.htm'. Ecco, a titolo di ricapitolazione, il file 'prova.htm' per intero, comprese le ultime modifiche:

<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body bgcolor="#FFFFFF" text="#990000">
<a name="start"></a>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h3>Il mio tempo libero</h3>
<ul>
<li>letteratura (visita la <a href="http://www.liberliber.it">biblioteca telematica</a> di Liber Liber)</li>
<li>cinema (qui sotto la classifica dei miei film preferiti)</li>
<ol>
<li>Blade Runner</li>
<li>Oltre il giardino</li>
<li>Delicatessen</li>
</ol>
<li>sport</li>
</ul>
<h3>Il lavoro</h3>
<dl>
<dt>Scuola di Giornalismo di Perugia</dt>
<dd>insegno l'applicazione delle nuove tecnologie alla professione di giornalista</dd>
<dt>Laterza</dt>
<dd>in collaborazione con alcuni colleghi ho scritto un manuale su Internet</dd>
<dt>RAI</dt>
<dd>ho progettato il sistema informativo della trasmissione Media/Mente</dd>
</dl>
<hr width="80%" align="center" noshade>
<p><img src="tigre.gif" width="296" height="181" alt="Foto di una tigre" hspace="10" vspace="5" align="left"><font size="+1" color="#000000">Testo qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi.</font></p>
<table border="0" width="100%">
<tr>
<td align="left"><a href="prova.htm#start">Fai click qui per tornare in cima al documento</a></td>
<td align="right"><a href="mailto:rossi@liberliber.it">Fai click qui per scrivermi</a></td>
</tr>
</table>
</body>
</html>

Alcuni altri tag

Come già detto, queste poche pagine sull'HTML non hanno la pretesa di essere esaustive; ci sono diversi comandi HTML che non abbiamo affrontato, come pure abbiamo completamente trascurato l'interessante argomento DHTML (Dynamic HTML). Alcuni li descriviamo qui brevemente, per gli altri (ad es. i frame) vi rimandiamo alla letteratura specifica, parte della quale anche disponibile on-line120.

Tag che influenzano il formato dei caratteri

  • <sub>testo</sub>
    utilizzato per marcare dei caratteri come pedici. Ad esempio, 'H<sub>2</sub>O' appare così: H2O
  • <sup>testo</sup>
    utilizzato per marcare dei caratteri come apici. Ad esempio, '12<sup>3</sup>' 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).

Tag che influenzano il formato dei paragrafi

  • <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>

Il tag <meta>

Un ultimo marcatore cui facciamo breve cenno è '<meta>'. Si tratta di un comando che va inserito nell'intestazione del documento (per intenderci, tra <head> e </head>).

Il tag <meta> può essere usato per includere nel documento informazioni e istruzioni di vario tipo, che in genere riguardano l'intero documento, e che non vengono visualizzate direttamente dal browser. Si tratta di usi piuttosto avanzati di HTML. Facciamo solo un esempio: l'inclusione di informazioni che riguardano l'autore del documento stesso. La sintassi da usare è la seguente:

<meta name="AUTHOR" content="nome e cognome">

Ad esempio: <meta name="AUTHOR" content="Mario Rossi">. Il risultato del tag non appare a video (serve semplicemente a indicare l'autore della pagina Web), ma può essere ad esempio utilizzato dal browser se dovessimo chiedergli informazioni specifiche sul documento e sul suo autore.

Gli editor HTML

Esistono sostanzialmente due categorie di editor HTML: editor orientati al codice, ed editor WYSIWYG (What You See Is What You Get, cioè 'ciò che vedi è ciò che ottieni').

Gli editor 'orientati al codice' permettono di evitare la digitazione di ogni singolo marcatore grazie a pulsanti o menu a tendina. Il testo da impaginare appare misto alle istruzioni HTML, ed ha perciò un aspetto poco familiare per il neofita, ma spesso è preferito perché consente un controllo minuto sul contenuto della pagina. Con simili editor, una volta immesso il tag, eventuali correzioni vanno spesso fatte a mano. Ciononostante, non v'è dubbio che programmi di questo tipo facilitino notevolmente la realizzazione di pagine Web, specialmente per i più esperti.

Grazie agli editor HTML con modalità WYSIWYG, invece, si potrebbero addirittura creare pagine HTML senza conoscerne la sintassi. Infatti il codice resta invisibile all'utente che interviene sul documento come fosse un normale testo.

Forniamo qui di seguito un elenco di alcuni editor HTML che, nelle due categorie appena ricordate, si segnalano per potenza e facilità d'uso. Alcuni di questi programmi sono shareware; vi ricordiamo che lo shareware può sopravvivere come valida (ed economica) alternativa alla distribuzione commerciale solo se si rispetta il patto morale di inviare la quota di registrazione (purtroppo, in Italia, pochissimi si registrano).

FlexED

Si tratta di un prodotto shareware, il cui costo è di 32 dollari. FlexED è disponibile sia per Windows 3.x sia per Windows 95/NT, ed è un editor orientato al codice, che tuttavia include un piccolo browser interno per delle veloci anteprime (è naturalmente possibile ottenere delle anteprime anche con browser esterni, come Netscape o Internet Explorer). La software house che ha realizzato il prodotto rilascia periodicamente nuove versioni, con migliorie e ampliamenti. È indicato anche a chi possiede un computer con prestazioni non elevate, grazie al fatto che il codice è stato mantenuto il più compatto possibile (circa 1 Mb), ciononostante è in grado di gestire e creare comodamente anche pagine complesse, con il supporto nativo di funzioni avanzate. Il sito Internet per ulteriori informazioni e per il prelievo del programma è: http://www.infoflex.com.au/flexed.htm.

Netscape Composer

Uno dei primi editor WYSIWYG è stato quello incluso in Netscape Navigator Gold, la cui prima versione ufficiale è uscita a fine marzo 1996. Nel 1997, la Netscape ha distribuito Netscape Composer, il successore (più evoluto e più facile da usare) dell'editor incluso nel Netscape Navigator Gold. Il sito di riferimento è: http://www.netscape.com.

Microsoft FrontPage 98

Si tratta probabilmente dell'editor WYSIWYG più evoluto e potente attualmente disponibile. La versione 98 del programma, disponibile per Windows 95/98/NT e per Macintosh, è stata commercializzata dalla Microsoft alla fine del 1997 e costa, IVA compresa, circa 300.000 lire (circa 185.000 lire è invece il prezzo dell'aggiornamento dalla versione precedente). Consente anche la gestione dei frame e dei form. È in grado di importare vari tipi di file, come i semplici txt, i file RTF, i file creati con Microsoft Word. Anche la gestione dei link è molto sofisticata; assai comoda, ad esempio, la possibilità di rinominare un file, e di vedere modificarsi automaticamente tutte le pagine che facevano riferimento a quel file dal vecchio nome al nuovo. Il programma dispone poi di una procedura per la pubblicazione guidata delle pagine. In sostanza FrontPage si collega via FTP al server che deve ospitare le vostre pagine, quindi spedisce con un solo click del mouse tutti i file che avete creato. Se avete suddiviso il vostro sito in directory e subdirectory, le crea anche sul sito remoto. Se infine il server che vi ospita supporta le estensioni di FrontPage, l'operazione di pubblicazione si accelera sensibilmente, essendo il programma in grado di controllare quali file sono stati cambiati dal vostro ultimo upload. Il supporto delle estensioni di FrontPage lato server comporta una serie di ulteriori vantaggi. Grazie a queste estensioni è, ad esempio, assai facile creare una pagina con un motore di ricerca interno, così da consentire ai vostri utenti di fare ricerche mirate. È il solo editor HTML fra quelli esaminati ad essere disponibile anche in italiano (è così possibile sfruttare le routine di controllo ortografico). Il sito di riferimento per ulteriori informazioni è: http://www.microsoft.com/italy/frontpage/.

Microsoft Word 97

Può sembrare strano includere un word processor tra gli editor HTML. Ma la nuova versione del programma Microsoft, denominata Word 97 (è da poco disponibile la nuova versione 98 per Macintosh), può diventare un completo editor HTML121. Il programma è piuttosto caro, costa circa 780.000 lire IVA compresa (l'aggiornamento costa circa la metà; Word 97 è inoltre compreso nei pacchetti Office 97 standard e professional), ma consente un passaggio dai file Word veri e propri a file HTML veramente istantaneo e semplice. Assai indicato per chi ha molto materiale informativo da pubblicare su Internet nel formato di questo diffuso word processor. La URL di riferimento è: http://www.microsoft.com/italy/word/.

A tutti gli utilizzatori di Office 97 consigliamo fortemente l'installazione del Service Release 1, che corregge alcuni vistosi bug (errori di programmazione). Il file si può scaricare gratuitamente dal sito Microsoft: http://www.microsoft.com/italy/office/servicerelease/default.htm.

BBedit

Viene molto usato su Macintosh. Si tratta di un text editor programmabile, con specifici comandi per l'HTML. Shareware. La URL per il download e ulteriori informazioni è: http://www.barebones.com/.

PageMill

È (assieme a Claris Page Maker) l'editor HTML di riferimento per chi usa Macintosh (ma ne è uscita di recente una versione anche per Windows 95/NT). In qualche modo assimilabile, nelle finalità progettuali, a FrontPage, PageMill è un ottimo prodotto, facile da usare e con la caratteristica particolare di semplificare le operazioni di pubblicazione in rete di documenti realizzati con i popolari programmi di desktop publishing della Adobe. Il costo è pari a 149 dollari. Il sito Internet di riferimento è: http://www.adobe.com/prodindex/pagemill/main.html.

HotDog

Shareware, per Windows 3.x e 95/NT. Vale la pena citarlo perché è stato uno dei primi editor HTML ad avere funzioni avanzate, ed è stato perciò adottato da molti impaginatori esperti. La sua URL è: http://www.sausage.com.

HotMetal Pro

Anche questo editor viene citato per meriti 'speciali': fa un accurato controllo della sintassi HTML, segnalando tutte le istruzioni che non sono aderenti alle direttive standard. Anche per questo motivo, HotMetal Pro è l'editor d'elezione di molti 'puristi' dell'HTML. Inoltre è disponibile per Unix, Windows 3.x, Windows 95/NT e Macintosh. Shareware. Il sito Internet di riferimento è: http://www.sq.com/ (il sito ha un mirror in Europa: http://www.softquad.co.uk/).

AsWedit

È un ottimo editor freeware (cioè gratuito) per i sistemi X-Window. Gira perfettamente anche su Linux, il sistema Unix per computer con processori Intel distribuito gratuitamente su Internet. Appartiene alla categoria degli editor orientati al codice.

Per finire, potete trovare un elenco molto completo di editor HTML alla URL http://www.yahoo.com/Computers_and_Internet/Software/Internet/
World_Wide_Web/HTML_Editors/
. Al solito, si tratta della pagina dedicata all'argomento da Yahoo!.

Mettere informazione in rete
[ vai a Sezione 01 ] [ Sezione 02 ]