successivo precedente inizio fine indice generale parte

Capitolo 3.   HTML: nozioni avanzate

In questo capitolo vengono esaminati alcuni aspetti del linguaggio HTML che possiamo definire «avanzati»: i tag ulteriori da usare nell'intestazione, le tabelle, i riquadri, gli oggetti multimediali, le immagini mappate.

3.1   Informazioni supplementari nell'intestazione

La sezione intestazione di un documento HTML può contenere altre informazioni oltre al titolo del documento che, come abbiamo visto nel capitolo precedente, viene assegnato tramite il tag <title>.

Esistono infatti i seguenti elementi che possono essere inseriti al suo interno: <meta>, <link>, <base>, <style>, <script>, <isindex>.

3.1.1   L'elemento meta

E' un elemento usato per descrivere alcune proprietà del documento ed è solitamente accompagnato dall'attributo name o da http-equiv che a loro volta necessitano dell'attributo content.

Vediamo alcuni esempi di uso del marcatore <meta> con attributo name:

<meta name="Author" content="Paolino Paperino"/>
<meta name="Copyright" content="Walt Disney Italia"/>

In questo modo si informa il programma di navigazione su chi è l'autore del documento e si danno informazioni sul copyright.

<meta name="generator" content="Mozilla/4.04 [en] (Win95; I) [Netscape]"/>

Qui invece si indica il programma usato per creare il documento HTML; quando si usano editor HTML una linea simile a questa viene automaticamente inserita nella sezione di intestazione.

Nell'esempio l'editor usato è la versione 4.04 in inglese di Netscape Navigator (conosciuta con il "soprannome" di Mozilla).

Altri esempi:

<meta name="description" content="Breve descrizione del documento"/>
<meta name="keywords" content="Qui, Quo, Qua, 313, Paperopoli, Paperina"/>

In questi esempi si danno informazioni utili per i motori di ricerca (programmi in grado di indicizzare i siti Web per poi permettere agli utenti di Internet ricerche basate sui criteri più vari); qui si forniscono una piccola descrizione della pagina Web ed una serie di parole chiave riguardanti il suo contenuto, inserendo rispettivamente description e keywords nell'attributo name e i valori corrispondenti in content.

L'attributo http-equiv è usato per vari scopi, ad esempio:

• per causare il refresh automatico della pagina dopo un certo tempo (nell'esempio 15 secondi):

  <meta http-equiv="refresh" content="15"/>

• per richiamare automaticamente un'altra pagina trascorso un certo tempo:

  <meta http-equiv="refresh" content="10;url=http://www.aaa.it/altrapagina.html"/>

• per evitare che il documento venga memorizzato nella cache e quindi il navigatore richieda sempre una nuova copia dello stesso:

  <meta http-equiv="expires" content="0"/>

Inoltre può essere usato per indicare la data di scadenza della pagina in modo che i navigatori prelevino la versione aggiornata al momento opportuno:

<meta http-equiv="expires" content="Sat, 4 Nov 2000 12:00:00 GMT"/>

Metodi alternativi per evitare la memorizzazione del documento nella cache sono i seguenti:

<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must revalidate"/>

L'attributo http-equiv può essere utilizzato anche per classificare il contenuto del documento in modo che possano essere attivati meccanismi di protezione per i minori da parte dei programmi di navigazione; tali aspetti non vengono comunque approfonditi in questa sede.

3.1.2   L'elemento link

Con questo elemento si possono definire delle relazioni tra il documento ed altre pagine Web.

Attenzione a non confondere questo tag con un collegamento («link» in inglese) che, come abbiamo visto, si realizza con il tag <a>.

Sono previsti i due attributi rel e rev, con il primo si stabilisce una relazione tra il nostro documento ed un'altra pagina Web, con il secondo invece si indica che un'altra pagina è in relazione con la nostra.

Se ad esempio abbiamo una pagina chiamata pagina1.html che fa parte di un sito il cui indice è memorizzato (come avviene di solito) in index.html, può essere opportuno indicare nella testata di pagina1.html:

<link rel="index" href="index.html">

in tal modo i navigatori e i motori di ricerca saranno informati della relazione esistente tra i due documenti e lo saranno ancora meglio se nella testata di index.html si inserisce:

<link rev="index" href="pagina1.html">

Queste informazioni potrebbero anche essere sfruttate da browser avanzati che includano tra i pulsanti di navigazione un tasto «Index» che permetta di saltare immediatamente all'indice del sito in cui è contenuta la pagina visualizzata.

3.1.3   Gli elementi base, script, style, isindex

Gli elementi <base> (con il quale si può indicare la URL in cui risiede il documento) e <isindex> (indica che la pagina è in effetti un programma che effettua operazioni di ricerca) sono poco importanti ed usati molto raramente.

Invece i marcatori <style> e <script> sono molto importanti in quanto servono per utilizzare «fogli di stile» e istruzioni di certi linguaggi di «scripting» all'interno delle pagine Web; tali argomenti vengono approfonditi più avanti in queste dispense (capitolo 4 e paragrafo 8).

3.2   Uso delle tabelle

Le tabelle sono elementi molto usati per la realizzazione di documenti in HTML in quanto permettono di organizzare i dati in strutture formate da righe e colonne ma soprattutto perché con esse si può impostare l'aspetto di una pagina disponendo i paragrafi in colonne, oppure creando dei margini, o ancora distribuendo testo ed immagini in modo più vario.

Nelle tabelle di un documento HTML, come in qualsiasi tabella si identificano i seguenti componenti:

• il titolo, opzionale, della tabella;

• le celle, cioè le intersezioni tra righe e colonne, che contengono i dati;

• le intestazioni delle righe o colonne, cioè delle celle contenenti le etichette che identificano i tipi di dati delle righe o colonne corrispondenti.

La tabella più piccola che si può creare contiene una sola cella, cioè una riga e una colonna; non ci sono invece restrizioni teoriche sul numero massimo di celle definibili; esiste però un limite dettato da ragioni pratiche in quanto è opportuno che la tabella entri per larghezza nella finestra del browser onde evitare il ricorso, scomodo e spesso sgradito, alla barra di scorrimento orizzontale di quest'ultimo.

Le tabelle sono supportate da tutti i programmi di navigazione e ne esistono due diversi modelli: quello dell'HTML 3.2 contenente una serie molto semplice di elementi e quello dell'HTML 4.0 che ha introdotto nuovi attributi conservando però la compatibilità con il precedente.

Nella maggior parte dei casi è sufficiente conoscere il modello di tabelle più semplice che è quindi quello trattato in questa sede; le funzioni più complesse dell'HTML 4.0 sono necessarie solo per lavori abbastanza sofisticati.

3.2.1   Esempi di tabelle

Introduciamo gli elementi per la definizione delle tabelle con un semplice esempio:

<html>
<head>
<title>Esempio 1 con tabelle</title>
</head>
<body>
<p>
<table border>
<caption>Tabella di prova</caption>
<tr>
<th>Alunno</th>
<th>Voto orale</th>
<th>Voto scritto</th>
<th>Media</th>
</tr>
<tr>
<td>Pippo</td>
<td>5</td>
<td>7</td>
<td>6</td>
</tr>
<tr>
<td>Pluto</td>
<td>6</td>
<td>8</td>
<td>7</td>
</tr>
</table>
</p>
</body>
</html>

L'elemento da usare per la creazione di una tabella è <table>; è un elemento di blocco e richiede il tag </table> alla fine della definizione della tabella stessa.

Con <caption> e </caption> si può inserire il titolo della tabella.

Il tag <tr> definisce le varie righe, suddivise in celle il cui contenuto è definito con <td> per le celle normali, o con <th> per le intestazioni.

I tag </tr>, </td>, </th> non sono obbligatori.

L'esempio precedente viene visualizzato nel modo mostrato nella figura 3.12.

Vediamo anche un esempio di tabella in cui le intestazioni sono per riga invece che per colonna:

<html>
<head>
<title>Esempio 2 con tabelle</title>
</head>
<body>
<p>
<table border cellpadding="9">
<caption>Tabella 2</caption>
<tr>
<th>Matematica</th>
<td>Prof. Pippo</td>
<td>Ore: 5</td>
</tr>
<tr>
<th>Storia</th>
<td>Prof. Pluto</td>
<td>Ore: 3</td>
</tr>
</table>
</p>
</body>
</html>

Il risultato in questo caso è quello di figura 3.14.

Nel seguente, ulteriore esempio si ha invece una tabella con le intestazioni sia nelle righe che nelle colonne:

<html>
<head>
<title>Esempio 3 con tabelle</title>
</head>
<body>
<p>
<table align="center" border="15">
<caption>Terza tabella</caption>
<tr>
<th>Alunni/Materie</th>
<th>Italiano</th>
<th>Storia</th>
<th>Matematica</th>
<th>Diritto</th>
</tr>
<tr>
<th>Pippo</th>
<td>5</td>
<td>7</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<th>Pluto</th>
<td>6</td>
<td>8</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<th>Paperino</th>
<td>6</td>
<td>6</td>
<td>7</td>
<td>7</td>
</tr>
</table>
</p>
</body>
</html>

In questo caso si ottiene quanto mostrato in figura 3.16.

3.2.2   Attributi dell'elemento table

Gli attributi degli elementi per la definizione delle tabelle sono tutti opzionali; se non se ne specifica alcuno si ottiene una tabella allineata a sinistra e senza bordi.

Iniziamo a considerare gli attributi del marcatore <table> che sono: align, border, cellspacing, cellpadding, bgcolor, width.

Con l'attributo align, usato nel terzo degli esempi precedenti, si specifica l'allineamento della tabella; i valori possono essere "left" (valore per difetto), "center" e "right".

Attraverso bgcolor si specifica il colore dello sfondo della tabella usando i codici dei colori visti in precedenza.

L'attributo border permette di aggiungere i bordi a tutte le celle della tabella; se si specifica anche un valore in pixel, come nel terzo esempio, si ottiene il dimensionamento dei bordi, ma solo di quelli esterni.

Con cellspacing e cellpadding si può specificare di quanti pixel distanziare rispettivamente una cella da un'altra cella e il bordo delle celle dal loro contenuto (come è stato fatto nel secondo esempio).

Con width si imposta la grandezza della tabella, in percentuale rispetto alla larghezza della finestra del browser, oppure in base a un valore espresso in pixel.

Ad esempio:

<table width="50%">

oppure:

<table width="300">

Se questo attributo non viene usato, la tabella è dimensionata in base al contenuto della sue celle; a questo proposito è opportuno sottolineare, come emerge anche dagli esempi, che la larghezza di una colonna di una tabella è determinata dalla larghezza della cella più grande appartenente alla colonna stessa; allo stesso modo l'altezza di una riga si adegua all'altezza della cella più grande presente in essa.

3.2.3   Attributi del titolo

All'interno del titolo, cioè tra <caption> e </caption> si possono inserire solo elementi di testo.

Con l'attributo align si può decidere se il titolo sta sopra (impostazione per difetto) o sotto la tabella:

<caption align="top">Titolo sopra</caption>

oppure:

<caption align="bottom">Titolo sotto</caption>

3.2.4   Attributi delle righe e delle celle

I tag <tr>, <th>, <td> prevedono gli attributi align, valign, bgcolor; esistono inoltre gli attributi rowspan, colspan, width che si applicano solo a <th> e <td>.

Con align si imposta l'allineamento orizzontale dei dati in una cella o in tutte le celle di una riga a seconda che tale attributo sia abbinato a <td> e <th> oppure a <tr>; il valore per difetto è "left" e gli altri possibili sono "center" e "right".

Con valign invece si imposta l'allineamento verticale dei dati; i valori possibili sono: "top", "middle" (valore per difetto), "bottom", "baseline".

Il valore "baseline" è simile a "top" e imposta quindi un posizionamento in alto nella cella; la differenza è nel fatto che con "baseline" la parte inferiore della prima riga di testo di ogni cella è sempre allineata qualunque sia la dimensione dei caratteri usati nelle varie celle.

L'attributo bgcolor permette di specificare il colore di sfondo di una riga o di una cella e questa impostazione prevale sull'impostazione dell'intera tabella; se ad esempio abbiamo:

<table bgcolor="#FF0000">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr bgcolor="#00FF00">
<td>Cella 3</td>
<td bgcolor="#0000FF">Cella 4</td>
</tr>
</table>

La tabella ha lo sfondo rosso ma la seconda riga lo ha verde e la cella 4, che fa parte della seconda riga, ha lo sfondo blu.

Gli attributi colspan e rowspan servono ad unire orizzontalmente e verticalmente più celle di una tabella; vediamone il funzionamento con un esempio in cui si usa rowspan (l'utilizzo di colspan è analogo):

<html>
<head>
<title>Esempio 4 con tabelle</title>
</head>
<body>
<p>
<table border>
<caption>Tabella n. 4</caption>
<tr>
<th rowspan="2">Milano</th>
<td>Minima</td>
<td>-2</td>
</tr>
<tr>
<td>Massima</td>
<td>10</td>
</tr>
<tr>
<th rowspan="2">Roma</th>
<td>Minima</td>
<td>4</td>
</tr>
<tr>
<td>Massima</td>
<td>13</td>
</tr>
</table>
</p>
</body>
</html>

Il risultato che si ottiene è quello mostrato in figura 3.23.

Infine l'attributo width permette di specificare la larghezza in pixel di una cella indipendentemente dal suo contenuto; ad esempio:

<td width="20"></td>

Si ricordi comunque che le celle di una colonna assumono sempre una larghezza pari a quella della cella più larga della colonna stessa.

In una cella si può inserire praticamente tutto ciò che può essere definito nella sezione body di un documento:

• testo;

• elementi di blocco (paragrafi, elenchi, altre tabelle, ecc.)

• elementi di testo (font, collegamenti, immagini, ecc.)

Grazie a questo, come detto in precedenza, le tabelle vengono anche usate per definire la disposizione degli elementi all'interno della pagina; ovviamente in questo caso si evita di definire i bordi, le celle di intestazione, il titolo e tutto quello che può rendere «visibile» la tabella stessa.

Il documento HTML dell'esempio seguente è appunto «impaginato» usando una tabella che qui serve a posizionare con precisione tre piccole immagini allineate orizzontalmente e le relative didascalie sotto di esse:

<html>
<head><title>Esempio di posizionamento usando tabella</title>
</head>
<body>
<h1 align="center">Prova di posizionamento attraverso tabella</h1>
<p>Le seguenti immagini, con relative didascalie, sono
posizionate grazie all'uso di una tabella: le immagini sono
inserite nelle tre celle della prima riga, le stringhe nelle
tre celle della seconda riga.</p>
<p/><br/><p/>
<table cellpadding="10">
<tr>
<td width="200" align="center"><img src="tux.jpg" width="100" height="120"/></td>
<td width="200" align="center"><img src="tux_univ.jpg" width="100"\
  \height="120"/></td>
<td width="200" align="center"><img src="Family_linux.png" width="160"\
  \height="120"/></td>
</tr>
<tr>
<td align="center">Tux</td>
<td align="center">Tux studente</td>
<td align="center">Tux ... e famiglia</td>
</tr>
</table>
</body>
</html>

Nella figura 3.26 vediamo come viene visualizzata la pagina.

Il risultato che si ottiene inserendo i vari elementi come contenuto delle celle di una grossa tabella è solitamente accettabile, ma è utile ribadire che lo stesso risultato (se non migliore) si ottiene in modo più appropriato ed «elegante» con i fogli di stile.

3.2.5   Creazione di celle vuote

Per creare una cella vuota è sufficiente digitare il tag <td> seguito immediatamente da </td>; può però accadere che qualche browser non visualizzi i bordi di una cella vuota.

Per essere sicuri che i bordi siano visibili è possibile inserire nella cella vuota uno spazio unificatore:

<td>&#160;</td>

3.2.6   Tabelle nidificate

Una tabella è nidificata quando viene inserita in una cella di un'altra tabella.

L'uso di tabelle nidificate è anche un modo per ottenere due tabelle affiancate; basta infatti inserire le due tabelle da affiancare in due celle di una tabella «madre» definita senza bordo:

<html>
<head>
<title>Esempio 5 con tabelle</title>
</head>
<body>
<p>
<table align="center">
<caption>Tabella n. 5</caption>
<tr>
<td>
    <table border="10">
    <caption>I Quadrimestre</caption>
    <tr><td></td><th>Orale </th><th>Scritto</th>
    <th>Pratico </th></tr>
    <tr><td>Pippo </td><td>6 </td><td>7 </td><td>7</td></tr>
    <tr><td>Pluto </td><td>7 </td><td>8 </td><td>8</td></tr>
    </table>
</td>
<td>
    <table border="10">
    <caption>II Quadrimestre</caption>
    <tr><td></td><th>Voto finale </th></tr>
    <tr><td>Pippo </td><td>7 </td></tr>
    <tr><td>Pluto </td><td>8 </td></tr>
    </table>
</td>
</tr>
</table>
</p>
</body>
</html>

Il risultato che si ottiene è quello mostrato in figura 3.29.

3.3   Riquadri e riquadri in linea

In questo paragrafo vengono illustrati i riquadri (frame) e i riquadri in linea (inline frame).

Si ricorda che l'uso di questi elementi è deprecato a meno che non si faccia riferimento alla variante «Frameset» dell'HTML; qui vengono trattati perché permettono in modo semplice di gestire più documenti HTML in una singola pagina.

3.3.1   Uso dei riquadri

I riquadri sono delle suddivisioni della finestra del browser in cui possono essere visualizzati documenti HTML diversi.

Un esempio in cui possono essere utili è se si hanno siti Web con molti livelli di pagine: in tal caso si potrebbe pensare di usare un riquadro per visualizzare un indice del sito in modo permanente ed un altro per contenere le varie pagine che si richiamano durante la navigazione.

Per definire una pagina che deve contenere riquadri si usa un documento HTML particolare chiamato frameset che si differenzia da quelli visti finora in quanto contiene l'elemento <frameset> al posto di <body>.

Vediamo un esempio:

<html>
<head>
<title>Esempio con riquadri</title>
</head>
<frameset cols="35%,65%" bordercolor="#00FF00">
<frame src="doc1.html"/>
<frame src="doc2.html" name="frame2"/>
<noframes>
<body>
Se vedete questo messaggio il vostro browser non gestisce i frame.
Per visualizzare i documenti cliccare sui link:
<a href="doc1.html">Primo documento</a>
<a href="doc2.html">Secondo documento</a>
</body>
</noframes>
</frameset>
</html>

Il bordo dei riquadri viene impostato di colore verde con l'attributo bordercolor (per difetto il colore assegnato è il grigio); grazie all'attributo cols con valore "35%,65%" si ha una suddivisione in due colonne contenenti rispettivamente i documenti doc1.html e doc2.html.

La parte del documento compresa tra i marcatori <noframes> e </noframes> serve a rendere fruibile la pagina anche ai programmi di navigazione che non gestiscono i riquadri; essa è alternativa al frameset e contiene una sezione body come i «normali» documenti HTML.

L'aspetto del documento viene mostrato nella figura 3.31; i messaggi di file non trovato dipendono dal fatto che i due documenti doc1.html e doc2.html non sono stati creati.

Volendo ottenere una suddivisione in riquadri orizzontali si deve usare l'attributo rows al posto di cols; è anche possibile usare entrambi gli attributi per definire delle "griglie" di riquadri come nel seguente esempio:

<frameset cols="300,*" rows="25%,50%,25%">

La grandezza dei riquadri può essere specificata anche in pixel: nell'esempio la prima colonna è grande 300 pixel, mentre il carattere «*» significa che la seconda colonna occupa lo spazio restante nella finestra.

Esiste anche la possibilità di usare riquadri nidificati continuando a dividerli in più parti fino ad un massimo di nove riquadri presenti nella finestra.

Si deve però tenere presente che l'uso contemporaneo di più di due o tre riquadri in una finestra può favorire errori nella realizzazione del documento e può creare disorientamento nell'utente che lo visualizza.

Quando si usano i riquadri nidificati, il primo frameset si chiama «frameset di appartenenza» e gli altri «frameset dipendenti».

Vediamo un esempio con riquadri nidificati:

<html>
<head>
<title>Esempio con riquadri nidificati</title>
</head>
<frameset cols="250,*">
   <frame src="doc1.html"/>
   <frameset rows="50%,50%">
      <frame src="doc2.html" name="frame2"/>
      <frame src="doc3.html" name="frame3"/>
   </frameset>
</frameset>
</html>

In questo modo si ottiene una finestra suddivisa in due colonne, una larga 250 pixel, l'altra la restante parte dello spazio, a sua volta suddivisa in due righe di uguale grandezza.

L'attributo name del tag <frame> serve ad assegnargli un nome; questo è utile nel caso si voglia fare in modo che i collegamenti attivati su un riquadro abbiano "effetto" su un altro.

Ad esempio possiamo avere in doc1.html il collegamento seguente in cui si fa uso dell'ulteriore attributo target:

<a href="doc4.html" target="frame2">Cliccare per vedere documento 4</a>

Se viene attivato questo collegamento, il riquadro che lo contiene non si altera mentre in quello chiamato "frame2" si ha la visualizzazione della pagina doc4.html, come mostrato nella figura 3.35.

Nel caso in un documento ci siano molti collegamenti tutti con stesso target si può evitare di scrivere l'attributo per ognuno di essi ricorrendo all'elemento <base> da inserire nella sezione head nel seguente modo:

<head>
<title>Titolo</title>
<base target="nome_frame">
</head>

Esistono quattro nomi di destinazioni "speciali" che è possibile assegnare all'attributo target e precisamente:

• "_blank": indica di caricare il documento aprendo una nuova finestra del navigatore;

• "_parent": fa riferimento al frameset di appartenenza (può essere utile se si usano riquadri nidificati);

• "_self": indica di caricare il documento nel riquadro corrente (questa è l'impostazione per difetto e quindi ha senso usarla solo nel caso si voglia cambiare la destinazione stabilita con un base target precedente);

• "_top" è forse l'opzione più utile e permette di rimuovere tutti i riquadri presenti nella finestra.

Altri attributi del tag <frame> sono:

• frameborder, con valori "0" oppure "1" (per difetto è "1"): con "0" si elimina il bordo di separazione tra un riquadro e quello adiacente; si possono usare anche i valori "no" per avere un bordo normale e "yes" per averlo tridimensionale e si può anche impostare lo spessore del bordo con l'attributo border del tag <frameset>; questi attributi comunque sono estensioni HTML fuori dallo standard;

• borderwidth, borderheight, si possono usare per stabilire quanto spazio in pixel deve essere inserito tra i bordi del riquadro (rispettivamente i bordi destro e sinistro oppure superiore e inferiore) ed il suo contenuto;

• noresize, permette di impedire il ridimensionamento del riquadro da parte dell'utente;

• scrolling, con valori "yes" oppure "no" oppure "auto"; il valore per difetto è "auto" ed indica che le barre di scorrimento vengono aggiunte al riquadro automaticamente quando necessario; il valore "yes" le fa inserire sempre ed il valore "no" mai (sconsigliato).

3.3.2   Riquadri in linea

I riquadri in linea sono elementi di testo che permettono di visualizzare un documento separato come parte di una pagina; i marcatori da usare sono <iframe> e </iframe> con gli stessi attributi del tag <frame> ed in più width, height e align>, con ovvio significato.

Un riquadro in linea dovrebbe sempre contenere anche del testo alternativo da visualizzare se il browser non supporta tale elemento.

Vediamo un esempio:

<html>
<head>
<title>Esempio con gli iframe</title>
</head>
<body>
<i>Dopo questo testo abbiamo un elemento iframe contenente un altro
documento HTML.</i>
<p/>
<div align="center">
<iframe src="doc2.html" name="riquadro"/>
<p>Testo alternativo: il browser non supporta i riquadri in linea.</p>
<p><a href="doc1.html">Cliccare qui per il documento</a></p>
</iframe>
</div>
</body>
</html>

Nella figura 3.38 vediamo l'aspetto del documento.

Anche ai riquadri in linea può essere assegnato un nome, esattamente allo stesso scopo visto per i riquadri: riferendosi all'esempio, è possibile definire in un altra pagina un collegamento che, grazie all'attributo target con valore "riquadro", fa aprire un documento all'interno del riquadro in linea.

3.4   Oggetti multimediali

Per inserire oggetti multimediali (suoni e filmati) in un documento HTML si usa principalmente l'elemento di testo <object>.

Grazie alla tecnica dello streaming è anche possibile ascoltare suoni e vedere filmati in tempo reale (cioè durante il trasferimento, senza dover attendere che il file relativo all'oggetto multimediale sia stato completamente scaricato dalla rete) ma sono necessari appositi programmi come RealPlayer.

Si deve comunque tenere conto che in assenza di connessioni veloci alla rete la riproduzione di filmati e brani musicali scaricati da Internet avviene con una qualità praticamente inaccettabile.

I formati più comuni dei file audio sono:

• .au: Unix audio;

• .wav: Microsoft Wave;

• .aif: Macintosh audio;

• .ra o .ram: RealAudio;

• .mid o .midi: MIDI (Music Instrument Digital Interface);

• .mp3: standard MPEG-1 audio layer III.

I primi quattro contengono suoni digitalizzati con una qualità non eccezionale e una richiesta di memoria notevole per pochi secondi di registrazione. I file MIDI invece contengono "istruzioni musicali" che vengono interpretate ed eseguite dalla scheda audio del computer che così può riprodurre il brano; sono file molto piccoli e offrono suoni di elevata qualità.

I file mp3 sono sicuramente i più "famosi" e stanno cambiando la maniera di acquisire, ascoltare, archiviare musica.

L'mp3 è uno standard di compressione di musica digitalizzata che permette di memorizzare brani con qualità pari a quella dei CD musicali occupando circa un decimo dello spazio che sarebbe necessario senza la compressione (una canzone di tre minuti occupa circa 3 MB di memoria).

Diventa quindi possibile scaricare i brani da Internet anche con una normale connessione casalinga, ascoltarli con opportuni lettori software, conservarli sulle proprie memorie di massa o copiarli su lettori mp3.

Passando ai formati video possiamo citare:

• .mpg o .mpeg: MPEG (Moving Pictures Expert Group);

• .avi: Microsoft AVI (Audio Video Interleave);

• .mov o .qt: QuickTime.

Tutti i tipi di file video supportano anche l'audio associato ma occupano una grande quantità di memoria (almeno 1 Mb per 30 secondi di filmato).

I migliori sono i filmati MPEG che offrono anche una buona qualità di riproduzione.

3.4.1   Attributi degli oggetti multimediali

L'elemento <object> prevede gli attributi data, type e molti degli attributi già visti per le immagini (per definire larghezza, altezza, allineamento, bordo, ecc.).

Non è invece previsto l'attributo alt in quanto il testo alternativo si inserisce semplicemente tra i tag <object> e </object>.

Esempi:

<object data="symphony.mid" type="audio/midi">
Sinfonia in formato midi</object>
<object data="meteo.mov" type="video/quicktime" align="left"\
  \width="200" height="150">
Filmato da satellite meteo</object>

L'attributo type può essere tralasciato a patto che il browser sia in grado di identificare il tipo di oggetto multimediale solo dall'estensione del suo nome.

In certi casi è possibile specificare altri tag: ad esempio, nel caso di file midi, per far partire automaticamente la riproduzione del brano:

<object data="symphony.mid" type="audio/midi">
<param name="autostart" value="true"/>
Sinfonia in formato midi con autostart
</object>

3.5   Immagini mappate

Abbiamo visto in precedenza come sia possibile inserire in un documento un collegamento ancorato su una immagine; solitamente l'effetto dell'attivazione del collegamento è sempre lo stesso in qualsiasi punto dell'immagine si agisca.

Con le immagini mappate è invece possibile definire collegamenti diversificati per le varie zone di una immagine.

Gli elementi da utilizzare per includere delle immagini a mappa in un documento sono <map>, <area> e l'attributo usemap di img nel seguente modo:

<map name="nomemappa">
<area shape="rect" coords="x1,y1,x2,y2" href="doc1.html" />
<area shape="rect" coords="x3,y3,x4,y4" href="doc2.html" />
</map>
<img src="nome_immagine.jpg" usemap="#nomemappa"/>

In questo modo viene definita una immagine di mappa con nome nomemappa e due aree definite come rettangoli con vertici (x1,y1), (x2,y2) e (x3,y3), (x4,y4) che puntano rispettivamente a doc1.html e doc2.html.

I valori possibili di shape sono:

• "rect", permette di definire un'area rettangolare specificando con coords le coordinate dei vertici alto a sinistra e basso a destra;

• "circle", in tal caso l'area è un cerchio e con coords si specificano x,y,r cioè le coordinate del centro e il raggio;

• "poly", in questo modo si definisce un poligono e con coords si indicano le coordinate dei suoi vertici.

Per usare la mappa così definita si deve poi ricorrere al tag img con l'attributo usemap come mostrato nell'esempio precedente.

Si deve notare che il riferimento all'immagine con img non deve necessariamente essere inserito subito dopo la definizione della mappa fatta con <map>, ma può essere in qualsiasi punto del documento; si noti inoltre che il valore si usemap è un indirizzo URL: nell'esempio si fa riferimento ad una mappa definita nello stesso documento in cui è inserito l'elemento <img>, ma si potrebbe usare una mappa definita in un altro file o addirittura in un altro sito Web.

✓HTML ✓CSS