Metodologie Informatiche Applicate al Turismo 7. HTML Parte I Paolo Milazzo

(1)

Metodologie Informatiche Applicate al Turismo

7. HTML Parte I

Paolo Milazzo

Dipartimento di Informatica, Universit`a di Pisa http://pages.di.unipi.it/milazzo

milazzo di.unipi.it

Corso di Laurea in Scienze del Turismo A.A. 2016/2017

(2)

Sommario

1 Introduzione a HTML

2 Struttura di un documento HTML

3 Testo semplice e strutturato Testo semplice

Liste

4 Immagini

5 I collegamenti ipertestuali

(3)

Introduzione a HTML (1)

HTML sta per HyperText Markup Language

HTML non `e un linguaggio di programmazione, ma un linguaggio di markup(marcatura) costituito da un insieme ditag:

<html>,<p>,<table>,<img>,....

I Un documento HTML non rappresenta un programma da eseguire

I Un documento HTMLdescriveuna pagina web usando una opportuna combinazione di tag e testo semplice

Il compito di un web browser `e di interpretare un documento HTML e visualizzare la pagina web da esso descritta

I L’operazione di visualizzare una pagina web si definiscerenderingdella pagina

La versione di HTML pi`u utilizzata fino a pochi anni fa era la 4 (o meglio, 4.01)

Recentemente `e stata definita le versione 5, utilizzata da tutti i nuovi siti

(4)

Introduzione a HTML (2)

Un documento HTML `e essenzialmente un documento di testo arricchito con tag

Un frammento di HTML:

< h3 > B r e v e d e s c r i z i o n e del c o r s o : < / h3 >

< p > Nel c o r s o v e r r a n n o p r e s e n t a t i a s p e t t i r e l a t i v i a I n t e r n e t e al W o r l d W i d e Web . In p a r t i c o l a r e , gli a r g o m e n t i t r a t t a t i s a r r a n n o i s e g u e n t i : < / p >

< ul >

< li > n o z i o n i di b a s e s u l l e a r c h i t e t t u r e d e g l i e l a b o r a t o r i e la p r o g r a m m a z i o n e dei c o m p u t e r < / li >

< li > n o z i o n i di b a s e s u l l e r e t i di c o m p u t e r < / li >

< li > p r o t o c o l l i e le t e c n o l o g i e a l l a b a s e del W o r l d W i d e Web < / li >

< li > lo s v i l u p p o di s i t i web : i l i n g u a g g i H T M L e CSS < / li >

< li > p r o g e t t a z i o n e di s i t i web e a s p e t t i di u s a b i l i t a < / li >

< li > p a n o r a m i c a s u l l e n u o v e t e c n o l o g i e di s v i l u p p o di s i t i e a p p l i c a z i o n i web < / li >

< / ul >

< p > P a r t e d e l l e l e z i o n i c o n s i s t e r a n n o in e s e r c i t a z i o n i in

l a b o r a t o r i o in cui si u t i l i z z e r a n n o le t e c n o l o g i e d e s c r i t t e . < / p >

< a c l a s s = " torna - i n i z i o " h r e f = " # i n i z i o " > T o r n a all ’ i n i z i o < / a >

(5)

Introduzione a HTML (3)

Il compito di un browser `e di prendere un documento HTML e

“disegnarlo” sullo schermo

(6)

Introduzione a HTML (4)

Un buon uso di HTML prevede la separazione tra la descrizione della struttura della pagina web e la descrizione degli aspetti di

presentazione

I Lastrutturadi una pagina web include la presenza di titoli, liste, tabelle, immagini, link, ecc...

I Gli aspetti dipresentazioneinvece includono i font e i colori utilizzati, il posizionamento dei contenuti nella pagina, ecc....

Sebbene HTML (in part. la versione 4) includa alcuni aspetti presentazionali, esso dovrebbe essere usato solo per descrivere la struttura della pagina

Per descrivere gli aspetti di presentazione `e bene usare il linguaggio CSS (Cascading Style Sheets), che vedremo in seguito

(7)

Documento HTML

Un documento HTML `e un file di testo con una particolare struttura Un file HTML ha estensione .htmlo.htm

I documenti HTML possono essere creati utilizzando un qualunque editor di testi (semplice programma di scrittura).

I Il “blocco note” di Windows va benissimo per scrivere documenti HTML

Esistono anche editor specifici per HTML, di due tipi:

I Editor WYSIWYG (What You See Is What You Get)

I Editor di testi specializzati

(8)

Editor WYSIWYG (1)

Un editor WYSIWYG `e un programma che consente di realizzare un documento HTML senza dover scrivere manualmente il codice HTML Funziona in maniera simile a Microsoft Word... si lavora direttamente sul documento come apparir`a nel browser

I Esempio: per scrivere un testo in grassetto si scrive il testo stesso e si clicca su un bottone che lo trasforma in grassetto

I Il codice HTML vienegenerato(creato) dall’editor Vantaggi:

I non richiede di conoscere il linguaggio HTML

I consente di realizzare una pagina web rapidamente Svantaggi:

I il codice HTML generato spesso non `e di buona qualit`a (e.g. non funziona bene in tutti i browser)

(9)

Editor WYSIWYG (2)

Esistono diversi editor WYSIWYG, sia open-source (quindi gratuiti) che commericali, tra i quali:

I Amaya (Open-source, http://www.w3.org/Amaya/)

I CoffeeCup (Commerciale, http://www.coffeecup.com)

I Dreamweaver (Commericale,

http://www.adobe.com/products/dreamweaver)

(10)

Editor WYSIWYG (3)

Amaya

(11)

Editor HTML testuali (1)

Gli editor HTML testuali sono programmi che facilitano la scrittura del codice HTML

I Controllano che il codice sia scritto correttamente

I Facilitano la scrittura colorando le varie parti del codice con colori diversi

I Includono dei men`u (wizard) che consentono di generare frammenti di codice HTML da modificare successivamente a mano

Vantaggi:

I consentono di avere il massimo controllo sul documento realizzato

I aiutano a prevenire gli errori nella scrittura del codice HTML Svantaggi:

I richiedono di conoscere il linguaggio HTML

I richiedono pi`u tempo (rispetto agli editor WYSIWYG) per realizzare una pagina

(12)

Editor HTML testuali (2)

Esistono tantissimi editor HTML testuali, sia gratuiti che commericali, tra i quali:

I Notepad++ (Gratuito)

I HTMLKit (Sia gratuito che commerciale)

I NoteTab (Sia gratuito che commerciale)

I ....

(13)

Editor HTML testuali (3)

Notepad++

(14)

Salvatare e visualizzazare documenti HTML “in locale” (1)

Quando si usa un editor (WYSIWYG o testuale) per creare un documento HTML e lo si salva sul proprio computer, bisogna poi usare un browser per visualizzarlo

Il documento creato non `e su Internet, ma disponibile solo sul proprio computer (in locale)

Si usa la funzione “Apri file” (o simili) del browser (oppure si fa un doppio click sull’icona del file salvato)

(15)

Salvatare e visualizzazare documenti HTML “in locale” (2)

SALVA

−−−−→

APRI FILE

−−−−−−−→

(16)

Pubblicare documenti HTML sul Web

Per rendere il documento HTML disponibile su Internet (pubblicazione) bisogna copiarlo su un server web Di solito si usano programmi basati sul protocollo FTP

Gli utenti troveranno la pagina sul Web scrivendo il giusto indirizzo sul proprio browser

(17)

I tag HTML (1)

Una pagina di un sito web `e descritta da un documento HTML Una pagina pu`o essere strutturata aggiungendo ai contenuti elementi come tabelle, liste, titoli, ecc...

Il linguaggio HTML specifica un insieme di tagper descrivere nel documento HTML la struttura dei contenuti della pagina web I browser interpretano i tag HTML e li usano per ricostruire la struttura della pagina web

(18)

I tag HTML (2)

Un tag HTML racchiude al suo interno il contenuto da “taggare” ed ha la seguente sintassi

<tag1>contenuto</tag1>

Dove:

I <tag1>: `e l’apertura del tag tag1

I </tag1>: `e la chiusura del tag tag1

I contenuto: è il contenuto la cui struttura è descritta da tag1 Ad esempio, il tag h1 può essere usato cos`ı

<h1>Home Page di Paolo Milazzo</h1>

per specificare che la frase “Home Page di Paolo Milazzo” `e un titolo Ad esempio, il tag p pu`o essere usato cos`ı

<p>Hello world</p>

per specificare che la frase “Hello world” `e un paragrafo di testo semplice

(19)

I tag HTML (3)

Esistono tag che non prevedono un contenuto

I Esempio: Il tag <hr> da solo crea una riga orizzontale lungo tutta la pagina

I Per questi tag `e prevista l’apertura ma non la chiusura (cio`e non si usa mai </hr>)

Pu`o capitare che un tag preveda un contenuto ma occasionalmente venga utilizzato senza contenuto

I Tag che possono avere un contenuto se usati senza contenuto devono essere scritti in uno dei seguenti modi:

F <tag1></tag1>

F <tag1/>

I Anche per <hr> si pu`o usare la sintassi equivalente <hr/>

(20)

I tag HTML (4)

Un tag HTML pu`o anche prevedere attributi, ovvero delle propriet`a specifiche (spesso opzionali) di quel particolare tag

Gli attributi dei tag possono essere molteplici e ad ognuno si pu`o associare un valore

Gli attributi si specificano nell’apertura del tag1 con la seguente sintassi

<tag1 attr1="valore1" attr2="valore2">contenuto</tag1>

Ad esempio, il contenuto di un paragrafo (tag p) pu`o essere disposto al centro impostando l’attributo align con il valore center, ossia

<p align="center">Testo centrato</p>

Le virgolette nel valore associato a un attributo possono essere omesse quanto il valore non contiene spazi bianchi

(21)

Annidamento dei tag

I tag in un documento HTML possono (e spesso devono) essere annidatitra loro:

I ovvero, un tag pu`o contenere altri tag al suo interno

Le aperture e chiusure di tag annidati devono essere messi in

corrispondenza come se fossero parentesi di un’espressione artimetica

I L’ultimo tag aperto deve essere il primo che si chiude

I Esempio: <tag1><tag2>contenuto</tag2></tag1> `e corretto

I Esempio: <tag1><tag2>contenuto</tag1></tag2> `e SBAGLIATO!!!

Un testo contenuto dentro a pi`u tag assume tutte le propriet`a specificate da tutti i tag

I Esempio: <p>Ciao <u>a tutti</u></p> specifica che “Ciao a tutti”

è un paragrafo di testo in cui “a tutti” deve essere sottolineato (tag u) In caso di contraddizioni tra i tag applicati a un contenuto, i tag più interni hanno la priorità

(22)

Struttura di un documento HTML (1)

Un documento HTML contiene due parti:

L’header (intestazione), che contiene solo informazioni sul documento stesso;

Il corpo (body), che `e la parte di documento che viene effettivamente visualizzata.

L’intero documento inizia con il tag <html> all’interno del quale le due parti header e corpo sono delimitate dai tag <head> e <body>,

rispettivamente.

< h t m l >

< h e a d >

. . . h e a d e r del d o c u m e n t o . . . .

< / h e a d >

< b o d y >

. . . c o r p o del d o c u m e n t o . . . .

< / b o d y >

< / h t m l >

I tag <html>, <head> e <body> annidati come nell’esempio sono obbligatori in ogni documento HTML corretto

(23)

L’header di un documento HTML (1)

All’interno dell’header di un documento html `e comune trovare:

Il titolo del documento (che apparir`a in cima alla finestra del browser) usando il tag <title>. Ad esempio:

I <title>Corso di Web Programming</title>

Meta dati (informazioni aggiuntive) sul documento usate dalle applicazioni e dai motori di ricerca. Si inseriscono usando il tag

<meta>.

Il tag <meta> non prevede un contenuto e ha (di solito) il seguente formato:

I l’attributo name specifica il tipo di informazione che si vuole descrivere;

I l’attributo content specifica il contenuto dell’informazione stessa;

(24)

L’header di un documento HTML (2)

Gli utilizzi pi`u comuni del tag <meta> (corrispondenti a diversi valori per l’attributo name) sono i seguenti:

Specificare l’autore del documento

I <meta name="author" content="Paolo Milazzo">

Dare un breve descrizione del contenuto del documento

I <meta name="description" content="Sito ufficiale del corso di Metodi Informatici per il Turismo">

Elencare parole chiave che rappresentano il documento

I <meta name="keywords" content="internet html www http laurea scienze turismo paolo milazzo">

(25)

L’header di un documento HTML (4)

Queste informazioni sono usate dai motori di ricerca per indicizzare la pagina.

Un buon uso (in particolare delle keywords) pu`o dare maggiore visibilit`a alla pagina;

Attenzione a non abusare di keywords ricercatissime (e.g. sesso, mp3, ....) solo per migliorare il posizionamento della propria pagina nella lista dei motori di ricerca. Quando i motori di ricerca se ne accorgono, rimuovono la pagina dalle loro liste.

(26)

L’header di un documento HTML (5)

A questo punto un esempio di bozza di documento HTML dotato di header `e il seguente:

< h t m l >

< h e a d >

< t i t l e > P a g i n a di p r o v a < / t i t l e >

< m e t a n a m e = " a u t h o r " c o n t e n t = " P a o l o M i l a z z o " >

< / h e a d >

< b o d y >

. . . c o r p o del d o c u m e n t o . . . .

< / b o d y >

< / h t m l >

(27)

Il corpo di un documento HTML (1)

Il corpo di un documento HTML pu`o contenere un sacco di cose:

Testo (semplice e strutturato) Liste (numerate e non numerate) Tabelle

Collegamenti ipertestuali (link ad altri documenti o a altre parti dello stesso documento)

Immagini

Mappe (immagini cliccabili)

Form (moduli compilabili dall’utente) Script (piccoli programmi)

(28)

Il corpo di un documento HTML (2)

La forma di contenuto pi`u immediata `e il testo semplice.

Sebbene possa essere inserito senza usare tag particolari `e bene racchiudere i vari paragrafi di testo nel tag <p>.

Inserendo un po’ di testo nel corpo del nostro esempio otteniamo:

< h t m l >

< h e a d >

< m e t a n a m e = " a u t h o r "

c o n t e n t = " P a o l o M i l a z z o " >

< / h e a d >

< b o d y >

< p > Q u e s t a e ’ una p a g i n a di p r o v a < / p >

< / b o d y >

< / h t m l >

(29)

Documenti HTML: note sintattiche (1)

All’interno di un documento HTML si possono inserirecommenti (ignorati dal browser) con la seguente sintassi:

I commenti possono occupare pi`u righe del documento

<!--Questo e’ un commento che occupa

pi`u righe -->

(30)

Documenti HTML: note sintattiche (2)

I commenti servono a chi scrive i documenti HTML per organizzare meglio il codice

< h t m l >

< h e a d >

< m e t a n a m e = " a u t h o r "

c o n t e n t = " P a o l o M i l a z z o " >

< / h e a d >

< b o d y >

< !- - Il c o r p o d e l l a p a g i n a i n i z i a qui - ->

< p > Q u e s t a e ’ una p a g i n a di p r o v a < / p >

< / b o d y >

< / h t m l >

(31)

Documenti HTML: note sintattiche (3)

I commenti fanno anche comodo per lasciare nel documento HTML frammenti che non devono (al momento) essere visualizzati

< h t m l >

< h e a d >

< t i t l e > E s e r c i z i < / t i t l e >

< / h e a d >

< b o d y >

< p > E s e r c i z i o 1: r i s o l v e r e 5+4 < / p >

< !- -

< p >S o l u z i o n e : 9< / p >

- ->

< / b o d y >

< / h t m l >

(32)

Documenti HTML: note sintattiche (4)

I tag htmlnon sono “case sensitive”

I ovvero, si possono scrivere in maiuscolo o minuscolo indifferentemente:

<html>, <HTML>, <Html>, ....

HTML collassa tutti i caratteri di whitespace (spazio, tab, a capo, ecc...) in un unico carattere di spazio. Questo permette di

organizzare il sorgente in maniera leggibile (indentato) senza influenzare la visualizzazione sul browser

I seguenti tre esempi sono visualizzati dal browser nello stesso modo

< h t m l >

< h e a d >

< t i t l e > C i a o < / t i t l e >

< / h e a d >

< b o d y >

< p > P r o v a < / p >

< / b o d y >

< / h t m l >

< h t m l > < h e a d > < t i t l e >

C i a o < / t i t l e > < / h e a d >

< b o d y > < p > P r o v a < / p >

< / b o d y > < / h t m l >

< h t m l > < h e a d >

< t i t l e >

C i a o

< / t i t l e > < / h e a d > < b o d y >

< p >

P r o v a < / p >

< / b o d y >

< / h t m l >

(33)

Documenti HTML: note sintattiche (5)

Nei tag HTML `e bene utilizzare gli spazi in maniera corretta No spazi tra i tag e le parentesi angolari <,>

I <html> ok, < html> no, <html > no

Un singolo spazio tra tag e attributo, e tra coppie di attributi

I <meta name="author" content="Paolo Milazzo"> ok

I <meta name="author" content="Paolo Milazzo"> no

I <meta name="author" content="Paolo Milazzo"> no Nessuno spazio tra apertura/chiusura di tag e contenuto

I <p>Ciao</p> ok, <p> Ciao</p> no, <p>Ciao </p> no

(34)

Documenti HTML: note sintattiche (6)

Se nel testo di un documento HTML si vogliono usare lettere accentate e altri simboli riservati (e.g. < e >) bisogna usare leentit`a carattere:

à à è è é é `ı ì

`

o ò `u ù A` À E` È

´E É `I Ì O` Ò U` Ù

> > < < & & ” "

Ad esempio, la frase

1/3 > 1/5 poich´e 3 < 5 in un documento HTML diventa

1/3 > 1/5 poiché 3 < 5

(35)

Il corpo di un documento HTML

Vediamo ora uno per uno tutti i tipi di contenuti che possono essere usati nel corpo di un documento HTML.

Ci concentreremo sui tag principali (e i relativi attributi). Per maggiori dettagli vedere siti specializzati (ad esempio: www.html.it e

www.w3schools.com)

Negli esempi che faremo ometteremo la struttura dell’intero documento, ma illustreremo solo il frammento di codice HTML di interesse.

Si assume quindi che i frammenti di codice HTML illustrati saranno da inserire all’interno della parte <body> ... </body> di un documento HTML completo.

(36)

Il testo semplice: paragrafi

Il modo pi`u semplice per inserire testo in una pagina HTML `e tramite paragrafi:

Si usa un tag <p> per ogni paragrafo;

I paragrafi sono “unit`a logiche” di testo, spesso separati nella

visualizzazione tramite spazio verticale o indentazione della prima riga;

Se `e necessario inserire un’interruzione di linea all’interno di un paragrafo basta inserire il tag <br> (usato pi`u volte crea righe vuote)

< p > Q u e s t a e ’ una p a g i n a di p r o v a c o m p o s t a da piu ’ p a r a g r a f i . < / p >

< p > Il t e s t o di un p a r a g r a f o puo ’ e s s e r e m a n d a t o a c a p o a p i a c i m e n t o ... < br >

V i s t o ? A n c h e con l i n e e v u o t e :

< br > < br > < br >

V i s t o ?

< / p >

(37)

Il testo semplice: stili (1)

HTML prevede alcuni stili (grassetto, italico, ecc...) che possono essere assegnati a porzioni di testo, come nei seguenti esempi.

I tag relativi sono: <b>, <i>, <tt>, <big>, <small>, <s> e <u>

L’uso di alcuni di questi stili `e deprecato (si consiglia di usare fogli di stile CSS)

< p > Q u e s t o e ’ una p o r z i o n e di t e s t o in cui u s i a m o

< b > g r a s s e t t o < / b > , < i > i t a l i c o < / i > ,

< tt > t e s t o a d i m e n s i o n e f i s s a < / tt > ,

< big > t e s t o g r a n d e < / big > ,

< s m a l l > t e s t o p i c c o l o < / s m a l l > ,

< s > t e s t o c a n c e l l a t o

( d e p r e c a t o ) < / s > e < u > t e s t o s o t t o l i n e a t o ( d e p r e c a t o ) < / u >

< / p >

(38)

Il testo semplice: stili (2)

HTML prevede anche alcuni stili legati all’interpretazione logica del testo (testo enfatizzato, definizioni, ....).

I tag relativi sono: <em>, <strong>, <dfn> e <code>

La visualizzazione (dimensioni del font, ecc...) pu`o dipendere dal browser usato.

< p > Q u e s t o e ’ una p o r z i o n e di t e s t o che c o n t i e n e

< em > t e s t o e n f a t i z z a t o < / em > ,

< s t r o n g > t e s t o f o r t e m e n t e e n f a t i z z a t o < / s t r o n g > , una

< dfn > d e f i n i z i o n e < / dfn > , ma a n c h e un f r a m m e n t o di c o d i c e J a v a :

< c o d e > S y s t e m . out . p r i n t l n ( " bye ! " );

< / c o d e > < / p >

(39)

Il testo semplice: testo preformattato

E’ inoltre possibile inserire in un documento HTML del testo

preformattato, ovvero in cui gli spazi bianchi e le interruzioni di linea hanno un significato (e.g. in una poesia);

Il tag relativo `e : <pre>

Il browser spesso usa un font diverso per il testo preformattato

< p > E ora un po ’ di t e s t o p r e f o r m a t t a t o :

< pre >

La f o r m a t t a z i o n e di

q u e s t o t e s t o non v i e n e m o d i f i c a t a n e l l a v i s u a l i z z a z i o n e

< / pre >

< / p >

(40)

Il testo semplice: intestazioni

Il testo in un documento pu`o essere usato come intestazione o titolo (dell’intero documento, di una sezione, ecc...);

HTML prevede 6 livelli di importanza per le intestazioni, corrispondenti ai tag <h1>,<h2>,...,<h6>;

La visualizzazione (dimensioni del font, ecc...) pu`o dipendere dal browser usato.

< h1 > T i t o l o con h1 < / h1 >

< h2 > T i t o l o con h2 < / h2 >

< h3 > T i t o l o con h3 < / h3 >

< h4 > T i t o l o con h4 < / h4 >

< h5 > T i t o l o con h5 < / h5 >

< h6 > T i t o l o con h6 < / h6 >

< p > T e s t o s e m p l i c e < / p >

(41)

Il testo semplice: allineamento

Spesso `e preferibile centrare o allineare il testo (e non solo) a destra;

Tradizionalmente si pu`o centrare qualunque cosa usando <center>;

Alternativamente si pu`o usare il tag <div align=xxx> con xxx che pu`o essere left, right, center o justify ;

I Il tag <div> in generale serve per raggruppare una porzione del documento a cui applicare un’unica formattazione (vedremo...);

L’attibuto align pu`o essere usato anche con altri tag, quali <p> e

<h1>,<h2>,<h3>,...

< p >

< c e n t e r > T e s t o c e n t r a t o < / c e n t e r >

< div a l i g n = c e n t e r >

T e s t o c e n t r a t o < / div >

< div a l i g n = r i g h t >

T e s t o a l l i n e a t o a d e s t r a < / div >

< / p >

(42)

Il testo semplice: linee di separazione

Spesso `e comodo inserire linee orizzontali per separare porzioni di testo semplicemente usando <hr>;

Questo tag crea una linea orizzontale larga quanto l’intera finestra del browser.

I si ridimensiona automaticamente ridimensionando la finestra

< p > P r i m a p a r t e di un t e s t o che v o g l i a m o s e p a r a r e con una b e l l a r i g a o r i z z o n t a l e . < / p >

< hr >

< p > S e c o n d a p a r t e del n o s t r o t e s t o .

< / p >

(43)

Il testo semplice: un esempio completo (1)

< h t m l >

< h e a d > < t i t l e > M a n u a l e per l ’ u t e n t e < / t i t l e > < / h e a d >

< b o d y >

< c e n t e r > < h1 > M a n u a l e per l ’ u t e n t e < / h1 > < / c e n t e r >

< hr >

< h2 > I n t r o d u z i o n e < / h2 >

< p > G r a z i e per a v e r s c e l t o il n o s t r o p r o d o t t o . A v e t e f a t t o un ’ o t t i m a scelta , non c ’ e ’ che d i r e ... < / p >

< hr >

< h2 > Il p r i m o u t i l i z z o < / h2 >

< p > P r i m a di a c c e n d e r e il p r o d o t t o e ’ b e n e p o r r e a t t e n z i o n e al f a t t o che < s t r o n g > p o t r e b b e e s p o l d e r e < / s t r o n g > . T u t t a v i a cio ’ a c c a d e a b b a s t a n z a r a r a m e n t e . Ad o g n i m o d o :

< pre >

Non ci r i t e n i a m o

r e s p o n s a b i l i per e v e n t u a l i

d a n n i p r o c u r a t i a c o s e o p e r s o n e !

< / pre >

< / p >

< hr >

< / b o d y >

< / h t m l >

(44)

Il testo semplice: un esempio completo (2)

(45)

Le liste (1)

HTML prevede tre tipi di liste:

liste non ordinate (unordered lists) liste numerate (ordered lists) liste di definizioni (definition lists)

La sintassi delle liste non ordinate e numerate `e simile:

L’intera lista `e racchiusa in <ul> (per liste non ordinate) o in <ol>

(per liste numerate);

Ogni elemento `e racchiuso in <li> (per entrambi i tipi di lista) –

</li> pu`o essere omesso.

(46)

Le liste (2)

< ul >

< li > Q u e s t o e ’ il p r i m o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< li > Q u e s t o e ’ il s e c o n d o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< li > Q u e s t o e ’ il t e r z o e l e m e n t o d e l l a l i s t a non o r d i n a t a

< / ul >

< ol >

< li > Q u e s t o e ’ il p r i m o e l e m e n t o d e l l a l i s t a n u m e r a t a

< li > Q u e s t o e ’ il s e c o n d o e l e m e n t o d e l l a l i s t a n u m e r a t a

< li > Q u e s t o e ’ il t e r z o e l e m e n t o d e l l a l i s t a n u m e r a t a

< / ol >

(47)

Le liste (3)

La sintassi delle liste di definizioni `e la seguente:

L’intera lista `e racchiusa in <dl>;

Ogni elemento `e composto da due parti:

I Il termine definito per il quale si usa il tag <dt>

I La descrizione del termine per il quale si usa il tag <dd>

I La chiusura di <dt> e <dd> `e opzionale

< dl >

< dt > T e r m i n e 1

< dd > D e s c r i z i o n e d e t t a g l i a t a del t e r m i n e n u m e r o 1

< / dl >

(48)

Riferimenti URL

Il contenuto di un documento HTML contiene spesso riferimenti a risorse esterne

I immagini (o altri contenuti multimediali) da visualizzare nella stessa pagina web

I link ad altri documenti HTML (altre pagine dello stesso sito o pagine di siti diversi)

Per fare riferimento a una risorsa esterna (e.g. il file di un’immagine o un’altra pagina web) si usa un URL (o indirizzo)

Due tipi di URL:

I URL assolutoper riferire a file (immagini o pagine) di siti diversi

I URL relativoper riferire a file (immagini o pagine) dello stesso sito

(49)

URL assoluti

Un URL assoluto `e un URL completo di tutte le sue parti Esempio:

http://www.di.unipi.it/corsi/AA1112/index.html consiste di:

I protocollo usato per richiedere il file (http://)

I sito (e quindi server) dove trovare il file (www.di.unipi.it)

I la directory (cartella) del sito che contiene il file (/corsi/AA1112/)

I il nome del file (index.html)

(50)

URL relativi

Un URL relativo si usa solo per fare riferimento a file dello stesso sito che contiene il documento HTML corrente

Un URL relativo descrive in percorso da fare per raggiungere un filea partire dalla directory che contiene il documento corrente

Se il file da raggiungere `e nella stessa directory del documento HTML corrente, l’URL relativo coincide con il nome del file

I Esempio: index.html

(51)

URL relativi: esempi (1)

Se nel documento interna.html vogliamo fare riferimento al file index.html `e necessario considerare che tale file si trova nella directory principale del sito che `e due livelli sopra la directory di interna.html

Per spostarsi alla directory superiore si usa il percorso ../

L’URL relativo in questo caso `e ../../index.html

(52)

URL relativi: esempi (2)

Viceversa, se nel documento index.html vogliamo fare riferimento al file interna.html `e necessario considerare che tale file si trova nella directory principale del sito che `e due livelli sotto la directory di index.html

Per spostarsi alle directory inferiori si scrivono i loro nomi nell’ordine e separati da /

L’URL relativo in questo caso `e prima/interna/interna.html

(53)

URL relativi: esempi (3)

Se invece nel documento seconda.html vogliamo fare riferimento al file interna.html `e necessario considerare che raggiungere tale file bisogna prima salire di un livello e poi scendere di due

L’URL relativo in questo caso `e ../prima/interna/interna.html

(54)

Le immagini (1)

Un’immagine pu`o essere inserita tramite il tag <img>

I I formati di immagine accettati sono solitamente GIF e JPEG Il tag <img> prevede solo attributi (non un contenuto) ed ha il formato

I url `e un riferimento all’immagine che si vuole inserire

I xxxx `e una breve descrizione dell’immagine che viene visualizzata (di solito) al posto dell’immagine in alcuni casi (url sbagliata o immagini disattivate nel browser) o quando si passa con il mouse sull’immagine stessa.

< img src = " t o r r e . j p e g "

alt = " La t o r r e di P i s a " >

(55)

Le immagini (2)

E’ anche possibile specificare le dimensioni di un’immagine (larghezza e altezza) usando gli attributi width e height

Specificando solo uno dei due attributi l’altro viene impostato automaticamente in modo da preservare le proporzioni dell’immagine (rapporto altezza/larghezza)

Tali attributi prendono (di default) valori espressi in pixels come segue:

<img src="url" alt="xxxx"

width="200" height="150">.

< img src = " t o r r e . j p e g "

alt = " La t o r r e di P i s a "

w i d t h = " 200 " >

(56)

Le immagini (3)

E’ possibile specificare la posizione dell’immagine rispetto al testo della pagina web

Per fare questo si utilizza l’attributo align che pu`o assumere i seguenti valori:

I left, right: allinea l’immagine a sinistra o a destra del testo Se non si utilizza l’attributo align l’immagine interrompe il testo

align="left" align="right" align non usato

(57)

I collegamenti (link) ipertestuali (1)

La caratteristica particolare degli ipertesti `e di poter contenere collegamenti (link) tra le varie parti di un documento

Il modo pi`u semplice per realizzare collegamenti ipertestuali in HTML

`

e tramite l’uso di “ancore”

Le ancore possono essere usate in due modi:

I per riferire a un documento HTML esterno, tramite la sua URL

I per riferire a una parte diversa dello stesso documento HTML (e.g. a una sotto-sezione, all’inizio del documento, ecc...)

Le ancore si definiscono usando il tag <a>

(58)

I collegamenti (link) ipertestuali (2)

Per creare un link a un documento HTML esterno `e sufficiente specificarne l’URL nell’attributo href del tag <a>

Una volta visualizzato nel browser, tutto il contenuto del tag <a>

diventer`a “cliccabile”, e solitamente il browser lo mostrer`a usando uno stile diverso dal resto del documento (e.g. sottolineato e colorato – se testo)

L’utente potr`a seguire il link (ossia, scaricare il documento HTML dall’URL specificata) cliccando sul contenuto del tag <a>

E c c o un l i n k al

< a h r e f = " h t t p :// www . r e p u b b l i c a . it " >

s i t o di r e p u b b l i c a < / a > .

(59)

I collegamenti (link) ipertestuali (3)

Quando si vuole riferire a un documento diverso, ma dello stesso sito (nello stesso file system) si pu`o usare un URL relativo

Questo rende facile “spostare” un intero sito da una directory del file system ad un’altra

I se si sposta l’intera directory contenente tutti i documenti HTML gli indirizzi relativi rimangono invariati

E c c o un e s e m p i o di

< a h r e f = " i n d e x . h t m l " > l i n k a un d o c u m e n t o n e l l a s t e s s a d i r e c t o r y < / a >

del d o c u m e n t o c o r r e n t e , un e s e m p i o di

< a h r e f = " s u b d i r / p a g i n a . h t m l " > l i n k a un d o c u m e n t o in una sotto - d i r e c t o r y < / a > e un e s e m p i o di

< a h r e f = " ../ i n d e x . h t m l " > l i n k a un d o c u m e n t o in una d i r e c t o r y s u p e r i o r e < / a > .

(60)

I collegamenti (link) ipertestuali (4)

E’ anche possibile creare link a parti diverse dello stesso documento HTML

I e.g. a una sotto-sezione, all’inizio del documento, ecc...

Per fare ciò è però necessario usare due volte il tag <a>

I La prima volta dove si vuole che il link appaia (ancora sorgente)

I La seconda volta nella parte del docuemento che deve essere raggiunta (ancora di destinazione)

L’ancora di destinazione dovr`a contenere un identificativo (una stringa) che sia univoca all’interno dell’intero documento (attributo name di <a>)

L’ancora sorgente user`a tale identificativo per riferire precisamente alla destinazione (attributo href di <a>)

(61)

I collegamenti (link) ipertestuali (5)

< a n a m e = " i n i z i o " / >

< p >

Q u e s t a p a g i n a e ’ c o m p o s t a di due p a r t i : la < a h r e f = " # p r i m a p a r t e > p r i m a parte </ a >

e la < a h r e f = " # s e c o n d a p a r t e " > s e c o n d a parte </ a >

</ p >

< hr >

< a n a m e = " p r i m a p a r t e " / >

< h3 > P r i m a parte </ h3 >

<p > Q u e s t a e ’ la p r i m a parte </ p >

<p > < a h r e f = " # i n i z i o " > T o r n a all ’ i n i z i o d e l l a pagina </ a > </ p >

< hr >

< a n a m e = " s e c o n d a p a r t e " / >

< h3 > S e c o n d a parte </ h3 >

<p > Q u e s t a e ’ la s e c o n d a parte </ p >

<p > < a h r e f = " # i n i z i o " > T o r n a all ’ i n i z i o d e l l a pagina </ a > </ p >

(vedere l’esempio links-interni.html)

(62)

I collegamenti (link) ipertestuali (6)

Altre cose riguardo i collegamenti ipertestuali:

Tutto ci`o che si trova all’interno del tag <a> diventa cliccabile, non solo il testo:

I anche immagini, intere tabelle, ecc...

Si pu`o anche specificare che il documento riferito da un link debba essere aperto in una nuova finestra del browser tramite l’attributo target di <a>

I il valore da dare all’attributo `e blank

(63)

Riepilogo dei tag trattati

Tag trattati in questa lezione:

I <html>, <head>, <body>

I <title>, <meta>

I <p>, <br>

I <b>, <i>, <tt>, <big>, <small>, <s>, <u>

I <em>, <strong>, <dfn>, <code>

I <pre>

I <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

I <center>, <div>

I <hr>

I <ul>, <ol>, <li>, <dl>, <dt>, <dd>

I <img>

I <a>