Guida HTML

Guida HTML(2)

I percorsi assoluti e relativi

Percorsi assoluti

Fino a quando ci troviamo nella condizione di creare un sito web di dimensioni ridotte (poche pagine) non avremo problemi di complessità, e possiamo anche ipotizzare di lasciare tutti i nostri file in una medesima cartella. È evidente però che – man mano che il nostro sito web cresce – avremo bisogno di un maggior ordine.

Si presenterà allora l’esigenza di inserire le immagini del sito in una cartelle diverse (in modo da averle tutte nella medesima locazione), e magari sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.

I siti web sono dunque organizzati in strutture ordinate: non a caso si parla di albero di un sito, per indicare la visualizzazione della struttura alla base del sito.

Poiché l’organizzazione di un sito in directory e sottodirectory è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificate.

Per farlo esistono due tecniche:

indicare un percorso assoluto
indicare un percorso relativo

Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare directory del sito di destinazione, con i percorsi assoluti non abbiamo che da indicare il percorso per esteso.

Se esaminiamo:

Leggi le risorse sui <a href="http://www.html.it/css/index.html">fogli di stile</a>

Possiamo vedere chiaramente che il link indica un percorso assoluto e fa riferimento ad una particolare directory. Nella fattispecie:

http://	Indica al browser di utilizzare il protocollo per navigare nel web (l’http)
www.html.it/	Indica di fare riferimento al sito www.html.it
css/	Indica che la risorsa indicata si trova all’interno della cartella "css"
index.html	Indica che il file da collegare è quello chiamato "index.html"

Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all’url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone.

Percorsi relativi

Spesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro stesso sito, e – se state sviluppando il sito sul vostro computer di casa (cioè "in locale") – magari non avete ancora un indirizzo web, e non sapete di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.
Per linkare due pagine che si trovano all’interno della stessa directory è sufficiente scrivere:

<a href="paginaDaLinkare.html">collegamento alla pagina da linkare nella stessa directory della pagina presente</a>

Poniamo ora di trovarci in una situazione di questo genere:

Figura 1. Riferimento a pagina di una sottodirectory
Riferimento a pagina di una sottodirectory

Dalla pagina "index.html" vogliamo cioè far riferimento al file "interna.html", che si trova all’interno della directory "interna", che a sua volta si trova all’interno della directory "prima".

La sintassi è la seguente:

<a href="prima/interna/interna.html">Visita la pagina interna</a>

Vediamo adesso l’esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli:

Figura 2. Riferimento a pagina in una directory di livello superiore
Riferimento a pagina in una directory di livello superiore

La sintassi è la seguente:

<a href="../../index.html">Visita la pagina interna</a>

Come si vede, con i percorsi relativi valgono le seguenti regole generali:

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file	<a href="paginaDaLinkare.html">collegamento alla pagina</a>
Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file. Secondo la formula: cartella/nomeFile.html	<a href="prima/interna/interna.html">Visita la pagina interna</a>
Per tornare su di un livello, è sufficiente utilizzare la notazione: ../nomeFile.html	<a href="../../index.html">Visita la pagina interna</a>

Grazie a questi accorgimenti potete agevolmente navigare all’interno delle directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare su di un livello rispetto alla posizione del file, scegliere un’altra cartella, e poi scegliere un altro file:

../altraCartella/nuovoFile.html

Per approfondimenti potete consultare la pagina d’esempio.

Approfondimenti

A volte potrete incontrare la notazione:

Leggi le risorse sui <a href="/css/index.html">fogli di stile</a>

Se il vostro sito è all’interno di un server Unix (ma la sintassi funziona anche in sistemi Windows, basta che non siano in locale), questa notazione non deve stupirvi: il carattere '/' indica la directory principale del sito, altrimenti detta "root". Dunque <a href="/css/index.html"> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito.

Un'altra cosa importante da sapere è che quando metterete il vostro sito all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa. Al posto di questo:

http://www.html.it/css/index.html

è sufficiente indicare la directory:

http://www.html.it/css/

Verificate solo con il vostro gestore dello spazio web (cioè "hosting"), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro.

Consigli per i nomi dei file

Quando mettere nel web il vostro sito internet, vi accorgerete che esistono due famiglie di sistemi operativi: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file, dunque alcuni accorgimenti sono necessari:

è consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html
maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file

Inoltre quando create un collegamento state attenti a non avere una notazione simile a questa:

<a href="file:///C|percorsonomeFile.html">testo</A>

significa che state facendo un riferimento (assoluto) al vostro stesso computer: chiaro che quando metterete i file nel vostro spazio web, le cose non funzioneranno più.

I link interni o ancore

È possibile anche creare un indice interno al documento, utilizzando le àncore. Ciascuna àncora può avere infatti un nome:

<a name="primo">Stiamo per esaminare la struttura…. Eccetera…</a>

Da notare che in mancanza dell’attributo che indica il collegamento (href) le àncore non vengono viste come link, ma la loro formattazione è indistinguibile dal "normale" testo.

In un ipotetico indice è allora possibile far riferimento all’àncora presente all’interno del documento attraverso un link che punti ad essa:

<a href="#primo">vai al primo paragrafo</a>

il cancelletto indica che il collegamento deve cercare un àncora chiamata "primo" all’interno della pagina stessa.

Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina (viene cercata un’àncora il cui nome non è specificato). Questo infatti è un ottimo escamotage per creare link "vuoti" (in alcuni casi vi occorreranno). Ad esempio:

<a href="#">link vuoto</a>

Per creare un indice interno alla pagina si procede dunque in due fasi distinte:

creazione dell’ancora a cui puntare (<a name="mioNome">)
creazione del collegamento all’ancora appena creata e riferimento
attraverso il cancelletto (<a href="#mioNome">)

È bene non confondere le due fasi.

Un esempio di quanto appena esposto lo potete trovare nella pagina dell’esempio.

Gli attributi dei link

target

È anche possibile specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all'interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra:

<a target="_blank" href="http://www.html.it">visita HTML.IT</a>

cioè:

visita HTML.IT

vedremo questo attributo più in dettaglio quando parleremo dei frames.

title

L'attributo title è molto importante, e serve per specificare un testo esplicativo per l'elemento a cui l'attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore). Questa spiegazione addizionale favorisce l'accessibilità del sito anche ai disabili, alle persone per esempio che hanno disturbi alla vista. Se lasciate il cursore del mouse per qualche secondo su un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title:

<a title="in HTML.it puoi trovare risorse per webmaster" 
    href="http://www.html.it/" target="_blank" >
    Visita HTML.it
</a>

cioè:

Visita HTML.it

L'attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.

hreflang

Con "hreflang" si indica la lingua del documento: si tratta di un attributo che migliora l'accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca (l'attributo può essere utilizzato ad esempio per specificare la presenza di una sezione del proprio sito in lingua inglese):

Nel sito del <a href="http://www.w3c.org/" hreflang="eng" target="_blank">World Wide Web Consortium</a>

puoi trovare le specifiche dell'HTML in lingua inglese

cioè:

Nel sito del World Wide Web Consortium puoi trovare le specifiche dell'HTML in lingua inglese

accesskey

Le accesskey sono delle scorciatoie "da tastiera" che potete utilizzare nel vostro sito. Si tratta di scegliere delle lettere della tastiera che - quando vengano digitate dall'utente - permettono di andare direttamente a determinate pagine. Per esempio potreste specificare che:

<a href="http://www.html.it/" accesskey="h" target="_blank" >Torna all'home page di HTML.it</a>

cioè:

Torna all'home page di HTML.it

In questa pagina digitando "ALT + h + invio" con Internet Explorer, oppure direttamente "h + invio" con Mozilla si accede direttamente all'home page di HTML.it. Si tratta di un'altra tecnica per migliorare l'accessibilità, ma un uso improprio e indiscriminato di questa tecnica può risultare davvero deleterio per la navigazione. Diciamo che le accesskey dovrebbero essere riservate per la navigazione dei menu che portano alle parti principali del sito.

Colorare i link

Abbiamo già visto come colorare i link in tutta la pagina. Possiamo però aver bisogno di colorare alcuni link della pagina in modo diverso. Per farlo è sufficiente annidare il tag <font> all'interno del link:

<a href="http://www.html.it/" target="_blank" ><font color="red" size="2" face="Verdana, Arial, Helvetica, sans-serif">

Torna all'home page di HTML.it</font></a>

cioè:

Torna all'home page di HTML.it

ovviamente il modo giusto per colorare i link non è quello di utilizzare il tag font, ma quello di utilizzare i fogli di stile, come spiegato nella Guida CSS.

Il tag <base>

I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag <base>, che va incluso nella head del documento. Ad esempio con:

<base href="http://www.mioSitoWeb.com/miaCartella">

specifico che d'ora in poi tutti i percorsi relativi faranno riferimento al percorso indicato. E poi nel documento potrò scrivere:

<a href="mioFile.html">collegamento al mio file</a>

sicuro che farà riferimento a:

http://www.mioSitoWeb.com/miaCartella/mioFile.html

Si tratta di una caratteristica particolarmente utile quando bisogna mandare ad esempio delle mailing list in formato HTML: possiamo infatti utilizzare i percorsi relativi per sviluppare la pagina della mailing list in locale, e mantenerli inalterati grazie all'utilizzo di questo tag. Grazie ad esso siamo infatti sicuri che anche l'utente che riceverà la mail potrà visualizzare le immagini e i link con un percorso corretto.

Inserire le immagini

Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come The GIMP, Photoshop o Paint Shop Pro).

I formati ammessi nel Web sono sostanzialmente tre:

GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone
JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser).

Non provate dunque a inserire un file “.psd” (è il formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non vi caricherà il file che vorreste includere (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

Inoltre è importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina con troppe immagini. Allo stato attuale dell’arte infatti molti utenti (e non soltanto quelli italiani) navigano ancora con un modem analogico da 56 Kbs: inserire troppe immagini significa dunque creare pagine lente da caricare.

Per ottenere un sito web dalla grafica accattivante, spesso è sufficiente giocare con i colori dello sfondo e delle scritte.

La sintassi per inserire una immagine è:

dove:

img significa image, cioè immagine
src significa source, cioè origine

Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.

Ecco ad esempio come inserire il logo di HTML.it in una pagina dallo sfondo blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):

Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza. Avremo ad esempio:

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Ad esempio:

L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto:

L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere impossibile la navigazione.

Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga, è possibile espandere la descrizione sintetica - fornita tramite l’attributo "alt" - grazie ad un altro attributo: si tratta di longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:

Nell’esempio allegato è possibile visualizzare il codice di una pagina con la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.

longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo da fornirne una spiegazione esauriente in ogni contesto.

In realtà l'attributo alt non serve, come molti credono, a visualizzare un etichetta esplicativa dell’immagine nel caso in cui il cursore del mouse si soffermi sopra essa: questo semmai è un effetto collaterale che si verifica con Internet Explorer. L’attributo corretto per far visualizzare un testo che commenti l’immagine è infatti title:

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine:

Si noti che i link lasciano sempre di default un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):

Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0”:

Disporre le immagini in un contesto

Se inserita in un testo, normalmente una immagine è inserita nel testo. Così:

Esempio di immagine nel testo

<p>HTML.it è il primo sito italiano sul web publishing <img src="logo.gif" width="224" height="69" border="0"> con centinaia di esempi e guide esplicative </p>

HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing

con centinaia di esempi e guide esplicative HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing

Abbiamo tuttavia la possibilità di allineare l'mmagine e il testo come preferiamo, utilizzando l’attributo align. Vediamo di seguito come vengono visualizzati align="left" e align="right":

Esempio di immagine allineata a sinistra

<p><img src="logo.gif" width="224"height="69"border="1"align="left">
HTML.it èil primo sito italianosul web publishing, con centinaia di esempi e guide esplicative</p>

HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing

Esempio con immagine allineata a destra

<p> <img src="logo.gif" width="224" height="69" border="1" align="right">
HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative </p>

HTML.it è il primo sito italiano sul web publishing, con centinaiadi esempi e guide esplicative HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing

Altri valori possibili sono:

Valore di align	Visualizzazione
bottom	allinea la prima riga di testo sulla sinistra nella parte bassa dell'immagine (è così di default).
middle	allinea la prima riga di testo sulla sinistra al centro dell'immagine.
top	allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine.

Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.

Infine con hspace (horizontal space, cioè "spazio orizzontale") e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Nel caso di hspace impostiamo uno spazio orizzontale da ambo i lati, come in questo caso:

Nel caso di vspace lo spazio è verticale, ma sempre da ambo i lati:

cioè:

Un attributo importante - di cui non vedrete nessun effetto "pratico" di formattazione, ma che vi servirà ad esempio per creare un effetto di "scambio immagine" grazie a JavaScript - è quello che permette di specificare il nome dell'immagine:

Approfondimenti

Ovviamente sarebbe meglio impostare lo spessore e il colore dei bordi, gli spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.

Le mappe di immagine

A volte è necessario far sì che solo una determinata parte di un'immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente link.

In questo caso possiamo utilizzare le mappe. Ne esistono di due tipi:

le mappe lato client
le mappe lato server (non più utilizzate)

Le mappe lato-client

Questo tipo di mappa è contraddistinto dall’attributo usemap del tag img:

come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento.

A questo punto non ci resta che creare la mappa:

<map name=”nomeMappa”>
…
</map>

All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare.

Vediamo un esempio: abbiamo preso la cartina dell’Italia e – a scopo puramente didattico – abbiamo deciso di mappare la Regione Valle D’Aosta con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un poligono (per rendervene conto passate il mouse su una di queste regioni).

Figura 1. Esempio di immagine con mappe
Esempio di immagine con mappe

le coordinate fanno riferimento all’immagine stessa, e il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0. Le coordinate dei punti che descrivono le varie forme si riferiscono alla distanza in pixel da quel punto (si tratterà di volta in volta della x o della y).

Come si può vedere per definire un’area è necessario specificare una forma, che può essere di tre tipi:

Forma	Descrizione
rettangolare <area shape="rect">	è necessario specificare alcune coordinate del rettangolo per individuare i veritici. In particolare sono da specificare (in quest’ordine): la x del lato di sinistra la y del lato alto la x del lato destro la y del lato in basso
circolare <area shape="circle">	è necessario specificare le coordinate del centro (x e y) e la misura del raggio (in pixel)
poligonali <area shape="poly">	è necessario specificare tutte le coordinate del poligono a coppie

In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo (ed eventualmente il longdesc).

Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la possibilità di specificare ad esempio il target in cui aprire i link.

In realtà non è difficile disegnare le mappe, perché ci sono già software che lo fanno al posto nostro. Se utilizzate un editor visuale ad (esempio Dreamweaver) potete trovare degli strumenti integrati nell’ambiente di sviluppo che vi consentono di disegnare le mappe in tutta tranquillità.

In alternativa si possono usare programmi appositi, come CoffeCup Image Mapper, CuteMap o MapEdit

Per quel che riguarda il luogo in cui posizionare la mappa così creata, dipende dalle vostre preferenze: è una buona norma però situare la mappa in prossimità dell’immagine, in modo da poterla reperire facilmente.

Approfondimenti

Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi:

onFocus='this.blur()'

da applicare al tag <AREA> in questo modo:

Le mappe di immagine lato server

In questo caso la mappatura dell’immagine non è visibile all’interno della pagina HTML, ma è presente all’interno di un programma sul server, ad esempio un cgi.

La presenza di una mappa sull’immagine è specificata dall’attributo ismap del tag <img> e l’indicazione della posizione in cui si trova la mappa sul server viene data attraverso un link. Ad esempio:

(notare che l’attributo ismap non ha alcun valore).

Il link fa riferimento alla locazione della mappa sul server, e quando l’utente cliccherà sul collegamento, sulla barra degli indirizzi comparirà qualcosa di questo genere:

http://www.html.it/cgi-bin/menu.map?25,55

dal momento che il programma sul server avrà tradotto la mappa in coordinate da passare al mouse.

C’è da dire che le mappe lato server non vengono più usate, perché estremamente scomode (è poco pratico mantenere in differenti file le indicazioni sull’immagine e quelle sulla mappa), dunque non le vedremo nel dettaglio. Venivano utilizzate soprattutto agli albori del web, quando non tutti i browser erano in grado di interpretare le mappe lato-client: con le mappe lato-server si aveva la certezza, allora, che qualsiasi utente potesse leggere correttamente l’immagine (dal momento che il lavoro di mappatura veniva fatto dal server, appunto, e non dal computer dell’utente).

Tabella: struttura di base

Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici.

Il loro ampio utilizzo all’interno dei documenti ha fatto sì che – nel passaggio dall’HTML 3.2 all’HTML 4 - le specifiche delle tabelle venissero estese con una serie di notazioni destinate a “far ordine” all’interno di un codice che rischiava di diventare troppo vasto.

Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:

<table>	apre la tabella
<tr>	“table row”: indica l’apertura di una riga
<td>	“table data”: indica una cella all’interno di una riga

In questi nostri primi esempi presupponiamo che il numero delle celle all’interno di ciascuna riga sia costante: ogni riga avrà cioè lo stesso numero di celle. Ci sono dei metodi per variare il numero delle celle all’interno di una riga, ma li vedremo in seguito.

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:

<table border=”2”>

Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella:

<table border="1">
  <tr>
       <td>prima cella</td>
       <td>seconda cella</td>
   </tr>

   <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

prima cella	seconda cella
terza cella	quarta cella

Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="1">
  <tr>
       <td>prima cella</td>
       <td>seconda cella</td>
   </tr>

   <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

prima cella	seconda cella
terza cella	quarta cella

Oppure:

<table width="75%" border="1">
  <tr>
       <td width="25%">prima cella</td>
       <td width="75%">seconda cella</td>
   </tr>

   <tr>
      <td width="25%">terza cella</td>
      <td width="75%">quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

prima cella	seconda cella
terza cella	quarta cella

Di solito la larghezza e l’altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.

Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto sommato abbastanza rigide: l’eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti.

Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto, come si può vedere nell’esempio allegato, che non è corretto.

Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l’interno della tabella: in un caso simile infatti “vincerebbe” il valore specificato nel tag genitore, come si può vedere nella pagina di esempio.

Inoltre (come si evince dagli esempi) la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser, quindi si rischia di ottenere risultati diversi da quelli voluti.

Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>

Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine HTML, che si sono riempite di <tr> e di <td>.

Per portare un po’ di ordine in questo caos nelle specifiche sono stati introdotti dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella.

Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:

<caption>	è l’intestazione, il titolo con un commento esplicativo sulla tabella
<thead>	è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle
<tfoot>	è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme
<tbody>	è il corpo, la parte centrale con il contenuto vero e proprio della tabella

<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe (“row group”).

Da notare che – contrariamente a quello che si potrebbe pensare – il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. L’idea di base è che il browser nell’eseguire il rendering del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità.

Un’altra particolarità è che le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato.

Ecco comunque uno schema che riassume la struttura delle tabelle secondo l’HTML 4:

Figura 1. Elementi della tabella
Elementi della tabella

A questa pagina è possibile visualizzare un esempio.

Raggruppare gli stili delle colonne

Come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup> e serve per fornire indicazioni su come le colonne debbano essere visualizzate.

Purtroppo questo tag nel momento in cui scrivo non funziona ancora correttamente con tutti i browser: il tag è correttamente visualizzato da Internet Explorer, è supportato solo in parte da Opera, ma non è ben interpretato da Mozilla (e dunque neanche da Netscape 7), che lo ignora tranquillamente. Tuttavia trattandosi di una specifica del W3C in futuro il supporto a questa sintassi dovrebbe essere maggiore.

Prima di vedere nel dettaglio questo tag anticipiamo due concetti che vedremo in seguito quando ci occuperemo più approfonditamente della formattazione delle tabelle e che ora ci servono per meglio comprendere l'uso di <colgroup>.

L’attributo align può essere riferito sia a <tr>, sia a <td> e serve per definire l’allineamento dei contenuti a sinistra, a destra o al centro (left, right, center)
L’attributo bgcolor può essere riferito tanto a <table>, <tr>, o <td> e – come abbiamo visto a proposito del <body> - consente di impostare un colore di sfondo

Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella.

Con l’attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo.

Per avere un layout di questo genere:

Figura 1. Esempio di uso dell'attributo «span»
Esempio di uso dell'attributo «span»

basterà allora scrivere:

<table width="75%" border="1">

<colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup>
<colgroup span="2" bgcolor="#33CCFF" width="30%" align="center">

<caption>
  <div align="center"><b>Fatturato dell'azienda XYZ</b></div>
</caption>

<thead>
  <tr>
   <th>Mesi di attività</th>
   <th>Fatturato da attività 1 (in euro)</th>
   <th>Fatturato da attività 2 (in euro)</th>
  </tr>
</thead>

eccetera....

</table>

come illustrato dettagliatamente in questa pagina.

<colgroup> ha l’indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio:

Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all’interno di <colgroup>. In questo caso l’attributo span va riferito a <col> e non a <colgroup>.

Ad esempio:

come mostrato in dettaglio nella pagina di esempio.

Approfondimenti

I tag <colgroup> e <col> in teoria supportano anche la possibilità di creare delle celle larghe proporzionalmente. Ad esempio:

questa sintassi dovrebbe dividere lo spazio a disposizione in tre parti e assegnare una parte alla prima cella e due parti alla seconda cella. In realtà questa sintassi non è ancora supportata da nessun browser.

Raggruppare celle con rowspan e colspan

Finora abbiamo immaginato le tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile. I raggruppamenti di righe e colonne che abbiamo esaminato finora non hanno modificato minimamente questa struttura.

In realtà è possibile raggruppare le delle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un’altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l’attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Ad esempio:


	<td colspan="2">

Il cui codice corrispondente è:

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Ad esempio:

	<tdrowspan="2">
	<tdrowspan="2">

il cui codice corrispondente è:

Per un esempio approfondito esaminare il codice di questa pagina.

Annidare tabelle

È anche possibile annidare le tabelle le une dentro le altre. Come in questo esempio:

che dà come risultato:

Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene.

Attributi del tag table

Per quel che riguarda il tag <table>, i seguenti attributi che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto:

border	(che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel)
cellspacing	specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri
cellpadding	indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata – ha effetto su tutti i lati della cella.

I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come segue:

figura

Con questa sintassi ad esempio si imposta una tabella con bordo di 1 pixel, senza spazio tra le celle e con il contenuto che è distanziato dai bordi della cella di 10 pixel:

come si può vedere nell’esempio.

per quel che riguarda l’attributo border, a partire da Internet Explorer 4 e da Netscape Navigator 6 è possibile modificare l’aspetto dei bordi esterni della tabella (tramite l’attributo frames) e delle righe fra le celle (tramite l’attributo rules).

Vediamo quali sono i possibili valori e i relativi esempi:

esempio

spiegazione

<table border="1" frame="above">

(nelle pagine di esempio qui a fianco le righe interne tra le celle sono state azzerate per facilitare la comprensione, dunque ci troveremo nella situazione in cui rules="none")

Il bordo della tabella è presente:

void: in nessun lato. È il valore di default
above: solo nel lato superiore
below: solo nel lato inferiore
hsides: solo nei lati superiore e inferiore
vsides: solo a sinistra e a destra
lhs: solo nel lato sinistro (left-hand side)
rhs:solo nel lato destro (right hand side).
box: in tutti e quattro i lati
border: in tutti e quattro i lati

<table border="1" rules="rows">

(nelle pagine di esempio qui a fianco i bordi esterni della tabella sono stati azzerati per facilitare la comprensione, dunque ci troveremo nella situazione in cui frame="void")

Le righe interne alle celle sono presenti:

none: da nessuna parte. È il valore di default
groups: le righe separano i gruppi (siano essi gruppi di righe: <thead>, <tfoot>, <tbody> - o gruppi di colonne: <colgroup>)
rows:le righe separano i vari <tr>
cols:le righe separano le colonne
all:le righe separano tanto i <tr>, quanto le colonne

Attributi di <table>, <tr>, <td>

I seguenti attributi invece hanno invece valore per tutti gli elementi della tabella (<table>, <tr>, <td>), li presenteremo quindi in un medesimo contesto.

Dimensioni

Abbiamo già esaminato gli attributi width e height che determinano la larghezza e l’altezza (in pixel o in percentuale) di tabelle, righe o celle.

Lo sfondo

Possiamo assegnare un colore di sfondo tramite l’attributo bgcolor, oppure un’immagine tramite background, come abbiamo già visto a proposito del tag <body>.

Vediamo un esempio:

bgcolor

codice:

<table width="75%" border="1" align="center" bgcolor="#00FF00">

<tr>
  <td width="50%" bgcolor="#FF0000">
   <font color="#FFFFFF">prova</font>
  </td>
  <td width="50%"> 
  </td>
</tr>

</table>

visualizzazione:

prova

background

codice:

<table width="75%" border="1" align="center" bgcolor="#00FF00">

<tr>
  <td width="50%" background="sfondo.gif">
   <font color="#FFFFFF">prova</font>
  </td>
  <td width="50%"> 
  </td>
</tr>

</table>

visualizzazione:

prova

Come già nel <body> l'immagine di sfondo viene ripetuta, ed è possibile specificare entrambi gli attributi (bgcolor e background) all’interno dello stesso tag:

L’allineamento

L’attributo align, se riferito al tag <table>, sposta la tabella rispettivamente a sinistra (align=”left” – è così di default), a destra (align=”right”), o al centro (align=”center”) del documento. Es:

Se riferito a <tr> o a <td> è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra. Es:

<td align=”right”>
contenuto
</td>

Allo stesso modo valign è utile per l’allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo – è il valore di default), bottom (in basso), baseline (alla linea di base). Es:

<td height=”100” valign=”middle”>
contenuto
</td>

Colori dei bordi

Per i bordi esistono gli attributi bordercolor, bordercolorlight, bordercolordark. Ad esempio:

Questi attributi - che consentono di creare degli effetti bellissimi - sono visualizzati correttamente soltanto da Internet Explorer, mentre con gli altri browser (Mozilla, Opera) verranno visualizzati in modo parziale se non scorretto.

In realtà il modo corretto per attribuire un colore al bordo è quello di usare i CSS.

Ci sono tuttavia delle soluzioni - utilizzate dagli sviluppatori sin dall’HTML 3 – che permettono di mostrare un filetto colorato attorno alle tabelle. La tecnica di solito è quella di lasciar trasparire il colore di sfondo attraverso lo spazio fra le celle. Vediamo un esempio:

<table width="450" bgcolor="#00CCFF" cellpadding="10" cellspacing="1">

  <tr bgcolor="FFFFFF">
    <td width="50%"><b>contenuto</b></td>
    <td width="50%"> </td>
  </tr>

</table>

che dà:

contenuto

Grazie all’attributo si può far sì che il contenuto di una cella non vada a capo, a meno che non lo forziamo espressamente con un <br> (è un “break”, cioè un’ "interruzione"):

<table width="100" border="1">
<tr>
  <td >
   Se non lo vogliamo non va a capo.<br>
   Qui va a capo.
  </td>
</tr>
</table>

cioè:

Se non lo vogliamo non va a capo.
Qui va a capo.

Approfondimenti

Da notare che quando una cella non viene riempita con un qualsiasi elemento non tutti i browser visualizzeranno i bordi allo stesso modo:

<table width="200" border="1">
<tr>
  <td width="50%">
  </td>
  <td width="50%">contenuto
  </td>
</tr>
</table>

cioè:

contenuto

Dunque è opportuno riempire sempre le celle con qualcosa, sia pure un   (è la notazione per indicare un “non-breaking space”, cioè uno "spazio che non va a capo"), o un <br>. Attenzione che questi caratteri speciali prendono le dimensioni del tag <font> all’interno di cui sono contenuti.

Con Netscape 4 per ottenere la visualizzazione desiderata è spesso necessario introdurre una gif trasparente di 1 pixel x 1 pixel (detta “shim”) come sfondo della cella.

Ovviamente per ottenere il layout desiderato di bordi e tabelle sarebbe più opportuno utilizzare i fogli di stile su caratteristiche come i margini, il padding, i bordi, lo sfondo.

Impaginare un layout con le tabelle

Le tabelle, grazie alle loro molteplici e multiformi caratteristiche, si sono rivelate uno strumento indispensabile non solo per impaginare i dati ma soprattutto per visualizzare i layout grafici: grazie alle tabelle è infatti possibile costruire delle griglie in cui inserire i vari contenuti di un sito e per mezzo degli sfondi, dei margini è possibile riprodurre un’impostazione accattivante.

Visualizzando la pagina dell'esempio è possibile vedere il layout di HTML.it impaginato grazie alle tabelle: questo primo esempio utilizza una tabella unica suddivisa nelle classiche sezioni <thead>, <tbody> e <tfoot>.

In questo secondo esempio il medesimo risultato è ottenuto sovrapponenedo una serie di tabelle, senza così vincolare tutto a un’unica struttura.

Le possibilità di ottenere il layout che abbiamo appena esaminato comunque sono molteplici. Grazie alle tabelle è possibile anche progettare layout liquidi, che si adattino cioè alla risoluzione del monitor dell’utente.

È vero che l’impaginazione a tabelle ha fatto il suo tempo:

perché mischia la visualizzazione dei dati ai dati stessi, e dunque è difficile da gestire
perché riempie le pagine con molto codice rallentando lo scaricamento

Oggi siamo in un periodo di transizione. Gli sviluppatori dai “vecchi” modi di costruire i siti web (a tabelle), dovrebbero migrare verso qualcosa di nuovo: verso una impaginazione che utilizzi i fogli di stile e l’(x)html.

L’impaginazione a tabelle rimane, tuttavia, senz’altro una pietra miliare del web.

Comporre una pagina in frame

I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti.

Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:

Fino a qualche tempo fa la velocità di navigazione era ben poca cosa, e si navigava con modem analogici molto lenti (anche da 14.4 kbs): i frame hanno l’indubbio vantaggio di non costringere a ricaricare tutta quanta la pagina, accelerando così la navigazione dell’utente all’interno di un sito web. D’altro canto il fatto che solo una parte del contenuto sia ricaricata fa risparmiare banda anche dal punto di vista del server che deve erogare le pagine
Per quel che riguarda i webmaster, i frame hanno la caratteristica di utilizzare una struttura che consente di non ripetere le parti comuni nelle varie pagine di un sito, dal momento che il contenuto della pagina (per sua natura) è organizzato “a zone”
Il fatto di poter mantenere fisso su un lato del monitor il menu di navigazione e far scorrere sull’altro lato il contenuto piace a molti utenti, soprattutto quando la risoluzione del monitor è bassa (800 x 600 o 640x480, magari su un monitor da 15’’)

Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C.

Struttura di un frameset

Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>

<frameset rows="50%,50%" cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">

<noframes>
  <p>Qui può essere indicato il link a
   <a href="senzaFrame.html"> una versione del sito</a>
   che non utilizzi un layout a frame
  </p>
</noframes>

</frameset>
</html>

L’esempio completo si trova qui.

Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento.

All’inizio del documento al posto di questa riga:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">

compare ora infatti questa dicitura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.

Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina

Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:

rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne . Ad esempio:
<frameset cols="33%, 33%,*">
cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe
<frameset rows="33%, 33%,*">

Nell’indicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):

dimensione fissa

Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:

L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina

percentuale

Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale:

come si può vedere la prima riga occupa il 20% dell’altezza, la seconda il rimanente 80%.

Le 3 colonne si dividono la larghezza: la prima colonna occupa il 25%, la seconda nuovamente il 25%, la terza il 50% dello spazio

proporzionale

In questo caso la ripartizione è proporzionale:

per ciò che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3
per ciò che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi:

come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>.

Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve).

Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:

Con Internet Explorer:
selezionare HTML
Con Mozilla:
selezionare this frame > view frame source

È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:

la sintassi corretta per dare un nome a un frame dovrebbe essere:

id=”primoRiquadro”

tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.

Frameset annidati

È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<frameset rows="15%,70%,15%">
  <frame src="11.html">

   <frameset cols="25%,50%,25%">
    <frame src="21.html">
    <frame src="22.html">
    <frame src="23.html">
   </frameset>

  <frame src="12.html">

<noframes>
<p>Qui può essere indicato il link a <a href="senzaFrame.html"> una versione del sito</a> che non
utilizzi un layout a frame</p> </noframes>
</frameset>
</html>

L’esempio completo si trova qui.

Attributi dei frames per la visualizzazione

Attributi del frameset

Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali:

<frameset frameborder="no" cols="25%,75%">	L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi. L'esempio è qui
<frameset framespacing="20" border=”20” cols="25%,75%">	framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel. Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border. L'esempio è qui
<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">	bordercolor permette di specificare il colore dei bordi del frameset. L'esempio è qui

Attributi dei frame

A differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e permettono di modificare l’aspetto dei riquadri e il modo in cui l’utente può interagire con essi:

<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”auto”>	L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no. Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice, come si può vedere nell’esempio. L'esempioè qui scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario
<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”no” noresize>	noresize impedisce al singolo frame di essere ridimensionato. L'esempio è qui Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame. L'esempio è qui Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti
<frame src=”prima.html” frameborder=”0”>	frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes"). Se frameborder è impostato a “0” i bordi non sono visibili L'esempio è qui Attenzione però a come impostate i bordi nei vari frame, dal momento che i bordi di frame adiacenti non sempre vanno d’accordo(provate) Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>
<frame marginwidth="50" marginheight="50" src="prima.html">	marginheight e marginwidth permettono di impostare la distanza erticale (marginheigth) e orizzontale (marginwidth) ra i bordi del frame e il suo contenuto. L'esempio è qui

Approfondimenti

Ovviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i CSS. Nella lezione della guida ai fogli di stile dedicata ai bordi con i CSS è spiegato come fare.

I link in un frameset e il tag noframes

Il target dei link in un frameset

In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all’attributo target possiamo specificare qual'è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno:

come si può vedere nell’esempio.

Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite:

target=”_blank”	Apre il link in una nuova finestra, senza nome L'esempio è qui
target=”_self”	Apre il link nel frame stesso (è così di default) L'esempio è qui
target=”_parent”	Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore) L'esempioè qui Il comportamento di “_parent” è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset, come nell’esempio: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link.
target=”_top”	Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. L'esempio è qui (si noti la differenza con “_parent”). Più esattamente il documento viene carictao nella parte piùalta ("top") della struttura, ed è questo il motivoper cui il frameset stesso viene annullato e sostituito dal contenutodel link.

Può essere noioso specificare per tutti i link il target appropriato. Ci viene in aiuto allora il tag <base> che ci consente di specificare la destinazione dei tutti link in una sola volta. Il tag va inserito nella pagina contenente i link. Ad esempio:

a questo indirizzo è possibile visualizzare l’esempio completo.

Abbiamo già incontrato il tag <base> per impostare un percorso predefinito di default. Ovviamente è possibile combinare i due attributi di <base>:

Questa sintassi indica che l’indirizzo di base per i percorsi della pagina è http://www.html.it e che tutti i link vanno aperti in una nuova pagina.

Il tag noframes

All’interno della dichiarazione del <frameset> abbiamo sempre visto comparire l’elemento <noframes>: questo tag serviva per browser particolarmente obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una struttura frameset. In previsione di situazioni di questo genere è possibile inserire all’interno del tag <noframes> un contenuto appositamente studiato per questa eventualità, ad esempio l’avvertimento che il sito è strutturato a frame, o un contenuto alternativo, oppure una descrizione per i motori di ricerca (come vedremo tra breve).

La struttura è la seguente:

<frameset rows="50%,50%">
  <frame src="prima.html">
  <frame src="seconda.html">

  <noframes>
   <p>Qui può essere indicato il link a
    <A href="senzaFrame.html">una versione del sito<A>
    che non utilizzi un layout a frame,
    oppure un contenuto alternativo,
    o anche una descrizione per i motori di ricerca.
  </p>
  </noframes>
</frameset>

È importante capire una volta per tutte come funziona questo genere di tag, dal momento che un tipo di struttura di questo genere ricorre in diverse occasioni nell’HTML: il tag <noscript> e i contenuti alternativi nel caso dell’<iframe> utilizzano infatti gli stessi principi di funzionamento.

I browser obsoleti non sono in grado di interpretare né la struttura di un frameset, né tanto meno il <noframes>: non essendo un tag previsto nelle specifiche rilasciate all’epoca in cui questi browser sono stati costruiti, si tratta infatti di una sintassi del tutto oscura per loro.

Di tutto il codice in questione l’unica parte comprensibile a questo genere di browser è l’HTML standard compreso all’interno del <noframes>: e questo si limitano a leggere.

Sono invece i browser moderni che sanno di dover ignorare il <noframes>, dal momento che il suo contenuto non li riguarda.

C’è da dire che, se tutti i browser odierni sono in grado di interpretare correttamente la struttura di un frameset, viceversa sotto molti punti di vista i motori di ricerca sono paragonabili a browser obsoleti, e non è raro che un sito organizzato a frame sia inserito nell’indice dei motori di ricerca in maniera non corretta: per questo motivo alcuni di essi “catturano” il contenuto del <noframes> come descrizione di un sito.

Quindi per evitare messaggi di questo genere a seguito di una ricerca in rete:

Figura 1. Messaggio del motore di ricerca per pagine senza «noframes»
Messaggio del motore di ricerca per pagine senza «noframes»

è bene utilizzare il tag noframes per indicare la descrizione del sito: in questo modo miglioriamo anche il posizionamento nei motori di ricerca. Ad esempio:

<frameset rows="50%,50%">
  <frame src="prima.html">
  <frame src="seconda.html">

  <noframes>
   <p>Su PRO.HTML.it - Approfondimenti sul Web Publishing e articoli per webmaster</p>
  </noframes>
</frameset>

L'iframe

“Iframe” significa “inline frame”: in qualsiasi momento in un documento che non utilizzi una struttura a frame è possibile creare un frame al volo grazie a questo tag.

Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>: si tratta di una vera e propria finestra verso l’esterno all’interno di un documento ordinario.

Questo tag è correttamente supportato da tutti i browser moderni (Netscape 4 non lo supporta, ma questo browser oramai sta scomparendo). La sintassi è:

Come si può vedere tra l’apertura e la chiusura del tag è possibile specificare un contenuto alternativo per i browser che non siano in grado di leggere l’<iframe>: in realtà questi browser sono ciechi a questo tag (come abbiamo visto per il <noframes>) e dunque leggono direttamente il contenuto al suo interno. Sono invece i browser che supportano questa sintassi a ignorare volutamente quanto viene compreso tra apertura e chiusura del tag.

Anche in questo caso sarò opportuno utilizzare la possibilità di inserire un contenuto alternativo per migliorare il posizionamento nei motori di ricerca. Ad esempio:

Un esempio completo è disponibile a questa pagina.

Vantaggi e svantaggi dei frames

Abbiamo già visto all’inizio delle lezioni sui frames quali sono stati alcuni dei motivi di successo dei frames. E cioè:

Dal punto di vista dell’utente: evitare di ricaricare le parti comuni
Dal punto di vista del webmaster: includere il layout comune in pochi files
Dal punto di vista dell’utente: mantenere in vista alcuni punti del layout

Tuttavia gli svantaggi che comporta un uso scorretto di un layout a frame sono superiori ai vantaggi che possono derivare dal loro utilizzo.

I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare.

È frequente allora che una struttura a frame sia inserita all’interno di un motore di ricerca in modo errato: a volte viene catturato solo un menù (come in questo caso), altre volte compare soltanto la parte interna con il contenuto del frame e dunque viene perso ogni menu di navigazione (come in questo caso).

Per evitare problematiche di questo genere, è meglio evitare di utilizzare una struttura a frame; o nel caso in cui la si desideri utilizzare è bene prevedere sin da subito dei metodi che ricostruiscano il frameset, nel caso in cui sia catturata soltanto una pagina interna. È possibile farlo utilizzando JavaScript (un linguaggio di programmazione lato-client).

C’è anche da dire che oggi molti dei motivi che rendevano vantaggioso l’utilizzo dei frames sono venuti meno: la banda a disposizione si è ampliata, i CSS alleggeriscono la struttura dei siti e rendono possibile alcune soluzioni che prima erano difficili (come quella di mantenere un menu di navigazione sempre a portata di mano), e la gestione dei contenuti può essere semplificata utilizzando le inclusioni lato server.

Viceversa una struttura a frame risulta molto vantaggiosa nel caso in cui si utilizzino delle vere e proprie applicazioni che utilizzano internet (come le piattaforme di e-learning, la webmail, eventuali aree riservate del sito con accesso tramite login e password). In questo caso la suddivisione dei contenuti evita di sovraccaricare il server (dal momento che così vengono ri-caricati solo le parti strettamente necessari), semplifica la gestione, e quindi si rivela estremamente utile.

Impaginare a livelli con i CSS

Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata").

La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano.

Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:

larghezza
altezza
distanza dall’alto
distanza da sinistra
colore o immagine di sfondo
colore, tipo e grandezza dei bordi
distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)

Per “livello” (o “layer”) in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina.

La sintassi dei CSS è molto diversa da quella dell’HTML solito.

Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi.

Nella <head>:

nel <body>:

L’esempio completo si trova a questo indirizzo.

Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato).

Per gli approfondimenti vi rimandiamo alla guida sui fogli di stile di HTML.it che approfondisce questo argomento.

Struttura del tag form

Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali, come il forum di HTML.it .

Per organizzare questo genere di servizi è necessario raccogliere in qualchemodo i dati dell'utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).

L'invio dei dati è solitamente organizzato in due parti:

una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, inserire un'immagine
una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma sitratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale, dal momento che il modo incui struttura una pagina di programmazione esula dagli obiettivi della presenteguida.

Name e action

Per creare una pagina con dei moduli, bisogna utilizzare l'apposito tag <form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form> lasciauno spazio prima dell'apertura e dopo la chiusura.

Nel caso in non si desideri avere dello spazio superfluo è possibilemodificare i bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:

Come si può vedere, "name" serve per indicare il nome del form, "action" indica l'URL del programma o della pagina dirisposta che processerà i dati.

Grazie all'"action" è anche possibile far sì che i dativengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:

vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.

Method

Quando creiamo un form possiamo scegliere due metodi di invio: GETe POST.

Con il metodo GET la pagina di risposta viene contattata e idati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (piùprecisamente nella "query string", cioè nella "stringa di interrogazione") secondo questa forma:

paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.

Alcuni server hanno tuttaviahanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 carattericomplessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi perl'invio in get è:

Nel metodo POST invece l'invio dei dati avviene in due stepdistinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri noncompaiono nella query string (dunque se non si desidera che i parametri siano mostrati all'utente questo metodo è preferibile).

In questo caso non ci sonolimiti sulla lunghezza dei caratteri. La sintassi è:

Enctype (tipo di codifica)

Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito ad errori(ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottintesol'invio di semplice testo.

A volte però, come quando è necessario inviare un'immagine, è tuttavia indispensabile dichiarare espressamente quali dativogliamo inviare. Per farlo è necessario utilizzare l'attributo "enctype" ("encoding type", cioè "tipodi codifica").

Come dicevamo normalmente non è necessario farlo, perché viene sottintesoquesto tipo di sintassi:

Ma nel caso di invio di immagini dovremo dichiarare:

target

Grazie all'attributo "target" è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente (o in una determinata parte di un frameset):

Un po' d'ordine:raggruppare i moduli

Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l'HTML 4 sono statiintrodotti dei tag per fare un po' d'ordine all'interno dei form.

Grazie al tag <fieldset> possiamo creare dellemacro-aree all'interno dei form, e grazie al tag <legend>, possiamo indicare il nome di ciascunamacro-area.

Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendodati anagrafici, residenza, domicilio e reperibilità sul lavoro.

Possiamo farlo con la seguente sintassi:

<form action=ìì>
<fieldset>
  <legend>Datianagrafici</legend>
  <br><br><br>
</fieldset>

<fieldset>
  <legend>Residenza</legend>
  <br><br><br>
</fieldset>

eccetera

</form>

che dà:

Datianagrafici

Residenza

come si può vedere vengono creati dei riquadri con un indicazione del tipo dicontenuto.

Un altro tag particolarmente utile - si può utilizzare con ogni tipo di campoche vedremo d'ora in poi - è il tag <label>, che permette di indicare un'etichetta per il nome del campo.

Ad esempio:

<form action=ìì>
<fieldset>
<legend>Datianagrafici</legend>
<label>Anno di nascita: <input type="text"></label>
</fieldset>
</form>

che dà:

Datianagrafici Anno di nascita:

oppure (cambiando la posizione del testo):

<fieldset>
<legend>Dati anagrafici</legend>
<label><input type="text">: anno di nascita</label>
</fieldset>

che dà:

Dati anagrafici : anno di nascita

Come si può vedere il campo su cui si vogliono dare delle indicazioni deve essere compreso all'interno del tag label stesso.

Continua HtmlGuida3