HyperText Markup Language

HTML – 1
HyperText Markup Language
Introduzione ad HTML
 Documenti
HTML
 Tag di markup
 Formattazione del testo
 Collegamenti ipertestuali
 Immagini
 Tabelle
 Form in linea (moduli)
Tecnologie di Sviluppo per il WEB
2
Terminologia

HTML
– Acronimo di HyperText Markup Language
– È una collezione di stili indipendenti dalla
piattaforma che definiscono Ie varie componenti di
un documento del World Wide Web
– È un linguaggio utilizzato per pubblicare
documenti ipermediali sul WWW

Documento HTML
– Documento di testo (ASCII) che può essere creato
con qualsiasi text-editor (si potrebbe usare vi
oppure notepad)
Tecnologie di Sviluppo per il WEB
3
HyperText Markup Language

È un linguaggio di marcatura del testo
– Non è un linguaggio di programmazione
– È costituito da un insieme di parole chiave (tag o
marcatori) con cui identifica porzioni del
documento
– È nato con l’obiettivo di consentire la definizione di
documenti ipertestuali distribuiti su una rete di
computer

HTML viene definito come applicazione di
SGML (Standard Generalized Mark Up
Language) (non vale per HTML 5)
Tecnologie di Sviluppo per il WEB
4
Caratteristiche di HTML
 Con
HTML è possibile:
– Definire la struttura logica di un documento
– Definire la formattazione tipografica del
testo fornendo indicazioni utili per il
rendering
– Definire dei collegamenti ipertestuali tra i
vari documenti
– Definire
l’interfaccia
utente
di
un’applicazione WEB
Tecnologie di Sviluppo per il WEB
5
Errore di sintassi in HTML
 L’errore
di sintassi in HTML non è
previsto nell’ambito dell’elaborazione di
un documento
 Ciò
che non è riconducibile ad un tag
del linguaggio viene semplicemente
ignorato e visualizzato in quanto tale
Tecnologie di Sviluppo per il WEB
6
Che cosa è un tag


In un documento testuale, un elemento è una
parte fondamentale della sua struttura
Esempi di elementi sono:
– Tabelle, paragrafi, liste, immagini, …


Un tag è un mezzo per contrassegnare
(marcare) gli elementi di un file testuale che
deve essere poi interpretato da un’altra entità
(e.g, user agent – browser)
Il tag associa all’elemento una determinata
caratteristica (strutturale, tipografica, …)
Tecnologie di Sviluppo per il WEB
7
Ancora sui tag
I
tag sono costituiti da un elemento di
inizio marcatura ed un elemento di fine
marcatura
 I tag HTML sono case insensitive...
 Gli elementi di inizio marcatura possono
essere caratterizzati da attributi a cui è
associato un particolare valore:
Tecnologie di Sviluppo per il WEB
8
Forma di un TAG
<tag
attributo1=“valore1”
…
attributon=“valoren”>
</TaG>
Tecnologie di Sviluppo per il WEB
9
Entità o sequenze di escape




Per garantire la trasportabilità del documento,
HTML utilizza la codifica ASCII standard a 7
bit (caratteri da 1 a 127)
Per rappresentare simboli speciali o caratteri
nazionali, HTML utilizza alcune entità o
sequenza di escape
Tali entità vengono utilizzate quando l’uso del
carattere reale può confondere il browser
La sequenza di escape è case sensitive
Tecnologie di Sviluppo per il WEB
10
Esempi di entità
 Un'
entità ha la seguente forma
&Entityname;
–   (“spazio”)
– < (<) > (>)
– & (&) " (“)
– à (à) Á (Á)
– è (è) é (è)
– ® (®)
– Ä (Ä) ü (ü)
Tecnologie di Sviluppo per il WEB
11
Origini di HTML
 HTML
è derivato da SGML (Standard
Generalized Mark Up Language)
– SGML è uno standard ISO (International
Standards Organization) per descrivere
linguaggi di formattazione di testi
• Non vale più per HTML 5 (v. dopo)
 Intento
originale:
– Fornire un’impaginazione generale di
documenti che potessero essere riprodotti
da un’ampia varietà di computer
Tecnologie di Sviluppo per il WEB
12
Evoluzione di HTML
 HTML
4.0 (standardizzato nel 1997)
– Ha introdotto molte caratteristiche rispetto
alla precedente versione, ma ha anche
deprecato molte delle caratteristiche delle
versioni precedenti
 HTML
4.01 (standardizzato nel 1998)
– Una “ripulitura” della versione 4.0
 XHTML
1.0 è HTML 4.01 modificato in
modo da soddisfare la sintassi XML
– Gennaio 2008: HTML 5.0 (...fine nel 2012)
Tecnologie di Sviluppo per il WEB
13
Linguaggio di markup (marcatura)

Impaginazione WYSIWYG oppure basata su
tag
– e.g. MS Word vs HTML (LaTeX)

Visuale oppure Strutturale
– e.g. Specificare la grandezza del font oppure il
livello di Heading
Tecnologie di Sviluppo per il WEB
14
Le Pagine Web
 Consistono
di istruzioni HTML
 Si trovano memorizzate su computer
detti server web
 Sono visibili da computer detti client
usando un browser
– Mozilla Firefox
– Internet Explorer
– Opera
– Chrome
– Safari
Tecnologie di Sviluppo per il WEB
15
Il browser – 1
 Il browser legge un documento scritto in
linguaggio HTML interpretandone i
comandi e visualizzandolo
 Quando si clicca su un collegamento
ipertestuale, il browser utilizza il
protocollo HTTP per inviare ad un server
Web una richiesta del nuovo documento
Tecnologie di Sviluppo per il WEB
16
Il browser – 2
 Il
server Web risponde alla richiesta,
utilizzando il protocollo HTTP ed invia
il documento richiesto
 Il
browser legge e interpreta
l’informazione scritta in HTML e la
presenta (quasi sempre) nel formato
corretto
Tecnologie di Sviluppo per il WEB
17
Riferimenti
 Specifica
di HTML 4.01
http://www.w3.org/TR/html4/
 Indice
degli elementi di HTML
http://www.w3.org/TR/html4/index/elements.html
 Indice
degli attributi di HTML
http://www.w3.org/TR/html4/index/attributes.html
 HTML
5 – HTML 4
http://www.w3.org/TR/2010/WD-html5-diff-20100624/
Tecnologie di Sviluppo per il WEB
18
I tag di HTML
I tag HTML
 Indica
come l’elemento a cui è
associato deve essere rappresentato
 Consiste di una parentesi angolare
aperta <, seguita da un nome, e da
una parentesi angolare chiusa >
 Alcuni tag possono essere presenti in
coppia ( <H1> e </H1> ).
– Tag contenitori
Tecnologie di Sviluppo per il WEB
20
Tag
 Esistono
chiusura
tag di apertura e tag di
– <H1> è un tag di apertura
– </H1> è un tag di chiusura
chiudere un tag aggiungi / al tag
iniziale
 Molti tag, ma non tutti, devono avere
un tag di chiusura
 Per
– Per i tag che lo ammettono, conviene
sempre chiuderli. (per abituarsi ad XML)
Tecnologie di Sviluppo per il WEB
21
Gli attributi
 Informazioni
aggiuntive associate a tag
 Aiutano ad associare delle proprietà
agli elementi nella formattazione di
documenti
 NomeAttributo = “ valore ”

<FONT
</FONT>
FACE="ARIAL">
esempio
 Molti
degli attributi sono deprecati in
HTML 4.01, si dovrebbe usare CSS per
indicare le caratteristiche del tag
Tecnologie di Sviluppo per il WEB
22
Struttura di un documento HTML
 Ogni
documento HTML inizia con
<HTML> e termina con </HTML>
 Viene diviso in due parti
– Intestazione <HEAD> </HEAD>
• Contiene il titolo del documento ed altre
informazioni non visualizzate dal browser
– Corpo <BODY> </BODY>
• Contiene il documento vero e proprio
Tecnologie di Sviluppo per il WEB
23
HEAD e BODY

L’intestazione (HEAD) fornisce al browser
informazioni importanti sul documento che si
vuole visualizzare come:
– titolo della pagina
– le parole chiave per i motori di ricerca
– i file esterni da includere (js e/o css)

Il corpo (BODY) rappresenta quello che viene
poi visualizzato nella pagina:
–
–
–
–
Testo
Immagini
Link
Tabelle …
Tecnologie di Sviluppo per il WEB
24
Un documento HTML minimale
<HTML>
<HEAD>
<TITLE> Un semplice documento HTML
</TITLE>
</HEAD>
<BODY>
Questo è un semplicissimo documento HTML
</BODY>
</HTML>
Tecnologie di Sviluppo per il WEB
25
Risultato
titolo
Tecnologie di Sviluppo per il WEB
26
Il tag <HTML>
 Funzione:
– Delimita un documento HTML completo
 Attributi:
– DIR
– LANG
– VERSION (deprecato)
Tecnologie di Sviluppo per il WEB
27
L'attributo DIR
 Specifica
in quale direzione il browser
mostra il testo all'interno dell'intero
documento:
– Valore di default ltr left-to-right
– rtl usato per il cinese, l'ebraico, ...
 Da
usare congiuntamente a LANG
Tecnologie di Sviluppo per il WEB
28
L'attributo lang
 Specifica
la lingua utilizzata in tutto il
documento.
 Idealmente il browser lo usa per rendere
migliore il testo per l'utente.
– Setta l'attributo ad uno standard ISO-639
Tecnologie di Sviluppo per il WEB
29
Il tag <HEAD>
 Contiene
informazioni sulla pagina
 È un tag contenitore
 Viene subito dopo HTML e prima di
BODY
 Il tag più utilizzato all’interno di HEAD è
<TITLE>
– Per dare un titolo ad un documento (quello
che compare come intestazione della
finestra del browser)
Tecnologie di Sviluppo per il WEB
30
Nota
 Ogni
tag può essere scritto sia in
minuscolo che in maiuscolo
 Solo le sequenze di escape sono case
sensitive
 Nelle
slide useremo sempre le
maiuscole per chiarezza, ma...
 abituatevi a scriverli in minuscolo per
abituarvi alla sintassi di XML
Tecnologie di Sviluppo per il WEB
31
Il tag BASE


Specifica la locazione iniziale per le URL
relative (non completamente specificate con
protocollo e nome dell’host)
Sintassi
<BASE HREF=“…”>
HREF indica la stringa da prependere a tutte le URL
contenute nel documento

Esempio
<BASE
HREF=“http://www.dia.unisa.it/parente/TSW”>
Tecnologie di Sviluppo per il WEB
32
Il tag SCRIPT
È
usato per immergere, all’interno del
documento del codice in un linguaggio di
scripting, in genere Javascript
 Sintassi
<SCRIPT LANGUAGE=“…”
</SCRIPT>
TYPE=“…”
>…
LANGUAGE specifica
il linguaggio
TYPE è un MIME Type (e.g., text/javasript)
 Maggiori dettagli in seguito
Tecnologie di Sviluppo per il WEB
33
Il tag STYLE
È
usato per includere, all’interno del
documento, un foglio di stile (CSS...)
 Sintassi
<STYLE TYPE=“…” > . . . </STYLE>
TYPE è
un MIME Type (e.g., text/css)
 Maggiori dettagli in seguito
Tecnologie di Sviluppo per il WEB
34
Il tag LINK (sezione HEAD)
 Fornisce
solo delle informazioni su come
il documento corrente si relaziona agli
altri documenti, specificando:
– una locazione dell’indice
– documento precedente, quello successivo
– Utile per motori di ricerca e pre-caricare alcune pagine
 Permette
di includere dei file esterni
– Contenenti fogli di stile o codice Javascript
 Stessi
attributi delle ancore (v. dopo), ma
non hanno alcun effetto...
Tecnologie di Sviluppo per il WEB
35
Sintassi del tag LINK
<LINK REL=“…” HREF=“…”
TYPE=“…”>
URL del documento target.
RELazione con il documento
Esempio
target
<LINK HREF=“MioStile.css”
REL=“STYLESHEET”
TYPE=“text/css”>
<LINK HREF=”cap14.html”
REL=next >
<LINK REL=“ICON"
HREF="mozilla-16.png"
TYPE="image/png">
Documento che fa parte di
una sequenza di
documenti
Aggiunge un’icona all’inizio
della barra di navigazione
Tecnologie di Sviluppo per il WEB
36
Un altro modo per aggiungere icone


Creare un file di nome favicon.ico ed inserirlo nella root directory del sito
Il file deve essere un’icona di Windows con particolari caratteristiche
– 16x16 oppure 32x32 pixel
– Massimo 32 colori

Esistono programmi (e.g. Michelangelo) per generare file con questo formato o
per convertire un’immagine da un qualsiasi formato al formato icona (.ico)
Tecnologie di Sviluppo per il WEB
37
Il tag META



Il tag META è utilizzato per conservare
informazioni sul documento, caricare o
ricaricare una pagina web, includere file di
suoni (li vediamo subito)
Il tag META è utilizzato dai motori di ricerca
per catalogare il documento (S.E.O.)
Molte informazioni sono individuate dagli
attributi NAME e CONTENT:
– NAME identifica il nome della proprietà
– CONTENT identifica il valore della proprietà
Tecnologie di Sviluppo per il WEB
38
Uso del tag META

Sintassi:
<META NAME=“…” CONTENT=“…” >

Valori comuni usati per NAME
– author
• Autore del documento
– description
• Breve descrizione del documento
– keywords
• Parole che descrivono il documento usate dai motori
di ricerca
– generator
• Programma che ha generato il documento
Tecnologie di Sviluppo per il WEB
39
Esempio
<META name="author" content=“Ambrogio
D'Ambrogio">
<META name="description"
content=“Tecnologie di Sviluppo per il
Web">
<META name="keywords"
content=“HTTP, HTML, CSS, PHP">
<META name=“generator" content=“L’editor vi">
Tecnologie di Sviluppo per il WEB
40
Refresh di una pagina


Il tag META è usato anche per caricare pagine
in maniera automatica. Bisogna sfruttare
l’attributo HTTP-EQUIV
Per caricare la stessa pagina (refresh):
<META HTTP-EQUIV="refresh"
CONTENT=“x">

Entro x secondi il documento sarà ricaricato
Per fare il forward verso una nuova pagina:
<META HTTP-EQUIV="refresh"
CONTENT=“x;URL=y">
Entro x secondi sarà caricata la pagina y
y può essere un file di suoni
Tecnologie di Sviluppo per il WEB
41
Ancora su HTTP-EQUIV
 Questo
attributo può essere utilizzato in
congiunzione con CHARSET per
indicare al browser il tipo di testo con
cui visualizzare il documento
<META HTTP-EQUIV=“Content-type"
CONTENT=“text/html; CHARSET=GB2312">
Tecnologie di Sviluppo per il WEB
42