Markup e HTML
Fabio Vitali
Fabio Vitali - Almaweb 2002
Cos’è un documento
Un
documento è una collezione di dati di diverso formato.
Tipi di documento:
testi: romanzi, racconti, poesie, saggi, manuali, articoli, voci di
enciclopedia, lettere, ricette ecc.
non-testi: immagini, registrazioni audio, tracciati musicali,
schemi, progetti, fotografie, filmati, animazioni, mondi virtuali,
ecc.
quasi-testi: annunci economici, elenchi telefonici, schede
cliniche, bilanci, bollette, programmi di computer
È
possibile gestire tali documenti tramite computer, aiutando
gli utenti a svolgere i loro compiti meglio, più velocemente, più
efficacemente.
2
Fabio Vitali - Almaweb 2002
Una visione telescopica dei documenti (1)
Una struttura di dipendenze:
3
Fabio Vitali - Almaweb 2002
Una visione telescopica dei documenti (2)
Caratteri
Parole
Le parole sono sequenze di caratteri divise da separatori di parola.
Conteggio, controllo ortografico e divisione delle parole (hyphenation)
sono operazioni interessanti sulle parole.
Paragrafi
Attribuiamo un valore convenzionale a sequenze di bit. Una sequenza di n
bit può assumere 2n valori, quindi può rappresentare 2n segni. Codici
ASCII (7 bit, 128 caratteri), EBCDIC e ISO-Latin 1 (8 bit, 256 caratteri),
Unicode (16 bit, 65536 caratteri)
Un paragrafo è una collezione di parole segnata da separatori di paragrafo.
WP diversi aggiungono concetti intermedi (sezione, colonna, ecc), che
richiedono ulteriori separatori. Sistemi diversi utilizzano separatori diversi
Campi, record e tabelle
Collezioni omogenee di informazioni sono strutturate in una sequenza
definita più o meno rigorosamente di campi. Ad esempio, in un elenco
telefonico ogni riga è composta (salvo eccezioni) dai campi cognome,
nome, indirizzo, numero di telefono.
4
Fabio Vitali - Almaweb 2002
Una visione telescopica dei documenti (3)
Pagine e schermi
Alcuni sistemi di creazione di documenti sono orientati alla
stampa di pagine. Altri sono orientati alla visualizzazione su
schermo.
Le pagine sono record di dimensioni prefissate, ma esistono
formati diversi usati nazionalmente o a seconda degli scopi.
Gli schermi sono di capacità diverse: dimensioni, risoluzione,
colori.
5
Fabio Vitali - Almaweb 2002
Una visione telescopica dei documenti (4)
Documenti
Un documento è un oggetto complesso composto da più del suo
contenuto. La sua organizzazione (strutturale o visiva), ed il numero
di servizi aggiunti sono caratteristiche importanti.
Raccolte
Una raccolta di documenti (un quotidiano, una antologia di brani, un
CD ROM, un sito Web, ecc) è caratterizzata da aspetti come:
• aspetti strutturali comuni, uniformità di aspetto, presenza di collegamenti
ed interconnessioni, uniformità nei meccanismi di accesso, presenza di
servizi aggiuntivi (indici, presentazioni, sistemi di ricerca ecc.)
Letteratura
Intendiamo per letteratura un insieme di raccolte e documenti singoli
che formano un universo completo su un determinato argomento (la
letteratura medica sull’AIDS, la letteratura critica su Proust, i
documenti sulle aperture negli scacchi, ecc). Variamente
interconnessa con citazione esplicite e riferimenti impliciti.
6
Fabio Vitali - Almaweb 2002
Il markup
Definiamo markup ogni mezzo per rendere esplicita una
particolare interpretazione di un testo.
Quando un autore scrive qualcosa, aggiunge del “markup”,
ovvero dei segni esterni al contenuto del documento che
indicano “effetti” sul testo.
A livello di caratteri, inserendo la punteggiatura o gli spazi
A livello di documenti, formattando e impaginando
A livello di raccolte e letteratura, fornendo meta-informazioni e
connessioni con altri documenti
Modi del markup
Interno vs. esterno
Leggibile vs. binario
Nascosto vs. visualizzato
Generico vs. procedurale
7
Fabio Vitali - Almaweb 2002
Un testo su carta
Capitolo primo
Tre Uomini in Barca
Tre invalidi - Le sofferenze di George e Harris - La vittima di
centosette malattie inguaribili - […]
Jerome K. Jerome
Eravamo in quattro: George, William Samuel Harris,
e io, Montmorency. Standocene seduti in camera mia,
fumavamo e parlavamo di quanto fossimo
malridotti… malridotti, dal punto di vista della
salute, intendo, naturalmente.
Ci sentivamo tutti piuttosto giù di corda, ...
1889
3
8
Fabio Vitali - Almaweb 2002
Il testo senza markup
Questo è il testo completamente senza markup, come
poteva essere scritto su un papiro della biblioteca di
Alessandria, nel II o III secolo a.C.
Treuominiinbarcajeromekjerome1889capitoloprimot
reinvalidilesofferenzedigeorgeeharrislavittimadicent
osettemalattieinguaribilieravamoinquattrogeorge,wil
liamsamuelharrisioemontmorencystandocenesedutii
ncameramiafumavamoeparlavamodiquantofossimo
malridottimalridottidalpuntodivistadellasaluteintend
onaturalmentecisentivamotuttipiuttostogiùdicorda
9
Fabio Vitali - Almaweb 2002
Markup metabolizzato
Aggiungiamo
markup puntuazionale e presentazionale:
maiuscole/minuscole, punteggiatura, spazi e ritorni a capo
sono essi stessi elementi di markup.
Tre Uomini in Barca
Jerome K. Jerome (1889)
Capitolo primo
Tre invalidi - Le sofferenze di George e Harris - La vittima di
centosette malattie inguaribili - […]
Eravamo in quattro: George, William Samuel Harris, io, e
Montmorency. Standocene seduti in camera mia, fumavamo e
parlavamo di quanto fossimo malridotti… malridotti, dal punto di
vista della salute, intendo, naturalmente.
Ci sentivamo tutti piuttosto giù di corda, ...
10
Fabio Vitali - Almaweb 2002
Markup procedurale
Sono
comandi, o istruzioni che il sistema di lettura
(umano o elettronico) deve eseguire sul testo. Ad esempio,
istruzioni su come andare a capo, come decidere i margini,
ecc. Questo è RTF.
{\rtf1 \mac \ansicpg10000 \uc1 \pard \plain \s15 \qc \widctlpar \adjustright \f4 \fs48
\cgrid {Tre Uomini in Barca \par } \pard \plain \widctlpar \adjustright \f4 \cgrid {
\line \par \par \par \par \par } \pard \plain \s1 \qc \keepn \widctlpar \outlinelevel0
\adjustright \i \f4 \fs36 \cgrid {Jerome K. Jerome \par } \pard \plain \qc \widctlpar
\adjustright \f4 \cgrid { \fs36 […] \par 1889 \line \par } \pard \widctlpar \adjustright {
\page } { \b \fs36 Capitolo primo} { \par \par \par \line } { \i Tre invalidi - Le
sofferenze di George e Harris - La vittima di centosette malattie inguaribili - [
\u8230 \'c9] \par } { \line } { \fs28 Eravamo in quattro: George, William Samuel
Harris, io, e Montmorency. Standocene seduti in camera mia, fumavamo e
parlavamo di quanto fossimo malridotti \u8230 \'c9 malridotti, dal punto di vista
della salute, intendo, naturalmente. \line Ci sentivamo tutti piuttosto gi \u249
\'9d di corda, ... \par }}
11
Fabio Vitali - Almaweb 2002
Markup descrittivo
Sono informazioni (descrizioni) sugli elementi del documenti,
che ne specificano il ruolo, la giustificazione, la relazione con
gli altri elementi.
<ROMANZO>
<TITOLO>Tre Uomini in Barca</TITOLO>
<AUTORE>Jerome K. Jerome</AUTORE>
<ANNO>1889</ANNO>
<CAPITOLO>
<TITOLO>Capitolo primo</TITOLO>
<INDICE>
<EL>Tre invalidi</EL>
<EL>Le sofferenze di George e Harris </EL>
<EL>La vittima di centosette malattie inguaribili</EL>
</INDICE>
<PARA>Eravamo in quattro: George, William Samuel Harris,
io, e Montmorency. Standocene seduti in camera mia, fumavamo e
parlavamo di quanto fossimo malridotti… malridotti, dal punto
di vista della salute, intendo, naturalmente. </PARA>
<PARA>Ci sentivamo tutti piuttosto giù di corda,</PARA>
</CAPITOLO>…
12
</ROMANZO>
Fabio Vitali - Almaweb 2002
Il markup procedurale (1)
Basato sull’aspetto
Ad ogni elemento del documento viene associata la
procedura per visualizzarlo in maniera voluta: font,
dimensione, corsivi, grassetti, margini, interlinea, ecc.
Dipendente dal sistema
ogni sistema di visualizzazione impone le proprie regole e
la propria sintassi, dipendendo da:
• Filosofia sintattica (comandi-punto per troff, comandi-barra
per RTF, ecc.)
• Capacità di raggruppamento (parentesi graffe in RTF,
comando di disattivazione esplicita in troff, ecc.)
• Supporto di specifiche funzionalità
13
Fabio Vitali - Almaweb 2002
Il markup procedurale (2)
Associato agli individui
ogni elemento possiede le proprie procedure per la
visualizzazione, che possono anche essere tutte diverse anche
per elementi dello stesso tipo.
Non contestuale
Le regole di visualizzazione non dipendono dal contesto in cui
vengono fatte, ma ognuna fa specie a sé.
• Ad esempio, una lista in troff è fatta come segue:
.li
.it elemento 1
.it elemento 2
.el
• Nessun controllo impone di chiudere la lista alla fine, o di usare i
comandi .it solo dentro alla lista.
14
Fabio Vitali - Almaweb 2002
Il markup dichiarativo (1)
Basato
sul ruolo
Di ogni elemento viene descritto il ruolo all’interno del testo, più
che le regole per la sua visualizzazione:
Ad esempio: “questo è un titolo, questo è un paragrafo, questo
è il nome dell’autore, questa è una citazione.”
Indipendente
dal sistema
Poiché il markup dichiarativo assegna ruoli (e non regole di
visualizzazione) agli elementi del testo, questi sono intrinseci
agli elementi stessi, e non alle funzionalità disponibili nel
sistema di visualizzazione.
Un sistema incapace di variare l’interlinea, o con un elenco
limitato di font e dimensioni, può aver problemi ad interpretare
un markup procedurale troppo ricco, ma la differenza tra (per
esempio) un “titolo” o un “elenco” o un “paragrafo” non dipende
dalla sofisticazione del sistema di visualizzazione.
15
Fabio Vitali - Almaweb 2002
Il markup dichiarativo (2)
Basato
su categorie
I ruoli sono categorie. Ogni elemento è associato ad una
categoria, e ne riflette tutte le caratteristiche
automaticamente.
Contestuale
Con il markup dichiarativo è possibile definire delle regole che
permettano o impediscano l’assegnazione di una categoria
(ruolo) ad un elemento del testo a seconda del contesto.
Ad esempio, si può richiedere che il titolo vada all’inizio del
testo, o che una lista sia composta solo di elementi della lista,
e non da paragrafi, ecc.
16
Fabio Vitali - Almaweb 2002
Caratteristiche di SGML
Generic
Markup
Un documento SGML consiste in oggetti di varie classi (capitoli,
titoli, riferimenti, oggetti grafici, etc.), non sequenze di istruzioni di
formattazione. Questi oggetti sono chiamati elementi. SGML
identifica gli estremi degli elementi tramite tag iniziali e finali. :
<ref>Vedi anche Rossi 1990</ref>
Struttura
gerarchica
Gli elementi si possono contenere reciprocamente in una gerarchia:
un capitolo contiene un titolo ed una o più sezioni che a loro volta
contengono altri elementi, etc.).
Specifiche
formali
I tipi definiti in uno o più documenti SGML sono definiti
formalmente prima dell’inizio del documento, in un DTD (Document
Type Declaration).
Rappresentazione
leggibile
SGML utilizza un formato di testo semplice per contenere tutte le
informazioni da esso codificate.
17
Fabio Vitali - Almaweb 2002
HTML
Il
linguaggio HTML è un tipo di documenti SGML (esiste un DTD di
HTML).
HTML viene usato dai browser WWW per visualizzare documenti
ipertestuali. Tramite HTML è possibile realizzare documenti con
una semplice struttura, aspetti grafici anche sofisticati, che
contengono testo, immagini, oggetti interattivi e connessioni
ipertestuali ad altri documenti
Fino ad oggi i browser si sono preoccupati poco della correttezza
sintattica o strutturale dei documenti HTML. Questo significa che
tra un documento HTML visualizzabile da un browser WWW ed un
documento HTML corretto esistono differenze anche sensibili.
18
Fabio Vitali - Almaweb 2002
HTML
È
normale associare un significato strutturale agli elementi definiti
in un DTD. HTML associa anche significati grafici agli elementi che
definisce. Cioè dà istruzioni più o meno precise su come rendere
graficamente gli elementi che definisce.
Questo porta anche ad abusi della resa grafica che a noi interessano
poco. Per noi la resa grafica finale, in assenza di linguaggi di stile
appropriato, è secondaria.
HTML non forza strutture gerarchiche nei suoi documenti. Inoltre in
HTML i vincoli di contenimento tra elementi sono pochi e piuttosto
ovvi. I browser WWW sono ancora più lassisti a questo proposito.
19
Fabio Vitali - Almaweb 2002
La struttura di base di un documento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Titolo del documento</TITLE>
</HEAD>
<BODY>
<P>Testo di un paragrafo</P>
</BODY>
</HTML>
Tag strutturali di base: HTML, HEAD e BODY
20
Fabio Vitali - Almaweb 2002
Un primo esempio di HTML
<BODY>
<H1>Intestazione maggiore</H1>
<P> Questo é un paragrafo completo di un documento.
Scrivo e scrivo finchè non riempio varie righe,
perchè voglio vedere come va a capo
automaticamente. Certo non é un documento molto
eccitante.</P>
<P>Forse che vi aspettavate <B>poesia</B>? </P> <HR>
<P>Una lista di cose importanti da ricordare:</P>
<UL>
<LI>Gestione di spazi, tabulatori e ritorni a capo</LI>
<LI>Dichiarazione di tipo del documento</LI>
<LI>Struttura del documento</LI>
<LI>Annidamento e chiusura dei tag</LI>
</UL>
</BODY>
21
Fabio Vitali - Almaweb 2002
Il risultato su Netscape
22
Fabio Vitali - Almaweb 2002
Tag di blocco e stili di carattere
Tag di struttura del documento:
Tag di strutturazione di blocchi:
HTML, HEAD, BODY, TITLE
Intestazione: H1, H2, H3, H4, H5, H6
Paragrafo: P, PRE, XMP, LISTING, ADDRESS
Liste: UL, OL, DIR, MENU, DL
Tag di strutturazione dei caratteri:
Elementi idiomatici: CITE, CODE, EM, KBD, SAMP,
STRONG, VAR
Elementi tipografici: B, I, TT
23
Fabio Vitali - Almaweb 2002
Link ed immagini
Un
anchor (elemento A) deve avere o un attributo HREF o un
attributo NAME. Può averli entrambi.
L'attributo HREF specifica una destinazione. Quindi <A HREF="xx"> è un
estremo di partenza. La destinazione è specificata come un URL
(Universal Resource Locator). Gli URL sono o assoluti
("http://www.cs.unibo.it/~fabio/index.html") o relativi
("esempio2.html").
L'attributo NAME specifica una stringa come nome dell'anchor. E' poi
possibile utilizzarlo in altri contesti. L'uso più comune è come
destinazione puntuale di un link. Es: <A
HREF="esempio2.html#prova">click </A>
Un’immagine
(elemento IMG) deve avere l’attributo SRC, che
specifica l'URL del file contenente l'immagine. E' molto opportuno che
abbia anche l'attributo ALT. IMG permette altri attributi:
ALIGN: allineamento dell'immagine al testo circostante.
USEMAP: indica che l'immagine è una mappa client-side.
WIDTH: Può forzare una larghezza dell'immagine.
HEIGHT: forza una altezza dell'immagine.
24
Fabio Vitali - Almaweb 2002
Il risultato su Netscape
25
Fabio Vitali - Almaweb 2002
Il codice della pagina
<BODY>
<H1>Questa è una prova di IMG ed A</H1>
<P>L'elemento <A> definisce gli estremi dei link. </P>
<UL>
<LI>L'attributo HREF del tag A crea l'estremo di partenza
di un documento. Qui c'è un esempio che porta
al <A HREF="1.html">primo documento</A>. </LI>
<LI>L'attributo NAME specifica quello come luogo di
destinazione di un link. Ad esempio:
<A NAME="prova">dell'estremo di un link</A>. </LI>
</UL>
<P>L'elemento <IMG> inserisce in questa posizione
un'immagine posta in un file esterno. <BR>Ad esempio:
<IMG SRC="esempio.gif" ALT="Un rettangolo ed un'ellisse">
<UL>
<LI>L'attributo SRC specifica l'URL del file che contiene
l'immagine. </LI>
<LI>L'attributo ALT specifica una stringa da visualizzare
se non si può visualizzare l'immagine. </LI>
</UL>
</BODY>
26
Fabio Vitali - Almaweb 2002
Form
Con
i FORM si utilizzano le pagine HTML per inserire valori
che vengono poi elaborati sul server. I FORM sono legati al
CGI (Common Gateway Interface):
Il browser raccoglie dati con un form dall’utente. Crea una
connessione HTTP con il server, specificando una ACTION
(cioè un destinatario) a cui fare arrivare i dati. Il destinatario
riceve i dati, li elabora e genera un documento di risposta,
che viene spedito, tramite il server HTTP, al browser.
I form permettono di specificare l’inserimento di dati in
modulistica: campi di inserimento dati, pulsanti, bottoni radio,
checkbox, liste a scomparsa.
27
Fabio Vitali - Almaweb 2002
Esempio di form
28
Fabio Vitali - Almaweb 2002
Il codice della form
<P>Questo documento contiene una prova di FORM:</P>
<FORM METHOD="GET" ACTION="http://www.sito.it/cgi-bin/a.pl">
<BR>Nome:<INPUT TYPE="text" NAME="Nome" VALUE="Ugo" SIZE=40>
<BR>Cognome:<INPUT TYPE="text" NAME="Cognome" VALUE="Rossi">
<P>Sesso: <INPUT TYPE="radio" NAME="Sesso" VALUE="M"> M
<INPUT TYPE="radio" NAME="Sesso" VALUE="F"> F </P>
<BR>Gusti:
<INPUT TYPE="checkbox" NAME="Gusti" VALUE="Arte"> Arte
<INPUT TYPE="checkbox" NAME="Gusti" VALUE="Cinema"> Cinema
<INPUT TYPE="checkbox" NAME="Gusti" VALUE="Fumetti"> Fumetti
<P><INPUT TYPE=submit NAME="Submit" VALUE="Ok">
<INPUT TYPE=reset NAME="Cancel" VALUE="Annulla">
</FORM>
29
Fabio Vitali - Almaweb 2002
Entità in HTML
HTML definisce un certo numero di entità per quei caratteri che
sono:
proibiti perché usati in HTML (<, >, &, “, ecc.)
proibiti perché non presenti nell’ASCII a 7 bit.
amp
lt (less than)
reg
Aelig
Agrave
aelig
agrave
ccedil
ecc.
&
<
®
Æ
À
æ
à
ç
quot
“
gt (greater than)
>
nbsp (non-breaking space)
Aacute
Á
Auml
Ä
aacute
á
auml
ä
ntilde
ñ
30
Fabio Vitali - Almaweb 2002
Il tag BODY ed i colori
BODY
permette degli attributi:
BGCOLOR: colore del background
TEXT: colore del testo
LINK: colore del link non visitato
VLINK: colore del link visitato
ALINK: colore del link attivato
I
colori sono introdotti dal carattere # e composti da tre numeri
esadecimali, che rappresentano la quota di componente di rosso,
verde e blu del colore. Ad es:
#000000 = Nero
#FF0000 = Rosso
#0000FF = Blu scuro #FFFFFF = Bianco
#00FF00 = Verde scuro
#FFFF00 = Giallo
31
Fabio Vitali - Almaweb 2002
Tabelle
Le tabelle vengono specificate riga per riga.
Di ogni riga si possono precisare gli elementi, che sono o
intestazioni o celle normali.
Una tabella può anche avere una didascalia.
Il tag TABLE introduce una tabella.
Il tag TR introduce una riga di una tabella
Il tag TH introduce una cella intestazione. TD una cella
normale.
Il tag CAPTION introduce una didascalia.
32
Fabio Vitali - Almaweb 2002
Un esempio di tabella
33
Fabio Vitali - Almaweb 2002
Il codice della tabella
<TABLE BORDER=1 CELLPADDING=5>
<TR> <TH>Mese
<TH> Entrate
<TR> <TH>Gennaio <TD> 12.000
<TR> <TH>Febbraio <TD> 11.500
<TR> <TH>Marzo
<TD> 14.000
</TABLE>
<TH> Uscite </TR>
<TD> 10.000 </TR>
<TD> 9.000 </TR>
<TD> 11.000 </TR>
34
Fabio Vitali - Almaweb 2002
Mappe client-side
HTML prevede image map. Un’image map è un’immagine (il cui
contenuto è ignoto ad HTML) in cui alcune aree vengono
specificate e a cui viene associata una destinazione
ipertestuale. L’effetto è di aver creato un’immagine in cui, a
seconda della locazione in cui si clicca, si va in una destinazione
diversa.
Queste mappe sono client-side: la corrispondenza tra click e
area viene fatta sul browser; l'elenco delle zone viene spedito
nel documento HTML. Esso ha questa forma:
<IMG SRC=immagine.gif USEMAP="#pippo">
<MAP NAME="pippo">
<AREA shape=rect coord="0,0,100,100" href="doc1.html">
<AREA shape=circle coord=”100,50, 100" href="doc2.html">
<AREA shape=poly coord=”100,50,100,35,50,80"
href="doc3.html">
</MAP>
35
Fabio Vitali - Almaweb 2002
I frame
I frame servono per dividere la finestra in più zone
indipendenti ed associare a ciascuna di loro un documento
diverso.
Ogni zona (o frame) ha un nome, che viene usata per
specificare in quale zona viene visualizzato la destinazione di
un link.
Il tag FRAMESET introduce una serie di frame o verticali o
orizzontali. FRAMESET può contenere annidati altri
FRAMESET (per cambiare l’orientamento).
La definizione dei link A cambia per rendere possibile
precisare il nome di una zona o di una finestra come
destinazione del documento.
36
Fabio Vitali - Almaweb 2002
Un esempio di frame
37
Fabio Vitali - Almaweb 2002
Il codice del frame
<HTML>
<FRAMESET COLS="50%,*">
<FRAME SRC="f2.html" NAME="sinistra">
<FRAMESET ROWS="30%,*">
<FRAME SRC="f3.html" NAME="destra alto">
<FRAME SRC="f4.html" NAME="destra basso">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Testo per browser che non supportano i
frame</P>
</BODY>
</HTML>
38
Fabio Vitali - Almaweb 2002
Bibliografia
E. Wilde, Wilde’s WWW, Springer Verlag, 1999
Altri testi
(gli RFC sono disponibili come http://www.ietf.org/rfc/rfc####.txt)
K. Sollins, L. Masinter, Functional Requirements for Uniform Resource Names,
RFC 2276, Jan. 1998,
T. Berners-Lee, L. Masinter, M. McCahill, Uniform Resource Locator, RFC 1738,
Dec. 1994
R. Fielding, Relative Uniform Resource Locator, RFC 1808, Jun 1995.
T. Berners-Lee, R. Fielding, H. Frystyk, Hypertext Transfer Protocol -HTTP/1.0, RFC 1945, May 1996
D. Kristol, L. Montulli, HTTP State Management Mechanism, RFC 2109,
February 1997
R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, T. BernersLee, Hypertext Transfer Protocol -- HTTP/1.1, RFC 2616, June 1999
D. Raggett, A. Le Hors, I. Jacobs, HTML 4.01 Specification, W3C
Recommendation 24 December 1999, http://www.w3.org/TR/html401
39