LINGUAGGIO HTML

 

Struttura di un documento HTML

Gli header

I caratteri speciali

Gli URL

Altri protocolli 

Tabelle

I Tag

Le liste

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 (W3C). 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 H2O.

Einstein diceva: E = mc2.

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.

(845a 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:

 

  1. Primo elemento
  2. Secondo elemento
  3. Terzo elemento
  4. Quarto elemento
  5. 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 caratteri speciali

Alcuni caratteri, quali il < e il > non sono direttamente rappresentabili in un testo HTML, poiche' hanno un metasignificato, in questo caso sono delimitatori di tag.

Inoltre HTML condensa i testi non preformattati in modo da

  • togliere tutti gli spazi e i TAB a inizio linea
  • condensare tutti gli spazi e i TAB ripetuti in un solo spazio

Altri caratteri, quali le lettere accentate e in generale tutti quelli non compresi nell'intervallo ASCII da 32 a 126 possono non essere fatti transitare dalla rete.

HTML chiama i singoli caratteri entita'. Ogni entita' e' rappresentabile numericamente dalla concatenazione di:

  • il carattere & (ampersand)
  • il carattere # (hash)
  • il codice ASCII a tre cifre del carattere
  • il carattere ; (punto e virgola)

Per esempio si hanno le seguenti trasposizioni di entita' numeriche:

&#034; " - doppie virgolette
&#233; - e con accento acuto
&#169; - segno di copyright

Molte entita' hanno anche un nome, cioe' sono esprimibili con una stringa predefinita al posto dello # e numero di codice. Non tutti i caratteri ASCII corrispondono ad entita' con nome, ma solo:

 
&quot; " &amp; & &lt; < &gt; >
&nbsp;   &iexcl; &cent; &pound;
&curren; &yen; &brvbar; &sect;
&uml; &copy; &ordf; &laquo;
&not; &shy; &reg; &macr;
&deg; &plusmn; &sup2; &sup3;
&acute; &micro; &para; &middot;
&cedil; &sup1; &ordm; &raquo;
&frac14; &frac12; &frac34; &iquest;
&Agrave; &Aacute; &Acirc; &Atilde;
&Auml; &Aring; &AElig; &Ccedil;
&Egrave; &Eacute; &Ecirc; &Euml;
&Igrave; &Iacute; &Icirc; &Iuml;
&ETH; &Ntilde; &Ograve; &Oacute;
&Ocirc; &Otilde; &Ouml; &times;
&Oslash; &Ugrave; &Uacute; &Ucirc;
&Uuml; &Yacute; &THORN; &szlig;
&agrave; &aacute; &acirc; &atilde;
&auml; &aring; &aelig; &ccedil;
&egrave; &eacute; &ecirc; &euml;
&igrave; &iacute; &icirc; &iuml;
&eth; &ntilde; &ograve; &oacute;
&ocirc; &otilde; &ouml; &divide;
&oslash; &ugrave; &uacute; &ucirc;
&uuml; &yacute; &thorn; &yuml;

 

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: