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: 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.
20
HTML: RGB (II)
NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare
spazi vuoti tra le cifre.
21
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>
22
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>
23
HTML: allineamento

Allineamento:
• <p align=“center”>
• <p align=“right”>
• <p align=“justify”>
• <center> testo da centrare </center>
24
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>
25
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 -->
26
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
27
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>
28
HTML: link interni (ancore)

Link interni allo stesso documento: si usa
l’attributo name del tag <a>.
29
HTML: link interni (ancore) (II)

Si devono marcare quelle porzioni del documento
dove si vuole saltare.
30
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 #.
31
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).
32
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.
33
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.
34
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>.
35
HTML: tabelle
36
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”
>
37
<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”>
38
HTML: tabelle

Le tabelle si usano principalmente per
organizzare gli elementi all’interno di una
pagina.

Per fare questo non si visualizzano i bordi.
<table border=“0”>
righe e colonne
<\table>
39
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>
40
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).
41
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”
>
42
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”>
43
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.
44
HTML: image map

Una image map è 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.
45
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>
46
HTML: <map>

Come si possono mappare le regioni
italiane?
47
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.
48
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”>
49
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”>
50
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”>
51
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”>
52
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”>
53
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>
54
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>
55
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”>
56
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>
57
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>
58
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”>
59
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>
60
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>
61
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>
62
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>
63
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>
64
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
65
Scarica

HTML - Dipartimento di Ingegneria dell`Informazione