HTML Base | Aggiungi un tocco di stile

Questo documento è la traduzione in italiano dell'unica versione ufficiale del documento che è la versione originale in inglese "More advanced features" su http://www.w3.org/MarkUp/Guide/Advanced.html. I possibili errori dovuti alla traduzione sono di esclusiva responsabilità della traduttrice Chiara Minnucci e non sono in alcun modo imputabili al W3C. Questa traduzione è stata realizzata nell'Aprile del 2007. Per qualsiasi commento su questa traduzione rivolgersi a Chiara Minnucci.

Caratteristiche più avanzate

Ora che abbiamo imparato a fondo le nozioni base, è ora di spostarci su caratteristiche più avanzate. La seguente sezione vi insegnerà come:

• andare a capo
• introdurre spaziature continue (di non rottura)
• usare entità per caratteri speciali
• collegarsi nel mezzo di pagine web
• usare testo pre-formattato
• disporre il testo intorno a delle immagini
• definire regioni da cliccare all’interno di immagini
• creare tabelle
• usare scritte in movimento ed altri trucchi

P.S. Vi raccomando di usare HTML Tidy per mantenere il vostro codice pulito e senza errori.

Come andare a capo

Solo in alcune occasioni, vorrai forzare l’andare a capo. Potrai farlo usando l’elemento <br>, per esempio quando vorrai inserire un indirizzo postale:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

L’elemento <br> non ha mai bisogno di un tag di fine. In generale, gli elementi che non richiedono un tag di fine sono conosciuti come elementi vuoti.

Come inserire spazi continui (di non rottura)

I browsers distribuiscono in modo automatico il testo per uniformarlo dentro i margini. Si possono introdurre dei capoversi (andate a capo) ogni qualvolta degli spazi compaiono nei margini. A volte, occorrerà impedire al browser di spezzare il testo tra due parole particolari. Per esempio tra due parole in un nome di un prodotto come "Coca Cola". Il trucco è di usare   al posto dello spazio, per esempio:

Le bevande gassate e con dolcificante, come Coca Cola,
hanno riscosso un successo mondiale.

È una cattiva abitudine usare ripetutamente spazi continui per il testo con margine rientrato. Vi consiglio invece di fissare il capoverso con le regole di stile.

Come usare entità per caratteri speciali

Per rispetto dei diritti d’autore, o di marchio, si è soliti includere i simboli relativi:

Si può notare che HTML 4.0 utilizza ™ per quanto riguarda il simbolo del marchio, ma questo non è tuttavia largamente usato come ™

Ci sono numerose entità che potrai trovare utili:

Inoltre, ci sono entità per i caratteri accentati e simboli vari nel gruppo di caratteri Latin-1:

Potrai usare inoltre caratteri numerici per le lettere greche e per i simboli matematici definiti in Unicode. Per maggiori dettagli, dai uno sguardo alla lista specifica di HTML 4. Nota che i nomi delle entità per questi caratteri non sono riconosciuti nel Navigator 4, pertanto ti raccomandiamo di utilizzare le entità numeriche.

Collegarsi nel mezzo di pagine Web

Immagina di aver scritto una lunga pagina Web con l’indice vicino all’inizio della pagina. Come si fanno i collegamenti ipertestuali nella sezione corrispondente all’indice?

Supponiamo che ogni sezione inizi con un’intestazione, per esempio:

<h2>Local Night Spots</h2>

Per rendere le intestazioni raggiungibili tramite un collegamento ipertestuale racchiudi il suo contenuto con <a name=identifier> .... </a>

<h2><a name="night-spots">Local Night Spots</a></h2>

L'attributo name specifica il nome usato per identificare il collegamento. In questo caso "night-spots". L'indice può ora includere un collegamento d'ipertesto usando questo nome, per esempio:

<ul>
  ...
  <li><a href="#night-spots">Local Night Spots</a></li>
  ...
</ul>

È necessario il carattere # prima del nome della destinazione. Se la destinazione è in un documento diverso, allora dovrai collocare l’indirizzo Web di quel documento prima del carattere #. Per esempio, se il documento è in "http://www.bath.co.uk/", allora il link diventerà:

<a href="http://www.bath.co.uk/#night-spots">Local Night Spots</a>

In seguito, sarai in grado di definire i collegamenti a un punto intermedio di una pagina Web senza l’uso dell’elemento <a>. Il nuovo metodo è molto più facile, in quanto tutto ciò che dovrai fare è aggiungere l’attributo id all’intestazione, come ad esempio:

<h2 id="night-spots">Local Night Spots</h2>

Questo metodo non funziona per la quarta generazione o per browsers precedenti, pertanto deve essere usato con attenzione finchè questi browsers sono ancora in uso!

Testo pre-formattato

Uno dei vantaggi del Web è che il testo è automaticamente distribuito in righe che si adattano perfettamente al formato della finestra utilizzata. A volte però vorrai disattivare questa funzione, ad esempio quando si includono degli esempi di codice di programma. Potrai disattivare la funzione utilizzando il tag <pre>. Per esempio:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Ciò si traduce come:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Il testo e i colori dello sfondo sono stati impostati attraverso il foglio di stile. Puoi notare che tutti i capoversi e gli spazi sono resi esattamente come compaiono su HTML. L’eccezione è una nuova linea immediatamente dopo il tag di inizio <pre> e immediatamente prima del tag di fine, che sono scartati. Questo significa che i due esempi che seguono sono uguali:

<pre>Testo pre-formattato</pre>

<pre>
Testo pre-formattato
</pre>

Il testo pre-formattato è generalmente usato con uno stile di scrittura mono-spazio dove ogni carattere ha la stessa ampiezza. Se definisci una regola di stile per un elemento <pre>, alcuni browser dimenticano di usare il carattere monospazio, richiedendo l’uso di una proprietà per la tipologia di scrittura. Ad esempio se vuoi rendere tutti gli elementi in verde, puoi definire la regola di stile:

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

Quando definisci il colore di primo piano del testo, si consiglia di definire anche il colore dello sfondo. Ciò eviterà quegli inconvenienti dove il colore dello sfondo è difficile da distinguere da quello in primo piano. Piuttosto di definire il colore di sfondo sull'elemento <pre>, potrai trovare più conveniente definirlo sull’elemento del corpo principale, come ad esempio:

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

Come disporre il testo intorno alle immagini

Con HTML puoi scegliere se ogni immagine è considerata come parte della riga di testo corrente o venga distribuita al margine sinistro o destro. Puoi controllare ciò con l’attributo align. Se l’attributo align è a sinistra, l’immagine si colloca al margine di sinistra. Se è a destra, l’immagine si colloca al margine destro. Ad esempio:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> Questo testo sarà collocato intorno al lato destro del grafico </p>

che diventa:

Questo testo sarà collocato intorno al lato destro del grafico.

Il seguente esempio usa l’allineamento a destra:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> Il seguente esempio usa l’allineamento a destra:</p>

che diventa:

Questo testo sarà collocato intorno al lato sinistro del grafico

Per fare in modo che la traduzione dell'immagine continui sotto all'immagine mobile puoi usare l'elemento <br clear=all>. Per esempio:

<p><img src="sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> Questo testo sarà collocato intorno al lato destro del grafico.<br clear="all">
Ciò farà iniziare un nuovo rigo sotto l’immagine collocata</p>

Che diventa:

Questo testo sarà collocato intorno al lato destro del grafico.
Ciò farà iniziare un nuovo rigo sotto l’immagine.

Sezioni all'interno di immagini dove si può cliccare

L’immagine seguente ha la funzione di una mappa di un gruppo di pagine Web. Puoi cliccare sui cerchi per andare alla pagina corrispondente.

Il codice per tutto ciò è il seguente:

<p align="center">
   <img src="pages.gif" width="384" height="245"
      alt="site map" usemap="#sitemap" border="0">
   <map name="sitemap">
      <area shape="circle" coords="186,44,45" 
         href="Overview.html" alt="Iniziare ad usare l'HTML">
      <area shape="circle" coords="42,171,45" 
         href="Style.html" alt="Come aggiungere un tocco di stile">
      <area shape="circle" coords="186,171,45"
         alt="Web Page Design">
      <area shape="circle" coords="318,173,45"
         href="Advanced.html" alt="Caratteristiche più avanzate">
   </map>
</p>

L’attributo src sull’elemento img specifica l’immagine pages.gif. L’attributo usemap dà le coordinate della mappa. Esso usa un indirizzo Web per far questo, ed è usato il carattere # . L’attributo border è definito a "0" per omettere il bordo blu intorno all’immagine.

L’elemento map specifica quali sezioni dell’immagine hanno la funzione di link ipertestuale. L’attributo name si combina con l’attributo usemap sull’elemento img ed agisce in modo molto simile all’attributo name sull’elemento <a>. In pratica, l’elemento map ha bisogno di essere nello stesso file dell’elemento.

L’elemento area è usato per definire una sezione dell’immagine e per collegarla ad un indirizzo Web. L’attributo shape definisce rect, circle o poly. L’attributo coords specifica le coordinate per la sezione in base alla forma.

• rect: left-x, top-y, right-x, bottom-y
• circle: center-x, center-y, radius
• poly: x₁,y₁, x₂,y₂, ... x_n,y_n

Il pixel in alto a sinistra è considerato come l’origine dell’immagine con x e y entrambi uguali a zero, x aumenta verso il lato destro dell’immagine e y aumenta verso il basso. Molti strumenti per la manipolazione di immagini permettono di trovare le coordinate pixel di ogni punto dell’immagine.

Se due o più sezioni definite si sovrappongono, l’elemento di definizione che è compare per primo ha la precedenza (ovvero, risponde all’input dell’utente). Per una forma complessa come un anello anulare, si può rendere una parte dell’immagine inattiva, sovrapponendola ad un’altra parte attraverso l’uso dell’attributo nohref, come nell’esempio:

      <area shape="circle" coords="186,44,50" nohref>
      <area shape="circle" coords="186,44,100" 
         href="Overview.html" alt="Getting Started">

dove il primo cerchio crea una sezione inattiva all’interno di un cerchio più largo, creato da un secondo elemento area. Per avere un qualche effetto, la forma inattiva deve essere messa per prima altrimenti verrà nascosta dalla forma attiva.

Necessità di specificare l'attributo alt

L’attributo alt sull’elemento area si usa per fornire un’etichetta testuale al link. Senza di esso, la mappa dell’immagine non è accessibile a coloro che non possono vedere l’immagine.

Tabelle

Le tabelle vengono usate per fornire informazioni e anche per la presentazione. Puoi ingrandire le tabelle per farle aderire ai margini, specificare un’ampiezza fissa o lasciare che sia il browser a definire il formato della tabella in base al contenuto.

Le tabelle sono costituite da una o più righe che contengono celle. Ecco un esempio semplice:

Il codice per questo è:

<table border="1">
<tr><th>Anno</th><th>Vendite</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

L’elemento table ha la funzione di contenitore della tabella. L’attributo border specifica il bordo in pixel. L’elemento tr ha la funzione di contenitore per ogni riga della tabella. Gli elementi th e td hanno la funzione di contenere rispettivamente le intestazioni e i dati in ogni cella.

Lo spazio interno alla cella

Puoi modificare lo spazio intorno al contenuto di tutte le celle attraverso l’attributo cellpadding sull’elemento tabella. Per esempio, ecco come fissare lo spazio intorno al contenuto della cella a 10 pixel:

<table border="1" cellpadding="10">

Ciò avrà questo effetto:

La spaziatura delle celle

L’attributo cellspacing definisce invece lo spazio tra le celle. Fissando la spaziatura tra le celle a 10:

<table border="1" cellpadding="10" cellspacing="10">

si ha l’effetto:

L'ampiezza della tabella

Puoi fissare l’ampiezza della tabella usando l’attributo width. Il valore può essere espresso sia in ampiezza in pixel o in un valore in percentuale, che rappresenta la percentuale dello spazio disponibile tra il margine sinistro e destro. Ad esempio, fissando l’ampiezza all’80% dei margini:

<table border="1" cellpadding="10" width="80%">

si avrà tale effetto:

Allineamento del testo all'interno delle celle

Per default, i browsers mettono al centro le intestazioni delle celle (th), e allineano a sinistra i dati della cella (td). Puoi cambiare l’allineamento utilizzando l’attributo align, che può essere aggiunto ad ogni cella o alla riga (elemento tr). Esso viene usato con i valori left, center o right:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Anno</th><th>Vendite</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

con il seguente risultato:

L’attributo valign ha una funzione simile per l’allineamento verticale del contenuto delle celle. Viene usato con il valore top, middle, bottom. Per default, le celle con l’intestazione posizionano il loro contenuto al centro delle celle mentre le celle con i dati allineano i loro contenuti in alto in ogni cella.

Celle vuote

I browser gestiscono le celle vuote in modo peculiare. Si può confrontare la seguente tabella:

Con quest’altra:

Il primo scenario si verifica quando una cella è vuota:

<td></td>

Per evitare ciò, occorre includere uno spazio continuo:

<td>&nbsp;</td>

Celle formate da più di una riga o colonna

Ampliamo l’esempio precedente e separiamo le vendite in base alle regioni del nord e del sud:

L’intestazione "Anno" si estende ora su due righe, mentre l’intestazione "Vendite" si estende su tre colonne. Ciò viene effettuato impostando rispettivamente gli attributi rowspan e colspan. Il codice per quanto sopra è:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Anno</th><th colspan="3">Vendite</th></tr>
<tr align="center"><th>Nord</th><th>Sud</th><th>Totale</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Puoi semplificare tutto ciò approfittando del fatto che i browser non hanno bisogno dei tag di chiusura per le celle e le righe delle tabelle:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Anno<th colspan="3">Vendite
<tr align="center"><th>Nord<th>Sud<th>Totale
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Puoi notare che poichè l’intestazione "Anno" si estende su due righe, il primo elemento th sulla seconda riga appare sulla seconda colonna anzichè sulla prima.

Tabelle senza bordo

Queste tabelle vengono comunemente usate per impostare pagine con griglie più alla moda o più eleganti. Tutto ciò che occorre fare è aggiungere il bordo = “0” e la spaziatura della cella = “0” nell’elemento table:

Questa tabella è stata realizzata usando il seguente codice:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Anno</th><th>Vendite</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Se si elimina l’attributo cellspacing, si otterrà un sottile spazio tra le celle, come si può vedere qui sotto:

Colorazione delle tabelle

Questa pagina usa un foglio di stile per definire i colori dello sfondo nelle tabelle, utilizzando un colore diverso per l’intestazione e le celle-dati. Le regole di stile sono le seguenti:

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Le ultime due righe qui sopra definiscono il colore dello sfondo per le celle th e tr, ai valori dati di rosso/verde/blu. I numeri vanno da 0 a 255 ( completamente saturi).

Un altro modo per definire il colore di sfondo è usare l’attributo bgcolor. Quest’ultimo funziona con quasi tutti i browser e non ha bisogno del supporto del foglio di stile. Il primo passo è determinare il valore esadecimale della componente di rosso, verde e blu nel colore che vuoi usare. Nella pagina di stile è incluso un convertitore.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Anno</th>
    <th bgcolor="#CCCC99">Vendite</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">$18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">$25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">$36M</td>
  </tr>
</table>

Come posizionare le tabelle al centro della pagina

Puoi posizionare le tabelle a metà tra i margini sinistro e destro tramite l’utilizzo di qualche CSS. Se il tuo foglio di stile include la seguente regola, allora tutte le tabelle saranno centrate:

table {
   margin-left: auto;
   margin-right: auto;
}

Puoi rendere tutto ciò specifico per una data tabella attribuendo alla tabella un valore id o definendo una classe. Il seguente esempio è relativo a tabelle con un attributo class centered:

Per prima qui è riportata la regola di stile:

table.centered {
   margin-left: auto;
   margin-right: auto;
}

E poi segue il codice della tabella:

<table class="centered" border="1">
<tr><th>Anno</th><th>Vendite</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

E così diventa nel tuo browser:

Puoi notare che si può sostituire l’attributo border con le regole CSS, al fine di avere un maggiore controllo sull’aspetto della tabella e dei bordi delle celle. Vedi la guida allo stile per degli esempi su come definire lo stile dei bordi.

Come rendere le tabelle accessibili

Se non sei in grado di visualizzare la tabella, può essere piuttosto difficile capire di cosa tratta. Il primo passo è aggiungere delle informazioni che descrivono lo scopo e la struttura della tabella. L’elemento caption ti permette di fornire una didascalia e di posizionarla sopra o sotto la tabella. L’elemento caption dovrebbe apparire prima dell’elemento tr per la prima riga.

Questa tabella è stata prodotta con il seguente codice:

<table border="1" cellpadding="10" width="80%">
<caption>Stime delle entrate delle vendite per anno</caption>
<tr align="center">
  <th>Anno</th><th>Vendite</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Ecco di seguito la stessa tabella con caption="bottom" aggiunto all’elemento intestazione:

L’attributo summary dell’elemento tabella deve essere usato per descrivere la struttura della tabella per coloro che non possono visualizzarla. Ad esempio: “la prima colonna fornisce l’anno e la seconda le entrate per quell’anno".

<table summary="la prima colonna fornisce l’anno e la seconda, le entrate per quell’anno">

Come si specifica la relazione tra le celle intestazione e le celle-dati

Quando una tabella è realizzata in sonoro o Braille, è utile poter identificare quale intestazione corrisponde ad ogni cella. Per esempio, un browser sonoro ti consentirebbe di muoverti in alto ed in basso o a destra e sinistra da cella a cella, con le relative intestazioni enunciate prima di ogni cella.

Per supportare questa funzione, occorre annotare l’intestazione e/o le celle con i dati. L’approccio più semplice è aggiungere l’attributo scope alle celle intestazione. Esso può essere usato con i seguenti valori:

• Row: La cella selezionata fornisce l’informazione per l’intestazione a tutto il resto della fila in cui è contenuta.
• Col: La cella selezionata fornisce l’intestazione per tutta la colonna dove essa è contenuta.

Se si applica tutto ciò all’esempio della tabella si ha:

<table border="1" cellpadding="10" width="80%">
<caption>Stime delle entrate delle vendite per anno</caption>
<tr align="center">
  <th scope="col">Anno</th>
  <th scope="col">Vendite</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Per tabelle più complesse, si possono usare gli attributi headers su celle-dati singole i quali forniranno una lista a spazi separati per individuare le celle-intestazione. Ogni cella-intestazione dovrà avere un attributo id con un relativo identificatore.

Un ultimo punto è che dovrai prendere in considerazione l’uso dell’attributo abbr per specificare come si possono abbreviare delle intestazioni lunghe. Questo renderà più tollerabile l’ascolto di liste di intestazioni per ogni cella, come ad esempio:

<th abbr="W3C">World Wide Web Consortium</th>

Scritte in movimento ed altri trucchi

Un pò di programmazione Javascript può aiutare molto a rendere più allegre le tue pagine. Ti verrà mostrato di seguito come creare scritte in movimento dove l’aspetto di un link cambia non appena muovi il mouse su di esso. Imparerai inoltre a creare pubblicità a forma di striscione a tutta pagina, che aiuteranno ad indirizzare i visitatori a siti dei tuoi sponsors.

Immagini in movimento

Nella sua forma più comune un’immagine in movimento (roll-over), è un’immagine che funziona come un link ipertestuale. Mentre la freccia del mouse è sopra l’immagine, essa cambia per attirare l’attenzione sul link. Ad esempio, si potrebbe aggiungere un effetto di luce, una proiezione d’ombra o semplicemente cambiare il colore dello sfondo. Ecco un esempio:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "enter1.gif";
    image2.src = "enter2.gif";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

<a href="http://www.w3.org/"> onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Enter if you dare!"></a>

ed ecco come appare...

Ho creato queste immagini con uno strumento per disegnare liberamente, aggiungendo un effetto cera calda e poi una leggere sfumatura del testo. Puoi trovare molti consigli e clipart gratuiti sul Web nella maggior parte dei motori di ricerca.

Inserti pubblicitari

Se il tuo sito web ha diversi sponsor, potrai usare un link-immagine che mostra gli sponsor uno alla volta, a rotazione. Inizialmente occorrerà creare un’immagine per ogni sponsor. Tutte le immagini dovranno avere la stessa misura. Le URL relative alle immagini e al sito Web sono disposte nelle matrici chiamate adImages e adURLs definite all’inizio del programma. L’elemento img del link dovrebbe iniziare con la prima immagine nella matrice. La rotazione inizia con l’evento onload (caricamento) nell’elemento body.

<html>
<head>
<title>cycling banner ads</title>
<script type="text/javascript">
if (document.images)
{
    adImages = new Array("hosts/csail.gif",
                "hosts/ercim.gif", "hosts/keio.gif");
    adURLs = new Array("www.csail.mit.edu",
                "www.ercim.org", "www.keio.ac.jp");
    thisAd = 0;
}

function cycleAds()
{
    if (document.images)
    {
        if (document.adBanner.complete)
        {
            if (++thisAd == adImages.length)
                thisAd = 0;

            document.adBanner.src = adImages[thisAd];
        }
    }

    // change to next sponsor every 3 seconds
    setTimeout("cycleAds()", 3000);
}

function gotoAd()
{
    document.location.href = "http://" + adURLs[thisAd];
}
</script>
</head>
<body onload="cycleAds()">
...

<a href="javascript:gotoAd()"><img name="adBanner"
src="hosts/csail.gif" border="0" alt="Our sponsors"></a>

I nostri sponsor:

Nota: si raccomanda che tutte le immagini abbiano la stessa ampiezza ed altezza. Un’alternativa è aggiungere gli attributi width (ampiezza) e height (altezza) all’elemento img per assicurare che tutte le immagini abbiano la stessa dimensione.

Cosa si può dire dei browser che non riconoscono codici di script?

Il contenuto di un elemento noscript viene mostrato solo se il browser non esegue codici di script. Esso dovrà essere usato quando si vuole dare accesso ad informazioni che non sarebbero altrimenti visibili in browser che non riconoscono codici di script. Mettiamo che tu voglia rendere i link disponibili per gli sponsor come testo:

<noscript>
I nostri sponsor: <a href="http://www.lcs.mit.edu/">MIT</a>,
<a href="http://www.inria.fr/">INRIA</a>, and
<a href="http://www.keio.ac.jp/">Keio University</a>.
</noscript>

Ci sono molte fonti d’informazione gratuite che riguardano i codici di script nella maggior parte dei motori di ricerca.

Come consentire agli utenti di ascoltare file musicali

Ammettiamo che tu e i tuoi amici vi siate riuniti per registrare della musica, e che tu voglia farla conoscere al pubblico di ascoltatori. Il primo passo è comprimere la registrazione audio, per esempio come un file mp3, e caricarlo al tuo sito Web. Per scopi illustrativi, ammettiamo che questo sia poi disponibile su: http://example.com/music/myband.mp3. Negli esempi qui sotto dovresti sostituire questo indirizzo con il corretto indirizzo del tuo sito Web.

Il passo successivo è creare un file musicale che abbia l'estensione .m3u. Ciò evita che gli utenti aspettino prima di iniziare ad ascoltare la musica quando ti colleghi direttamente al file mp3. Puoi creare una lista musicale con un editor di testo e includere l'indirizzo URL per il file mp3. Per l'esempio del file musicale ciò sarebbe:

http://example.com/music/myband.mp3

Carica il file musicale sul tuo Web server. Puoi ora aggiungere un collegamento alla pagina Web del tuo gruppo come segue:

<a href="http://example.com/music/myband.m3u"
type="audio/x-mpegurl">listen to our band</a>

Occorre inoltre controllare con l'amministratore del Web server che i corretti tipi MIME siano impostati sia per file mp3 che per i file m3u.

• estensione m3u con audio/x-mpegurl
• estensione mp3 con audio/mpeg

Nota: l'approccio qui sopra funziona meglio per le persone con una connessione a banda larga. Dovresti prendere in considerazione di fornire una versione del file mp3 di bassa qualità per le persone che hanno una connessione a bassa velocità (cioè che abbiano una velocità di trasmissione molto più bassa di 128k/sec).

Un approccio molto simile può inoltre essere usato per i file musicali Ogg Vorbis (tipo MIME application/ogg e l'estensione .ogg). Diversi file possono essere usati sia con file m3u o con file musicali, ma non tutti i riproduttori di suoni sono configurati per supportare ciò. Per maggiori dettagli su questo e su altri formati musicali consulta un motore di ricerca.

Come accedere ad ulteriori informazioni

La raccomandazione di W3C per HTML 4.0 è la descrizione autorevole di HTML. Comunque, esse sono descrizioni tecniche. Per una fonte d’informazione meno tecnica, potrai comprare uno dei molti libri su HTML, per esempio "Raggett on HTML 4", "pubblicato nel 1998 da Addison Wesley. XHTML 1.0 è una raccomandazione W3C

Buona fortuna ed inizia a scrivere!

Copyright © 1994-2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.