19 Mettere informazione in rete

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 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) 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.

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 104 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.

Figura 105 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 104 si scriverebbe <img src="/testi/immagini/tigre.gif">, e quello dell'esempio riportato in figura 105 <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 106 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 Front Page 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 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' di 'a href' 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>
  si 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 assegniamo 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 107 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

La tabelle sono lo strumento più 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:

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:

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:

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.

• <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 celle).

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

    prima cella, alta due righe	prima riga, seconda cella (centrata)
    	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. Alcuni li descriviamo qui brevemente, per gli altri (ad es. i frame) vi rimandiamo alla letteratura specifica, parte della quale anche disponibile on-line.

Tag che influenzano il formato dei caratteri

• _testo
  utilizzato per marcare dei caratteri come pedici. Ad esempio, 'H₂O' appare così: H₂O

• ^testo
  utilizzato per marcare dei caratteri come apici. Ad esempio, '12³' appare così: 12³

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

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. Sono ancora pochi i prodotti appartenenti a questa categoria che si possano definire pienamente maturi (ovvero ragionevolmente potenti, affidabili e veloci), tuttavia qualche prodotto valido comincia a vedersi.

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. Nelle prime settimane del 1997 la Netscape ha cominciato a distribuire una versione beta (ovvero preliminare) del Netscape Composer, nato per divenire il successore (più evoluto e più facile da usare) dell'editor incluso nel Netscape Navigator Gold. Si tratta di un prodotto shareware (l'intero pacchetto di Netscape Communicator, che lo comprende, costa 96 dollari), che pur essendo ancora in beta nel momento in cui scriviamo queste righe, promette bene. Il sito di riferimento è: http://www.netscape.com.

Microsoft FrontPage 97

Si tratta probabilmente dell'editor WYSIWYG più evoluto e potente attualmente disponibile. La versione 2.0 del programma, disponibile per Windows 95/NT e per Macintosh, è stata commercializzata dalla Microsoft all'inizio del 1997 e costa, IVA compresa, circa 360.000 lire (circa 160.000 lire è invece il prezzo dell'aggiornamento dalla versione 1). Consente anche la gestione dei frame (con qualche limitazione) 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 vostra 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 (attualmente disponibile solo per Windows, non ancora per Macintosh), può diventare un completo editor HTML. 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/.

BBedit

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

E' 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, costa 159 dollari. 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!.