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:
<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”>
2
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:
Contiene informazioni che riguardano il modo in cui il
documento deve essere letto e interpretato. Questo è
Testa (<head>) 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
3
<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.
4
<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>
BACKGROUND
BGPROPERTIES
BGCOLOR
LINK
VLINK
Molti gli attributi associabili
ALINK
a questo tag:
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">
5
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
6
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
7
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">
8
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:
9
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.
-->
10
I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:
Nome tag
Visualizzazione
codice
<h1>titolo 1 </h1>
<h2>titolo 2 </h2>
titolo 1
<h3>titolo 3 </h3>
titolo 2
<h4>titolo 4 </h4>
titolo 3
<h5>titolo 5 </h5>
<h6>titolo 6 </h6>
titolo 5
paragrafo 1
paragrafo 2
Esempio:
<p>paragrafo 1</p>
<p>paragrafo 2</p>
<div>Blocco di testo</div>
"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>.
titolo 4
titolo 6
<p>paragrafo </p>
Descrizione
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.
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.
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.
contenitore 1
contenitore 2
contenitore 3
Lo span è un
contenitore
generico che può
essere annidato
(ad esempio)
all’interno dei DIV.
Esempio:
<div>blocco 1</div>
<div>blocco 2</div>
<span>contenitore</span>
Esempio:
<span>contenitore
Si tratta di un
11
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
12
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.
13
<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
14
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
15
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:
16
<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:[email protected]?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
17
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
18
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.
19
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.
20
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.weblink.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.
21
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
22
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.
23
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ù.
24
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".
25