Informatica
HTML
Francesco Tura
[email protected]
© F. Tura
1
HTML
(Hyper Text Markup Language)
Linguaggio utilizzato per creare pagine
documenti ipertestuali da rendere disponibili su un
web server
IPERTESTO struttura informativa costituita di un insieme di
pagine multimediali (testi+immagini+suoni) consultabili tramite un
programma applicativo denominato browser in modo non solo
sequenziale, ma anche con l’utilizzo di collegamenti ipertestuali (link)
che rimandano ad altre pagine che possono essere memorizzate sia
sullo stesso sia su altri web server collegati in rete
Il sistema di ipertesti più conosciuto e diffuso è il
World Wide Web (WWW) di Internet, che utilizza l’HTML
© F. Tura
2
HTML
(Hyper Text Markup Language)
È stato sviluppato alla fine degli anni ‘80 dall’informatico
inglese Tim Berners-Lee. Si è diffuso su larga scala alla metà
degli anni ‘90.
È basato su un altro linguaggio, detto SGML (Standard
Generalised Markup Language), simile ma con scopi più
generici
È compatibile con qualsiasi sistema operativo
La sintassi dell’HTML è stabilita internazionalmente dal
World Wide Web Consortium (W3C)
Sono state sviluppate alcune sue versioni più estese, come XHTML e XML,
che presentano maggiori potenzialità di rappresentazione (web semantico)
© F. Tura
3
CARATTERISTICHE FONDAMENTALI
DEL LINGUAGGIO HTML
Ogni documento ipertestuale scritto in HTML deve essere
contenuto in un file la cui estensione deve essere .htm o
.html
Ogni documento ipertestuale scritto in HTML deve
essere aperto – per la sua visualizzazione – tramite un
programma browser (es. Internet Explorer, Mozilla
Firefox, Netscape, ecc.)
L’unità sintattica dell’HTML è l’elemento, il quale deve
essere compreso tra due tag (uno di apertura e uno di
chiusura)
TAG identificatore [= stringa alfanumerica compresa tra i
simboli < e >] che serve a spiegare al programma browser come
dovrà essere impaginato il testo espresso in HTML
© F. Tura
4
SINTASSI DELL’HTML
TIPI DI TAG
<stringa> tag di apertura
</stringa> tag di chiusura
I tag possono essere scritti indifferentemente in maiuscolo o minuscolo
[ non sono case sensitive]
© F. Tura
5
SINTASSI DELL’HTML
TAG DI BASE
<html>, </html> apertura e chiusura di un documento ipertestuale
sono obbligatori
<head>, </head> definiscono le impostazioni di intestazione (es.
titolo, ecc.) del documento ipertestuale
<title>, </title> definiscono il titolo che deve apparire in testa
al documento ipertestuale
<body>, </body> definiscono il corpo (parte principale) del
documento ipertestuale
© F. Tura
6
SINTASSI DELL’HTML
PARAMETRI
Alcuni tag possono contenere uno o più parametri (detti
anche attributi), che servono a specificare meglio il
significato del tag stesso
parametro stringa alfanumerica contenuta all’interno del tag che
contiene un valore preceduto dal segno = secondo la seguente
sintassi:
< nometag nomeparametro=valore nomeparametro=valore [...] >
© F. Tura
7
SINTASSI DELL’HTML
SEZIONE CORPO
Qualsiasi testo che si desideri inserire all'interno della
pagina va messo nella sezione corpo vero e proprio del
codice, ovvero dopo <body> e prima di </body>
Fa eccezione l’eventuale titolo della pagina, che va nella sezione
intestazione
© F. Tura
8
ESEMPI DI SINTASSI DELL’HTML
(1) INTITOLARE UN DOCUMENTO
Esempio: Creare una pagina vuota ma con in alto il seguente titolo:
“SALVE, MONDO”
<html>
<head>
<title> SALVE, MONDO </title>
</head>
</html>
N.B. valido per questo e per tutti gli esempi seguenti: il testo ivi indicato in rosso va scritto in un
file che va salvato con un nome ed una estensione .htm o html. Dopodiché va aperto con un
programma browser per ottenere la visualizzazione della pagina così come impostata in HTML.
© F. Tura
9
ESEMPI DI SINTASSI DELL’HTML
INTITOLARE UN DOCUMENTO
Il browser presenterà la pagina come segue:
SALVE, MONDO
© F. Tura
10
ESEMPI DI SINTASSI DELL’HTML
(2) AGGIUNGERE CAPITOLI E PARAGRAFI
I titoli dei capitoli e dei paragrafi vanno inseriti tra i tag
<hn> e </hn>, ove n indica il livello gerarchico. Si
possono usare fino a 6 livelli: <h1>, <h2>, <h3>, <h4>, <h5>,
<h6>
© F. Tura
11
ESEMPI DI SINTASSI DELL’HTML --- AGGIUNGERE TITOLI E PARAGRAFI
Esempio: Creare una pagina intitolata “METROPOLI EUROPEE”,
ove le metropoli sono raggruppate per Regione di appartenenza, a loro
volta raggruppate per Stato di appartenenza
© F. Tura
<html>
<head>
<title> METROPOLI EUROPEE </title>
</head>
<body>
<h1> 1. Francia </h1> <h2> 1.1 Provenza-Alpi-Costa Azzurra </h2>
<h3> 1.1.1. Marsiglia </h3> <h3> 1.1.2. Nizza </h3>
<h2> 1.2. Normandia </h2> <h3> 1.2.1. Roen </h3> <h3> 1.2.2. Caen
</h3>
<h1> 2. Germania </h1> <h2> 2.1. Baviera </h2> <h3> 2.1.1. Monaco
</h3> <h3> 2.1.2. Ratisbona </h3>
<h2> 2.2. Baden-Württemberg <h2> <h3> 2.2.1. Stoccarda <h3>
<h3> 2.2.2. Heidelberg <h3>
</body>
12
</html>
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE TITOLI E PARAGRAFI
Il browser presenterà la pagina come segue:
METROPOLI EUROPEE
1. Francia
1.1. Provenza-Alpi-Costa Azzurra
1.1.1. Marsiglia
1.1.2. Nizza
1.2. Normandia
1.2.1. Rouen
1.2.2. Caen
2. Germania
2.1. Baviera
2.1.1. Monaco
2.1.2. Ratisbona
2.2. Baden-Württemberg
2.2.1. Stoccarda
2.2.2. Heidelberg
© F. Tura
13
ESEMPI DI SINTASSI DELL’HTML
(3) AGGIUNGERE TESTO NORMALE
Ogni periodo (paragraph), ossia ogni porzione di testo
compresa tra due punti e a capo, va inserita tra i tag <p> e
</p>
•
Il tag di chiusura </p> è facoltativo
© F. Tura
14
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE TESTO NORMALE
Nell’esempio precedente, se riguardo alla città di Marsiglia vogliamo
aggiungere del testo sottostante, il codice dovrà essere il seguente:
<html>
<head>
<title> METROPOLI EUROPEE </title>
</head>
<body>
<h1> 1. Francia </h1>
<h2> 1.1 Provenza-Alpi-Costa Azzurra </h2> <h3> 1.1.1.
Marsiglia </h3> <p> Marsiglia si trova nella Francia meridionale.
</p> <p> Si tratta del principale porto della Francia. </p>
<h3> 1.1.2. Nizza </h3
[…]
© F. Tura
15
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE TESTO NORMALE
Il browser presenterà la pagina come segue:
METROPOLI EUROPEE
1. Francia
1.1. Provenza
1.1.1. Marsiglia
Marsiglia si trova nella Francia meridionale.
Si tratta del principale porto della Francia.
1.1.2. Nizza
[…]
© F. Tura
16
ESEMPI DI SINTASSI DELL’HTML
(4) FORZARE L’ “ A CAPO”
Nel caso in cui si desideri andare a capo senza
terminare il periodo (paragraph), ciò può essere fatto
inserendo il tag <br>
© F. Tura
17
ESEMPI DI SINTASSI DELL’HTML
FORZARE L’ “A CAPO”
Supponiamo di volere mettere a capo una informazione per darle
più risalto, per esempio la data dell’appello:
<html>
<head>
<title> ATTENZIONE </title>
</head>
<body>
<p> L’appello Informatica giuridica si terrà <br> GIOVEDI 5 GIUGNO
ALLE 9.30 <br> nell’Aula Magna della Facoltà </p>
</body>
</html>
© F. Tura
18
ESEMPI DI SINTASSI DELL’HTML
FORZARE L’ “A CAPO”
Il browser presenterà la pagina come segue:
AVVISO
L’appello di giugno di Informatica giuridica si terrà
GIOVEDI 5 GIUGNO ALLE 9.30
nell’Aula Magna della Facoltà.
© F. Tura
19
ESEMPI DI SINTASSI DELL’HTML
(5) AGGIUNGERE ENFASI
Per enfatizzare una porzione di testo, essa può essere
racchiusa tra i tag <em> e </em>
Il tipo di enfatizzazione non è predefinito dal
programmatore HTML, bensì viene scelto dal browser che
visualizzerà la pagina
il browser utilizzato sarà libero di scegliere se enfatizzare
il testo con il corsivo, con la sottolineatura,
con il grassetto, ecc.
© F. Tura
20
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE ENFASI
Nell’esempio precedente, invece che scriverla in maiuscolo,
potremmo dare enfasi alla data dell’appello nel modo seguente:
<html>
<head>
<title> ATTENZIONE </title>
</head>
<body>
<p> L’appello di giugno di Informatica giuridica si terrà <br>
<em> giovedì 5 giugno alle 9.30 </em> <br> nell’Aula Magna
della Facoltà </p>
</body>
</html>
© F. Tura
21
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE ENFASI
Il browser potrebbe presentare la pagina come segue:
AVVISO
L’appello di giugno di Informatica giuridica si terrà
giovedì 5 giugno alle 9.30
nell’Aula Magna della Facoltà.
ma anche come segue:
AVVISO
L’appello di giugno di Informatica giuridica si terrà
giovedì 5 giugno alle 9.30
nell’Aula Magna della Facoltà.
ecc.
© F. Tura
22
ESEMPI DI SINTASSI DELL’HTML
(6) AGGIUNGERE LISTE
I tipi di lista che possono essere inseriti nel testo sono
tre:
A. LISTA NON ORDINATA
B. LISTA ORDINATA
C. LISTA DI DEFINIZIONI
© F. Tura
23
ESEMPI DI SINTASSI DELL’HTML
(6.A) AGGIUNGERE LISTE NON ORDINATE
Una lista non ordinata è un elenco di elementi che si
desidera sia visualizzata senza numerazione
progressiva, ma solamente andando a capo con punti o
altri simboli
Per inserire una lista non ordinata si usano i tag <ul>
e </ul> per indicare l’inizio e la fine della lista, mentre
si usano i tag <li> e </li> per indicare ogni elemento
della lista
Il tag di chiusura </li> di ogni elemento è facoltativo mentre il tag
di chiusura </ul> della lista è obbligatorio
•
© F. Tura
24
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE ORDINATE
Esempio: aggiunta di lista non ordinata
<html>
<head>
<title> TEORIA DEL COLORE </title>
</head>
<body>
<p> I colori primari sono:
<ul>
<li> giallo </li> <li> rosso </li> <li> blu </li>
</ul>
cui si aggiungono il bianco e il nero </p>
</body>
</html>
© F. Tura
25
ESEMPI DI SINTASSI DELL’HTML © F. Tura
AGGIUNGERE LISTE NON ORDINATE
Il browser potrebbe presentare la pagina come segue:
TEORIA DEL COLORE
I colori primari sono:
• giallo
• rosso
• blu
cui si aggiungono il bianco e il nero.
oppure come segue:
TEORIA DEL COLORE
I colori primari sono:
giallo
rosso
blu
cui si aggiungono il bianco e il nero.
ecc.
26
ESEMPI DI SINTASSI DELL’HTML
(6.B) AGGIUNGERE LISTE ORDINATE
Una lista ordinata è un elenco di elementi che si
desidera sia visualizzata andando a capo con
numerazione progressiva
Per inserire una lista ordinata si usano i tag <ol> e
</ol> per indicare l’inizio e la fine della lista, mentre si
usano i tag <li> e </li> per indicare ogni elemento
della lista
Il tag di chiusura </li> di ogni elemento è facoltativo mentre il tag
di chiusura </ol> della lista è obbligatorio
•
© F. Tura
27
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE ORDINATE
Esempio: aggiunta di lista ordinata
<html>
<head>
<title> FIUMI ITALIANI </title>
</head>
<body>
<p> I principali fiumi italiani sono:
<ol>
<li> Po </li> <li> Adige </li> <li> Tevere </li> <li> Arno </li>
</ol>
nell’ordine sopra indicato. </p>
</body>
</html>
© F. Tura
28
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE NON ORDINATE
Il browser presenterà la pagina come segue:
FIUMI ITALIANI
I principali fiumi italiani sono:
1. Po
2. Adige
3. Tevere
4. Arno
nell’ordine sopra indicato.
29
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(6.C) AGGIUNGERE LISTE DI DEFINIZIONI
Una lista di definizioni è un elenco di termini di cui
si riporta una definizione nella riga successiva, in
posizione leggermente indentata rispetto al termine
sovrastante
Il termine da definire deve essere compreso tra i tag
<dt> e </dt>, mentre la definizione deve seguire
compresa tra i tag <dd> e </dd>. L’intera lista deve
poi essere compresa tra i tag <dl> e </dl>
I tag di chiusura </dt> e </dd> di termini e definizioni sono
facoltativi mentre il tag di chiusura </dl> della lista è obbligatorio
•
© F. Tura
30
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE DI DEFINIZIONI
Esempio: aggiunta di lista di definizioni
<html>
<head>
<title> MANUALE DI INFORMATICA </title>
</head>
<body>
<dl>
<dt> Informatica </dt>
<dd> scienza della rappresentazione e della elaborazione della informazione </dd>
<dt> Programma </dt>
<dd> formulazione di un algoritmo in un linguaggio di programmazione </dd>
<dt> Motore di ricerca </dt>
<dd> programma per la ricerca della informazione sul world wide web </dd>
</dl>
</body>
</html>
31
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE DI DEFINIZIONI
Il browser presenterà la pagina come segue:
MANUALE DI INFORMATICA
Informatica
scienza della rappresentazione e della elaborazione della informazione
Programma
formulazione di un algoritmo in un linguaggio di programmazione
Motore di ricerca
programma per la ricerca della informazione sul world wide web
32
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(7) INSERIRE IMMAGINI
© F. Tura
Per inserire immagini (o filmati) nella pagina si utilizza il tag
<img>.
All’interno del tag va inserito il parametro src
src indica il file in cui è contenuta l’immagine
Il file contenente l’immagine può trovarsi anche in un’altra
cartella o su un altro web server rispetto a quella ove è scritto il testo
html: in tal caso occorre indicare rispettivamente il percorso o l’url
della risorsa (ovvero dell’immagine da mostrare)
Il tag img può contenere anche altri parametri, come per esempio:
width indica la larghezza desiderata per l’immagine (in pixel)
height indica l’altezza desiderata per l’immagine (in pixel)
• Il tag <img> non prevede tag di chiusura
33
ESEMPI DI SINTASSI DELL’HTML
INSERIRE IMMAGINI
Esempio: inserimento di un’immagine memorizzata nel file
c:\immagini\hardware\tastiera.jpg
<html>
<head>
<title> IMMAGINI DI INFORMATICA </title>
</head>
<body>
<p> Qui sotto viene raffigurato un pc. </p>
<img src=c:\immagini\hardware\pc.jpg widht=90 height=100>
</body>
</html>
34
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
INSERIRE IMMAGINI
Il browser presenterà la pagina come segue:
IMMAGINI DI INFORMATICA
Qui sotto viene raffigurato un pc.
35
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(8) COLLEGAMENTO IPERTESTUALE
(LINK) AD ALTRE PAGINE
Il collegamento ipertestuale (link) è un rimando ad altre pagine
web, le quali possono essere memorizzate sia sullo stesso sia su altri
web server collegati in Internet
Viene creato utilizzando i tag <a> e </a>.
Il tag di apertura <a> prevede un parametro obbligatorio href il
quale indica l’URL della pagina web alla quale si vuole rimandare
Tra il tag di apertura e il tag di chiusura occorre inserire del testo:
tale testo sarà visualizzato dal browser in evidenza: facendo clic su
di esso l’utente accederà direttamente alla pagina web indicata,
se la pagina e l’eventuale collegamento Internet sono disponibili.
© F. Tura
36
ESEMPI DI SINTASSI DELL’HTML
COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE
Esempio1: collegamento ipertestuale (link) ad una pagina web memorizzata nello
stesso web server e nella stessa directory della pagina corrente
<html>
<head>
<title> INFORMATICA </title>
</head>
<body>
<p> Dicesi programma la formulazione di un <a href= linguaggi.html > algoritmo </a> in un
linguaggio di programmazione. </p>
</body>
</html>
37
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE
Esempio2: collegamento ipertestuale (link) ad una pagina web memorizzata in
altro web server
<html>
<head>
<title> FIUMI EUROPEI </title>
</head>
<body>
<p> Il Danubio attraversa la <a href=www.atlante.it/baviera.html> Baviera </a> e il
territorio austriaco. </p>
</body>
</html>
38
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE
es.1: il browser presenterà la pagina come segue:
INFORMATICA
Dicesi programma la formulazione di un algoritmo in un
linguaggio di programmazione.
es.2: il browser presenterà la pagina come segue:
FIUMI EUROPEI
Il Danubio attraversa la Baviera e il territorio austriaco.
39
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(9) CARATTERI SPECIALI
Alcuni caratteri particolari (es. lettere accentate o con
particolari caratteri aggiuntivi: è, é, å, ô, ü, ñ, ß, ç, ecc., altri
simboli: €, &, ecc.) non fanno parte del set di caratteri
universalmente riconosciuti da tutti i browser e quindi non
possono essere introdotti così come sono
Affinché siano universalmente riconosciuti da tutti i browser è
necessario sostituirli con particolari comandi che iniziano con il
carattere & seguito da una descrizione standardizzata del carattere
da visualizzare
© F. Tura
40
ESEMPI DI SINTASSI DELL’HTML
CARATTERI SPECIALI
è &egrave [È &Egrave]
é &eacute. [È &Eacute]
[similmente per le altre vocali]
ñ &ntilde
ü &uuml [similmente per le altre vocali]
ô &ocirc [similmente per le altre vocali]
ß &szlig
ç &ccedil
€ &euro
& &amp
[…]
© F. Tura
41
ESEMPI DI SINTASSI DELL’HTML
CARATTERI SPECIALI
Esempio: inserimento di un testo contenente caratteri speciali
<html>
<head>
<title> DIZIONARIO </title>
</head>
<body>
<p> La traduzione italiana di Espa&ntildea &egrave Spagna. </p>
</body>
</html>
42
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
AGGIUNGERE LISTE DI DEFINIZIONI
Il browser presenterà la pagina come segue:
DIZIONARIO
La traduzione italiana di España è Spagna.
43
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(10) IMPEDIRE L’ “ A CAPO”
A volte può essere opportuno impedire che nella visualizzazione
di una determinata coppia di parole il browser vada a capo tra
una parola e l’altra
Tale divieto può essere imposto in HTML con il comando
&nbsp; al posto dello spazio
© F. Tura
44
ESEMPI DI SINTASSI DELL’HTML
IMPEDIRE L’ “A CAPO”
Esempio: inserimento di un testo in cui non sia possibile andare a
capo tra le parole Coca e Cola
<html>
<head>
<title> BIBITE ANALCOLICHE </title>
</head>
<body>
<p> La bibita pi&ugrave diffusa &egrave la Coca&nbsp;Cola. </p>
</body>
</html>
il browser, nel caso in cui la parola Coca si trovi a fine riga,
manderà a capo l’intera locuzione Coca Cola
45
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(11) INSERIRE TESTO PREFORMATTATO
Ogni browser ha una certa autonomia nel visualizzare il testo
scritto in HTML l’autonomia riguarda, ad es. come andare a
capo, quante righe da saltare, come separare le parole, come
enfatizzare, ecc.
Per impedire al browser di turno di utilizzare le sue convenzioni di
formattazione è possibile forzare la rigida visualizzazione del testo a
come inserito in HTML utilizzando i tag <pre> e </pre>
Tutto il testo compreso tra i due tag suddetti viene copiato nel
browser rispettando le occorrenze di spazi, tabulatori e linee vuote.
© F. Tura
46
ESEMPI DI SINTASSI DELL’HTML
INSERIRE TESTO PREFORMATTATO
Esempio:
<html>
<body>
<pre>
<p> LETTERA A
</pre>
</body>
</html>
LETTERA B </p>
il browser visualizzerà il testo con la stessa distanza tra le
stringhe “LETTERA A” e “LETTERA B” che è stata prevista nel
testo html
47
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
(12) ALLINEARE TESTO E IMMAGINI
Nel caso in cui si desideri inserire una immagine ed anche un
testo che la descriva, è possibile indicare al browser dove tale testo
deve essere visualizzato in relazione all’immagine
A tal fine si utilizza il parametro align all’interno del tag <img>
align=“left” e align=“right” servono per posizionare tutto il
testo che segue nell’ambito del paragrafo corrente rispettivamente
alla destra e alla sinistra dell’immagine.
© F. Tura
48
ESEMPI DI SINTASSI DELL’HTML
ALLINEARE TESTO E IMMAGINI
Esempio: allineamento dell’immagine a sinistra e del relativo testo descrittivo a destra
<html>
<body>
<p> <img src=c:\immagini\hardware\pc.jpg widht=90 height=100 align=“left”>
Esempio di pc </p>
</body>
</html>
49
© F. Tura
ESEMPI DI SINTASSI DELL’HTML
ALLINEARE TESTO E IMMAGINI
il browser visualizzerà la pagina come segue:
Esempio di pc
50
© F. Tura
