Creazione di ipertesti in
HTML
Cristina Gena
[email protected]
http://www.di.unito.it/˜cgena/master.html
1
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
Linguaggio base per produrre documenti per World Wide Web
(WWW o WEB, ragnatela mondiale di informazioni..)
Documenti WEB
pagine
ipertestuali
che
contengono
contenuti
multimediali
•
testo
•
immagini
•
suoni
•
legami ipertestuali a
altre pagine
programmi
immagini, suoni, ...
Pagine localizzate su server web e visualizzate da un client
2
(browser)
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
L'Ipertesto è un insieme di testi o pagine leggibili con l'ausilio
di un'interfaccia elettronica, in maniera non sequenziale,
grazie a particolari parole che si chiamano hyperlink (rimandi),
che costituiscono un rete raggiata o variamente incrociata di
informazioni organizzate secondo criteri paritetici o
gerarchici.(http://it.wikipedia.org/wiki/Ipertesto )
home page:
pagina papers:
link1
link3
pagina di
unito
link2
pagina del
corep
link4
cristina gena - matec 2006/2007
3
HTML
HyperText Markup
Language
Si parla di contenuti multimediali, specie in ambito
informatico, quando per comunicare un'informazione
riguardo a qualcosa ci si avvale di molti media, cioè
mezzi di comunicazione di massa, diversi: immagini in
movimento (video), immagini statiche (fotografie),
musica
e
testo.
(http://it.wikipedia.org/wiki/Multimedialit%C3%A0)
4
cristina gena - matec 2006/2007
5
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
Per visualizzare le pagine HTML si usano programmi
chiamati Web browser (Netscape Navigator, Microsoft
Internet Explorer, FireFox, Opera....)
Le pagine HTML sono trasferite attraverso la rete
Internet usando un protocollo particolare HTTP
(HyperText Transfer Protocol) costruito al di sopra di
TCP/IP (base di Internet) e localizzate mediante un ben
preciso sistema di indirizzamento: URL (Uniform
Resource Locator)
6
cristina gena - matec 2006/2007
Architettura client-server
Un server è programma “in ascolto” su una porta
TCP. Quando arriva una richiesta da un client, il
server analizza questa richiesta (eventualmente
con l’aiuto di altri programmi), elabora una risposta
(anche in questo caso, eventualmente con l’aiuto di
altri programmi ) e la invia al client.
Un client è un programma che si connette ad un
server, fa una richiesta ed aspetta una risposta.
Un server, generalmente, può servire più client
contemporaneamente.
request
Server
client
response
7
cristina gena - matec 2006/2007
Come funziona il Web
HTTP
Http (HyperText Transfer Protocol) è il
protocollo di comunicazione utilizzato da un
client (browser) e da un server (HTTP
Server) per trasferire file ipertestuali
URL
Un URL (Uniform Resource Locator) è
l’indirizzo di una risorsa, per es., di una
pagina Web.
Ha la seguente forma:
http://www.di.unito.it/cgena/index.html
protocollo nome di dominio del sito
path
cristina gena - matec 2006/2007
nome del file
8
Come funziona il Web
Nel caso più semplice l'URL contiene l'indirizzo di
una pagina HTML (per es.
http://www.di.unito.it/~cgena/pub.html):
il contenuto è fisso, definito nel momento in cui la
pagina HTML viene scritta
Pagine Web "dinamiche" (asp, php, jsp, …) = pagine
il cui contenuto viene generato (selezionato,
composto) al momento della richiesta
Server
elaborazion
e

request
(pagina)
client
?
client
Server
pagina
Server
cristina gena - matec 2006/2007
response
(pagina)
client
9
HTML -
HyperText Markup
Language
HTML è un linguaggio di formattazione di documenti
Un documento HTML è un file di testo (file ASCII) contenente
dei comandi per
•
formattazione
•
strutturazione del layout
•
inserimento di parti multimediali
•
link ipertestuali
10
cristina gena - matec 2006/2007
HTML -
HyperText Markup
Language
I comandi (TAG) hanno una forma sintattica particolare
<nomeTag>informazioni </nomeTag>
<nomeTag attributo=“valore”>informazioni </ nomeTag >
I comandi (tag) generalmente hanno nomi mnemonici e
significativi…
11
cristina gena - matec 2006/2007
Specifiche HTML 4
http://www.w3.org/TR/html401/
12
cristina gena - matec 2006/2007
Pagina
visualizzata nel
browser
Codice html della pagina
13
cristina gena - matec 2006/2007
HTML
Un documento HTML è costituito da due parti**
<html>
<head>
descrizione delle caratteristiche del documento
</head>
<body>
documento vero e proprio
</body>
</html>
** abituiamoci da subito a scrivere i tag minuscoli…(vedremo
14
più avanti perché)
cristina gena - matec 2006/2007
HTML
Proviamo subito a costruire il nostro primo file HTML ….
Ci servono…
un editor testuale (Blocco Note, Word Pad, …)…
un browser per visualizzare una pagina (Explorer,
Firefox)
Esistono dei programmi che creano automaticamente il codice
(es. Macromedia Dreamweaver) in base ad azioni “user
friendly”….ma li vedrete in un altro corso 
15
cristina gena - matec 2006/2007
HTML
HEAD
Contiene informazioni molto importanti, per la maggior parte
invisibili, tranne il titolo del documento che verrà visualizzato
come titolo nella finestra del browser
<head>
<title>
master in tecnologia e comunicazione multimediale
</title>
</head>
ATTN: poiché il titolo viene usato anche per costruire gli indici
automatici usati dai motori di ricerca è importante che esso sia
significativo
16
cristina gena - matec 2006/2007
Informazioni
invisibili
HTML
IL TAG META
<meta name=“…." content=“…">
N.B <nome-tag attributo=“valore”>
<head>
<meta name="keywords" content=“master,
comunicazione, corep, torino">
<meta name="description" content=“master organizzato
dal corep in collaborazione…">
<meta name=“author" content=“cristina gena">
</head>
cristina gena - matec 2006/2007
17
HTML
BODY
Contiene tutto quello che verrà visualizzato secondo le
direttive di formattazione.
<body> corpo della pagina </body>
Vediamo cosa si può inserire all’interno di body…ma prima
18
cristina gena - matec 2006/2007
HTML
ATTRIBUTI DI BODY
Il tag BODY ha della opzioni che permettono di stabilire….
<body bgcolor="colore sfondo"
text="colore testo"
background="pathname del file con
immagine per lo sfondo"
link="colore link da visitare"
alink="colore link attivo“
vlink="colore link visitati">
19
cristina gena - matec 2006/2007
HTML
Il colore può essere specificato con
• parole chiave: red, yellow, ...
• codice esadecimale: Rosso Verde Blu
rosso verde blu vengono combinati numericamente per
formare tutti i colori usando i numeri 0-9 e le lettere da A a F
es. #000000  nero
es. #FFFFFF  bianco
es. #FF0000  rosso
OSS: di default si ha sfondo bianco, testo nero, link da visitare
blu, , link attiivi rossi, link visitati viola
20
cristina gena - matec 2006/2007
HTML
Tool per scegliere velocemente colori di primo piano e sfondo
http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en
http://web-link.it/html/colori256.htm
www.asciitable.it/colorihtml.asp
21
cristina gena - matec 2006/2007
HTML
I PATHNAME
<body background="file:///c:/wwwroot/cri/img/sfondo.gif“>
Pathname
assoluto
Sconsigliato!
22
cristina gena - matec 2006/2007
Pathname
relativi
HTML
I PATHNAME
<body background="sfondo.gif“>
->è nella stessa cartella della pagina html
<body background=“img/sfondo.gif“>
nella cartella che contiene la pagina
-> è in una cartella img contenuta
<body background=“../img/sfondo.gif“>->
è in una cartella img che sta
allo stesso livello della cartella che contiene la pagina (Sali di una cartella e riscendi)
<body background=“../../img/sfondo.gif“>-> si deve salire di due livelli e
riscendere
23
cristina gena - matec 2006/2007
HTML
HEADERS - I titoli
<h1>
titolo1 </h1>
...
<h6> titolo6 </h6>
permettono di indicare quali parti di testo vengono usate
come titoli
OSS: H1, ..., H6 sono usati anche per controllare le dimensioni
dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a
caratteri piccoli
24
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
COMANDI PER ANDARE A CAPO
<br>
a capo senza saltare una riga
<p>
a capo saltando una riga
<p>testo e/o immagini</p> per ogni paragrafo (separato da
una linea)
•
HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi. Ma XHTML
si!!
25
• HTML non è sensibile agli spazi e alle linee vuote
cristina gena - matec 2006/2007
HTML
IL CARATTERE
<font>…</font>
Questo tag supporta 3 attributi
•
size per cambiare la dimensione
•
color per cambiare il colore
•
face per cambiare il font
<font size=“5” color="red" face=“Courier New, Courier, mono”>
Questo testo viene visualizzato in
rosso,
ha
dimensione
5
e
font
Courier
26
</font>
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
IL CARATTERE
<font>…</font>
dimensioni dei caratteri da 1 (piccolo) a 7 (grande)
<font size=“3”> testo a dimensione 3 </font>
<font
size=“+1”>
prima</font>
dim+1
del
carattere
stabilito
27
cristina gena - matec 2006/2007
HTML
L’ ALLINEAMENTO
il tag <p> possiede un attributo align per l'allineamento del
testo nel paragrafo
<p align=“left”> testo allineato a sinistra </p>
<p align=“right”> testo allineato a destra </p>
<p align=“center”> testo allineato al centro </p>
L’allineamento al centro si può ottenere anche con il tag
<center>
testo da centrare
</center>
28
cristina gena - matec 2006/2007
HTML
FORMATO DEL CARATTERE
Esistono vari modi per cambiare il formato dei caratteri
•
•
Stili fisici (disuso…)
Stili Logici
•
STILI FISICI
<b> testo </b>
<i> testo </i>
<u> testo </u>
testo in grassetto
testo in corsivo
testo sottolineato (sconsigliato..)
29
cristina gena - matec 2006/2007
HTML
STILI LOGICI
<STRONG> testo </STRONG>
<EM> testo </EM>
{grassetto}
{emphasized (corsivo)}
<CODE> testo </CODE>
{per codice di computer (font con caratteri a
grandezza fissa)}
30
cristina gena - matec 2006/2007
HTML
INDICI E PEDICI
a<SUB> 1 </SUB> produce a1
b<SUP> 2 </SUP> produce b2
31
cristina gena - matec 2006/2007
ESERCIZIO 1
Creare nella vostra cartella un documento HTML chiamato a piacere e con i
seguenti elementi:
A) sfondo: arancio (trovare il codice esadecimale corrispondente).
B) colore per il testo: blu (utilizzare il nome del colore).
D) del testo di colore rosso e in corsivo
E) del testo in grassetto e colore a scelta
centro
F) 1 paragrafo in carattere Arial con font dimensione 2 allineato al
G) 1 paragrafo interno al precedente con il font di dimensione
maggiore in Verdana allineato a destra
PS: Ricordatevi di salvare “.html”
Il testo andate a scaricarlo da una qualsiasi pagina web!!!
32
cristina gena - matec 2006/2007
HTML
Liste di elementi
Può essere utile poter costruire liste di elementi
HTML fornisce 2 tag per creare le liste
•
LISTE NON NUMERATE
•
<ul>  unordered list
1. LISTE NUMERATE
2. <ol>  ordered list
33
cristina gena - matec 2006/2007
HTML
1) Liste non numerate: <UL>
Il menu prevede due primi:
<ul>
<li> penne all’arrabbiata </li>
<li> lasagne al forno </li>
</ul>
<ul> supporta l’attributo type per modificare l’aspetto del
punto elenco
<ul type=“disc”>
<ul type=“circle”>
<ul type=“square”>
cristina gena - matec 2006/2007
34
HTML
2) Liste numerate:<OL>
Il menu prevede due primi
<ol>
<li> penne all’arrabbiata </li>
<li> lasagne al forno </li>
</ol>
Produce
Il menu prevede due primi
1.
penne all’arrabbiata
2.
lasagne al forno
cristina gena - matec 2006/2007
35
HTML
Attributi di <ol>
type={1,A,a,I,i}
start=numero
Il menu prevede due primi
<ol type=“i” start=“3”>
<li> penne all’arrabbiata </li>
<li> lasagne al forno </li>
</ol>
Produce:
Il menu prevede due primi
iii
penne all’arrabbiata
iv
lasagne al forno
36
cristina gena - matec 2006/2007
HTML
Linee orizzontali
Per separare parti di testo si può usare il tag <hr> che produce
_____________________________________________
Questo tag ha tre opzioni
<hr
size=“numero”
{spessore in pixel}
width=“numero | numero%”
percentuale}
align={left | right}
{larghezza in pixel o in
{allineamento}
color=“codice esadecimale/colore”
>
37
cristina gena - matec 2006/2007
HTML
Testo lampeggiante (SOLO CON NETSCAPE!!!)
Testo, in qualunque forma, che lampeggia in fase di
visualizzazione
<blink> questo testo lampeggia </blink>
testo scorrevole (SOLO CON EXPLORER!!!)
<marquee> testo che scorre </marquee>
38
cristina gena - matec 2006/2007
HTML
Commenti
Può essere utile inserire dei commenti nel documento
che non sono visualizzati dal browser
<!-- Questo è un commento e non si vede -->
39
cristina gena - matec 2006/2007
HTML
Immagini
Fino ad ora abbiamo visto come si può formattare il
testo; HTML permette di inserire immagini usando il tag
<img>
•
l'immagine deve essere memorizzata su un file a
parte
i browser supportano formati quali GIF, JPEG
BITMAP, PNG
•
il tag <img> ha vari attributi
40
cristina gena - matec 2006/2007
HTML
<img
src=“pathname o URL dell'immagine”
align=“left | right”
alt=“text”
all'immagine}
{allineamento}
{testo
alternativo
border=“numero”
height=“numero”
{larghezza in pixel del bordo}
{altezza in pixel}
width=“numero”
{larghezza in pixel}
hspace=“numero”
{spazio orizzontale intorno all'immagine}
vspace=“numero” {spazio verticale intorno l'immagine}
>
41
cristina gena - matec 2006/2007
HTML
ATTENZIONE!
per centrare l’immagine si può usare il tag <center>:
<center>
<img scr=“crifla.jpg”>
</center>
42
cristina gena - matec 2006/2007
HTML
Suoni
È possibile associare suoni alla presentazione di una
pagina usando il tag <bgsound>
Anche i suoni devono essere memorizzati su file a parte
che possono essere di vari formati
•
.AU, .WAV, .MP3, …
•
MIDI (.mid)
Esempi di suoni:
http://www.di.unito.it/~cgena/suoni/
43
cristina gena - matec 2006/2007
HTML
<bgsound
src="pathname | URL del file sonoro"
loop="numero di volte" | "infinite"
>
Il parametro LOOP serve per stabilire quante volte si
deve ripetere il suono. Se assume valore infinite si
ripete il suono fino a quando non si esce dalla pagina
ES:
<bgsound src="suoni/pippo.wav" loop="3">
44
cristina gena - matec 2006/2007
ESERCIZIO 2
Creare una pagina HTML contenentr i seguenti elementi:
- un immagine centrata
- una barra orizzontale
- un paragrafo in corsivo, in Verdana e allineato a destra
- un esempio di apice e pedice
SALVATE L’IMMAGINE NELLA CARTELLA IMG!
45
cristina gena - matec 2006/2007
ESERCIZIO 3
Aggiungete alla pagina dell’esercizio 2:
- una lista non ordinata di 3 elementi (scegliete il type)
- un suono di sfondo che si ripete una volta
- una lista ordinata di tre elementi type=A e che parta dal quarto
elemento.
- un testo scorrevole con dimensioni e colori a scelta
SALVATE IL FILE SONORO NELLA CARTELLA SOUND!!
46
cristina gena - matec 2006/2007
HTML
LEGAMI IPERTESTUALI
Vediamo ora come creare link ipertestuali in una pagina
HTML
Primo passo:
Definizione precisa di URL standard
Un URL è costituito da tre parti
protocollo://indirizzointernet:porta/pathname#label
http://www.di.unito.it:80/cgena/master.html#corep
Il PROTOCOLLO descrive il tipo di collegamento da
realizzare
47
cristina gena - matec 2006/2007
HTML
file:
{per file locali}
http:
{attiva collegamento a server http}
ftp:
{attiva collegamento a server ftp}
news:
{attiva collegamento a server news}
telnet:
{attiva sessione di collegamento remoto}
mailto:
{attiva spedizione di mail}
Il protocollo più
ipertestuali è http
importante
per
i
collegamenti
48
cristina gena - matec 2006/2007
ES:
HTML
file:HTML/pippo.html
{collegamento al file pippo.html in cartella
HTML locale}
http://www.di.unito.it/home.html
{collegamento al file file home.html su
server www.di.unito.it}
ATTENZIONE! www in questo caso è il nome di una macchina nel dominio
di.unito.it
Di solito alle macchine server WWW viene dato
cristina gena - matec 2006/2007
il nome www
49
HTML
• http://www.di.unito.it/cgena/wd.html
{file con pathname cartella/pagina.html}
• mailto:[email protected]
{attiva il programma di invio mail}
• ftp://ftp.di.unito.it/pippo.htm
{attiva trasferimento del file pippo dal
server ftp.di.unito.it}
ATTENZIONE! anche in questo caso ftp è il nome della
macchina ftp-server
50
cristina gena - matec 2006/2007
HTML
• telnet://pianeta.di.unito.it
{attiva finestra di interazione remota}
51
cristina gena - matec 2006/2007
HTML
CREAZIONE DEL LEGAME IPERTESTUALE
Sono coinvolti 2 elemeti
• il testo o l’immagine che fungono da LINK
• il collegamento da attivare
tag ANCHOR: <a>…</a>
<a href=“collegamento da attivare">
testo o immagine che funge da link
</A>
52
cristina gena - matec 2006/2007
HTML
<a href="http://www.di.unito.it/index.html">
questo testo funge da hotword </a>
<a href="mailto:[email protected]">
spedisce una mail a cristina gena </a>
<a href="http://www.di.unito.it/cgena/teaching.html">
</a>
<img src="pippo.jpg“ alt=“vai alla pagina teaching”>
<a href="file:///c:/pippo.html">
collegamento al file locale pippo</a>
53
cristina gena - matec 2006/2007
HTML
LINK A IMMAGINI SUONI E ANIMAZIONI
ESTERNE
Si possono visualizzare immagini, suoni, animazioni
specificando nella URL il nome di un file corrispondente
I formati riconosciuti sono:
 immagini: GIF, JPEG, BITMAP, PNG
 suoni: AIFF, AU, WAV, MP3
 animazioni: .MOV (QuickTime) .AVI .MPEG
54
cristina gena - matec 2006/2007
HTML
<a href="pippo.jpg">
apre l’ immagine di pippo </a>
<a href="pippo.mpeg">
fa partire il filmato di pippo </a>
<a href=“pippo.mp3">
fa partire la canzone di pippo </a>
55
cristina gena - matec 2006/2007
HTML
ATTRIBUTI DEL TAG A
<a href=“pippo.html” title=“vai all’home page di pippo”
target=“_blank”>
• href  indirizzo del collegamento
• title  descrizione della destinazione
• target  destinazione:
•_top, _parent, _self,  per ora non ci interessano
pagina
_blank  apre il collegamento in una nuova
56
cristina gena - matec 2006/2007
HTML
ETICHETTE (ANCORE INTERNE) E SALTI A
SEZIONI
Con il tag <A> è anche possibile etichettare un
punto di un documento con un nome (una label) e
quindi saltare direttamente a quel punto grazie
ad un link
<a name="nome label"> testo a cui saltare </a>
57
cristina gena - matec 2006/2007
HTML
ES:
Nel documento relazione.html esiste l’ancora “cap1”
....
<h1><a name="cap1"> capitolo 1 </a> <h1>
...
in un altro punto dello stesso file si avrà
<a href="#cap1"> vai al capitolo 1 </a>
che consente di saltare all’ancora “cap1”
58
cristina gena - matec 2006/2007
HTML
I collegamenti possono avvenire anche tra file diversi
Nel file relazione si avrà sempre
<a name=“cap1"> capitolo 1 </a>
in un altro file (sullo stesso server) si avrà
<a href="http://www.di.unito.it/relazione.html#cap1">
vai al capitolo 1 </a>
59
cristina gena - matec 2006/2007
ESERCIZIO 4
Create una nuova pagina HTML con:
-sfondo colore a scelta
- titolo h2 in rosso
- un testo molto lungo copiato da Internet formattato in Verdana,
size 2
- i seguenti link con font size =3
- ancora al Titolo
- link ad un filmato
60
cristina gena - matec 2006/2007
ESERCIZIO 5
Create una nuova pagina html con :
- Un titolo centrato
- Un immagine scorrevole che si collega alla pagina precedente
- Un immagine che crei un collegamento ad un file di Word
presente sul vostro PC
- Un collegamento (link) al sito del Corep
61
cristina gena - matec 2006/2007
HTML
Tabelle
Per creare una tabella si usa il tag
<table>
istruzioni righe e celle della tabella
</table>
<table> ha vari attributi che servono per stabilire le
caratteristiche della tabella
62
cristina gena - matec 2006/2007
HTML
<table
border=“numero”
{larghezza in pixel dei bordi}
align=“left | right | center”
{allineamento della tabella nella pagina}
cellspacing=“numero” {spazio in pixel tra le celle}
cellpadding=“numero”
{spazio tra bordo e contenuto delle celle}
width=“numero | percentuale”
{larghezza della tabella in pixel o in %}
height=“numero | percentuale”
{lunghezza della tabella in pixel o in %}
summary= “descrizione del contenuto ” >
cristina gena - matec 2006/2007
63
HTML
TABELLA:COMANDI PER LA FORMATTAZIONE
<table
>
background = “percorso del file”
bgcolor = “colore”
bordercolor = “colore”
bordercolordark = “colore”( per le ombre dei bordi)
bordercolorlight = “colore”( per le ombre dei bordi)
64
cristina gena - matec 2006/2007
HTML
TABELLA: LE RIGHE
<tr> nuova riga </tr>
<tr
align= “left | right | center” {allineamento nella riga}
valign= “ top | middle | bottom |baseline”
{allineamento del testo rispetto alle celle}
background = “file name”
bgcolor = “colore”
bordercolor = “colore”
bordercolordark = “colore” ( per le ombre dei bordi)
bordercolorlight = “colore” ( per le ombre dei bordi)
>
65
cristina gena - matec 2006/2007
HTML
TABELLA: LE CELLE
<td> nuova cella all’interno delle righe </td>
<td
align= “left | right | center” {allineamento nella cella}
valign= “ top | middle | bottom |baseline”
{allineamento del testo rispetto alle celle}
background = “file name”
bgcolor = “colore”
bordercolor = “colore”
bordercolordark = “colore” ( per le ombre dei bordi)
bordercolorlight = “colore” ( per le ombre dei bordi)
>
width=“numero | percentuale”
{larghezza della cella in pixel o in %}
height=“numero | percentuale”
{lunghezza della cella in pixel o in %}
66
cristina gena - matec 2006/2007
HTML
ES:
<table>
<tr><td>Questa è la prima riga.</td></tr>
<tr><td>Questa è la seconda riga.</td></tr>
</table>
Questa è la prima riga
Questa è la seconda riga
67
cristina gena - matec 2006/2007
HTML
<th> per il titolo delle colonne
<th> titolo della colonna (bold e centrato) </th>
<caption> titolo tabella
<caption align=“top | bottom”>
titolo della tabella
</caption>
68
cristina gena - matec 2006/2007
HTML
prima
seconda
1
terza
2
a
3
b
i
c
ii
iii
Io sono la caption
Provate a creare una tabella come questa!!
69
cristina gena - matec 2006/2007
HTML
I tag TD e TH hanno anche questi attributi:
<td (th)
colspan=“numero”
{numero di colonne nella cella}
rowspan=“numero”
{numero di righe nella cella}
nowrap
{per non andare a capo nelle celle}
>
70
cristina gena - matec 2006/2007
ESEMPIO di COLSPAN
Il seguente esempio permette di espandere una cella su 2
colonne
<table border="1" >
<tr>
<td >prima colonna</td>
<td >seconda colonna</td>
<td> terza colonna</td>
</tr>
<tr>
<td> come sopra</td>
<td colspan="2">cella che occupa 2 colonne</td>
</tr>
</table>
71
cristina gena - matec 2006/2007
ESEMPIO di COLSPAN
Prima colonna
Seconda colonna Terza colonna
Come sopra
Cella che occupa 2 colonne
72
cristina gena - matec 2006/2007
ESEMPIO ROWSPAN
Permette di espandere una cella su due righe.
<table border="1" >
<tr>
<td > </td>
<td rowspan="2"> cella che occupa 2 righe</td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Nella seconda riga devo
definire solo 2 celle,
perché la terza è già
occupata da quella
definita con rowspan
73
cristina gena - matec 2006/2007
ESEMPIO ROWSPAN
Cella che
occupa due
righe
74
cristina gena - matec 2006/2007
HTML
OSS:
le tabelle possono essere annidate le une dentro le altre…
75
cristina gena - matec 2006/2007
ESERCIZIO 6
Nella vostra cartella create una pagina html che contenga:
1)
una tabella con un’immagine di sfondo
- 4 colonne e 3 righe, bordi di colore a scelta.
- Allineare la tabella a destra, gli elementi della prima riga a
sinistra, quelli della seconda riga in alto e quelli della terza in basso.
2)
Una seconda tabella così composta:
- una prima riga con tre colonne
- una seconda riga con una cella che occupa due colonne (colspan)
(quindi in totale 2 celle)
- una terza riga con tre colonne
- una quarta riga di 3 colonne con una cella che occupa due righe
(rowspan sulla riga sopra)
76
cristina gena - matec 2006/2007
HTML
FORM
In alcuni documenti HTML può essere utile creare dei
moduli che possono essere riempiti da chi consulta le
pagine stesse e inviati a chi gestisce il sito o al server
stesso.
Le informazioni inserite possono poi essere spedite per email o attraverso una tecnologia server (pagine php, asp,
…)
Per creare i moduli si deve usare il tag
<FORM>
modulo
</FORM>
77
cristina gena - matec 2006/2007
HTML
78
cristina gena - matec 2006/2007
HTML
FORM
I comando di "submit" deve sempre essere presente (a
meno che si sostituisca la sua funzione con del codice
Javascript).
•
"submit" quando viene cliccato spedisce il modulo
(o meglio esegue l’azione specifica nell’action)
•
"reset" quando cliccato cancella tutti i dati inseriti
nel form (sarebbe meglio non usarlo….)
79
cristina gena - matec 2006/2007
HTML
FORM
È necessario creare degli elementi affinché l’utente
possa inserire del testo e-o fare delle scelte, come
•
testo libero
•
check box (caselle a selezione multipla)
•
radio box (caselle a selezione singola)
•
menù a selezione singola o multipla
Ogni elemento deve avere un nome univoco che sarà
associato ai dati inseriti dall’utente (nella forma
nome=valore)
80
cristina gena - matec 2006/2007
HTML
Il tag <INPUT>
<input
type= "text"
"radio"
{input di testo}
{crea radio box}
"checkbox" {crea checkbox}
"password" {crea un campo password}
“hidden"
{crea un campo nascosto}
“file"
{per inserire dei file}
"submit“-"reset">
Il tag input ha degli attributi che dipendono dal type
cristina gena - matec 2006/2007
81
HTML
Il tag <INPUT>
1)
type=“text”
< input type="text"
name="nome del campo di input"
size="numero"{larghezza in numero di caratteri}
value="testo" {testo di default–di solito vuoto}
inseribili}
maxlength="45” {numero massimo di caratteri
>
ES:
< input type="text" name="nazionalita"
size=“20” value="italiana“ maxlength=“50” >
82
cristina gena - matec 2006/2007
HTML
Il tag TEXTAREA
Per creare un campo di testo di più righe
<textarea
name="nome“
{nome del campo}
rows=“numero”
{numero di righe per scrivere}
cols=“numero”
{numero di colonne per scrivere}
>
questo sito è un capolavoro
</textarea>
83
cristina gena - matec 2006/2007
Se volete che i campi di testo non siano editabili
dovete aggiungere readonly
84
cristina gena - matec 2006/2007
HTML
2)
type="radio"
<input
type="radio"
name="nome del gruppo di bottoni"
value="valore di risposta del bottone"
{valore che viene restituito quando
il bottone viene selezionato}
checked
{il bottone è selezionato di default}
>
bottone}
testo
{questo è il testo che appare accanto al
85
cristina gena - matec 2006/2007
HTML
86
cristina gena - matec 2006/2007
HTML
3)
type="checkbox"
simile a radio ma permette la selezione multipla
<input
type="checkbox"
name="nome del gruppo di checkbox"
value="valore di risposta del box"
{valore restituito quando si seleziona il bottone}
default}
checked
{bottone selezionato per
>
87
cristina gena - matec 2006/2007
HTML
88
cristina gena - matec 2006/2007
HTML
4)
type="password"
<input
type="password"
name="nome campo"
size="numero"
{larghezza del campo password}
value="testo"
{non ha molto senso metterlo in questo caso…}
>
89
cristina gena - matec 2006/2007
HTML
5)
type="submit"
type="reset"
value="testo che compare sul bottone"
90
cristina gena - matec 2006/2007
HTML
5) type=“hidden”
<input name="hiddenField" type="hidden" value="nessuno mi vede" >
5) type=“file”
91
cristina gena - matec 2006/2007
HTML
Creazione di menù di scelta
il tag
<select>
</select>
permette di creare dei menù a selezione singola o multipla.
per ogni riga del menù si usa il tag
<option> elemento del menu </option>
92
cristina gena - matec 2006/2007
HTML
<select
name="nome del campo”
size=“numero”
{quante righe del menù devono essere
visualizzate}
multiple
{permette la selezione multipla;
altrimenti si ha selezione singola}
> …….</select>
93
cristina gena - matec 2006/2007
HTML
<option
>
value="valore restituito"
{valore restituito quando viene
selezionata la riga}
selected
{riga selezionata di default}
testo che compare nel menù
</option>
94
cristina gena - matec 2006/2007
HTML
Esempio di selezione singola
95
cristina gena - matec 2006/2007
HTML
Esempio di selezione multipla
96
cristina gena - matec 2006/2007
HTML
97
cristina gena - matec 2006/2007
HTML
L'utente [email protected] si vedrà arrivare una mail simile a
quella seguente:
anno="2"
ind="I"
commenti=“la prof.ssa Gena è troppo severa!!"
Queste informazioni possono essere usate da altri programmi.
Ad esempio, i form sono utili in combinazione con i database:
ogni i dati del form vengono memorizzati in un database per
elaborazioni successive.
98
cristina gena - matec 2006/2007
HTML: frame
I frame servono a suddividere la finestra del
browser in sotto-finestre tra loro indipendenti,
nelle quali si possono caricare documenti (file
HTML) diversi
Sono in disuso!!!!
99
cristina gena - matec 2006/2007
HTML: frame
Il file HTML che rappresenta l’intera pagina
contiene
le istruzioni per la suddivisione della finestra:
<FRAMESET ROWS="20%, 80%">
<FRAME NAME="upperbar" SRC="title.html">
<FRAMESET COLS=”30%, 70%">
<FRAME NAME= "leftbar" SRC=”left.html">
<FRAME NAME= "mainarea" SRC=”main.html">
</FRAMESET>
</FRAMESET>
"upperbar"
title.html
(20%)
left.html
80%
main.html
"leftbar"
(30% di 80%)
"mainarea"
(70% di 80%)
100
cristina gena - matec 2006/2007
HTML: frame
Attributi del tag FRAME:
<FRAME
SRC = il file da visualizzare nel frame
NAME = il nome del frame
SCROLLING = presenza delle barre di
scorrimento
NORESIZE = per inibire il ridimensionamento
MARGINWIDTH = margine destra/sinistra (in
pixel)
MARGINHEIGHT = margine sopra/sotto (in pixel)
>
101
cristina gena - matec 2006/2007
HTML: frames
L’attributo TARGET:
Ipotesi 1: voglio caricare la
pagina pubblicazioni.html al
posto dell'intera pagina:
Pubblicazioni
...
"upperbar"
"leftbar" "mainarea"
...
pubblicazioni
...
Ipotesi 2: voglio caricare la
pagina pubblicazioni.html
nel frame "mainarea":
"upperbar"
"leftbar" Pubblicazioni
Pubblicazioni
...
...
"mainarea"
102
cristina gena - matec 2006/2007
HTML: frames
Ipotesi 1: voglio caricare la pagina pubblicazioni.html
al posto dell'intera pagina:
pubblicazioni =
Pubblicazioni
<A HREF="pubblicazioni.html"
...
TARGET="_top">pubblicazioni
</A>
carica nella finestra intera
Ipotesi 2: voglio caricare la
pagina pubblicazioni.html
nel frame "mainarea":
pubblicazioni =
"upperbar"
<A HREF="pubblicazioni.html"
Pubblicazioni TARGET="_self">pubblicazioni
...
</A>
...
carica nel frame in cui ti trovi
"mainarea"
(NB: equivale a non indicare il TARGET)
"leftbar"Pubblicazioni
103
cristina gena - matec 2006/2007
HTML
HyperText Markup
Language
Target può avere i seguenti attributi
•
target="_self"
default}
{la
finestra
stessa:
•
target="_top"
{nella finestra intera}
•
target="_blank"
{nuova finestra}
•
target="_parent" {nel frameset in cui è il
frame}
104
cristina gena - matec 2006/2007
HTML: image map
Un’image map è un’immagine suddivisa in “aree
sensibili”
che, al click del mouse, si comportano come link.
Per es, consideriamo l’immagine willer.gif
click qui per
caricare
click qui per
tiger.html
caricare
kit.html
click qui per
caricare
carson.html
click qui per
caricare
tex.html
105
cristina gena - matec 2006/2007
HTML: image map
Per costruire un image map:
Si dichiara che, in corrispondenza di una certa immagine, verrà
usata una certa "mappa" (con l'attributo USEMAP)
<IMG SRC="willer.gif" USEMAP="#miamappa">
Si definisce la "mappa" (con il tag MAP)
<MAP NAME="miamappa">
<AREA SHAPE="rect" COORDS="55,25,100,70"
HREF="kit.html">
<AREA SHAPE="rect" COORDS="125,25,160,70"
HREF="tiger.html">
<AREA SHAPE="rect" COORDS="165,25,220,70"
HREF="tex.html">
<AREA SHAPE="rect" COORDS="80,75,125,125"
HREF="carson.html">
</MAP>
NB: Come si fa a conoscere le coordinate?
106
cristina gena - matec 2006/2007
HTML: image map
Si può caricare l'immagine con l'attributo ISMAP
e poi leggere le coordinate sulla barra di stato,
muovendosi con il mouse (NB: l'origine delle
coordinate è in alto a sinistra):
<A HREF="#">
<IMG
SRC="willer.gif"
ISMAP>
</A>
NB: Gli strumenti di
sviluppo (come Dreamweaver, FrontPage, ...)
generalmente forniscono
metodi per costruire
automaticam. le mappe!
107
cristina gena - matec 2006/2007
XHTML
Extensible  è basato su XML
Hypertext
Markup
Language
http://www.w3.org/TR/2000/REC-xhtml1-20000126
http://www.w3c.cnr.it/traduzioni/xhtml1-it.html
108
cristina gena - matec 2006/2007
XHTML
HTML  L’ultima raccomndazione rilasciata dal W3C è
4.01 (dicembre 1999).
http://www.w3.org/TR/html4/
XML  XML è una sorta di "super-linguaggio" che
consente la creazione di nuovi linguaggi di markup
http://www.w3.org/TR/2000/REC-xml-20001006
XHTML  I tag sono gli stessi, ma il documento deve
essere valido e ben formato
109
cristina gena - matec 2006/2007
XHTML
•
Il linguaggio torna a definire solo la struttura del del
documento (la forma è stabilita da CSS)
•
È portabile capacità di un documento di essere
visualizzato e implementato efficacemente su diversi
dispositivi : PC, PDA, WebTV.
•
È estensibile
•
È accessibile
110
cristina gena - matec 2006/2007
L’elemento radice deve essere
preceduto dal DOCTYPE
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" (identificatore della DTD)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">  il documento deve
essere valido (e ben formato*)
(obbligatorio)
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">  l’elemento
radice devo contenere la dichiarazione dello
spazio dei nomi
<body>….. <head></head>
*deve rispettare le regole della sintassi
XML: presenza di un elemento radice,
corretto annidamento degli elementi,
chiusura obbligatoria dei tag vuoti, etc.
111
cristina gena - matec 2006/2007
XHTML
•
Esistono 3 tipi di dtd
–
Strict  è la più rigida e non supporta i tag deprecati
–
Transitional la più usata, è quella di transizione, Supporta
tutti gli elementi e gli attributi di presentazione di HTML 4.0,
anche quelli ritenuti sconsigliati.
–
Frameset  E' identica alla Transitional, ma va usata quando si
utilizzano i frame
•
<applet>, <basefont>, <center>, , <font>, <frame>, <frameset>,
<iframe>, <noframes>,<u>
112
cristina gena - matec 2006/2007
XHTML
•
Caratteristiche principali
–
–
Elementi blocco  Gli elementi blocco sono quelli che
definiscono la struttura del documento. Possono contenere altri
elementi blocco, elementi inline o testo. Il primo elemento della
gerarchia dovrebbe essere <div>, che definisce in pratica una
sezione del documento. Al suo interno trovano posto gli altri
elementi. Es. <p>, <form>, <h1>
Elementi inline  Gli elementi inline si distingono da quelli di
tipo blocco per due motivi: quando sono inseriti non danno
origine a una nuova riga e possono contenere solo dati
(essenzialmente testo) o altri elementi inline. Es. <img>, <br>
113
cristina gena - matec 2006/2007
XHTML
•
Caratteristiche principali
–
–
–
–
–
–
–
–
–
Vietati  Gli attributi per il testo, i link, il colore di sfondo e i
margini sono espressamente vietati solo nella DTD Strict, ma
erano già sconsigliati in HTML 4.0. Non vanno pertanto usati e
devono essere sostituiti dai CSS. Es.
alink
background
bgcolor
font
link
text
vlink
…
114
cristina gena - matec 2006/2007
XHTML
•
Caratteristiche principali
–
Gli elementi devono essere correttamente annidati.  gia lo
sappiamo!
–
I nomi dei tag e degli attributi devono essere in minuscolo.
 gia lo sappiamo!
–
I valori degli attributi devono essere tra virgolette  gia lo
sappiamo!
–
Ogni attributo deve avere un valore. Es. <option
selected="selected">
115
cristina gena - matec 2006/2007
XHTML
•
Caratteristiche principali
–
Gli elementi non vuoti devono essere chiusi. Es. <p>…</p>,
<li>..<li>
–
Gli elementi vuoti devono terminare con />. Es. <br />, <img />
–
Per identificare un elemento si deve usare l'attributo id e
non name (perfetta conformità con XML).
Es. <input type=“text” name=“email” id=“email”>
116
cristina gena - matec 2006/2007