Le basi del linguaggio HTML
Marco Gribaudo
[email protected]
http://www.di.unito.it/~marcog/Savigliano
P.s.: Queste slide sono state adattate da quelle della Prof. Cristina Gena
(http://www.di.unito.it/~cgena), con spunti tratti dal materiale della Prof. Rossana Damiano
(http://www.di.unito.it/~rossana).
Marco Gribaudo - thanks to C.
Gena e R. Damiano
1
HTML
HyperText Markup
Language
E’ il linguaggio base per produrre documenti per World Wide Web
(Internet)
Documenti WEB: pagine ipertestuali
multimediali:
•
testo
•
immagini
•
suoni
•
legami ipertestuali a
altre pagine
programmi
immagini, suoni, ...
che
Marco Gribaudo - thanks to C.
Gena e R. Damiano
contengono
contenuti
2
HTML
HyperText Markup
Language
L'Ipertesto è un insieme di testi o pagine leggibili con l'ausilio
di un'interfaccia elettronica, in maniera non sequenziale, per
tramite di particolari parole che si chiamano hyperlink
(rimandi), che costituiscono un rete raggiata o variamente
incrociata di informazioni organizzate secondo criteri.
home page:
pagina papers:
link1
link3
pagina di
unito
link2
pagina del
corep
link4
Marco Gribaudo - thanks to C.
Gena e R. Damiano
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.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
4
Marco Gribaudo - thanks to C.
Gena e R. Damiano
5
HTML
HyperText Markup
Language
Per visualizzare le pagine HTML si usano programmi
chiamati Web browser (Netscape Navigator, Microsoft
Internet Explorer, NCSA Mosaic, Sun HotJava, ....)
Le pagine WWW sono trasferite attraverso la rete
Internet usando un protocollo particolare HTTP
(HyperText Transfer Protocol) costruito al di sopra di
TCP/IP (base di Internet)
Localizzate mediante un ben preciso sistema
indirizzamento: URL (Uniform Resource Locator)
Marco Gribaudo - thanks to C.
Gena e R. Damiano
di
6
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
7
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
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 parti multimediali
•
link ipertestuali
I comandi (TAG) hanno una forma sintattica particolare
<nome-tag>
informazioni </nome-tag>
I comandi (tag) generalmente hanno nomi mnemonici e
significativi…
Marco Gribaudo - thanks to C.
Gena e R. Damiano
10
Specifiche HTML 4
http://www.w3.org/TR/html4/
A questo indirizzo si trovano le specifiche del linguaggio: vale a
dire l’elenco dei comandi supportati ed il loro significato
Marco Gribaudo - thanks to C.
Gena e R. Damiano
11
Visualizzare il codice HTML
Presa una qualsiasi pagina web…
Marco Gribaudo - thanks to C.
Gena e R. Damiano
12
Visualizzare il codice HTML
Selezionando la voce HTML dal menu’ visualizza...
Marco Gribaudo - thanks to C.
Gena e R. Damiano
13
Visualizzare il codice HTML
E’ possibile visualizzare il codice che la compone!
Marco Gribaudo - thanks to C.
Gena e R. Damiano
14
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 in questo corso non li vedremo!
Marco Gribaudo - thanks to C.
Gena e R. Damiano
15
Creare un file html
Il codice HTML e’ costituito da testo
semplice: basta quindi un qualsiasi
strumento per scrivere testo.
Editor di testo :
Notepad
Wordpad
Salvare il file con l’estensione .html:
nome_file.html
Marco Gribaudo - thanks to C.
Gena e R. Damiano
16
Uso dell’editor di testo
scrivete il codice html
senza usare nessun tipo di
formattazione (grassetto,
corsivo, colore)
(eccetto a capo, spazi e
Marco maiuscole)
Gribaudo - thanks to C.
Gena e R. Damiano
17
Regole di HTML
Non è sensibile alle maiuscole / minuscole
Riconosce un solo spazio
I tag devono essere chiusi
I valori degli attributi devono essere tra
virgolette
I tag sconosciuti al browser sono ignorati
Marco Gribaudo - thanks to C.
Gena e R. Damiano
18
Salvare il documento
salvate il documento come
documento di testo,
assegnandogli l’estensione
.html
nb ricordatevi il percorso!
Marco Gribaudo - thanks to C.
Gena e R. Damiano
19
Visualizzare il documento I
l’estensione .html
viene
automaticamente
associata al
browser dal S.O.:
facendo doppio
clic sull’icona del
file, il file viene
aperto con il
browser
Marco Gribaudo - thanks to C.
Gena e R. Damiano
20
Visualizzare il documento II
il browser analizza il documento
html e ne visualizza il contenuto
secondo le istruzioni fornite dai
comandi che accompagnano il
testo
il menu Visualizza -> HTML di
Explorer apre direttamente il file
html
con Notepad
Marco Gribaudo - thanks to C.
21
Gena e R. Damiano
HTML
Un documento HTML è costituito da due parti**
<html>
<head>
descrizione delle caratteristiche del documento
</head>
<body>
documento vero e proprio
</body>
</html>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
22
HTML
HEAD
Vi possono essere numerosi comandi all’interno di un blocco
head, ma noi vedremo solamente il comando title, utilizzato per
specificare il titolo del documento che verrà visualizzato come
titolo nella finestra del browser.
<head>
<title>
master in tecnologia e comunicazione multimediale
</title>
</head>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
23
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…
Marco Gribaudo - thanks to C.
Gena e R. Damiano
24
BODY
Tutto il testo che viene scritto all’interno del
Body, viene visualizzato nella pagina WEB.
In piu’ i comandi vengono interpretati ed
eseguiti.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
25
Caratteristiche dei tag
I tag possono essere accompagnati da un
insieme di attributi:
<tag attributo=“valore”>
contenuto
</tag>
I tag possono essere annidati:
<tag1>
<tag2>
contenuto
</tag2>
</tag1>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
26
Attributi/valori
Gli attributi contengono informazioni
aggiuntive sul tag
<tag attributo=“valore”>
contenuto
</tag>
I loro valori possono essere espressi in
modi alternativi (es. colore)
Marco Gribaudo - thanks to C.
Gena e R. Damiano
27
Regole per l’inserimento di
attributi
Gli attributi si inseriscono all’interno
dell’apertura del comando
Il loro ordine e’ irrilevante
Vi sono attributi obbligatori e facoltativi
<img src = “…”> obbligatorio
<div padding = “…”> non obbligatorio
Marco Gribaudo - thanks to C.
Gena e R. Damiano
28
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">
Marco Gribaudo - thanks to C.
Gena e R. Damiano
29
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
Sebbene sia importantissimo sapere come specificare i colori
mischiando assieme i tre elementi primari, in questo corso non
lo vedremo.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
30
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
31
HTML
HyperText Markup
Language
COMANDI PER ANDARE A CAPO
<br>
a capo senza saltare una riga
<p>
a capo saltando una riga
<p></p> per ogni paragrafo (separato da una linea)
• HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi.
• HTML non è sensibile agli spazi e alle linee vuote
Marco Gribaudo - thanks to C.
Gena e R. Damiano
32
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>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
33
HTML
FORMATO
Esistono vari modi per cambiare il formato dei caratteri
•
•
Stili fisici
Stili Logici
Marco Gribaudo - thanks to C.
Gena e R. Damiano
34
HTML
STILI FISICI
<b> testo </b>
testo in grassetto
<i> testo </i>
testo in corsivo
<u> testo </u>
testo sottolineato (sconsigliato..)
Marco Gribaudo - thanks to C.
Gena e R. Damiano
35
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)}
Marco Gribaudo - thanks to C.
Gena e R. Damiano
36
HTML
INDICI E PEDICI
a<SUB> 1 </SUB> produce a1
b<SUP> 2 </SUP> produce b2
Marco Gribaudo - thanks to C.
Gena e R. Damiano
37
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”>
Questo testo viene visualizzato in
rosso,
ha
dimensione
5
e
font
Courier
Marco Gribaudo - thanks to C.
38
</font>
Gena e R. Damiano
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
stabilito
39
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”
>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
40
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
Marco Gribaudo - thanks to C.
Gena e R. Damiano
41
HTML
1) Liste non numerate: <UL>
Servono per specificare un elenco non ordinato di
elementi. Ad esempio, nel menu di un ristorante che
prevede due primi:
<ul>
<li> penne all’arrabbiata </li>
<li> lasagne al forno </li>
</ul>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
42
HTML
2) Liste numerate:<OL>
Specificano delle liste, i cui elementi sono preceduti da un
numero progressivo (assegnato automaticamente).
<ol>
<li> penne all’arrabbiata </li>
<li> lasagne al forno
</li>
</ol>
Marco Gribaudo - thanks to C.
Gena e R. Damiano
43
HTML
Commenti
Può essere utile inserire dei commenti nel documento
che non sono visualizzati dal browser
<!-- Questo è un commento e non si vede -->
Marco Gribaudo - thanks to C.
Gena e R. Damiano
44
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, PNG
Il nome dell’immagine viene specificato in un attributo del
tag.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
45
HTML
<img src=“pathname o URL dell'immagine”>
Generalmente i file contenenti le immagini si salvano nella stessa
cartella in cui si inserisce il file HTML.
In questo caso come nome dell’immagine e’ sufficiente inserire il
nome del file.
Se i file contenenti le immagini sono salvati in posizioni diverse,
occorre specificire il percorso con cui raggiungerli – cosa
decisamente piu’ complicata.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
46
IMMAGINI
Marco Gribaudo - thanks to C.
Gena e R. Damiano
47
IMMAGINI
Se una immagine non viene visualizzata
controllare:
- Che l’immagine sia salvata nella stessa
cartella in cui e’ contenuto il file HTML
- Che il nome dell’immagine sia corretto (i.e.
che nel comando IMG ci sia scritto lo
stesso nome del file contenuto nella
cartella, compresi spazi ed estensione).
- Che si siano chiuse correttamente le
virgolette ed il tag.
Marco Gribaudo - thanks to C.
Gena e R. Damiano
48
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/
Marco Gribaudo - thanks to C.
Gena e R. Damiano
49
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">
Marco Gribaudo - thanks to C.
Gena e R. Damiano
50