Markup e HTML

Markup e HTMLFabio Vitali

Fabio Vitali - Almaweb 2002

2

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.


3

c aratteri p ixel

parole oggetti

paragrafi campi

pagine record

documenti

collezioni

letteratura

frame

Una visione telescopica dei documenti (1)

Una struttura di dipendenze:


4

Una visione telescopica dei documenti (2) Caratteri

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)

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 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.


5

Rossi Andrea

Beatrice

Filippo

Marco

Pietro

Davide

Via Indipendenza 1

Via Ugo Bassi 4

Via Zamboni 22

Via Mazzini 10

Via Irnerio 7

Via Indipendenza 6

Via Marconi 3

Davide

Rossini

221145

337541

354487

652311

487522

356595

657423

Cognome Nome Indirizzo Telefono

camporecord

schema

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.


6

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.


7

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


8

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, 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, ...

3

Un testo su carta


9

Treuominiinbarcajeromekjerome1889capitoloprimotreinvalidilesofferenzedigeorgeeharrislavittimadicentosettemalattieinguaribilieravamoinquattrogeorge,williamsamuelharrisioemontmorencystandocenesedutiincameramiafumavamoeparlavamodiquantofossimomalridottimalridottidalpuntodivistadellasaluteintendonaturalmentecisentivamotuttipiuttostogiùdicorda

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.


10

Tre Uomini in BarcaJerome K. Jerome (1889)Capitolo primoTre 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, ...

Markup metabolizzatoAggiungiamo markup puntuazionale e presentazionale: maiuscole/minuscole, punteggiatura, spazi e ritorni a capo sono essi stessi elementi di markup.


11

{\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 }}

Markup proceduraleSono 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.


12

<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>… </ROMANZO>

Markup descrittivo Sono informazioni (descrizioni) sugli elementi del documenti,

che ne specificano il ruolo, la giustificazione, la relazione con gli altri elementi.


13

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à


14

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.


15

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.


16

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.


17

Caratteristiche di SGMLGeneric 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 formaliI tipi definiti in uno o più documenti SGML sono definiti formalmente prima dell’inizio del documento, in un DTD (Document Type Declaration).

Rappresentazione leggibileSGML utilizza un formato di testo semplice per contenere tutte le informazioni da esso codificate.


18

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 documentiFino 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.


19

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.


20

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


21

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>


22

Il risultato su Netscape


23

Tag di blocco e stili di carattere

Tag di struttura del documento: HTML, HEAD, BODY, TITLE

Tag di strutturazione di blocchi: 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


24

Link ed immaginiUn 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.


25

Il risultato su Netscape


26

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>


27

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.


28

Esempio di form


29

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>


30

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 & quot “ lt (less than) < gt (greater than) > reg ® nbsp (non-breaking space) Aelig Æ Aacute Á Agrave À Auml Ä aelig æ aacute á agrave à auml ä ccedil ç ntilde ñecc.


31

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 #00FF00 = Verde scuro

#0000FF = Blu scuro #FFFFFF = Bianco #FFFF00 = Giallo


32

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.


33

Un esempio di tabella


34

Il codice della tabella

<TABLE BORDER=1 CELLPADDING=5> <TR> <TH>Mese <TH> Entrate <TH> Uscite </TR> <TR> <TH>Gennaio <TD> 12.000 <TD> 10.000 </TR> <TR> <TH>Febbraio <TD> 11.500 <TD> 9.000 </TR> <TR> <TH>Marzo <TD> 14.000 <TD> 11.000 </TR></TABLE>


35

Mappe client-sideHTML 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>


36

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.


37

Un esempio di frame


38

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>


39

BibliografiaE. Wilde, Wilde’s WWW, Springer Verlag, 1999Altri 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. Berners-Lee,

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

Documents

Markup e HTML