1 html il linguaggio per creare pagine per il web

11

HTMLHTML

Il linguaggio per creare Il linguaggio per creare pagine per il webpagine per il web

22

World Wide WebWorld Wide Web

Si basa sul protocollo http ed è la vera novità degli anni ’90.Si basa sul protocollo http ed è la vera novità degli anni ’90.

Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è

il più potente mezzo di diffusione telematica di documenti il più potente mezzo di diffusione telematica di documenti

elettronici.elettronici.

Mezzo di comunicazione globale, interattivo, multimediale e Mezzo di comunicazione globale, interattivo, multimediale e

ipertestuale ha cambiato radicalmente il modo di ipertestuale ha cambiato radicalmente il modo di

comunicare e di lavorare.comunicare e di lavorare.

33

Organizzazione di un testoOrganizzazione di un testoAccesso sequenziale

44

Organizzazione di un ipertestoOrganizzazione di un ipertestoAccesso secondo legami associativi

55

Linguaggi di markupLinguaggi di markup

In un documento il markup è il codice che contiene In un documento il markup è il codice che contiene

le informazioni per la sua formattazione.le informazioni per la sua formattazione.

66

Linguaggi di markup (II)Linguaggi di markup (II)

Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici

per automatizzare alcune operazioni per la creazione dei documenti.per automatizzare alcune operazioni per la creazione dei documenti.

Esistono programmi per l’elaborazione dei testi di tipo diverso.Esistono programmi per l’elaborazione dei testi di tipo diverso.

• Gli editor Gli editor WYSIWYG.WYSIWYG.

• Gli editor che usano il concetto di Gli editor che usano il concetto di markup.markup.

Nel caso di editor che usano il concetto di markup, un testo è costituito da due partiNel caso di editor che usano il concetto di markup, un testo è costituito da due parti

• Il contenuto vero e proprio.Il contenuto vero e proprio.

• Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo

schermo di un PC, ma anche per esempio una stampante).schermo di un PC, ma anche per esempio una stampante).

In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici).In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici).

I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati

usando semplici editor di testo.usando semplici editor di testo.

77

File Word (.doc)File Word (.doc)

88

File Word (.doc)File Word (.doc)

Aprendo il file

precedente con Blocco

Note si vede il formato

interno di Word e non si

distinguono markup.

99

File in formato RTF (.rtf)File in formato RTF (.rtf)

RTF è un formato solo testo

in cui si distinguono

informazioni legate alla

presentazione del

documento e informazioni

che fanno parte del

contenuto.

1010

File in formato PostScript (.ps)File in formato PostScript (.ps)

Questo è un formato usato

per la stampa. Anche in

questo caso si distinguono

informazioni legate alla

presentazione del

documento e informazioni

che fanno parte del

documento stesso.

1111

HTMLHTML Gli ipertesti del web sono scritti usando il linguaggio Gli ipertesti del web sono scritti usando il linguaggio HHyperyperTText ext

MMarkup arkup LLanguage (HTML).anguage (HTML).

HTML HTML nonnon è un linguaggio di programmazione! è un linguaggio di programmazione!

HTML è un HTML è un linguaggio di markuplinguaggio di markup e permette di descrivere la e permette di descrivere la

disposizione di tutti gli elementi presenti all’interno di un disposizione di tutti gli elementi presenti all’interno di un

documento.documento.

I documenti HTML sono dei file in I documenti HTML sono dei file in formato testoformato testo (codice ASCII). (codice ASCII).

Si possono creare con degli editor di testo dando l’estensione Si possono creare con degli editor di testo dando l’estensione .htm.htm o o

.html.html..

I browser leggono i documenti HTML e li visualizzanoI browser leggono i documenti HTML e li visualizzano interpretando interpretando

le specifiche di formattazione in modo sequenziale.le specifiche di formattazione in modo sequenziale.

1212

HTML: esempioHTML: esempio

<html><html>

<head><head>

<title>Pagina HTML di prova</title><title>Pagina HTML di prova</title>

</head></head>

<body><body>

Utilizzare un editor di testo: in ambiente Windows WordPad va Utilizzare un editor di testo: in ambiente Windows WordPad va

bene, in ambiente Unix vi per esempiobene, in ambiente Unix vi per esempio

</body></body>

</html></html>

1313

HTML: sintassiHTML: sintassi<nomecomando><nomecomando>

informazioniinformazioni

</nomecomando></nomecomando>

Un documento HTML inizia sempre con il tag Un documento HTML inizia sempre con il tag <html> <html> e termina sempre con il tag e termina sempre con il tag

</html></html>..

NB: NB: il linguaggio HTML è il linguaggio HTML è case-insensitive case-insensitive e quindi e quindi <HTML><HTML>, , <html><html>, , <Html><Html> sono tutti sono tutti

tag leciti (lo stesso vale per gli altri tag).tag leciti (lo stesso vale per gli altri tag).

Suggerimenti:Suggerimenti:

• È meglio decidere all’inizio come si scriveranno i tag ed essere consistenti.È meglio decidere all’inizio come si scriveranno i tag ed essere consistenti.

• Per analogia con XHTML (derivato dell’XML e dell’HTML che è Per analogia con XHTML (derivato dell’XML e dell’HTML che è case-sensitivecase-sensitive) è ) è

consigliabile scrivere tutto in minuscolo.consigliabile scrivere tutto in minuscolo.

1414

HTML: sintassi (II)HTML: sintassi (II)

<html><html>

<head><head>

caratteristiche del documentocaratteristiche del documento

</head></head>

<body><body>

documentodocumento

</body></body>

</html></html>

1515

HTML: <head>HTML: <head>

<html><html>

<head><head>

<title><title>titolo del documentotitolo del documento</title></title>

<meta name<meta name=“keywords” content=“parole chiave qui”=“keywords” content=“parole chiave qui”>>

<meta name<meta name=“author” content=“nome e cognome qui”=“author” content=“nome e cognome qui”>>

</head></head>

……………………………………………………

……………………………………………………

</html></html>

1616

HTML: <head>HTML: <head> Questa sezione del documento contiene Questa sezione del documento contiene

informazioni non immediatamente percepibili, ma informazioni non immediatamente percepibili, ma

che riguardano il modo in cui il documento deve che riguardano il modo in cui il documento deve

essere letto ed interpretato.essere letto ed interpretato.

È la parte del documento dove vengono inseriti i È la parte del documento dove vengono inseriti i

metatag (alcuni sono ad esclusivo beneficio dei metatag (alcuni sono ad esclusivo beneficio dei

motori di ricerca), script JavaScript o VbScript, i motori di ricerca), script JavaScript o VbScript, i

fogli di stile, ecc.fogli di stile, ecc.

1717

HTML: <body>HTML: <body>

<html><html>

<head><head>

<title><title>titolo del documentotitolo del documento</title></title>

</head></head>

<body lista di opzioni><body lista di opzioni>

documento vero e propriodocumento vero e proprio

</body></body>

</html></html>

1818


<body<body

bgcolorbgcolor=“colore sfondo”=“colore sfondo”

backgroundbackground=“nome file con l’immagine”=“nome file con l’immagine”

texttext=“colore testo”=“colore testo”

linklink=“colore link da visitare”=“colore link da visitare”

vlinkvlink=“colore link visitato”=“colore link visitato”

alinkalink=“colore link selezionato”=“colore link selezionato”

>>

NB: NB: l’ordine in cui si scrivono gli attributi non è importante.l’ordine in cui si scrivono gli attributi non è importante.

1919


bgcolorbgcolor=“red”=“red”

bgcolorbgcolor=“yellow”=“yellow”

bgcolorbgcolor=“#00ffff”=“#00ffff”

texttext=“#eeeeee”=“#eeeeee”

linklink=“#ffffff”=“#ffffff”

backgroundbackground=“images/sfondo.gif”=“images/sfondo.gif”

<body text<body text= “white” = “white” linklink=“#cc0000” =“#cc0000” backgroundbackground=“images/sabbia.gif=“images/sabbia.gif>>

2020


<html><html>

<head><head>

<title>Esempio Sfondo</title><title>Esempio Sfondo</title>

</head></head>

<body background=“morgagni.jpg”<body background=“morgagni.jpg”

bgcolor=“B7D1E1”>bgcolor=“B7D1E1”>

Qui il nostro contenutoQui il nostro contenuto

</body></body>

</html></html>

2121

HTML: RGBHTML: RGB Ogni colore può essere codificato mediante tre Ogni colore può essere codificato mediante tre

numeri compresi tra 0 e 255 che rappresentano le numeri compresi tra 0 e 255 che rappresentano le

quantità di quantità di ROSSO ROSSO VERDEVERDE e e BLU BLU presenti nel colore presenti nel colore

stesso.stesso.

Ogni numero compreso tra Ogni numero compreso tra 00 e e 255255 deve essere deve essere

trasformato nella rappresentazione trasformato nella rappresentazione esadecimale esadecimale

corrispondente (base 16).corrispondente (base 16).

Con questa codifica si possono rappresentare più di Con questa codifica si possono rappresentare più di

16,7 milioni di colori diversi.16,7 milioni di colori diversi.

2222

HTML: RGB (II)HTML: RGB (II)

NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare

spazi vuoti tra le cifre.

2323

HTML: titoliHTML: titoli Il documento inserito nel Il documento inserito nel <body><body> viene visualizzato viene visualizzato

secondo le direttive di formattazione.secondo le direttive di formattazione.

Per scrivere titoli si

possono usare:

<h1>titolo1</h1><h2>titolo2</h2>

……<h6>titolo6</h6>

Per andare a capo: <br>

<p>……….</p>

2424

HTML: esempioHTML: esempio<html><html>

<head><head>

<title>Esempio 2</title><title>Esempio 2</title>

</head></head>

<body bgcolor=“green” text=“white”><body bgcolor=“green” text=“white”>

<h1>Titolo importante</h1><h1>Titolo importante</h1>

<h2>Titolo meno importante</h2><h2>Titolo meno importante</h2>

<br><br><br><br>

Hello world hello world hello world hello worldHello world hello world hello world hello world

<br><br><br><br>

Hello world hello world hello world hello worldHello world hello world hello world hello world

</body></body>

</html></html>

2525

HTML: caratteriHTML: caratteri Formato dei caratteri:Formato dei caratteri:

• <b> <b> grassetto grassetto </b></b>

• <i> <i> corsivo corsivo </i></i>

• <em> <em> enfatizzato enfatizzato </em></em>

• <code> <code> codice codice </code></code>

• <strong> <strong> grassetto grassetto </strong></strong>

• <font size<font size=“3”=“3”> > testo testo </font></font>

• <font color<font color=“blue”=“blue”> > … … </font></font>

• <font face<font face=“Arial”=“Arial”> > … … </font></font>

2626

HTML: allineamentoHTML: allineamento Allineamento:Allineamento:

• <p align<p align=“center”=“center”>>

• <p align<p align=“right”=“right”>>

• <p align<p align=“justify”=“justify”>>

• <center> <center> testo da centrare testo da centrare </center></center>

2727

HTML: elenchiHTML: elenchi <ul> <ul> e e <li> <li> (unordered list)(unordered list)

<ul><ul>

<li><li>primo elementoprimo elemento</li></li>

<li><li>secondo elementosecondo elemento</li></li>

</ul></ul>

<ol> <ol> e e <li> <li> (ordered list)(ordered list)

<ol><ol>

<li><li>primo elementoprimo elemento</li></li>

<li><li>secondo elementosecondo elemento</li></li>

</ol></ol>

2828

HTML: esempioHTML: esempio<html><html>

<head><head>

<title>Esempio 3</title><title>Esempio 3</title>

</head></head>

<body bgcolor=“red” text=“white”><body bgcolor=“red” text=“white”>

<br><br><br><br><br><br>

<ol><ol>

<li><font color=“#0000ff” face=“Courier”> Primo elemento della lista </font></li><li><font color=“#0000ff” face=“Courier”> Primo elemento della lista </font></li>

<li> Secondo elemento della lista </li><li> Secondo elemento della lista </li>

<li><font size=+2> Terzo elemento della lista </font></li><li><font size=+2> Terzo elemento della lista </font></li>

</ol></ol>

</body></body>

</html></html>

2929

HTML: altri marcatoriHTML: altri marcatori Linee orizzontali Linee orizzontali <hr><hr>::

<hr width<hr width=“90%” size=3=“90%” size=3>>

Testo lampeggiante (solo per Netscape):Testo lampeggiante (solo per Netscape):

<blink> <blink> questo testo lampeggiaquesto testo lampeggia </blink> </blink>

Testo scorrevole (solo per Explorer):Testo scorrevole (solo per Explorer):

<marquee> <marquee> questo testo scorrequesto testo scorre </marquee> </marquee>

Commenti:Commenti:

 -->

3030

HTML: <a href>HTML: <a href> Link Link <a> <a> ……… ……… </a></a>

<a href<a href=“URL”=“URL”>>testo del linktesto del link</a></a>

Gli indirizzi per “trovare” i documenti nel web sono Gli indirizzi per “trovare” i documenti nel web sono

detti Uniform Resource Locator (URL) e li detti Uniform Resource Locator (URL) e li

identificano in modo univoco.identificano in modo univoco.

protocollo://indirizzo internet del server/pathnameprotocollo://indirizzo internet del server/pathname

3131

HTML: <a href>HTML: <a href><html>

<head>

<title>Esempio Link</title>

</head>

<body bgcolor="#ffffff">

<h1>Sono nella pagina principale</h1>

<ul>

<li>pagina principale<br><br>

<li><a href="prima/prima.html">1a pagina</a>

<ul>

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

</ul>

<li><a href="seconda/seconda.html">2a pagina</a>

<li><a href="terza/terza.html">3a pagina</a>

</ul>

</body>

</html>

3232

HTML: <a href>HTML: <a href><a href=“http://www.unifi.it”>Università di Firenze</a>

protocollo

Indirizzo internet del server

<a href=“http://www.dsi.unifi.it/~ferrari/DIDATTICA/aa07/index.htm”>

Anno Accademico 2006/2007</a>

3333

HTML: link interni (ancore)HTML: link interni (ancore) Link interni allo stesso documento: si usa Link interni allo stesso documento: si usa

l’attributo l’attributo namename del tag del tag <a><a>..

3434

HTML: link interni (ancore) (II)HTML: link interni (ancore) (II) Si devono marcare quelle porzioni del documento Si devono marcare quelle porzioni del documento

dove si vuole saltare.dove si vuole saltare.

3535

HTML: link interni (ancore) (III)HTML: link interni (ancore) (III) Per i link interni si deve usare nell’attributo href il nome scelto Per i link interni si deve usare nell’attributo href il nome scelto

come valore dell’attributo come valore dell’attributo namename, preceduto dal simbolo #., preceduto dal simbolo #.

3636

HTML: <IMG>HTML: <IMG>

<img<img

srcsrc=“nome file dell’immagine”=“nome file dell’immagine”

alignalign=“left” | “right” | “center”=“left” | “right” | “center”

borderborder=“numero”=“numero”

heightheight=“numero”=“numero”

widthwidth=“numero”=“numero”

hspacehspace=“numero”=“numero”

vspacevspace=“numero”=“numero”

altalt=“testo alternativo all’immagine”=“testo alternativo all’immagine”>>

NB: l’immagine deve essere su un file a parteNB: l’immagine deve essere su un file a parte in formato GIF, PNG o JPEG (BMP solo in formato GIF, PNG o JPEG (BMP solo

per Explorer).per Explorer).

3737

HTML: esempioHTML: esempio<html><html><head><head>

<title>Prova di documento</title><title>Prova di documento</title></head></head>

<body bgcolor=“white” text=“green”><body bgcolor=“white” text=“green”><center><center>

<hr size=“2” width=“400”><hr size=“2” width=“400”><br><br><br><br><img src=“C:\Documents and Settings\All <img src=“C:\Documents and Settings\All Users\Documenti\Immagini\Users\Documenti\Immagini\

Immagini campione\Inverno.jpg” Immagini campione\Inverno.jpg” alt=“l’inverno”>alt=“l’inverno”><br><br><br><br><hr size=“2” width=“400”><hr size=“2” width=“400”><img src=“C:\Documents and Settings\All <img src=“C:\Documents and Settings\All Users\Documenti\Immagini\Users\Documenti\Immagini\

Immagini campione\Tramonto.jpg” alt=“il Immagini campione\Tramonto.jpg” alt=“il tramonto”>tramonto”><br><br><br><br><hr size=“2” width=“400”><hr size=“2” width=“400”><br><br><br><br>

</center></center></body></body></html></html>

3838

HTML: audioHTML: audio Formati audio .au .aiff .mid .wavFormati audio .au .aiff .mid .wav

<a href<a href=“nome file audio”=“nome file audio”>>clicca quiclicca qui</a></a>

<bgsound src<bgsound src=“nome file audio” loop=“10”=“nome file audio” loop=“10”>>

NB: NB: bgsound fa partire l’audio quando si entra bgsound fa partire l’audio quando si entra

nella pagina ma funziona solo in Explorer.nella pagina ma funziona solo in Explorer.

3939

HTML: videoHTML: video Formati video .mpeg .avi .movFormati video .mpeg .avi .mov

<a href<a href=“nome file video”=“nome file video”>>clicca quiclicca qui</a></a>

<img dynsrc<img dynsrc=“nome file video” src=“nome file =“nome file video” src=“nome file

immagine”immagine”>>

NB: NB: dynsrc fa partire automaticamente il dynsrc fa partire automaticamente il

video ma funziona solo in Explorer.video ma funziona solo in Explorer.

4040

HTML: tabelleHTML: tabelle Per creare una tabella in HTML si usano i tag:Per creare una tabella in HTML si usano i tag:

<table> </table><table> </table>

all’interno dei quali si deve definire il contenuto della tabella.all’interno dei quali si deve definire il contenuto della tabella.

Per definire una tabella si procede nel modo seguente:Per definire una tabella si procede nel modo seguente:

• Si realizza la prima riga facendo uso del tag <tr> (table row)Si realizza la prima riga facendo uso del tag <tr> (table row)

• Si indicano le varie celle facendo uso:Si indicano le varie celle facendo uso:

Del tag <th> per le intestazioni di cella </th> (table header).Del tag <th> per le intestazioni di cella </th> (table header).

Del tag <td> per i dati della cella </td> (table data).Del tag <td> per i dati della cella </td> (table data).

• Si passa alla seconda riga con le relative celle avendo cura di Si passa alla seconda riga con le relative celle avendo cura di

usare il tag </tr>.usare il tag </tr>.

4141

HTML: <table>HTML: <table><html><html><head><head>

<title>Esempio tabella</title><title>Esempio tabella</title></head></head>

<body bgcolor=“white” text=“green”><body bgcolor=“white” text=“green”><center><center>

TabellaTabella<table border=1><table border=1>

<tr><tr><th>Uno</th> <th>Due</th><th>Uno</th> <th>Due</th>

</tr></tr><tr><tr>

<td>aaaaaaaaaa</td><td>bbbbbbbb</td><td>aaaaaaaaaa</td><td>bbbbbbbb</td></tr></tr><tr><tr>

<td>ccccccccc</td><td>ddddddddd</td><td>ccccccccc</td><td>ddddddddd</td></tr></tr>

</table></table></center></center>

</body></body></html></html>

4242

HTML: tabelleHTML: tabelle

4343

HTML: <table> (II)HTML: <table> (II)

<table<table

widthwidth=“larghezza della tabella”=“larghezza della tabella”

cellpaddingcellpadding=“numero”=“numero”

indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un

numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere

espresso espresso in percentuale. Di default la distanza è nulla.in percentuale. Di default la distanza è nulla.

cellspacingcellspacing=“numero”=“numero”

specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di

default è default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri.un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri.

borderborder=“numero”=“numero”

specifica la larghezza dei bordi di una tabella (in pixel).specifica la larghezza dei bordi di una tabella (in pixel).

bgcolorbgcolor=“colore sfondo tabella”=“colore sfondo tabella”

>>

<table width<table width=“80%” =“80%” cellpaddingcellpadding=“5” =“5” bgcolorbgcolor=“#ff3300”=“#ff3300”>>

4444

HTML: <td> <th> HTML: <td> <th>

<td (th)<td (th)

widthwidth=“dimensione della cella”=“dimensione della cella”

colspancolspan=“numero”=“numero”

rowspanrowspan=“numero”=“numero”

bgcolorbgcolor=“colore sfondo cella”=“colore sfondo cella”

alignalign=”right” | ”left” | ”center”=”right” | ”left” | ”center”

valignvalign=“top” | “bottom” | “middle”=“top” | “bottom” | “middle”

nowrapnowrap

>>

<td width<td width=“100” =“100” bgcolorbgcolor=“#0033aa” =“#0033aa” alignalign=“right”=“right”>>

4545

HTML: esempioHTML: esempio<html><html><head><head>

<title>Esempio di tabella</title><title>Esempio di tabella</title></head></head>

<body><body><center><center>

<table border=“4”><table border=“4”><tr><tr>

<td bgcolor=“#ff0000”>…una tartaruga</td><td bgcolor=“#ff0000”>…una tartaruga</td><td align=“center”><img src=“…/images/tartaruga.gif” <td align=“center”><img src=“…/images/tartaruga.gif” alt=“una tartaruga”></td>alt=“una tartaruga”></td>

</tr></tr><tr><tr>

<td align=“center”><img src=“…/images/pinguini.gif” alt=“dei <td align=“center”><img src=“…/images/pinguini.gif” alt=“dei pinguini”></td>pinguini”></td><td bgcolor=“#00ff00” align=“right”>…dei pinguini</td><td bgcolor=“#00ff00” align=“right”>…dei pinguini</td>

</tr></tr></table></table>

</center></center></body></body></html></html>

4646

HTML: tabelleHTML: tabelle Le tabelle si usano anche per organizzare gli Le tabelle si usano anche per organizzare gli

elementi all’interno di una pagina.elementi all’interno di una pagina.

Per fare questo non si visualizzano i bordi.Per fare questo non si visualizzano i bordi.

<table border<table border=“0”=“0”>>

righe e colonnerighe e colonne

<\table><\table>

4747

HTML: frameHTML: frame I frame servono per suddividere il browser in parti indipendenti I frame servono per suddividere il browser in parti indipendenti

all’interno delle quali si possono caricare documenti HTML diversi.all’interno delle quali si possono caricare documenti HTML diversi.

È necessario innanzitutto realizzare un file HTML che definisca la È necessario innanzitutto realizzare un file HTML che definisca la

struttura della pagina (ovvero la sua suddivisione in parti struttura della pagina (ovvero la sua suddivisione in parti

indipendenti).indipendenti).

Il tag <frameset> serve per creare una pagina strutturata in frame.Il tag <frameset> serve per creare una pagina strutturata in frame.

<frameset><frameset> </frameset></frameset>

<noframes><noframes> </noframes></noframes>

<frameset><frameset> sostituisce il comando <body> sostituisce il comando <body>

4848

HTML: <frameset>HTML: <frameset> <frameset> <frameset> ha due attributi:ha due attributi:

• rows rows divide lo schermo in righe orizzontali;divide lo schermo in righe orizzontali;

• cols cols divide lo schermo in colonne verticali.divide lo schermo in colonne verticali.

Le dimensioni delle righe e delle colonne possono Le dimensioni delle righe e delle colonne possono

essere espresse in pixel oppure in percentuale.essere espresse in pixel oppure in percentuale.

Tra gli altri attributi si può usare frameborder per Tra gli altri attributi si può usare frameborder per

associare un bordo alle varie porzioni dello schermo associare un bordo alle varie porzioni dello schermo

(esteticamente discutibile).(esteticamente discutibile).

4949

HTML: <frame>HTML: <frame> All’interno di ogni porzione di interfaccia del browser si deve All’interno di ogni porzione di interfaccia del browser si deve

aprire un documento usando il tag <frame>aprire un documento usando il tag <frame>

<frame<frame

srcsrc=“file HTML da aprire nel frame”=“file HTML da aprire nel frame”

namename=“nome della finestra”=“nome della finestra”

scrollingscrolling=“yes” | “no” | “auto”=“yes” | “no” | “auto”

noresizenoresize

marginwidthmarginwidth=“numero”=“numero”

marginheightmarginheight=“numero”=“numero”

>>

5050

HTML: <frameset> (II)HTML: <frameset> (II)<html><html>

<head><head>

<title>Esempio frame</title><title>Esempio frame</title>

</head></head>

<frameset rows=“50%,50%” cols=“50%,50%”><frameset rows=“50%,50%” cols=“50%,50%”>

<frame src=“prima.html”><frame src=“prima.html”>

<frame src=“seconda.html”><frame src=“seconda.html”>

<frame src=“terza.html”><frame src=“terza.html”>

<frame src=“quarta.html”><frame src=“quarta.html”>

<noframes><noframes>

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

</noframes></noframes>

</frameset></frameset>

</html></html>

5151

HTML: targetHTML: target In una struttura a frames può apparire difficile caricare il In una struttura a frames può apparire difficile caricare il

contenuto di un link nella sezione appropriata.contenuto di un link nella sezione appropriata.

Grazie all’attributo Grazie all’attributo target target possiamo specificare qual è la possiamo specificare qual è la

destinazione del link; con questa sintassi siamo dunque in destinazione del link; con questa sintassi siamo dunque in

grado di caricare il contenuto di un collegamento nel riquadro grado di caricare il contenuto di un collegamento nel riquadro

che riteniamo più opportuno:che riteniamo più opportuno:

<a href=“paginaDaLinkare.html” target=“nomeDelFrame”><a href=“paginaDaLinkare.html” target=“nomeDelFrame”>

5252

HTML: target (esempi)HTML: target (esempi) Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link

in destinazioni predefinite:in destinazioni predefinite:

• target=“_blank”. Apre il link in una nuova finestra, senza nome;target=“_blank”. Apre il link in una nuova finestra, senza nome;

• target=“_self”.target=“_self”. Apre il link nel frame stesso (è così di default);Apre il link nel frame stesso (è così di default);

• target=“_parent”. Il documento viene caricato nel frameset precedente a target=“_parent”. Il documento viene caricato nel frameset precedente a

quello corrente (più esattamente nel frame genitore);quello corrente (più esattamente nel frame genitore);

• target=“_top”. Il documento viene caricato nella finestra originale, target=“_top”. Il documento viene caricato nella finestra originale,

cancellando ogni struttura a frame (si noti la differenza con “_parent”). cancellando ogni struttura a frame (si noti la differenza con “_parent”).

Più precisamente il documento viene caricato nella parte più alta (“top”) Più precisamente il documento viene caricato nella parte più alta (“top”)

della struttura, ed è questo il motivo per cui il frameset stesso viene della struttura, ed è questo il motivo per cui il frameset stesso viene

annullato e sostituito dal contenuto del link.annullato e sostituito dal contenuto del link.

5353

HTML: mappe d’immagineHTML: mappe d’immagine Una mappa d’immagine è un’immagine cui Una mappa d’immagine è un’immagine cui

si possono associare link diversi.si possono associare link diversi.

È necessario avere il file dell’immagine (.gif È necessario avere il file dell’immagine (.gif

o .jpeg) e una specifica della mappatura, o .jpeg) e una specifica della mappatura,

cioè l’indicazione di quali parti cioè l’indicazione di quali parti

dell’immagine sono attive e quali no.dell’immagine sono attive e quali no.

5454

HTML: <map>HTML: <map><html><html><head><head>

<title>Esempio map</title><title>Esempio map</title></head></head><body background=“bckgrnd.gif”><body background=“bckgrnd.gif”><center><center><map name=“picture”><map name=“picture”>

<area href=“form.html” shape=“rect” coords=“3,122,73,143” alt=“Go to the form”><area href=“form.html” shape=“rect” coords=“3,122,73,143” alt=“Go to the form”><area href=“contact.html” shape=“rect” coords=“109,123,199,142” alt=“Go to the contact page”><area href=“contact.html” shape=“rect” coords=“109,123,199,142” alt=“Go to the contact page”><area href=“main.html” shape=“rect” coords=“1,2,72,17” alt=“Go to the homepage”><area href=“main.html” shape=“rect” coords=“1,2,72,17” alt=“Go to the homepage”><area href=“links.html” shape=“rect” coords=“155,0,199,18” alt=“Go to the links page”><area href=“links.html” shape=“rect” coords=“155,0,199,18” alt=“Go to the links page”>

<area href=“mailto:[email protected]” shape=“poly” <area href=“mailto:[email protected]” shape=“poly” coords=“28,22,24,68,46,114,84,111,99,56,86,13” alt=“Invio email”>coords=“28,22,24,68,46,114,84,111,99,56,86,13” alt=“Invio email”>

<area href=“mailto:[email protected]” shape=“circle” coords=“146,66,42” alt=“Invio email”><area href=“mailto:[email protected]” shape=“circle” coords=“146,66,42” alt=“Invio email”><\map><\map>

<img src=“deitel.gif” width=“200” height=“144” border=“1” alt=“Harvey and Paul Deitel” <img src=“deitel.gif” width=“200” height=“144” border=“1” alt=“Harvey and Paul Deitel” usemap=“#picture”>usemap=“#picture”></center></center></body></body></html></html>

5555

HTML: <map>HTML: <map> Come si possono mappare le regioni Come si possono mappare le regioni

italiane?italiane?

5656

HTML: formHTML: form Uno dei fattori che hanno decretato il successo del Web è senz’altro la Uno dei fattori che hanno decretato il successo del Web è senz’altro la

possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo

(ad esempio mailing list).(ad esempio mailing list).

Per organizzare questo genere di servizi è necessario raccogliere in qualche Per organizzare questo genere di servizi è necessario raccogliere in qualche

modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i

moduli (cioè i form).moduli (cioè i form).

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

• Una Una pagina principalepagina principale che contiene i vari campi del form, che consentono che contiene i vari campi del form, che consentono

all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine …all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine …

• Una Una pagina secondariapagina secondaria che viene richiamata dalla principale e che effettua il che viene richiamata dalla principale e che effettua il

“lavoro” vero e proprio di processare e raccogliere i dati. Di norma si tratta di una “lavoro” vero e proprio di processare e raccogliere i dati. Di norma si tratta di una

pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una

pagina asp, php, jsp o altro.pagina asp, php, jsp o altro.

In questa parte ci occuperemo della sola pagina principale.In questa parte ci occuperemo della sola pagina principale.

5757

HTML: form (name e action)HTML: form (name e action) Per creare una pagina con dei moduli, bisogna usare l’apposito tag Per creare una pagina con dei moduli, bisogna usare l’apposito tag <form><form>

<form name=“datiUtenti” action=“paginaRisposta.php”><form name=“datiUtenti” action=“paginaRisposta.php”>……………………</form></form>

Come si può vedere, Come si può vedere, “name” “name” serve per indicare il nome del form, serve per indicare il nome del form, “action” “action”

indica l’URL del programma o della pagina di risposta che processerà i dati.indica l’URL del programma o della pagina di risposta che processerà i dati.

Grazie all’ Grazie all’ “action” “action” è anche possibile far sì che i dati vengano inviati in e-mail è anche possibile far sì che i dati vengano inviati in e-mail

al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL)al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL)..

<form action=mailto:[email protected]?subject=Oggetto predefinito”<form action=mailto:[email protected]?subject=Oggetto predefinito”enctype=“text/plain” method=“POST”>enctype=“text/plain” method=“POST”>

5858

HTML: form (metodo)HTML: form (metodo) Quando creiamo un form possiamo scegliere due metodi di invio: Quando creiamo un form possiamo scegliere due metodi di invio: GET GET e e

POSTPOST..

• Con il metodo Con il metodo GET GET la pagina di risposta viene contattata e i dati vengono inviati in la pagina di risposta viene contattata e i dati vengono inviati in

un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i

parametri nella barra degli indirizzi (più precisamente nella “parametri nella barra degli indirizzi (più precisamente nella “query stringquery string”, cioè ”, cioè

nella “nella “stringa di interrogazionestringa di interrogazione”) secondo questa forma:”) secondo questa forma:

http://www.html.it/esempioForm/paginaRisposta.php?http://www.html.it/esempioForm/paginaRisposta.php?

nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invionome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

• I dati (nella forma I dati (nella forma nome del campo=valore del camponome del campo=valore del campo) sono appesi alla pagina ) sono appesi alla pagina

dopo il punto interrogativo.dopo il punto interrogativo.

• Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GETGET e e

non consentono di inviare form con valori superiori a non consentono di inviare form con valori superiori a 255 caratteri 255 caratteri complessivi. Il complessivi. Il

metodo metodo GETGET è dunque particolarmente indicato per form con pochi campi e pochi è dunque particolarmente indicato per form con pochi campi e pochi

dati da inviare. La sintassi per l’invio in dati da inviare. La sintassi per l’invio in GETGET è: è:

<form name=“datiUtenti” action=“paginaRisposta.php” method=“GET”><form name=“datiUtenti” action=“paginaRisposta.php” method=“GET”>

5959

HTML: form (metodo)HTML: form (metodo) Nel metodo Nel metodo POSTPOST invece l’invio dei dati avviene in invece l’invio dei dati avviene in

due step distinti: prima viene contattata la pagina due step distinti: prima viene contattata la pagina

sul server che deve processare i dati, e poi sul server che deve processare i dati, e poi

vengono inviati i dati stessi. Per questo motivo i vengono inviati i dati stessi. Per questo motivo i

parametri non compaiono nella query string.parametri non compaiono nella query string.

• In questo caso non ci sono limiti sulla lunghezza dei In questo caso non ci sono limiti sulla lunghezza dei

caratteri. La sintassi è:caratteri. La sintassi è:

<form name=“datiUtenti” action=“paginaRisposta.php” <form name=“datiUtenti” action=“paginaRisposta.php”

method=“POST”>method=“POST”>

6060

HTML: form (Enctype)HTML: form (Enctype) Prima di passare i dati alla pagina di risposta, che si trova sul server, questi Prima di passare i dati alla pagina di risposta, che si trova sul server, questi

vengono codificati dal browser in modo da non poter dare adito a errori (ad vengono codificati dal browser in modo da non poter dare adito a errori (ad

esempio gli spazi vengono convertiti in “+”).esempio gli spazi vengono convertiti in “+”).

Normalmente non è necessario specificare come si vuole effettuare la codifica Normalmente non è necessario specificare come si vuole effettuare la codifica

dei dati, perché è sottinteso l’invio di semplice testo.dei dati, perché è sottinteso l’invio di semplice testo.

A volte però, come quando è necessario inviare un’immagine, è tuttavia A volte però, come quando è necessario inviare un’immagine, è tuttavia

indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo

è necessario inviare l’attributo è necessario inviare l’attributo “enctype”“enctype” ( (“encoding type”“encoding type”, cioè , cioè “tipo di “tipo di

codifica”codifica”).).

<form name=“datiUtenti” action=“paginaRisposta.php” enctype=“text/plain”><form name=“datiUtenti” action=“paginaRisposta.php” enctype=“text/plain”>

Ma nel caso di invio di immagini dovremo dichiarare:Ma nel caso di invio di immagini dovremo dichiarare:

<form name=“datiUtenti” action=“paginaRisposta.php” method=“post” <form name=“datiUtenti” action=“paginaRisposta.php” method=“post”

enctype=“multipart/form-data”>enctype=“multipart/form-data”>

6161

HTML: form (target)HTML: form (target) Grazie all’attributo Grazie all’attributo “target”“target” è possibile far è possibile far

aprire i dati del form in una pagina aprire i dati del form in una pagina

differente rispetto a quella corrente o in una differente rispetto a quella corrente o in una

determinata parte di un frameset: determinata parte di un frameset:

<form name=“datiUtenti” <form name=“datiUtenti”

action=“paginaRisposta.php” method=“get” action=“paginaRisposta.php” method=“get”

target=“_blank”>target=“_blank”>

6262

HTML: form - raggruppare i moduliHTML: form - raggruppare i moduli Con l’HTML4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno Con l’HTML4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno

dei form.dei form.

Grazie al tag Grazie al tag <fieldset><fieldset> possiamo creare delle macro-aree all’interno dei possiamo creare delle macro-aree all’interno dei

form, e grazie al tag form, e grazie al tag <legend><legend> possiamo indicare il nome di ciascuna macro- possiamo indicare il nome di ciascuna macro-

area.area.

• Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio

e reperibilità sul lavoro:e reperibilità sul lavoro:

<fieldset><fieldset><legend>Dati anagrafici</legend><legend>Dati anagrafici</legend><br><br><br><br><br><br>

</fieldset></fieldset>

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


6363

HTML: form - raggruppare i moduliHTML: form - raggruppare i moduli

Un altro tag particolarmente utile – si può Un altro tag particolarmente utile – si può

utilizzare con ogni tipo di campo che utilizzare con ogni tipo di campo che

vedremo d’ora in poi – è il tag vedremo d’ora in poi – è il tag <label><label>, che , che

permette di indicare un’etichetta per il permette di indicare un’etichetta per il

nome del campo:nome del campo:<fieldset><fieldset>

<legend>Dati anagrafici</legend><legend>Dati anagrafici</legend>

<label>Anno di nascita: <input type=“text”></label><label>Anno di nascita: <input type=“text”></label>


6464

HTML: form – Il tag inputHTML: form – Il tag input Per quel che riguarda i campi del form, il tag più utilizzato è Per quel che riguarda i campi del form, il tag più utilizzato è

<input><input>, che è senza chiusura. Per specificare un , che è senza chiusura. Per specificare un

determinato tipo di campo è sufficiente indicare il tipo di determinato tipo di campo è sufficiente indicare il tipo di

input:input:

<input type=“text”> (crea un campo di testo) <input <input type=“text”> (crea un campo di testo) <input

type=“button”> (crea un bottone).type=“button”> (crea un bottone).

I vari I vari <input><input> sono dotati di attributi che consentono di sono dotati di attributi che consentono di

indicare il tipo di campo, il nome (ad esempio, per interagire indicare il tipo di campo, il nome (ad esempio, per interagire

con JavaScript), e il valore (per lo più il testo visualizzato): con JavaScript), e il valore (per lo più il testo visualizzato):

<input type=“text” name=“tuoTesto” value=“qui il tuo testo”><input type=“text” name=“tuoTesto” value=“qui il tuo testo”>

6565

I bottoni (submit, reset)I bottoni (submit, reset) Creare un bottone di invio:Creare un bottone di invio:

<input type=“submit” value=“Invia i dati”><input type=“submit” value=“Invia i dati”>

<form action=“http://www.dsi.unifi.it” target=“_blank”><form action=“http://www.dsi.unifi.it” target=“_blank”>

<input type=“submit” value=“visita www.dsi.unifi.it”><input type=“submit” value=“visita www.dsi.unifi.it”>

</form></form>

Un altro bottone utile è il Un altro bottone utile è il “reset” “reset” che, una volta premuto, consente che, una volta premuto, consente

di riportare il form allo stato originario:di riportare il form allo stato originario:

<form><form>

<input type=“text”><br><input type=“text”><br>

<input type=“reset” value=“Cancella”><input type=“reset” value=“Cancella”>

</form></form>

6666

Campo testo, textarea, passwordCampo testo, textarea, password Per consentire all’utente di inserire del testo è possibile utilizzare un Per consentire all’utente di inserire del testo è possibile utilizzare un

campo testocampo testo. Se il campo è su una singola linea avremo:. Se il campo è su una singola linea avremo:

<input name=“mioTesto” type=“text” value=“qui il tuo testo” size=“40” <input name=“mioTesto” type=“text” value=“qui il tuo testo” size=“40”

maxlength=“200”>maxlength=“200”>

• ““maxlength”maxlength” indica il numero massimo di caratteri che l’utente può indica il numero massimo di caratteri che l’utente può

inserire, con inserire, con “size” “size” si esprimono invece le dimensioni del campo di testo.si esprimono invece le dimensioni del campo di testo.

• Se si ha la necessità di indicare un campo che consenta di inserire una Se si ha la necessità di indicare un campo che consenta di inserire una

grande quantità di testo conviene invece utilizzare una grande quantità di testo conviene invece utilizzare una “textarea”“textarea”

<textarea name=“testo” cols =“40” rows=“10”>qui puoi <textarea name=“testo” cols =“40” rows=“10”>qui puoi

scrivere il tuo scrivere il tuo testo</textarea>testo</textarea>

6767

Campo testo, textarea, passwordCampo testo, textarea, password

Esiste infine il Esiste infine il campo password campo password che che

codifica i caratteri inseriti con degli codifica i caratteri inseriti con degli

asterischi:asterischi:

<input name=“mioTesto” type=“password” <input name=“mioTesto” type=“password”

size=“18” maxlength=“8”>size=“18” maxlength=“8”>

6868

Scelte: CheckboxScelte: Checkbox Con i checkbox possiamo consentire all’utente di operare delle scelte Con i checkbox possiamo consentire all’utente di operare delle scelte

multiple:multiple:

<fieldset><fieldset>

<legend>Linguaggi conosciuti</legend><br><legend>Linguaggi conosciuti</legend><br>

<input type=“checkbox” name=“html” value=“html”>html<input type=“checkbox” name=“html” value=“html”>html

<br><br>

<input type=“checkbox” name=“css” value=“css”>css<input type=“checkbox” name=“css” value=“css”>css

<br><br>

<input type=“checkbox” name=“javascript” <input type=“checkbox” name=“javascript”

value=“javascript”>JavaScriptvalue=“javascript”>JavaScript


• Si possono anche selezionare uno o più valori di default:Si possono anche selezionare uno o più valori di default:

<input name=“html” type=“checkbox” value=“html” <input name=“html” type=“checkbox” value=“html” checkedchecked>>

• È possibile disabilitare una casella:È possibile disabilitare una casella:

<input name=“html” type=“checkbox” value=“html” <input name=“html” type=“checkbox” value=“html” disableddisabled>>

6969

Scelte: RadiobuttonScelte: Radiobutton I I “radio button”“radio button” invece consentono di effettuare una scelta esclusiva. In invece consentono di effettuare una scelta esclusiva. In

questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i

campi devono avere lo stesso nome e differente valore:campi devono avere lo stesso nome e differente valore:


<legend>Linguaggi conosciuti</legend><legend>Linguaggi conosciuti</legend>

HTML<input type=“radio” name=“linguaggio” value=“html”>HTML<input type=“radio” name=“linguaggio” value=“html”>

CSS<input type=“radio” name=“linguaggio” value=“css”>CSS<input type=“radio” name=“linguaggio” value=“css”>

JavaScript<input type=“radio” name=“linguaggio” value=“javascript”>JavaScript<input type=“radio” name=“linguaggio” value=“javascript”>


Anche in questo caso è possibile assegnare un valore di default o disabilitare Anche in questo caso è possibile assegnare un valore di default o disabilitare

un pulsante:un pulsante:

<input type=“radio” name=“linguaggio” value=“html” <input type=“radio” name=“linguaggio” value=“html” checked\checked\

disableddisabled>>

7070

Scelte: Menu di opzioni (select)Scelte: Menu di opzioni (select) Grazie al tag Grazie al tag <select><select> è possibile costruire dei menu di opzioni. In questo è possibile costruire dei menu di opzioni. In questo

caso ciascuna voce deve essere compresa all’interno del tag caso ciascuna voce deve essere compresa all’interno del tag <option><option> (la (la

chiusura del tag è opzionale) e il valore deve essere specificato attraverso chiusura del tag è opzionale) e il valore deve essere specificato attraverso

l’attributo l’attributo “value”“value”. Con l’attributo . Con l’attributo “selected”“selected” si può indicare una scelta si può indicare una scelta

predefinita:predefinita:


<legend>Siti per webmaster</legend><legend>Siti per webmaster</legend>

<select name=“siti”><select name=“siti”>

<option value=“http://www.html.it” selected>www.html.it<option value=“http://www.html.it” selected>www.html.it

<option value=“http://freephp.html.it”>freephp.html.it<option value=“http://freephp.html.it”>freephp.html.it

<option value=“http://freasp.html.it”>freasp.html.it<option value=“http://freasp.html.it”>freasp.html.it

</select></select>


7171

Scelte: Menu di opzioni (select)Scelte: Menu di opzioni (select) Nell’HTML 4 è stato introdotto il tag Nell’HTML 4 è stato introdotto il tag <optgroup><optgroup> che consente di suddividere le varie che consente di suddividere le varie

possibilità di scelta in gruppi tramite l’utilizzo di apposite etichettepossibilità di scelta in gruppi tramite l’utilizzo di apposite etichette

<select name=“siti”><select name=“siti”>

<optgroup label=“siti per webmaster”><optgroup label=“siti per webmaster”>

<option value=http://www.html.it>www.html.it<option value=http://www.html.it>www.html.it

<option value=http://freephp.html.it>freephp.html.it<option value=http://freephp.html.it>freephp.html.it


</optgroup></optgroup>

<optgroup label=“risorse per webmaster”><optgroup label=“risorse per webmaster”>

<option value=http://font.html.it>font.html.it<option value=http://font.html.it>font.html.it

<option value=http://cgipoint.html.it>cgipoint.html.it<option value=http://cgipoint.html.it>cgipoint.html.it

</optgroup></optgroup>

</select></select>

7272

Scelte: Menu di opzioni (select)Scelte: Menu di opzioni (select) Infine con il tag Infine con il tag selectselect è possibile impostare anche delle scelte multiple. Come si può è possibile impostare anche delle scelte multiple. Come si può

vedere, utilizzando l’attributo vedere, utilizzando l’attributo “multiple”“multiple” l’aspetto del tag select cambia notevolmente l’aspetto del tag select cambia notevolmente

<label>Quali siti visiti?<br><label>Quali siti visiti?<br>

<select name=“siti” <select name=“siti” multiplemultiple>>

<option value=http://www.html.it>www.html.it<option value=http://www.html.it>www.html.it

<option value=http://freephp.html.it>freephp.html.it<option value=http://freephp.html.it>freephp.html.it


<option value=http://font.html.it>font.html.it<option value=http://font.html.it>font.html.it

<option value=http://cgipoint.html.it>cgipoint.html.it<option value=http://cgipoint.html.it>cgipoint.html.it

</select></select>

</label></label>

7373

HTMLHTML HTML ha anche altri tagHTML ha anche altri tag

Molti manuali sono in rete, ad esempio si Molti manuali sono in rete, ad esempio si

veda http://www.html.it/veda http://www.html.it/

Libri: HTML 4.0 flash – ApogeoLibri: HTML 4.0 flash – Apogeo

HTML 4.0 – McGraw HillHTML 4.0 – McGraw Hill