HTML – 3

Transcript

HTML – 3

Creazione di elenchi
HTML – 3
Liste puntate ed ordinate
Immagini

Elenchi puntati (elenchi non ordinati)

Elenchi numerati (elenchi ordinati)

Elenchi annidati

Elenchi menu

Elenchi glossario
Tecnologie di Sviluppo per il WEB
Elenchi puntati

Esempio
L’elenco deve essere compreso tra i tag
<UL> </UL>
– Un-numbered List

2
<UL>
<LI> primo elemento </LI>
<LI> secondo elemento
<LI> terzo elemento </LI>
</UL>
Ciascun elemento dell’elenco deve
essere compreso tra i tag <LI> </LI>
– List Item
3
4
Esempio
Attributi

<UL>
– TYPE = “tipo”
<H1>Ingredienti</H1>
<UL>
<LI TYPE="DISC">
Mele</LI>
<LI TYPE="CIRCLE">Farina
<LI TYPE="SQUARE">
Zucchero
<LI> Cannella
</UL>
• tipo= CIRCLE, SQUARE, DISC (default)

<LI>
– TYPE = “tipo”
• tipo= CIRCLE, SQUARE, DISC (default)
– VALUE = numero (solo con <OL>)
• Valore di partenza dell’elemento della lista
5
Elenchi numerati

6
Esempio
L’elenco deve essere compreso tra i tag
<OL> </OL>
– Ordered List

<OL>
<LI> primo elemento </LI>
<LI> secondo elemento
<LI> terzo elemento</LI>
</OL>
Ciascun elemento dell’elenco deve
essere compreso tra i tag <LI> </LI>
– List Item
7
8
Attributo di <OL> e <UL>
Attributi di <OL>

TYPE = “x” (indica il tipo di elenco)

– x = a, A, I, i, 1
•
•
•
•
•

COMPACT
– Non assume valori
– Specifica che la lista dovrebbe mostrata in
maniera compatta (deve occupare meno
spazio che usualmente)
– Non è ampiamente supportato
– È deprecato
Lettere minuscole
Lettere maiuscole
Numeri romani minuscoli
Numeri romani maiuscoli
Numeri
START = “x”
– Indica da dove deve partire l’elenco
• x indica un numero o una lettera
9
Esempio
10
Elenchi annidati
<OL TYPE="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
11

Non sono altro che elenchi di elenchi

Una voce di un elenco può a sua volta
essere un elenco di qualsiasi tipo

Elenchi <UL> possono
elenchi <OL> e viceversa
contenere
12
Esempio
Elenchi glossario <DL>
Example 2: <BR>
<UL TYPE=“DISC">
<LI>List item 1
<LI>List item 2
<UL TYPE=“CIRCLE">
<LI>List item 3
<LI>List item 4
</UL>
</UL>

DL: Definition List
– Permettono di includere una descrizione di
ogni termine (item) della lista

<DL> </DL>
– Attributo COMPACT
• Versione compatta della lista, usato quando le
definizioni sono brevi
13
Esempio
14
Tag <DT> e <DD>

<DT> (tag di chiusura opzionale)
– Definition Term
– Indica che l’item che è incluso tra i tag è il
termine da definire

<DD> (tag di chiusura opzionale)
– Definition Data
– Fornisce la spiegazione di item
15
16
Risultato
Esempio di elenco glossario
<H1> tipi di liste </H1>
<DL>
<DT> elenco numerato </DT>
<DD> gli elementi sono numerati in sequenza </DD>
<DT> elenco puntato </DT>
<DD> gli elementi sono preceduti da un pallino </DD>
<DT> elenco glossario </DT>
<DD> ciascun elemento è seguito da una descrizione
</DD>
</DL>
17
18
Formati di immagine
Le immagini

I formati delle immagini riconosciuti dai
browser sono
– GIF
• Graphics Interchange Format
– JPEG (JPG)
• Joint Photographic Experts Group
Elemento text-level
– PNG
• Portable Network Graphics
20
Immagini: il tag <IMG>
Attributi

Bisogna specificare il percorso dove si
trova l’immagine da inserire

SRC=“uri”

ALT=“testo”
– Indica il percorso dell'immagine da inserire.
– visualizza testo al posto dell'immagine se
questa non è visualizzabile/visualizzata

BORDER=“numero”
– Indicare la dimensione dell'eventuale bordo
che si vuole visualizzare intorno
all’immagine.
21
22
Esempio
Attributo ALIGN=“pos”

Attributo deprecato. Specifica la posizione
dell'immagine rispetto alla linea del testo
dove compare
– LEFT: l’immagine è allineata alla sinistra del testo
– RIGHT: l’immagine è allineata alla destra del testo
– TOP: il testo è allineato con il margine superiore
destro dell’immagine
– MIDDLE: il testo è allineato con il centro
dell’immagine (leggera differenza tra IE e N7)
– BOTTOM: il testo è allineato con il margine
inferiore destro dell’immagine
23
Ci sono due paragrafi, ognuno contiene
un’immagine. Le immagini fanno parte del flusso
normale del testo ed interagiscono con esso
attraverso l’attributo ALIGN
24
Suggerimento
Attributi

WIDTH specifica una larghezza predefinita
per l'immagine, valore dato in punti.
HEIGHT analogamente al
imposta un'altezza predefinita.

HSPACE indica uno spazio da lasciare libero
a destra e a sinistra dell'immagine.

Se non si conoscono le dimensioni
dell’immagine, allora è sufficiente “aprirla” con
Netscape, nella barra del titolo compaiono le
sue dimensioni
26
Immagini e spazio
Non inserire grandi immagini all’inizio della
pagina
Usare immagini più piccole di 40Kbyte
Utilizzare GIF trasparenti
Utilizzare GIF interlacciate oppure JPG
progressive
Usare il trucco delle immagini 1x1 con
parsimonia
In ogni caso conviene sempre indicarli
– il browser può calcolare il layout della pagina
senza dover aspettare di scaricare tutte le
immagini in essa contenute
25
Suggerimenti
Il
browser
conosce
la
dimensione
dell’immagine una volta che è stata scaricata
Gli attributi WIDTH e HEIGHT servono per
scalare l’immagine
– Anche se l'immagine è più piccola o più grande

VSPACE indica uno spazio da lasciare libero
sopra e sotto l'immagine.

Per aggiungere dello spazio
elementi in una pagina si può
tra
– Creare un’immagine GIF trasparente di 1x1
pixel
– Inserirla nel documento e tramite gli
attributi WIDTH ed HEIGHT si può lasciare
uno spazio orizzontale o verticale
<IMG SRC=“space.gif" WIDTH=25 HEIGHT=1>
<IMG SRC=“space.gif" WIDTH=1 HEIGHT=38>
28
Esempio d’uso di BORDER
Deformazione immagini
<BODY >
<IMG SRC=“Barca.gif" BORDER=10 WIDTH=82
HEIGHT=68>
</BODY>
<BODY >
<IMG SRC=“Barca.gif" WIDTH=250 HEIGHT=38>
</BODY>
29
Esempio

30
32
Risultato
Quando non si vuole far comparire il testo
vicino l’immagine, si usa <BR CLEAR=“ALL">
<IMG SRC=“logo.jpg" ALIGN="RIGHT">
<IMG SRC=“donut.gif" ALIGN="LEFT">
<BR CLEAR="ALL">
<CENTER>Questo è del testo che segue le due
immagini</CENTER>
31
Attributo CLEAR di BR

<BR CLEAR="RIGHT"> e <BR CLEAR="LEFT">
subito prima del testo fanno si che tutto ciò
che segue è inserito FUORI dello spazio tra
le due immagini.
– Sono equivalenti a <BR CLEAR=“ALL">

Provate a scrivere del codice in cui allineate
le due immagini a destra e a sinistra ma non
usate il comando
<BR CLEAR="..."> per vedere cosa succede
33