L'HTML e i browser

L'HTML è il linguaggio mediante il quale è possibile indicare come i vari elementi vanno disposti in una pagina Web. Un documento HTML, infatti, non è altro che un file di testo con delle indicazioni sulla formattazione del testo quali: colore delle scritte, posizione delle immagini all'interno della pagina, come far scorrere il testo, etc. Il Browser è il software necessario ad interpretare le istruzioni presenti in un documento HTML al fine di riprodurre la impostazione grafica prevista dall’autore in fase di stesura della pagina. Esso svolge, dunque, almeno due compiti principali:

• Richiede i documenti HTML ad un computer remoto (il server Web) mediante protocollo HTTP

• Interpreta i documenti scritti in HTML, e formatta la pagina di conseguenza

I browser moderni offrono, in realtà, altre funzionalità avanzate quali l’interpretazione di contenuti dinamici multimediali - con l’ausilio di appositi plug-in -, la possibilità di utilizzare protocolli diversi dall’HTTP (ad esempio l’HTTPS, pensato per la sicurezza della comunicazione, ottenuta come sempre crittografando i contenuti), ed altre funzionalità legate alla rete Internet.

La visualizzazione di un file HTML da parte del browser prende il nome di rendering della pagina. Il motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina. HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione, bensì un linguaggio di contrassegno (o 'di marcatura'). Un linguaggio di programmazione, infatti, è pensato per fornire al computer un elenco di istruzioni da eseguire e quindi per realizzare programmi applicativi per computer. Un linguaggio di descrizione della pagina, invece, indica all’interprete del linguaggio come disporre gli elementi all'interno di una pagina. Tali indicazioni sono fornite con l’uso di appositi marcatori, detti tag. Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra situazione fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri dei linguaggi di programmazione. L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: Word Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0). La versione dell'HTML alla quale faremo riferimento è l'HTML 4.01.

Struttura di un tag

Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con uno slash: "/". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi>contenuto</TAG>

Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:

<P align="right">testo</P>

dall'esempio è evidente che la struttura di un attributo è: attributo="valore" Quindi in definitiva la struttura di un tag sarà:

<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

Alcuni particolari tag non hanno né contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag necessario per posizionare le immagini), né conseguentemente hanno chiusura. La loro forma sarà dunque:

2

<TAG attributi>

Ecco un esempio di immagine: <IMG widht="20" height="20" SRC="miaImmagine.gif" ALT="alt"> come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", vuoto.

Annidamento e indentazione

Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo. Ad esempio: <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1> Potremmo quindi avere ad esempio: <P align="right"> testo 1 <P align="left"> testo 2 </P> </P> L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo. Come si può vedere già nell'esempio, è una buona norma utilizzare dei caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab. Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio: <P align="right">testo 1<P align="left"> testo 2 </P></P> con: <P align="right"> testo 1 <P align="left"> testo 2 </P> </P> Il secondo blocco è certamente più leggibile. Ciò è tanto più vero quanto più la pagina diventa complessa. Un’altra buona norma per mantenere il codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni che non verranno visualizzate dal browser. Inserire i commenti in punti specifici del documento permette di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente: <!-- questo è un commento --> L’HTML è “case unsensitive”, cioè indipendente dal formato. Questo significa che è del tutto indifferente scrivere i tag in maiuscolo o in minuscolo.

<P ALIGN=”RIGHT”>

3

e

<p align=”right”>

vengono interpretati allo stesso modo dal browser. Fino a qualche tempo fa, per aumentare la leggibilità del codice, era buona norma scrivere in maiuscolo il nome del tag (es: <P>) e in minuscolo gli attributi (es: align=”right”). Quindi:

<P align=”right”>

Tuttavia oggi, per analogia con l'XHTML (che è una recente evoluzione dell'HTML ed è “case sensitive”, sensibile al formato) è consigliabile scrivere tutto in minuscolo.

Elementi della struttura

Identificatore di prologo

Affinché un documento sia identificato come HTML, esso deve iniziare con il prologo: !DOCTYPE

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

Questo tipo di riga chiamata prologo, non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento HTML relativo a determinate specifiche, in mancanza di questa dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0; l’importanza di tale identificatore sta dunque nella certezza di corretta interpretazione del documento da parte dei browser.

<HTML>...</HTML> L'elemento <HTML> identifica un documento che contiene elementi HTML; esso dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi tutti gli altri elementi o tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> la parte restante del documento </html>

Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>)

Contiene informazioni che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove inserire, ad esempio, i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), gli script JavaScript o VbScript, i fogli di stile, etc.

Corpo (<body>) Qui è racchiuso il contenuto vero e proprio del documento

4

<HEAD>...</HEAD> L'elemento <HEAD> viene utilizzato per fornire informazioni sul documento. In questa sezione trovano posto tutti quei tag che impartiscono direttive ai browser quali: titolo, Meta comandi, richiami ai fogli di stile, script. Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser; quindi si tratta di una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>

elementi di informazione quali:

<BASE> <LINK> <META> <STYLE> <TITLE> <SCRIPT>

</head> la parte restante del documento </html> Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>

Il title è il titolo della pagina e compare in alto sulla barra del browser. È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo. La struttura di una pagina sarà dunque la seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>ESEMPIO PAGINA HTML</title> </head> <body> <!-- Scriveremo qui --> Qui il nostro contenuto </body> </html>

I vari tag che esamineremo andranno scritti all'interno del body, quando non sia indicato diversamente.

5

<BODY>...</BODY> L'elemento <BODY> contiene la pagina vera e propria, o almeno ciò che si vedrà a video. Quindi il testo, le immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributi sono : Background, Bgcolors, Bgproperties, Link, Vlink, Alink, Text, Topmargin, Bottommargin, Leftmargin, Rightmargin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <Title> la mia prima pagina web </Title> </head> <body>

Molti gli attributi associabili a questo tag:

BACKGROUND BGPROPERTIES BGCOLOR LINK VLINK ALINK TEXT TOPMARGIN BOTTOMMARGIN LEFTMARGIN RIGHTMARGIN

la parte restante del documento </body> </html>

BACKGROUND Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser, qualunque sia la sua dimensione e risoluzione del video: <body background="nome_immagine.gif">

E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL)

<body background="http://www.indirizzo.it/nome_immagine.gif">

BGPROPERTIES L'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le immagini e i testi sullo sfondo. Tale operazione è possibile soltanto con alcuni browser. <body background="nome_immagine.gif" bgproperties="fixed">

6

BGCOLOR Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita; il colore può essere espresso sia col nome inglese che usando la notazione esadecimale. <body bgcolor="green">

Oppure

<body bgcolor="#006600">

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 milioni di colori. Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):

colore parola chiave notazione esadecimale

arancione orange #FFA500

blu blue #0000FF

bianco white #FFFFFF

giallo yellow #FFFF00

grigio gray #808080

marrone brown #A52A2A

nero black #000000

rosso red #FF0000

verde green #008000

viola violet #EE82EE LINK Si adopera questo attributo per decidere il colore di tutti i links facenti parte della pagina; può essere espresso sia col nome inglese che col relativo codice esadecimale. <body link="green">

oppure

<body link="#006600">

Per default questo colore è blu (blue) #0000ff

7

I link testuali possono avere diversi stati:

Status Codifica in HTML 4.01

Descrizione

Collegamento normale

link Normalmente il link quando si trova "a riposo" viene evidenziato in qualche maniera all’interno della pagina HTML, in modo che sia facile per l’utente individuarlo. Nell’HTML tradizionale il link è sempre sottolineato. Di default i link sono blu (#0000FF).

Collegamento visitato

visited Un link è visitato, quando l’URL della pagina compare nella cronologia dell’utente. Di default i link visitati sono di color violetto (più esattamente: #800080).

Collegamento attivo

active Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all’altra.

Non si tratta di una caratteristica particolarmente utile oggi, ma quando i modem avevano una velocità molto inferiore a quella odierna, vedere un link "attivo" era comunque un’indicazione sul fatto che qualcosa stava avvenendo.

Con Internet Explorer è possibile vedere anche una linea tratteggiata attorno al collegamento attivo.

Un ulteriore condizione in cui un link si rivela "attivo" è quando si utilizza il tasto destro del mouse su di lui. Insomma un link è attivo quando "ha il focus".

Collegamento al passaggio del mouse

non presente

8

VLINK Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale. <body vlink="green">

oppure

<body vlink="#006600">

Per default questo colore è porpora (purple) #800080 ALINK Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che verrà assunto dal link nel momento del click su di esso; può essere espresso sia col nome inglese che col relativo codice esadecimale. <body alink="green">

Oppure

<body alink="#006600">

Per default questo colore è rosso (red) #ff0000

TEXT Si adopera questo attributo per decidere il colore di tutto il testo nella pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. <body text="green">

oppure

<body text="#006600">

E’ bene porre attenzione alla combinazione tra questo colore e quello dello sfondo, per non incorrere in scelte che rendano il testo poco leggibile.

MARGINI Topmargin, Bottommargin, Leftmargin, Rightmargin sono i quattro attributi per definire la distanza in pixel rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser. <body topmargin="30">

<body bottommargin="30">

<body leftmargin="30">

<body rightmargin="30">

9

ESEMPIO Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia una immagine come sfondo che resti fissa durante le operazioni di spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel.

<body background="nome_immagine.gif" bgproperties="fixed" text="black" link="red" vlink="green" topmargin="50" bottommargin="50" leftmargin="50" rightmargin="50" >

Elementi di formattazione

<BASEFONT> Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <FONT SIZE=+..> Il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che con i nuovi browser e i relativi fogli di style si ha la sempre più la tendenza a non adoperare più il tag <FONT>-

<BASEFONT SIZE=4>

Si possono inserire anche altri due attributi

FACE specifica il tipo di font

COLOR specifica il colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale.

<BASEFONT SIZE="4" FACE="arial" COLOR="green">

E’ sconsigliabile usarlo, preferendo invece l’utilizzo dei fogli di stile introdotti dalla versione 4 dell’HTML.

<BR> L'elemento <BR> specifica che una nuova riga deve iniziare in un determinato punto, un ritorno a capo forzato; più <br> consecutivi equivalgono a più righe saltate.

<BR>

Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati:

10

CLEAR=left : Spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero.

CLEAR=right : Stessa cosa ma con margine libero destro.

CLEAR=ALL : Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini.

<BR clear=all>

<CENTER>...</CENTER> Tutto ciò che si trova fra gli elementi center /center sarà centrato rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi quali <DIV> offrono maggiore flessibilità; si ottengono analoghi risultati anche assegnando l'attributo align=center ai vari tags di formattazione.

<CENTER> Questo testo è centrato sulla finestra di visualizzazione

</CENTER>

<COMMENT>...</COMMENT> Consente di lasciare un testo di commento all'interno del listato HTML senza che questo possa influire o essere visualizzato dal browser. Lo stesso risultato si ottiene anche con i tags <!-- ... -->

<COMMENT> Questo testo non serve a niente è semplicemente un commento, un qualcosa da ricordare dovendo visionare il listato. </COMMENT>

<!-- Questo testo non serve a niente è semplicemente un commento, un qualcosa da ricordare dovendo visionare il listato. -->

11

I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:

Nome tag Visualizzazione codice

Descrizione

<h1>titolo 1 </h1>

<h2>titolo 2 </h2>

<h3>titolo 3 </h3>

<h4>titolo 4 </h4>

<h5>titolo 5 </h5>

<h6>titolo 6 </h6>

titolo 1 titolo 2

titolo 3

titolo 4

titolo 5

titolo 6

"H" sta per "heading", cioè titolo: le grandezze previste sono sei. Dall’<h1>, che è il più importante, si va via via degradando fino all’ <h6>.

Il tag <hx> (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé. Si tratta dunque di un elemento di blocco.

<p>paragrafo </p>

Esempio:

<p>paragrafo 1</p>

<p>paragrafo 2</p>

paragrafo 1

paragrafo 2

Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

<div>Blocco di testo</div>

Esempio:

<div>blocco 1</div>

<div>blocco 2</div>

blocco 1 blocco 2

Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

<span>contenitore</span>

Esempio:

<span>contenitore

contenitore 1 contenitore 2 contenitore 3

Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV.

Si tratta di un

12

1</span>

<span>contenitore 2</span>

<span>contenitore 3</span>

elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Le differenze tra <P>, <DIV> e <SPAN> sono quindi che:

• <P> lascia spazio prima e dopo la propria chiusura • <DIV> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va

a capo • <SPAN> -essendo un elemento inline - non va a capo

Per quel che riguarda il tag heading (<h1>, …, <h6>) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l’utente ha sul proprio computer.

<FONT>...</FONT> L'elemento <FONT> definisce le dimensioni, il colore e il tipo di carattere adoperato per la scrittura di testo. Il Tag <font> ha dimensione di base (default) del carattere uguale a 3, si veda a questo proposito anche <BASEFONT>. Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno un attributo.

<FONT attributo="specifica"> Testo che avrà tutti gli attributi specificati nel tag font </FONT>

FACE=nome [,nome] [,nome] L'attributo FACE imposta il carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente. E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà il suo, quello di default. Meglio, dunque, evitare fonts particolari o meglio poco comuni per ridurre le probabilità che il testo sia visualizzato diversamente rispetto alle intenzioni del web-designer.

<FONT FACE="Comic Sans MS">Testo con font Comic Sans MS

COLOR=#rrggbb oppure COLOR= nome in inglese del colore

<FONT COLOR="red">Testo con font di colore rosso

13

SIZE=n oppure SIZE=+n o anche SIZE=-n dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è 3 a meno di qualche variazione specificata con BASEFONT

<FONT SIZE="-1">Testo con font di dimensione -1 rispetto a quella di default.

Gli attributi possono essere adoperati contemporaneamente

<FONT FACE="Comic Sans MS" COLOR="red" SIZE="-1"> Testo con font Comic di colore rosso ed una dimensione -1 </FONT>

<HR> L'elemento <HR> Horizontal Rules, altro non è che una linea orizzontale divisoria. Per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari attributi.

<HR> questo sotto il risultato

attributi di formattazione quali:

<ALIGN> <COLOR> <NOSHADE> <SIZE> <WIDTH>

<HR ALIGN=left | right | center>Dove left right center sono allineamento a sinistra, a destra o centrato

Adoperiamo una linea ridotta del 50% per meglio rendere l'idea <HR ALIGN="left">

<HR ALIGN="right">

<HR ALIGN="center">

<HR COLOR=nome | #rrggbb>Dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE.

<HR COLOR="red">

<HR NOSHADE>Nessuna ombreggiatura.

14

<HR NOSHADE>

<HR SIZE=numero>Dove numero è espresso in pixel e si riferisce allo spessore della barra.

una riga di spessore 5 pixel <HR SIZE="50">

<HR WIDTH=numero | percentuale>Senza alcuna specifica la linea orizzontale occupa tutta la largezza della pagina. Con questo attributo si possono specificare con esattezza la sua ampiezza, dove numero sono i pixel. Percentuale invece è relativa alla larghezza della finestra del browser.

una riga di lunhezza 150 pixel <HR WIDTH="150">

Si possono anche combinare i vari attributi; di seguito è riportato un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla cornice che la ospita):

<HR width="70%" color="#0000ff" size="3" noshade>

<P>...</P> L'elemento <P> specifica un paragrafo di testo, ha come attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra, giustificato.

<P align="left">Questo paragrafo è allineato a sinistra.</P>

Questo paragrafo è allineato a sinistra.

<P align="right">Questo paragrafo invece è allineato a destra.</P>

Questo paragrafo invece è allineato a destra.

<P align="center">Questo paragrafo è allineato al centro.</P>

Questo paragrafo è allineato al centro.

<P align="justify">Questo paragrafo è allineato al centro con giustificazione.</P>

Questo paragrafo invece è allineato al centro con giustificazione, ovvero con allineamento sia a destra che a sinistra; per fare

15

questo il comando aggiunge in automatico degli spazi fra le parole.

<B>...</B> L'elemento <B> specifica un blocco di testo da mostrare in grassetto (bold). Risultato simile si ottiene anche con <STRONG>...</STRONG>

<U>...</U> L'elemento <U> specifica un blocco di testo da mostrare sottolineato (underline).

<I>...</I> L'elemento <I> specifica un blocco di testo da mostrare in corsivo (italic). Risultato simile si ottiene anche con <EM>...</EM>

Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio è possibile scrivere “parola” in modo marcato, inclinato e sottolineato:

Questa <U><I><B> Parola </B></I></U> è sottolineata, in grassetto e in corsivo. Questa parola Parola è sottolineata, in grassetto e in corsivo.

<PRE>...</PRE> L'elemento <PRE> specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa. Attenzione, talmente fissa che non torna neppure a capo se non con il comando <br>.

<PREQuesto è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina </PRE> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina

16

Ancore o Links

Le ancore

Una pagina senza ancore (link) non è un ipertesto. La forza delle pagine web è proprio quella di agganciare ed essere a loro volta agganciate alle altre pagine rendendo tutta la rete un unico documento. L’effetto di un click su un link potrebbe essere semplicemente un cambio pagina o l'inizio dello scaricamento di un file, o l'apertura del programma predefinito di posta elettronica per l'invio mail. Tutte queste azioni sono gestite dal tag ancora <A> di sicuro uno dei tags più importanti di HTML.

<A>...</A> L'elemento <A> necessita di uno dei due attributi possibili, e cioè NAME o HREF, da solo infatti non serve a nulla. Vediamo questi due attributi:

NAME L'attributo NAME serve per creare una specie di etichetta, questa viene collocata nel punto esatto in cui è stata creata, sarà poi possibile richiamarla con l'elemento <A> seguito dall'attributo HREF. In questo modo anziché richiamare una pagina richiameremo quel punto preciso dove si trova l'etichetta. Con NAME si crea un punto nel documento e con HREF="#nome" si raggiunge quel punto, praticamente un collegamento ipertestuale che anziché richiamare una nuova pagina richiama un punto della pagina corrente. Vediamo un esempio:

<A name="inizio"></A> Così facendo si crea un'etichetta con nome inizio

L'etichetta risulterà essere completamente trasparente alla pagina web, non si vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del documento o da qualsiasi altra pagina web, il link sposterà la visualizzazione in questo punto preciso.

HREF L'attributo HREF (Hypertext REFerence) all'interno dell'elemento <A> trasforma in un collegamento ipertestuale il testo o l'immagine che segue fino alla chiusura dell'elemento con </A>. Generalmente il testo o la cornice dell'immagine diventa di colore blu sottolineato salvo diverse impostazioni volute all'interno dell'elemento <body>. Vediamo quali sono le diverse forme per questo attributo:

Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con l'attributo NAME permette di saltare nel punto esatto in cui l'etichetta è stata posizionata. Vediamo un esempio pratico:

17

<A HREF=”#inizio"> Vai a inizio pagina </A>

http:// questo tipo di ancora è senza dubbio la più adoperata serve per richiamare altre pagine. E' sufficiente specificare l'intero percorso. Vediamo un esempio pratico:

<A HREF="http://www.design.unifi.it/prova"> Sito Internet del Corso di Laurea in Disegno Industriale</A>

mailto: questo tipo di ancora serve per inviare un’email; oltre al destinatario è possibile impostare anche il subject della mail. Questo collegamento richiama il programma client di posta predefinito. Vediamo un esempio pratico:

<A HREF="mailto:info@design.unifi.it?subject=Richiesta informazioni"> Contatta un referente del Corso di Laurea </A>

Queste le principali altre forme ammesse dall'attributo HREF:

<A HREF="pagina.htm">Realizza un collegamento ad una pagina che si trova nella stessa dir

<A HREF="http://..."> Realizza un collegamento ad una pagina che si trova in un server web

<A HREF="ftp://..."> Realizza un collegamento di tipo FTP

<A HREF="gopher://..."> Realizza un collegamento ad un server gopher

<A HREF="mailto:..."> Realizza un collegamento al client di posta elettronica

<A HREF="news:..."> Realizza un collegamento a NewsGroup Usenet

18

Immagini

Le immagini Cosa sarebbe una pagina Web senza immagini? Gran parte dell’enorme successo riscosso dal Web a danno delle precedenti tecniche a carattere unicamente testuale (es. Gopher) deriva proprio dalla semplicità di gestione dei contenuti grafici offerta da tale tecnologia. I formati di immagine supportati dal WWW sono variano a seconda del browser adottato. I formati GIF (max 256 colori, molto indicato per grafici e disegni) e JPEG (milioni di colori, alta compressione delle immagini con qualità fotorealistica; adottato oggi anche dalla quasi totalità delle fotocamere in commercio), sono quelli riconosciuti maggiormente. Una menzione a parte dev’essere riservata al formato PNG. Il formato PNG (Portable Network Graphics) è un formato di file grafico nato nel lontano 1995 e diventato una raccomandazione W3C nel 1996. È nato come una valida alternativa al formato GIF, dato che quest'ultimo a quei tempi si presentava coperto da brevetto (ora scaduto). Il formato PNG si rivela da subito migliore del GIF: libero, una maggiore compressione, una capacità di rappresentazione di colori più ampia e soprattutto trasparenza variabile. Le immagini GIF hanno infatti una trasparenza binaria (ogni singolo pixel può essere totalmente trasparente o totalmente coprente) mentre le PNG oltre alla trasparenza binaria, supportano una trasparenza su 256 livelli almeno. Il formato PNG si rivela competitivo anche rispetto al JPEG: infatti le PNG, come le GIF, usano una compressione loseless, ossia senza perdita di informazione. La maggior parte dei programmi di grafica riesce a salvare immagini PNG, con diverse opzioni. Uno degli usi ideali delle PNG per le sue caratteristiche di compattezza, trasparenza (in inglese alpha) e correzione cromatica (gamma) è senz'altro la grafica orientata al web. Tuttavia Internet Explorer aggiunge il supporto parziale delle PNG solo con la versione 5.5, uscita nel 2000. Ad oggi non è ancora in grado visualizzare correttamente in maniera nativa la trasparenza variabile. Prima di adottare tale formato file è dunque importante tener conto di tale limitazione del browser di gran lunga più diffuso al mondo.

<IMG...> L'elemento <IMG> necessita di attributi, di cui uno necessariamente obbligatorio: SRC. A differenza di molti altri elementi HTML, questo non ha bisogno di essere concluso dallo stesso elemento preceduto dallo slash </IMG>. vediamo i possibili attributi:

ALIGN----------------------- ALT BORDER ISMAP LOWSRC SRC VSPACE HSPACE WIDTH HEIGHT USEMAP

left right top texttop middle absmiddle baseline bottom absbottom

ALIGN L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo

19

successiva. I valori ammessi sono : left, right, top, texttop, middle, absmiddle, baseline, bottom e absbottom. I due valori left e right fanno si che l'immagine diventi di tipo flottante, vediamo come:

ALIGN=left Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine.

Allineamento di tipo left, il contorno immagine è stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a

variare le dimensioni della finestra del browser per meglio capirne l'allineamento.

ALIGN=right Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine.

Allineamento di tipo right il contorno immagine è stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=top Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga.

ALIGN=texttop Allinea il testo che segue l'immagine con la parte superiore del testo più alto nella riga.

ALIGN=middle Allinea la linea di base della riga corrente con la parte centrale dell'immagine.

ALIGN=absmiddle Allinea la parte centrale della riga corrente con la parte centrale dell'immagine.

ALIGN=baseline Allinea la parte inferiore dell'immagine con la linea di base della riga corrente di testo.

ALIGN=bottom Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo.

ALIGN=absbotton Allinea la parte inferiore dell'immagine con la parte inferiore della riga di testo corrente.

Alcuni attributi sembrano gli stessi di altri, è vero, molto dipende dal tipo di browser adoperato, dalle dimensioni della finestra e da qualche altra cosa ancora. L'importante era farsi un'idea, ognuno di noi adopererà quello che riterrà più adatto alle proprie esigenze.

20

ALT L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici. Viene di solito adoperato per descrivere l'immagine, anche a beneficio dei non vedenti per rispettare le caratteristiche di accessibilità del sito, ma potrebbe essere adoperato per qualsiasi altro motivo che necessiti una descrizione; il testo apparirà nel caso in cui l'immagine non venisse caricata o quando il puntatore del mouse sarà portato sopra la stessa. La sintassi sarà dunque: <img src=”nomefile.jpg” alt=”Questa è la descrizione dell’immagine”>

BORDER L'attributo border permette di specificare lo spessore del bordo. Molto utile impostare border=0 quando l'immagine fa parte di un collegamento ancora e non si vuole visualizzare il bordino azzurro di default, tipico delle immagini facenti parte di un link.

Questo il codice: <img src="tarta.jpg" border="3"> Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3.

ISMAP L'attributo ISMAP (is map) ovvero è una mappa, può essere adoperato in modo corretto soltanto nel caso in cui il server HTTP ha installato un certo tipo di software. Per le immagini mappate si adopera in realtà ormai USEMAP che funziona dal lato client (cioè sul vostro browser).

LOWSRC L'attributo lowsrc, non supportato da tutti i browser, permette di adoperare due immagini nello stesso spazio, quella definita con LOWSRC sarà caricata subito, trattandosi di un'immagine a bassa risoluzione, in alcuni casi anche in bianco e nero, servirà come intrattenimento fino a caricamento pagina ultimato, dopodichè sarà automaticamente sostituita con l'immagine vera e propria definita con SRC.

Questa la sintassi: <img src="tarta.jpg" lowsrc="tartabn.jpg"> I browser che non supportano questo attributo visualizzeranno la sola immagine dichiarata in SRC.

21

SRC L'attributo SRC è indispensabile per l'elemento IMG. Permette di specificare il nome dell'immagine da visualizzare se questa si trova nella stessa cartella (dir) in cui è presente la pagina che la richiama. E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e sottocartelle (subdirectory) compresi gli URL completi da altri siti. Il tag IMG SRC può essere adoperato anche all'interno del tag àncora e potrà essere cliccato come un normale link testo.

Questa la sintassi: <img src="nome_immagine.jpg"> o anche <img src="http://www.web-link.it/nome_immagine.jpg">

VSPACE , HSPACE

L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right; servono ad impostare rispettivamente degli spazi verticali e orizzontali fra il testo e l'immagine stessa, o anche fra l'immagine e la sua cornice.

Questa la sintassi: <img src="tarta.jpg" hspace="50"> spazio orizzontale di 50 pixel.

Questa la sintassi: <img src="tarta.jpg" vspace="50"> spazio verticale di 50 pixel.

Questa la sintassi: <img src="tarta.jpg" hspace="50" vspace="50"> spazio orizzontale e spazio verticale entrambi di 50 pixel.

22

WIDTH, HEIGHT

L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo conviene impostare sempre questi valori, visto poi che sono noti. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, compreso un'eventuale distorsione.

Questa la sintassi: <img src="tarta.jpg" width="114" height="75"> ho impostato le dimensioni orizzontali e verticali dell'immagine.

potrei decidere di modificare l'immagine assegnando valori diversi da quelli reali, come in questo caso:

<img src="tarta.jpg" width="60" height="35"> ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px.

Potrei deformare l'immagine assegnando valori sproporzionati, come in questo caso: <img src="tarta.jpg" width="35" height="60"> ho impostato dimensioni orizzontali 50 px e verticali 100 px.

USEMAP L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa d'immagine sul lato client. Cosa significa mappa di immagini? E' possibile suddividere un'immagine in diverse aree tipo una mappa ed associare ad ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare links diversi a seconda del punto in cui viene clickata. Se l'argomento USEMAP inizia con un simbolo # si assume che la descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG; risulta infatti possibile avere la definizione della mappa anche su un file di testo separato.

Questo un esempio: <img src="tarta.jpg" USEMAP="map.htm#mappa1" > Questo codice utilizza la mappa descritta come mappa1 in map.htm, per il file di immagine tarta.jpg

23

Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA

<MAP>...</MAP> L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata una mappa, e indica la posizione del documento da scaricare quando viene attivata l'area definita.

Questo un esempio: <MAP NAME="nome"> <AREA [SHAPE="forma"] COORDS="x,y,..." [HREF="riferimento"] [NOHREF] > </MAP>

dove: nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad essa. forma fornisce la forma dell'area specificata es. RECT per rettangolo. Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default; altre forme possibili sono CIRCLE e POLY. L'attributo COORDS fornisce le coordinate della forma utilizzando 1 pixel dell'immagine come unità. Per un rettangolo le coordinate vengono fornite - sinistro, alto, destro, basso. Se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate saranno:"0,0,99,99"

HREF richiama il link ad esso associato NOHREF indica che eventuali clic in questa zona non richiameranno alcun link.

<AREA> L'elemento AREA specifica le diverse aree, nel caso in cui due aree si intersecano quella che appare per prima nella definizione avrà prevalenza.

Vediamo un esempio per riassumere il tutto: <MAP NAME="tartaruga"> <AREA SHAPE="RECT" COORDS="32,39,78,63" HREF="interno.htm"> <AREA SHAPE="RECT"COORDS="13,2,99,37" HREF="guscio.htm"> </MAP> <img src="tarta.jpg" USEMAP="tartaruga">

Esistono, ovviamente, moltissimi programmi in grado di generare automaticamente mappe da un'immagine. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare, esattamente come si fa quando si adopera un programma di grafica.

24

4. Le linee guida sull'accessibilità dei contenuti Web (WCAG 1.0). Le WCAG 1.0 sono organizzate in 14 linee guida. In appendice al documento, le check list identificano concretamente quali controlli sono associati a ciascun livello di priorità. È importante che chiunque sia interessato alla realizzazione di contenuti Web accessibili consulti le linee guida, nell'originale o tradotte, e la check list associata. Unicamente con un fine illustrativo, e anche per convincere il lettore del fatto che si tratta per lo più di misure di buon senso, elenchiamo i temi affrontati da ciascuna linea guida. 1. Fornire alternative equivalenti al contenuto visivo e acustico. Per esempio, se in una pagina

è presente un'immagine, è importante che il suo contenuto venga descritto anche per mezzo di un testo scritto, in modo che, per esempio, un cieco possa comunque capire di cosa si tratta. Tecnicamente, questo può essere fatto, ad esempio, utilizzando l'elemento ALT di HTML.

2. Non fare affidamento unicamente sul colore. È opportuno evitare che un'informazione rilevante sia espressa da un colore o dal contrasto tra colori. Se così non è, l'informazione non è accessibile né da chi ha problemi a percepire i colori, né da chi accede al contenuto per mezzo di un terminale non a colori.

3. Utilizzare le annotazioni (markup) di HTML e i fogli di stile e farlo in maniera appropriata. L'idea di fondo è che è opportuno tenere distinte le informazioni di una pagina dal modo in cui queste vengono presentate graficamente, sia evitando di usare i markup di HTML in modo improprio per ottenere una certa presentazione grafica, sia utilizzando i fogli di stile. In questo modo si minimizzano i problemi che possono incontrare diversi tipi di software specializzati utilizzati per accedere ai contenuti del Web da parte di portatori di vari tipi di disabilità. Più avanti noteremo che la separazione del contenuto informativo del Web dalla sua presentazione grafica svolge un ruolo anche all'interno della generale visione del W3C dell'architettura del Web.

4. Chiarire attraverso il markup l'utilizzo della lingua. Un cambio di lingua - per esempio, dall'italiano all'inglese - all'interno di una pagina deve essere indicato in modo opportuno, per evitare, per esempio, che i sintetizzatori vocali utilizzati dai ciechi incontrino problemi di interpretazione.

5. Creare tabelle che si "trasformano elegantemente". Le tabelle costituiscono spesso un problema per i lettori di schermo. Per questo, è importante che siano utilizzate solo quando servono realmente, e in modo da facilitare la lettura sequenziale dell'informazione che contengono.

6. Assicurarsi che le pagine che utilizzano nuove tecnologie si "trasformino elegantemente". Nell'utilizzo delle tecnologie si incontra spesso un problema di "compatibilità all'indietro". Nel caso specifico, chi utilizza nuove tecnologie per creare contenuti Web dovrebbe accertarsi che, per esempio, versioni più vecchie dei browser siano in grado di rappresentare in modo opportuno i contenuti che creano.

7. Permettere agli utenti il controllo dei contenuti dipendenti dal tempo. Elementi dinamici, come frasi lampeggianti, o a scorrimento, possono creare problemi di vario genere agli utenti. È importante che, laddove questi elementi sono presenti, l'utente abbia la possibilità di arrestarne il movimento e/o il cambiamento.

8. Assicurare l'accessibilità diretta agli utilizzatori di interfacce 'embedded'. In sostanza, si tratta di accertarsi che l'intero insieme di interfacce utenti (incluso, per esempio, gli script e gli applet) per l'accesso a un certo contenuto Web sia accessibile.

9. Progettare all'insegna dell'indipendenza dallo strumento di input. Significa permettere all'utente di accedere al contenuto per mezzo di una varietà di strumenti di input - per esempio, sia il mouse che la tastiera. In questo modo, si aumenta la probabilità che un disabile abbia a disposizione uno strumento di input per lui adeguato.

10. Usare soluzioni ad interim. Ancora una volta, si tratta di un problema di compatibilità tra tecnologie. Sino a quando gli user agent non avranno incluse determinate caratteristiche di accessibilità, è importante che i contenuti ne tengano conto, evitando elementi che solo in futuro si presenterebbero come adeguatamente accessibili.

11. Usare le tecnologie del W3C. Queste sono sviluppate tenendo in considerazione esplicita le loro caratteristiche di accessibilità, e anche per questo motivo devono essere privilegiate.

12. Fornire informazioni di contesto e di orientamento. Per facilitare l'orientamento all'interno di contenuti Web, soprattutto da parte di persone con problemi cognitivi, è importante che le informazioni siano dotate di riferimenti chiari e espliciti, per mezzo di titoli, etichette, eccetera.

13. Fornire chiari meccanismi di navigazione. Parimenti, la navigazione di un ipertesto deve essere favorita, per mezzo, ad esempio, di un utilizzo appropriato dei collegamenti ipertestuali e di una chiara struttura di menù.

25

14. Garantire documenti chiari e semplici. La semplicità è importante anche nel linguaggio, ed è particolarmente apprezzata, oltre che da chi ha problemi cognitivi, da chi non conosce perfettamente la lingua in cui è scritto un testo.

Se questi sono i temi affrontati dalle linee guida WCAG 1.0, la checklist ad essa associata precisa i punti per la valutazione dell'accessibilità dei contenuti Web, distinguendo tra tre diversi livelli di priorità (primo, secondo, e terzo), a cui corrispondono tre livelli di aderenza alle linee guida - rispettivamente, dal più debole al più forte, "A", doppia "A" e tripla "A". Per esempio, tra le azioni di "priorità 1" vi è "fornire un elemento testuale equivalente a ogni elemento non testuale" (per esempio, descrivere a parole ogni figura). Si tratta di una priorità essenziale, dato che, nel caso si tratti di informazione visuale, aiuta i ciechi perché il testo può essere letto da un sintetizzatore vocale, o per mezzo di una barra braille; nel caso si tratti di informazione audio, permette l'accesso a chi ha problemi di udito; aiuta inoltre la generalità degli utenti. Tra le azioni di "priorità 2", quindi meno importanti delle precedenti, vi è: "usa i fogli di stile per determinare la presentazione grafica della pagina. Tra le azioni di "priorità 3", quelle relativamente meno importanti, vi è: "identifica il linguaggio principale con cui è scritto un documento".