Transcript HTML
HTML
Il linguaggio per creare
pagine per il web
1
World Wide Web
Si basa sul protocollo http ed è la vera novità degli anni ’90.
Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee)
è il più potente mezzo di diffusione telematica di documenti
elettronici.
Mezzo di comunicazione globale, interattivo, multimediale e
ipertestuale ha cambiato radicalmente il modo di
comunicare e di lavorare.
2
Organizzazione di un testo
Accesso sequenziale
3
Organizzazione di un ipertesto
Accesso secondo legami associativi
4
Linguaggi di markup
In un documento il markup è il codice che contiene
le informazioni per la sua formattazione.
5
Linguaggi di markup (II)
Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici
per automatizzare alcune operazioni per la creazione dei documenti.
Esistono programmi per l’elaborazione dei testi di tipo diverso.
•
Gli editor WYSIWYG.
•
Gli editor che usano il concetto di markup.
Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti
•
Il contenuto vero e proprio.
•
Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo
schermo di un PC, ma anche per esempio una stampante).
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
usando semplici editor di testo.
6
File Word (.doc)
7
File Word (.doc)
Aprendo il file
precedente con Blocco
Note si vede il formato
interno di Word e non si
distinguono markup.
8
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.
9
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.
10
HTML
Gli ipertesti del web sono scritti usando il linguaggio HyperText
Markup Language (HTML).
HTML non è un linguaggio di programmazione!
HTML è un linguaggio di markup e permette di descrivere la
disposizione di tutti gli elementi presenti all’interno di un
documento.
I documenti HTML sono dei file in formato testo (codice ASCII).
Si possono creare con degli editor di testo dando l’estensione .htm o
.html.
I browser leggono i documenti HTML e li visualizzano interpretando
le specifiche di formattazione in modo sequenziale.
11
HTML: esempio
<html>
<head>
<title>Pagina HTML di prova</title>
</head>
<body>
Utilizzare un editor di testo: in ambiente Windows WordPad va
bene, in ambiente Unix vi per esempio
</body>
</html>
12
HTML: sintassi
<nomecomando>
informazioni
</nomecomando>
Un documento HTML inizia sempre con il tag <html> e termina sempre con il tag
</html>.
NB: il linguaggio HTML è case-insensitive e quindi <HTML>, <html>, <Html> sono tutti
tag leciti (lo stesso vale per gli altri tag).
Suggerimenti:
•
È meglio decidere all’inizio come si scriveranno i tag ed essere consistenti.
•
Per analogia con XHTML (derivato dell’XML e dell’HTML che è case-sensitive) è
consigliabile scrivere tutto in minuscolo.
13
HTML: sintassi (II)
<html>
<head>
caratteristiche del documento
</head>
<body>
documento
</body>
</html>
14
HTML: <head>
<html>
<head>
<title>titolo del documento</title>
<meta name=“keywords” content=“parole chiave qui”>
<meta name=“author” content=“nome e cognome qui”>
</head>
…………………………
…………………………
</html>
15
HTML: <head>
Questa sezione del documento contiene
informazioni non immediatamente percepibili, ma
che riguardano il modo in cui il documento deve
essere letto ed interpretato.
È la parte del documento dove vengono inseriti i
metatag (alcuni sono ad esclusivo beneficio dei
motori di ricerca), script JavaScript o VbScript, i
fogli di stile, ecc.
16
HTML: <body>
<html>
<head>
<title>titolo del documento</title>
</head>
<body lista di opzioni>
documento vero e proprio
</body>
</html>
17
HTML: <body>
<body
bgcolor=“colore sfondo”
background=“nome file con l’immagine”
text=“colore testo”
link=“colore link da visitare”
vlink=“colore link visitato”
alink=“colore link selezionato”
>
NB: l’ordine in cui si scrivono gli attributi non è importante.
18
HTML: <body>
bgcolor=“red”
bgcolor=“yellow”
bgcolor=“#00ffff”
text=“#eeeeee”
link=“#ffffff”
background=“images/sfondo.gif”
<body text= “white” link=“#cc0000” background=“images/sabbia.gif>
19
HTML: <body>
<html>
<head>
<title>Esempio Sfondo</title>
</head>
<body background=“morgagni.jpg”
bgcolor=“B7D1E1”>
Qui il nostro contenuto
</body>
</html>
20
HTML: RGB
Ogni colore può essere codificato mediante tre
numeri compresi tra 0 e 255 che rappresentano le
quantità di ROSSO VERDE e BLU presenti nel colore
stesso.
Ogni numero compreso tra 0 e 255 deve essere
trasformato nella rappresentazione esadecimale
corrispondente (base 16).
Con questa codifica si possono rappresentare più di
16,7 milioni di colori diversi.
21
HTML: RGB (II)
NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare
spazi vuoti tra le cifre.
22
HTML: titoli
Il documento inserito nel <body> viene
visualizzato 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>
23
HTML: esempio
<html>
<head>
<title>Esempio 2</title>
</head>
<body bgcolor=“green” text=“white”>
<h1>Titolo importante</h1>
<h2>Titolo meno importante</h2>
<br><br>
Hello world hello world hello world hello world
<br><br>
Hello world hello world hello world hello world
</body>
</html>
24
HTML: caratteri
Formato dei caratteri:
• <b> grassetto </b>
• <i> corsivo </i>
• <em> enfatizzato </em>
• <code> codice </code>
• <strong> grassetto </strong>
• <font size=“3”> testo </font>
• <font color=“blue”> … </font>
• <font face=“Arial”> … </font>
25
HTML: allineamento
Allineamento:
• <p align=“center”>
• <p align=“right”>
• <p align=“justify”>
• <center> testo da centrare </center>
26
HTML: elenchi
<ul> e <li> (unordered list)
<ul>
<li>primo elemento</li>
<li>secondo elemento</li>
</ul>
<ol> e <li> (ordered list)
<ol>
<li>primo elemento</li>
<li>secondo elemento</li>
</ol>
27
HTML: esempio
<html>
<head>
<title>Esempio 3</title>
</head>
<body bgcolor=“red” text=“white”>
<br><br><br>
<ol>
<li><font color=“#0000ff” face=“Courier”> Primo elemento della lista </font></li>
<li> Secondo elemento della lista </li>
<li><font size=+2> Terzo elemento della lista </font></li>
</ol>
</body>
</html>
28
HTML: altri marcatori
Linee orizzontali <hr>:
<hr width=“90%” size=3>
Testo lampeggiante (solo per Netscape):
<blink> questo testo lampeggia </blink>
Testo scorrevole (solo per Explorer):
<marquee> questo testo scorre </marquee>
Commenti:
<!-- questo testo non viene visualizzato -->
29
HTML: <a href>
Link
<a> ……… </a>
<a href=“URL”>testo del link</a>
Gli indirizzi per “trovare” i documenti nel web sono
detti Uniform Resource Locator (URL) e li
identificano in modo univoco.
protocollo://indirizzo internet del server/pathname
30
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>
31
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>
32
HTML: link interni (ancore)
Link interni allo stesso documento: si usa
l’attributo name del tag <a>.
33
HTML: link interni (ancore) (II)
Si devono marcare quelle porzioni del documento
dove si vuole saltare.
34
HTML: link interni (ancore) (III)
Per i link interni si deve usare nell’attributo href il nome scelto
come valore dell’attributo name, preceduto dal simbolo #.
35
HTML: <IMG>
<img
src=“nome file dell’immagine”
align=“left” | “right” | “center”
border=“numero”
height=“numero”
width=“numero”
hspace=“numero”
vspace=“numero”
alt=“testo alternativo all’immagine”>
NB: l’immagine deve essere su un file a parte in formato GIF, PNG o JPEG (BMP solo
per Explorer).
36
HTML: esempio
<html>
<head>
<title>Prova di documento</title>
</head>
<body bgcolor=“white” text=“green”>
<center>
<hr size=“2” width=“400”>
<br><br>
<img src=“C:\Documents and Settings\All
Users\Documenti\Immagini\Immagini campione\Inverno.jpg”
alt=“l’inverno”>
<br><br>
<hr size=“2” width=“400”>
<img src=“C:\Documents and Settings\All
Users\Documenti\Immagini\Immagini campione\Tramonto.jpg” alt=“il
tramonto”>
<br><br>
<hr size=“2” width=“400”>
<br><br>
</center>
</body>
</html>
37
HTML: audio
Formati audio
.au .aiff .mid .wav
<a href=“nome file audio”>clicca qui</a>
<bgsound src=“nome file audio” loop=“10”>
NB: bgsound fa partire l’audio quando si entra
nella pagina ma funziona solo in Explorer.
38
HTML: video
Formati video
.mpeg .avi .mov
<a href=“nome file video”>clicca qui</a>
<img dynsrc=“nome file video” src=“nome file
immagine”>
NB: dynsrc fa partire automaticamente il
video ma funziona solo in Explorer.
39
HTML: tabelle
Per creare una tabella in HTML si usano i tag:
<table>
</table>
all’interno dei quali si deve definire il contenuto della tabella.
Per definire una tabella si procede nel modo seguente:
• Si realizza la prima riga facendo uso del tag <tr> (table row)
• Si indicano le varie celle facendo uso:
Del tag <th> per le intestazioni di cella </th> (table header).
Del tag <td> per i dati della cella </td> (table data).
• Si passa alla seconda riga con le relative celle avendo cura di
usare il tag </tr>.
40
HTML: <table>
<html>
<head>
<title>Esempio tabella</title>
</head>
<body bgcolor=“white” text=“green”>
<center>
Tabella
<table border=1>
<tr>
<th>Uno</th> <th>Due</th>
</tr>
<tr>
<td>aaaaaaaaaa</td><td>bbbbbbbb</td>
</tr>
<tr>
<td>ccccccccc</td><td>ddddddddd</td>
</tr>
</table>
</center>
</body>
</html>
41
HTML: tabelle
42
HTML: <table> (II)
<table
width=“larghezza della tabella”
cellpadding=“numero”
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 espresso
in percentuale. Di default la distanza è nulla.
cellspacing=“numero”
specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è
un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri.
border=“numero”
specifica la larghezza dei bordi di una tabella (in pixel).
bgcolor=“colore sfondo tabella”
>
43
<table width=“80%” cellpadding=“5” bgcolor=“#ff3300”>
HTML: <td> <th>
<td (th)
width=“dimensione della cella”
colspan=“numero”
rowspan=“numero”
bgcolor=“colore sfondo cella”
align=”right” | ”left” | ”center”
valign=“top” | “bottom” | “middle”
nowrap
>
<td width=“100” bgcolor=“#0033aa” align=“right”>
44
HTML: esempio
<html>
<head>
<title>Esempio di tabella</title>
</head>
<body>
<center>
<table border=“4”>
<tr>
<td bgcolor=“#ff0000”>…una tartaruga</td>
<td align=“center”><img src=“…/images/tartaruga.gif”
alt=“una tartaruga”></td>
</tr>
<tr>
<td align=“center”><img src=“…/images/pinguini.gif” alt=“dei
pinguini”></td>
<td bgcolor=“#00ff00” align=“right”>…dei pinguini</td>
</tr>
</table>
</center>
</body>
</html>
45
HTML: tabelle
Le tabelle si usano anche per organizzare gli
elementi all’interno di una pagina.
Per fare questo non si visualizzano i bordi.
<table border=“0”>
righe e colonne
<\table>
46
HTML: frame
I frame servono per suddividere il browser in parti indipendenti
all’interno delle quali si possono caricare documenti HTML diversi.
È necessario innanzitutto realizzare un file HTML che definisca la
struttura della pagina (ovvero la sua suddivisione in parti
indipendenti).
Il tag <frameset> serve per creare una pagina strutturata in frame.
<frameset> </frameset>
<noframes> </noframes>
<frameset> sostituisce il comando <body>
47
HTML: <frameset>
<frameset> ha due attributi:
• rows divide lo schermo in righe orizzontali;
• cols divide lo schermo in colonne verticali.
Le dimensioni delle righe e delle colonne possono
essere espresse in pixel oppure in percentuale.
Tra gli altri attributi si può usare frameborder per
associare un bordo alle varie porzioni dello schermo
(esteticamente discutibile).
48
HTML: <frame>
All’interno di ogni porzione di interfaccia del browser si deve
aprire un documento usando il tag <frame>
<frame
src=“file HTML da aprire nel frame”
name=“nome della finestra”
scrolling=“yes” | “no” | “auto”
noresize
marginwidth=“numero”
marginheight=“numero”
>
49
HTML: <frameset> (II)
<html>
<head>
<title>Esempio frame</title>
</head>
<frameset rows=“50%,50%” cols=“50%,50%”>
<frame src=“prima.html”>
<frame src=“seconda.html”>
<frame src=“terza.html”>
<frame src=“quarta.html”>
<noframes>
<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>
</noframes>
</frameset>
</html>
50
HTML: target
In una struttura a frames può apparire difficile caricare il
contenuto di un link nella sezione appropriata.
Grazie all’attributo target possiamo specificare qual è la
destinazione del link; con questa sintassi siamo dunque in
grado di caricare il contenuto di un collegamento nel riquadro
che riteniamo più opportuno:
<a href=“paginaDaLinkare.html” target=“nomeDelFrame”>
51
HTML: target (esempi)
Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link
in destinazioni predefinite:
• target=“_blank”. Apre il link in una nuova finestra, senza nome;
• target=“_self”. Apre il link nel frame stesso (è così di default);
• target=“_parent”. Il documento viene caricato nel frameset precedente a
quello corrente (più esattamente nel frame genitore);
• target=“_top”. Il documento viene caricato nella finestra originale,
cancellando ogni struttura a frame (si noti la differenza con “_parent”).
Più precisamente il documento viene caricato nella parte più alta (“top”)
della struttura, ed è questo il motivo per cui il frameset stesso viene
annullato e sostituito dal contenuto del link.
52
HTML: mappe d’immagine
Una mappa d’immagine è un’immagine cui
si possono associare link diversi.
È necessario avere il file dell’immagine (.gif
o .jpeg) e una specifica della mappatura,
cioè l’indicazione di quali parti
dell’immagine sono attive e quali no.
53
HTML: <map>
<html>
<head>
<title>Esempio map</title>
</head>
<body background=“bckgrnd.gif”>
<center>
<map name=“picture”>
<area
<area
<area
<area
href=“form.html” shape=“rect” coords=“3,122,73,143” alt=“Go to the form”>
href=“contact.html” shape=“rect” coords=“109,123,199,142” alt=“Go to the contact page”>
href=“main.html” shape=“rect” coords=“1,2,72,17” alt=“Go to the homepage”>
href=“links.html” shape=“rect” coords=“155,0,199,18” alt=“Go to the links page”>
<area href=“mailto:[email protected]” shape=“poly”
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”>
<\map>
<img src=“deitel.gif” width=“200” height=“144” border=“1” alt=“Harvey and Paul Deitel”
usemap=“#picture”>
</center>
</body>
</html>
54
HTML: <map>
Come si possono mappare le regioni
italiane?
55
HTML: form
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
(ad esempio mailing list).
Per organizzare questo genere di servizi è necessario raccogliere in qualche
modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i
moduli (cioè i form).
L’invio dei dati è solitamente organizzato in due parti:
•
Una pagina principale che contiene i vari campi del form, che consentono
all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine …
•
Una pagina secondaria 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
pagina di programmazione che si trova sul server. Può essere un cgi, oppure una
pagina asp, php, jsp o altro.
In questa parte ci occuperemo della sola pagina principale.
56
HTML: form (name e action)
Per creare una pagina con dei moduli, bisogna usare l’apposito tag <form>
<form name=“datiUtenti” action=“paginaRisposta.php”>
…………
</form>
Come si può vedere, “name” serve per indicare il nome del form, “action”
indica l’URL del programma o della pagina di risposta che processerà i dati.
Grazie all’ “action” è 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).
<form action=mailto:[email protected]?subject=Oggetto predefinito”
enctype=“text/plain” method=“POST”>
57
HTML: form (metodo)
Quando creiamo un form possiamo scegliere due metodi di invio: GET e
POST.
•
Con il metodo GET 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
parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè
nella “stringa di interrogazione”) secondo questa forma:
http://www.html.it/esempioForm/paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&
datiInviati=prova+invio
•
I dati (nella forma nome del campo=valore del campo) sono appesi alla pagina
dopo il punto interrogativo.
•
Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GET e
non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il
metodo GET è dunque particolarmente indicato per form con pochi campi e pochi
dati da inviare. La sintassi per l’invio in GET è:
<form name=“datiUtenti” action=“paginaRisposta.php” method=“GET”>
58
HTML: form (metodo)
Nel metodo POST invece l’invio dei dati avviene in
due step distinti: prima viene contattata la pagina
sul server che deve processare i dati, e poi
vengono inviati i dati stessi. Per questo motivo i
parametri non compaiono nella query string.
• In questo caso non ci sono limiti sulla lunghezza dei
caratteri. La sintassi è:
<form name=“datiUtenti” action=“paginaRisposta.php”
method=“POST”>
59
HTML: form (Enctype)
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
esempio gli spazi vengono convertiti in “+”).
Normalmente non è necessario specificare come si vuole effettuare la codifica
dei dati, perché è sottinteso l’invio di semplice testo.
A volte però, come quando è necessario inviare un’immagine, è tuttavia
indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo
è necessario inviare l’attributo “enctype” (“encoding type”, cioè “tipo di
codifica”).
<form name=“datiUtenti” action=“paginaRisposta.php” enctype=“text/plain”>
Ma nel caso di invio di immagini dovremo dichiarare:
<form name=“datiUtenti” action=“paginaRisposta.php” method=“post”
enctype=“multipart/form-data”>
60
HTML: form (target)
Grazie all’attributo “target” è possibile far
aprire i dati del form in una pagina
differente rispetto a quella corrente o in una
determinata parte di un frameset:
<form name=“datiUtenti”
action=“paginaRisposta.php” method=“get”
target=“_blank”>
61
HTML: form - raggruppare i moduli
Con l’HTML4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno
dei form.
Grazie al tag <fieldset> possiamo creare delle macro-aree all’interno dei
form, e grazie al tag <legend> possiamo indicare il nome di ciascuna
macro-area.
•
Es.: raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio
e reperibilità sul lavoro:
<fieldset>
<legend>Dati anagrafici</legend>
<br><br><br>
</fieldset>
<fieldset>
<legend>Residenza</legend>
<br><br><br>
</fieldset>
62
HTML: form - raggruppare i moduli
Un altro tag particolarmente utile – si può
utilizzare con ogni tipo di campo che
vedremo d’ora in poi – è il tag <label>,
che permette di indicare un’etichetta per il
nome del campo:
<fieldset>
<legend>Dati anagrafici</legend>
<label>Anno di nascita: <input type=“text”></label>
</fieldset>
63
HTML: form – Il tag input
Per quel che riguarda i campi del form, il tag più utilizzato è
<input>, che è senza chiusura. Per specificare un
determinato tipo di campo è sufficiente indicare il tipo di
input:
<input type=“text”> (crea un campo di testo) <input
type=“button”> (crea un bottone).
I vari <input> sono dotati di attributi che consentono di
indicare il tipo di campo, il nome (ad esempio, per interagire
con JavaScript), e il valore (per lo più il testo visualizzato):
<input type=“text” name=“tuoTesto” value=“qui il tuo testo”>
64
I bottoni (submit, reset)
Creare un bottone di invio:
<input type=“submit” value=“Invia i dati”>
<form action=“http://www.dsi.unifi.it” target=“_blank”>
<input type=“submit” value=“visita www.dsi.unifi.it”>
</form>
Un altro bottone utile è il “reset” che, una volta premuto, consente
di riportare il form allo stato originario:
<form>
<input type=“text”><br>
<input type=“reset” value=“Cancella”>
</form>
65
Campo testo, textarea, password
Per consentire all’utente di inserire del testo è possibile utilizzare un
campo testo. Se il campo è su una singola linea avremo:
<input name=“mioTesto” type=“text” value=“qui il tuo testo” size=“40”
maxlength=“200”>
• “maxlength” indica il numero massimo di caratteri che l’utente può
inserire, con “size” si esprimono invece le dimensioni del campo di testo.
• Se si ha la necessità di indicare un campo che consenta di inserire una
grande quantità di testo conviene invece utilizzare una “textarea”
<textarea name=“testo” cols =“40” rows=“10”>qui puoi scrivere il tuo
testo</textarea>
66
Campo testo, textarea, password
Esiste infine il campo password che
codifica i caratteri inseriti con degli
asterischi:
<input name=“mioTesto” type=“password”
size=“18” maxlength=“8”>
67
Scelte: Checkbox
Con i checkbox possiamo consentire all’utente di operare delle scelte
multiple:
<fieldset>
<legend>Linguaggi conosciuti</legend><br>
<input type=“checkbox” name=“html” value=“html”>html
<br>
<input type=“checkbox” name=“css” value=“css”>css
<br>
<input type=“checkbox” name=“javascript” value=“javascript”>JavaScript
</fieldset>
•
Si possono anche selezionare uno o più valori di default:
<input name=“html” type=“checkbox” value=“html” checked>
•
È possibile disabilitare una casella:
<input name=“html” type=“checkbox” value=“html” disabled>
68
Scelte: Radiobutton
I “radio button” invece consentono di effettuare una scelta esclusiva. In
questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i
campi devono avere lo stesso nome e differente valore:
<fieldset>
<legend>Linguaggi conosciuti</legend>
HTML<input type=“radio” name=“linguaggio” value=“html”>
CSS<input type=“radio” name=“linguaggio” value=“css”>
JavaScript<input type=“radio” name=“linguaggio” value=“javascript”>
</fieldset>
Anche in questo caso è possibile assegnare un valore di default o disabilitare
un pulsante:
<input type=“radio” name=“linguaggio” value=“html” checked\disabled>
69
Scelte: Menu di opzioni (select)
Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo
caso ciascuna voce deve essere compresa all’interno del tag <option> (la
chiusura del tag è opzionale) e il valore deve essere specificato attraverso
l’attributo “value”. Con l’attributo “selected” si può indicare una scelta
predefinita:
<fieldset>
<legend>Siti per webmaster</legend>
<select name=“siti”>
<option value=“http://www.html.it” selected>www.html.it
<option value=“http://freephp.html.it”>freephp.html.it
<option value=“http://freasp.html.it”>freasp.html.it
</select>
</fieldset>
70
Scelte: Menu di opzioni (select)
Nell’HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie
possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette
<select name=“siti”>
<optgroup label=“siti per webmaster”>
<option value=http://www.html.it>www.html.it
<option value=http://freephp.html.it>freephp.html.it
<option value=“http://freasp.html.it”>freasp.html.it
</optgroup>
<optgroup label=“risorse per webmaster”>
<option value=http://font.html.it>font.html.it
<option value=http://cgipoint.html.it>cgipoint.html.it
</optgroup>
</select>
71
Scelte: Menu di opzioni (select)
Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può
vedere, utilizzando l’attributo “multiple” l’aspetto del tag select cambia notevolmente
<label>Quali siti visiti?<br>
<select name=“siti” multiple>
<option value=http://www.html.it>www.html.it
<option value=http://freephp.html.it>freephp.html.it
<option value=“http://freasp.html.it”>freasp.html.it
<option value=http://font.html.it>font.html.it
<option value=http://cgipoint.html.it>cgipoint.html.it
</select>
</label>
72
HTML
HTML ha anche altri tag
Molti manuali sono in rete, ad esempio si
veda http://www.html.it/
Libri: HTML 4.0 flash – Apogeo
HTML 4.0 – McGraw Hill
73