LINGUAGGIO HTML

Struttura di un documento HTML

I caratteri speciali

Altri protocolli

I link ipertestuali

Identificatori di frammenti

Immagini ed elementi multimediali

Gestione di colori e sfondi

Struttura di un documento HTML

Il linguaggio Hyper Test Markup Language (HTML) e' un sottoinsieme del Simple Generalized Markup Language (SGML), con estensioni che supportano funzionalita' ipertestuali.

HTML non e' un linguaggio visuale, ovvero del tipo What You See Is What You Get (WYSIWYG), e non vi e' un editor standard associato a tale linguaggio. Un editor qualsiasi va bene, che supporti solo stringhe US ASCII a 7 bit per carattere.

In HTML vi e' testo normale inframmezzato a direttive di formattazione, chiamate tag. In altre parole un documento HTML equivale a codice sorgente, il quale viene poi interpretato e reso a video da un programma interprete, che e' parte del browser del World Wide Web.

I 'tag' usabili e il metodo d'uso, ovvero la sintassi del linguaggio HTML e' definito da uno standard, regolato dal World Wide Web Consortium (W³C). La versione corrente e' la 3.2. Sta per arrivare al versione 4.0 che e' in via di approvazione.

Un documento scritto in HTML si chiama una pagina ed e' una unita' di trasferimento dati per il WWW.

L'intero documento e' delimitato all'inizio dal tag <html> e alla fine dal tag </html>. Il documento e' composto da due parti:

la testata - racchiusa tra tag <head> e </head>, che contiene 'meta-informazioni sul documento stesso
il corpo - racchiuso tra tag <body> e </body>, che contiene il testo vero e proprio della pagina

Struttura di un documento HTML

<html>
<head>
.....
</head>
<body>
.....
.....
</body>
</html>

Concetto di tag e tag predefiniti

Un tag definisce un elemento di formattazione del testo.

Un tag e' una stringa racchiusa tra parentesi angolari, ovvero < e >.

I tag solitamente vanno a coppie, d'inizio e di fine della formattazione. Se <xxx> e' il tag d'inizio, allora </xxx> e' il tag di fine della formattazione.

L'insieme dei tag ammissibili e' predefinito e consiste nella sintassi del linguaggio HTML. I tag non riconosciuti vengono ignorati.

Un tag puo' avere attributi. Alcuni attributi sono necessari altri possono essere opzionali. Gli attributi sono racchiusi anch'essi nelle parentesi angolari, vengono dopo il nome del tag e compaiono solo nel tag di apertura, non in quello di chiusura.

Un tag ha quindi il formato generico:

<nome-tag attributo1 attributo2=valore ... >
...
</nome-tag>

Un attributo puo' essere una singola parola predefinita (booleano), oppure un attributo a chiave, composto da nome dell'attributo (predefinito), il simbolo di uguale e il valore dell'attributo. Un attributo a chiave non deve contenere spazi.

I nomi dei tag o degli attributi possono essere scritti indifferentemente in maiuscole o minuscole.

Classi di Tag

Un tag puo' essere:

una richiesta di formattazione assoluta, per esempio di grassetto, di corsivo, di apice o di pedice - deve essere resa precisamente dal browser che interpreta la pagina HTML
un'informazione aggiuntiva che non ha resa tipografica propria, p.es. la specifica di un colore di sfondo
una direttiva di formattazione logica

Quest'ultima classe di tag e' molto importante. Non e' possibile sapere a priori che tipo di browser sara' a rendere la pagina HTML, pertanto non e' possibile sapere quali font saranno supportati dal browser, la larghezza e lunghezza di pagina, le dimensioni dei font disponibili, ecc.

I tag sono quindi delle direttive di intenzione dello scrivente, e un browser rendera' un tag in un modo suo, a volte configurabile, ma quasi sicuramente diverso da un altro browser.

Per esempio il tag <cite> informa dell'inizio di una citazione, che deve essere espressa in modo diverso dal normale testo. Un browser puo' decidere di renderla col font Times Roman in corsivo a punto 10 e indentata di 5 caratteri; un altro di non indentarla, di adottare un punto carattere piu' grande riapetto al testo normale e di usare Helvetica.

Chi scrive non puo' influenzare le scelte del broser di resa delle direttive.

E' pero' vero che di recente sono nate tutte una serie di tag che costringono maggiormante la resa del browser. Inoltre la comparsa di Fogli di Stile (Cascading Style Sheets), nelle ultime versioni di HTML, permette allo scrivente di includere delle direttive di resa di ogni specifico tag.

Tag Principali

Alcuni tag semplici e non strutturati possono essere usati in qualsiasi punto del testo:

Il testo racchiuso e' un commento e non viene reso dal browser.

<b> ... </b> - grassetto

<i> ... </i> - corsivo

<s> ... </s> - strikethrough, con una linea che taglia orizzontalmente ogni lettera

<tt> ... </tt> - typewriter, con font monospaziato

<center> ... </center> - il testo e' centrato

<big> ... </big> - usa un punto corpo piu' grosso

<small> ... </small> - usa un punto corpo piu' piccolo

<sub> ... </sub> - pedice

<sup> ... </sup> - apice

<p> ... </p> - racchiude un paragrafo; in pratica il tag di chiusura si puo' non usare. Attributi:

align=tipo - allineamento del paragrafo, con 'tipo' che puo' essere left (default), center o right

<br> - break, spezza la linea corrente e vai a capo. Attributi:

clear=margine - scende finche il margine desiderato e' libero, con margine che puo' essere left, right o all

<hr> - horizontal rule, tarccia una linea orizzontale. Attributi sono:

align=tipo - allineamento, left, right o center (default)
noshade - non rende la linea in modo tridimensionale
size=pixels - imposta la grossezza della linea a un certo numero di pixel
width=valore - imposta la lunghezza della linea, come numero di pixel o come percentuale della larghezza di pagina

Esempio

Il seguente testo:

<!-- Questo e' un commento 
-->
Questo testo e' <b>grassetto</b> <i>corsivo</i> 
<s>tagliato</s>
e <tt>monospaziato</tt>
<p>
<center>
Questo e' centrato.
</center>
<p>
Qui vi sono parole <big>piu' grosse</big> e
parole <small>piu' piccole</small>
<p>
L'acqua ha il simbolo H<sub>2</sub>O.
<p>
Einstein diceva: <tt>E = mc<sup>2</sup></tt>
<p>
Questo e' un lungo e barboso paragrafo che sta soltanto cercando
di dimostrare il funzionamento di un tag di HTML e che e' allineato
in modo normale (a sinistra).
<p align=center>
Questo e' un lungo e barboso paragrafo che sta soltanto cercando
di dimostrare il funzionamento di un tag di HTML e che e' allineato
al centro.
<p align=right>
Questo e' un lungo e barboso paragrafo che sta soltanto cercando
di dimostrare il funzionamento di un tag di HTML e che e' allineato
a destra.
<p>
Questo e' un lungo e barboso paragrafo che
<br>
e' spezzato volutamente a questo punto e
<br>
anche a questo, ma sta soltanto cercando di dimostrare il funzionamento di
alcuni tag HTML.
<p>
Queste sono alcune linee orizzontali:
<p>
<hr>
<hr noshade size=10 width=50% align=left>
<hr size=5 width=50>

viene reso nel seguente modo:

Questo testo e' grassetto, corsivo, ~~tagliato~~ e monospaziato.

Questo e' centrato.

Qui vi sono parole piu' grosse e parole piu' piccole.

L'acqua ha il simbolo H₂O.

Einstein diceva: E = mc².

Questo e' un lungo e barboso paragrafo che sta soltanto cercando di dimostrare il funzionamento di un tag di HTML e che e' allineato in modo normale (a sinistra).

Questo e' un lungo e barboso paragrafo che sta soltanto cercando di dimostrare il funzionamento di un tag di HTML e che e' allineato al centro.

Questo e' un lungo e barboso paragrafo che sta soltanto cercando di dimostrare il funzionamento di un tag di HTML e che e' allineato a destra.

Questo e' un lungo e barboso paragrafo che
e' spezzato volutamente a questo punto e
anche a questo, ma sta soltanto cercando di dimostrare il funzionamento di alcuni tag HTML.

Queste sono alcune linee orizzontali:

Tag di Direttiva

Sono i tag che indicano l'intenzione dello scrivente, non il formato tipografico esatto da ragiungere:

<address> ... </address> - indirizzo, commento esplicativo

<blockquote> ... </blockquote> - citazione a blocco

<cite> ... </cite> - citazione

<code> ... </code> - codice sorgente di un programma

<kbd> ... </kbd> - keyboard, indica input da tastiera

<pre> ... </pre> - preformatted, il testo e' preformattato e non deve essere riallineato. Vengono comunque interpretati i tag all'interno del testo. Attributi:

width=n - cerca di dimensionare il testo in modo che n caratteri siano visibili nella finestra

<samp> ... </samp> - sample, denota un esempio

<strong> ... </strong> - da enfasi al testo

<var> ... </var> - il testo e' il nome di una variabile

Esempio

Il seguente testo:

<address>
Questo e' nel formato address.
<address>
<p>
<blockquote>
Questo e' un paragrafo piuttosto lungo che serve solamente
allo scopo di illustrare il funzionamento del tag HTMl di
blockquote e percio' non ha altro significato che quello
di esempio didattico.
</blockquote>
<p>
<cite>
Questo e' un paragrafo piuttosto lungo che serve solamente
allo scopo di illustrare il funzionamento del tag HTMl di
cite e percio' non ha altro significato che quello
di esempio didattico.
</cite>
<p>
Questo e' un programma in Linguaggio C reso con quote e con
un bold inserito:
<p>
<code>
<b>main</b>
<br>
{
<br>
	printf("Ciao Mondo");
<br>
}
</code>
<p>
Questo indica input da tastiera:
<p>
<kbd> ls xif
<br>
xif: not found
</kbd>
<p>
Questo testo e' preformattato:
<p>
<pre>
<b>main<b>
{
        printf("Ciao Mondo");
}
</pre>
<p>
<sample>
Questo e' testo reso con sample.
</sample>
<p>
Alle parole seguenti si da' <strong>molta enfasi</strong>
<p>
Le <var>variabili</var> non lo 
fanno e le <var>costanti</var>
non lo sono.
<address>
(845<sup>a</sup> legge di Murphy)
</address>
<p>

Viene reso come:

Questo e' nel formato address.

Questo e' un paragrafo piuttosto lungo che serve solamente allo scopo di illustrare il funzionamento del tag HTMl di blockquote e percio' non ha altro significato che quello di esempio didattico.

Questo e' un paragrafo piuttosto lungo che serve solamente allo scopo di illustrare il funzionamento del tag HTMl di cite e percio' non ha altro significato che quello di esempio didattico.

Questo e' un programma in Linguaggio C reso con quote e con un bold inserito:

main() { printf("Ciao Mondo"); }

Questo indica input da tastiera:

$ ls xif xif: not found

Questo testo e' preformattato:

main()
{
        printf("Ciao Mondo");
}

Questo e' testo reso con sample.

Alle parole seguenti si da' molta enfasi.

Le variabili non lo fanno e le costanti non lo sono.

(845^a legge di Murphy)

Gli header

Uno header o testata rappresenta un titolo. Il tag e'

<hn> ... </hn>

ove n e' il livello dello header, un numero da 1 a 6. Livelli piu' bassi vengono resi in corpo piu' grosso ed evidente.

Per esempio il testo:

<h1>Questo e' uno header a livello 1</h1>
<h2>Questo e' uno header a livello 2</h2>
<h3>Questo e' uno header a livello 3</h3>
<h4>Questo e' uno header a livello 4</h4>
<h5>Questo e' uno header a livello 5</h5>
<h6>Questo e' uno header a livello 6</h6>

Viene reso come:

Questo e' uno header a livello 1

Questo e' uno header a livello 2

Questo e' uno header a livello 3

Questo e' uno header a livello 4

Questo e' uno header a livello 5

Questo e' uno header a livello 6

Nel testo dello header non dovrebbero trovarsi altri tag innestati, poiche' non tutti i browser li supportano.

Le liste

Vi sono tre tipi di liste:

liste ordinate
liste non ordinate
liste di definizioni

Liste Ordinate

Il tag e':

<ol> ... </ol>

La lista contiene elementi marcati da numeri o lettere in ordine crescente. Attributi:

compact - presenta la lista in modo piu' compatto
start=n - inizia a contare dall'elemento n
type=formato - con i seguenti formati possibili:
- A - lettere maiuscole
- a - lettere minuscole
- I - numeri romani maiuscoli
- i - numeri romani minuscoli
- 1 - numeri interi (default)

Ogni elemento della lista e' preceduto dal tag:

<li>

che puo' avere attributi uguali a quelli di <ol> ed inoltre l'attributo:

value=n - setta a n il numero dell'elemento corrente

Per esempio il testo:

<ol>
<li>Primo elemento
<li>Secondo elemento
<li type=i>Terzo elemento
<li type=A>Quarto elemento
<li>Quinto elemento
</ol>

Viene reso come:

Primo elemento
Secondo elemento
Terzo elemento
Quarto elemento
Quinto elemento

Il cambiamento di tipo e' duraturo, rimane in vigore anche per gli elementi successivi.

Liste Non Ordinate

Gli elementi della lista sono preceduti da bullet. Il tag e':

<ul> ... </ul>

E l'elemento di lista, li puo' avere gli attributi (anche attribuibili a livello intera lista):

type=formato - con formati possibili circle, disk (default) o square

Le liste possono essere innestate. Per esempio:

<ul>
<li>Primo elemento
<li>Secondo elemento
<ul type=square>
<li>Primo sottoelemento
<li>Secondo sottoelemento
<ol type=i>
<li>Primo sotto-sottoelemento numerato romano
<li>Secondo sotto-sottoelemento numerato romano
</ol>
</ul>
<li>Terzo elemento
</ul>

Viene reso come:

Primo elemento
Secondo elemento
- Primo sottoelemento
- Secondo sottoelemento
  1. Primo sotto-sottoelemento numerato romano
  2. Secondo sotto-sottoelemento numerato romano
Terzo elemento

Liste di Definizione

Sono liste in cui ciascun elemento e' marcato da una stringa di definizione.

Il tag racchiudente l'intera lista e':

<dl> ... </dl>

con il solo possibile attributo compact.

Il tag per marcare la porzione di definizione di un elemento e:

<dt> ... </dt>

ove la chiusura del tag e' opzionale.

Il tag per marcare il corpo di ciascun elemento e':

<dd> ... </dd>

ove la chiusura del tag e' pure opzionale.

Per esempio il testo:

<dl>
<dt>uno
<dd>e' il primo dei numeri naturali
<dt>due
<dd>e' il secondo dei numeri naturali
<dt>tre
<dd>e' il terzo dei numeri naturali
</dl>

Viene reso come:

uno: e' il primo dei numeri naturali
due: e' il secondo dei numeri naturali
tre: e' il terzo dei numeri naturali

I link ipertestuali

Un link ipertestuale e' un elemento attivo, un controllo a cui e' associata un'azione. Il link viene attivato posizionandovi il cursore, del mouse o a caratteri, e premendo un bottone del mouse (cliccando) o della tastiera. Il comportamento di attivazione di un link e' definito dal browser.

All'atto dell'attivazione il browser inizia la procedura di download di una pagina Web che e' associata al link.

Il tag di descrizione di uno hyperlink si chiama un'ancora ed ha il formato:

<a> ... </a>

Vi sono molti attributi. Un attributo obbligatorio e':

href=url - riferimento ipertestuale all'identificativo, URL - Universal Resource Locator, che identifica la pagina di destinazione

Altri attributi sono opzionali:

title=stringa - da' un nome al documento di riferimento
target=nome - definisce il nome della finestra o frame che deve ricevere il documento riferito

Un esempio d'uso di questo tag e':

<a href="http://www.yahoo.com/Science/Oceanography/">
Lista di documenti di Oceanografia<a>

che produce come risultato:

Lista di documenti di Oceanografia

La stringa compresa fra il tag di apertura e quello di chiusura di un'ancora viene resa dal browser in modo evidenziato. E' possibile controllarne il colore, per i browser grafici, con attributi del tag <body>.

Gli URL

Uno Universal Resource Locator (URL) e' un identificativo univoco di una pagina o un altro elemento scaricabile che si trova da qualche parte del World Wide Web.

La sua sintassi semplice per quanto riguarda il protocollo standard del WWW e':

http://host/percorso

La stringa http identifica il protocollo. I caratteri :// sono un separatore. La stringa http:// viene pronunciata "hittip" dai cognoscenti.

L'elemento host e il nome del server su cui si trova la pagina riferita e percorso e' il nome del file, eventualmente preceduto dal nome della directory, che identifica la pagina a cui ci si riferisce.

Vi sono una serie di osservazioni:

il separatore di directory e' /, come in UNIX; la directory viene intesa al di sotto della radice di servizio documenti del server, la Document Root
se il percorso si risolve in una directory e non in un file, allora viene riferito il file che il server definisce nome di default: questo e' spesso index.html o default.html
vi e' differenza tra file.html e file.htm: lo standard specifica il suffisso .html oppure, se il sistema operativo non lo supporta, che il server accetti silenziosamente la mappatura di .html ad .htm; chi usa .htm e' fuori standard
il percorso puo'essere relativo, alla directory in cui si trova l'ancora. o assoluto, rispetto alla Radice dei Documenti
il nome di host e' opzionale: se non c'e' allora ci si riferisce ad un documento sullo stesso host in cui si trova l'ancora
il nome host puo' essere un nome completo di dominio, un indirizzo IP numerico o un nome non completo: viene risolto dalla macchina su cui si trova il browser
il nome host puo' essere seguito dal carattere due punti e da un numero intero esprimente il porto a cui il server ascolta, se diverso dal porto standard di HTTP che e' il numero 80. Per esempio: http://www.zork.com:8080/figs/gip.jpg
l'intera stringa URL va racchiusa tra doppi apici. La regola generale e' che tutti i valori di argomenti a chiave vanno racchiusi tra doppi apici. I browser spesso perdonano, ma qualche editor no.

Identificatori di Frammenti Un fragment e' una locazione di una pagina al suo interno, non necessariamente connessa con la pagina stessa. Serve spesso in pagine di glossario ad identificare ogni voce, oppure per rimandare velocemente da un punto intermedio della pagina all'inizio. Per settare in identificatore di frammento si usa la sintassi: <a name=stringa> ... </a> ove stringa e' l'identificatore di frammento e il tag di chiusura e' opzionale. Per esempio in testa a questo documento e' stato definito: <a name="top"> Per andare ad un frammento la sintassi e': <a href="http://host/percorso#frammento"> ... </a> ove tutti gli elementi sono opzionali tranne il frammento e il # che lo precede. Per sesempio per tornare a inizio pagina il codice e': <a href="#top">Vai a inizio pagina<a> che produce: Vai a inizio pagina Altri Protocolli Un URL non si riferisce solo al protocollo HTTP. Cambiando opportunamente lo URL lo stesso browser, se lo supporta, puo' interfacciare altri protocolli applicativi TCP/IP. Cosi': ftp://host/percorso si riferisce ad un file da scaricare tramite Ftp Anonimo. gopher://host/percorso si riferisce ad un file da scaricare tramite protocollo Gopher (obsoleto). mailto:indirizzo-posta permette di inviare posta elettronica all'indirizzo specificato, se il browser lo supporta. news:messaggio-news richiama l'interfaccia News, se il server la supporta ed e' configurato opportunamente, contatta il server News predefiito ed effettua lo scarico del messaggio specificato dal gruppo a cui appartiene se tale gruppo e messaggio si trovano sul server. Immagini ed elementi multimediali Le immagini possono essere caricate inline cioe' incluse nel flusso del testo che compone una certa pagina Web. Il tag e': <img> Non vi e' tag finale. Un'attributo e' obbligatorio: src=url - che specifica lo URL dell'immagine da caricare Altri attributi sono opzionali: alt=testo - fornisce testo alternativo per browser che non possono visualizzare immagini o che ne hanno disabilitato la gestione align=allineamento - allinea l'immagine col testo circostante, con possibilita' top, middle e bottom width=n - larhezza in pixel height=n - altezza in pixel; fornire le dimensioni dell'immagine e' un'ottima idea perche' permette al browser di iniziare immediatamente lo scarico degli elementi successivi all'immagine, sapendo gia' quanto spazio lasciare all'immagine stessa hspace=n - specifica lo spazio in pixel da aggiungere ai bordi destro e sinistro dell'immagine vspace=n - specifica lo spazio in pixel da aggiungere ai bordi alto e basso dell'immagine border=n - specifica la dimensione in pixel del bordo di immagini contenute in ancore di link; serve spesso per togliere il bordo settando il valore a zero Per esempio il codice: <img src="jenny.jpg" align="middle" hspace="15"> Jenny produce: Jenny Le immagini si possono usare all'interno di ancore, p.es. forniscono una versione piccola di immagini piu' grandi, che vengono scaricate cliccandole. Si chiamano in tal caso thumbnails. Collezioni di immagini piccole che servono come elementi decorativi comuni o come ancore per link ad altre pagine o elementi multimediali, si chiamano icone e ve ne e' spesso una collezione sul server. Icone tipiche sono: bottoni frecce linee separatrici bullets Elementi Multimediali Sul server un elemento multimediale e' semplicemente identificato da un file con una certa estensione. Un file di configurazione sul server puo' associare le estensioni con i tipi e sottotipi MIME (Multimedia Internet Mail Extensions) in modo da fornire al browser la specifica esatta di tipo di file. Spetta al browser supportare internamente l'immagine, o suono, o clip video del formato indicato, oppure invocare un programma esterno in aiuto, oppure decidere cosa fare del file non supportato. Inizialmente i browser grafici supportavano solamente immagini di tipo 'X Window Bitmap', 'GIF' e 'Jpeg'. Ora, grazie all'ausilio di moduli software aggiungibili a vari browser, i cosiddetti plugin, i nuovi browser supportano non solo altri tipi di immagini inline, ma anche suoni, clip video, mondi virtuali, ecc. Per quanto siano stati introdotti altri tag specifici che supportano suoni in background e clip video, questi tag non sono standard e non vengono supportati da tutti i browser (anzi). Per aver sicurezza della massima portabilita' si raccomanda di usare soltanto immagini GIF, Jpeg e GIF Dinamico. Le tabelle Una tabella e' un'area rettangolare consistente di una serie di linee e di colonne. L'intesezione di una linea e di una colonna viene detta cella della tabella. Le tabelle vengono usate in HTML per visualizzare dati in forma tabellare, ma inoltre molto spesso per ottenere quegli effetti di formattazione e costrizione di posizioni reciproche che HTML di per se non possiede. Il tag che racchiude un'intera tabella e': <table> ... </table> Ogni linea deve essere racchiusa nel tag: <tr> ... </tr> Ogni campo o cella della tabella e' racchiuso nel tag: <td> ... </td> I titoli delle tabelle vengono descritti col tag: <th> ... </th> Ad ogni livello sono presenti molti attributi opzionali. A livello table vi sono: align=tipo - allinea il contenuto delle celle, valori possibili sono left (default), center e right background=url - specifica un'immagine da essere posta in background alla tabella bgcolor=colore - colore di sfondo dell'intera tabella border=n -crea un bordo di n pixel di spessore; il solo attributo border genera un bordo di default cellpadding=n - pone n pixels intorno al contenuto di ogni cella cellspacing=n - pone npixels tra ogni cella hspace=n - aggiunge n pixel a sinistra e a destra della tabella vspace=n - aggiunge n pixel prima e dopo la tabella width=n - specifica la larghezza della tabella o in pixel o come percentuale della larghezza della pagina A livello tr gli attributi sono: align=tipo background=url bgcolor=colore border=n valign=tipo - allinea i contenuti delle celle di questa riga secondo il tipo left (default), center o right Gli attributo a livello di singola cella, td sono: align=tipo background=url bgcolor=colore colspan=n - la cella si estende per n colonne adiacenti rowspan=n - la cella si estende per n righe adiacenti valign=tipo width=n nowrap - non compie l'a capo automatico di questa cella Gli attributi di un titolo o header di tabella, associati al tag th sono: align=tipo background=url bgcolor=colore colspan=n rowspan=n valign=tipo width=n nowrap Gestione di colori e sfondi Molti tag accettano attributi che usano un valore di colore. Questi sono: <body bgcolor=colore> background di tutta la pagina <body text=colore> il testo del documento <body alink=colore> i link attivi <body vlink=colore> i link gia' visitati <body link=colore> i link non ancora visitati <font color=colore> una piccola porzione di testo <table bgcolor=colore> lo sfondo di tutta una tabella <tr bgcolor=colore> lo sfondo di una riga di tabella <td bgcolor=colore> lo sfondo di una cella di tabella <th bgcolor=colore> lo sfondo di un titolo di tabella I colori si esprimono numericamente o simbolicamente. Il metodo numerico e' il piu' portatile. Numericamente un colore e' una stringa che inizial col simbolo # ed e' seguita da sei cifre esadecimali (maiuscole o minuscole). Le cifre prese due a due esprimono l'intensita' delle componenti di colore Rossa, Verde e Blu. Per esempio: #000000 - nero #FF0000 - rosso #00FFFF - cyan #FFFFFF - bianco I colori espressi simbolicamente vengono letti solo da pochi browser. Per esempio Internet Explorer riconosce i seguenti colori: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white Netscape Navigator invece riconosce i seguenti colori, che provengono dalla specifica standard di X Window: aliceblue antiquewhite aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred ivory khakhi lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrod lightgoldenrodyellow lightgray lightgreen lightpink lightsalmon lightseagreen lightskyblue lightslateblue lightslategray lightsteelblue lightyellow limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy navyblue oldlace olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen steelblue tan thistle tomato turquoise violet violetred wheat white whitesmoke yellow yellowgreen Se i colori descritti vengano poi rappresentati piu' o meno fedelmente dipende da una quantita' di fattori, in relazione al sistema di gestione colori della piattaforma su cui si trova il browser. Si raccomanda di usare il valore numerico dei colori e di limitare il numero di colori usati al minimo possibile. Gestione di Sfondi Si puo' porre un'intera immagine come sfondo della pagina corrente, o di una tabella, riga o cella, ovunque il tag ammetta l'attributo: background=url Occorre fornire lo URL dell'immagine da caricare in sfondo. Deve essere un formato immagine che il browser supporta in modo inline. L'immagine riempie lo sfondo in modalita' di piastrellamento (tile). Per esempio, e' stata prodotta una pagina che contiene la parte iniziale della pagina corrente ma che ha uno sfondo composto da ripetizioni della seguente immagine: Per far cio' il tag body e' stato scritto come: <body background="tile.gif> Cliccare qui per vedere tale pagina. Il corretto utilizzo di sfondi richiede una certa arte e sensibilita' visiva I frame La versione 2.0 di Netscape Navigator ha introdotto una nuova possibilita' per i documenti Web, chiamata frames (riquadri). I frames sono da allora stati incorporati in Microsoft Explorer. Due tag vengono usati per produrre documenti a riquadro: <frameset> e <frame>. Un frameset e' semplicemente una collezione di riquadri che occupano la finestra del browser. Gli attributi di definizione delle righe e delle colonne del tag <frameset> permettono di definire il numero e la dimensione iniziale per le righe e collonne di riquadri. Il tag <frame> definisce quale documento va posto inizialmente in ciascun riquadro, ed accetta un nome per poter essere il riferimento di link. Questo e' un esempi di un semplice documento con 'frames': <html> <head> <title<Disposizione di Frames</title> </head> <frameset rows="60%,*" cols="65%,20%,*"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html" name="fill_me"> <frame scrolling=yes src="frame4.html"> <frame src="frame5.html"> <frame src="frame6.html"> <noframes> State usando un documento che non supporta i 'frame'. Cliccate <a href="frame1.html">qui</a> per andare al primo documento dell'insieme dei frame. </noframes> </frameset> </html> Cliccare qui per vedere il risultato del documento. Visivamente il suo aspetto e' come segue: Netscape riempie i frame in un frameset in ordine di riga. Il frame 4 ha una barra di scorrimento poiche' era nelle istruzioni, anche se non ce n'e' in questo caso bisogno. Le barre di scorrimento compaiono di default quando il contenuto di un frame ne supera i bordi, a meno che siano esplicitamente disattivate con l'attributo scrolling=no. Un altro punto di interesse e' il nome associato al Frame 4, che ne permette il riferimento da altri documenti. Per esempio, per caricare un documento chiamato "nuovoframe.html" nel frame chiamato "fill_me", l'ancora sarebbe: <a href="nuovoframe.html" target="fill_me"> Una tale ancora e' stata posta nel codice del Frame 1. Cliccando opportunamente si ottiene la situazione seguente: