Le liste non ordinate
• Semplici elenchi preceduti da un pallino:
<UL> </UL>
→ segnala l’inizio della lista
<LI>
→ precede ogni voce
Attributi: <UL TYPE=“simbolo”>
→ disc(standard), square(quadrato pieno), circle(quadrato vuoto).
Le liste ordinate
• Elenchi dove ogni voce è preceduta da un numero progressivo:
<OL> </OL>
→ segnala l’inizio della lista
<LI>
→ precede ogni voce e non si chiude Attributo: <OL TYPE = “simbolo”>
→ 1(numeri), a(lettere minuscole),
26
Esempio 7
<BODY><H3>Lista non ordinata</H3> <BR><BR>
<UL TYPE=“circle”> <LI> Prima voce
<LI> Seconda voce
<LI> Terza voce
</UL>
<BR><BR>
<H3>Lista ordinata</H3> <BR><BR>
<OL TYPE=“I”> <LI> Prima voce
<LI> Seconda voce
<LI> Terza voce
</OL>
Collegamenti esterni
• Si “ancora” il collegamento alla pagina:
<A HREF=“url da collegare”> </A>
→ la scritta collocata all’interno dei tag di apertura e di chiusura è ciò che apparirà effettivamente sulla pagina Web come collegamento.
→ l’URL può essere assoluto o relativo
Collegamenti interni
• Il collegamento:
<A HREF = “#nome_ancora”>Testo</A>
• L’ancora:
<A NAME = “nome_ancora”>Testo</A>
Al click sul collegamento ci si sposta alla porzione di testo ove è situata l’ancora (all’interno della medesima pagina!!)
Collegamenti e-mail
• Collegamento a un indirizzo e-mail:
<A HREF = “mailto:nome@provider.it”>
Scrivetemi! </A>
Il browser dell’utente si predispone a spedire un messaggio all’indirizzo
Esempio 8
<BODY>
<H3>Programma dei corsi del primo anno - Multidams</H3> <BR><BR>
<A HREF=“#infbase”>Informatica di base</A> <BR>
<A HREF=“#infgr”>Informatica grafica</A>
<BR><BR>
<A NAME=“infbase”>Informatica di base</A>
<BR> Il corso di informatica di base… <BR>
<A HREF=“http://www.infbase.it”>Pagina web del corso</A>
<BR><BR>
<A HREF=“mailto:docente@infbase.it”>E-mail del docente</A>
Inserire un’immagine
• Inserimento di un’immagine:
<IMG SRC = “nome_file.est”>
Il tag <IMG> non si chiude ed ha come attributi:
ALT = stringa che appare passando sopra all’immagine o al suo posto nei browser non grafici.
ALIGN = disposizione della figura nella pagina (top, bottom e middle).
Trasformare l’immagine
in un collegamento
• E’ possibile rendere un’immagine un collegamento ipertestuale:
è sufficiente aggiungere, di seguito al tag <A>, il comando <IMG SRC = “img”>
<A HREF=www.html.it><IMG SRC="ESEMPIO.JPG“
WIDTH="160"HEIGHT="185"BORDER="2"ALIGN=" middle"></A>
Dimensione, bordi ed
allineamento delle immagini
• Dimensione:
attributi HEIGHT e WIDTH del tag IMG
• Bordo:
attributo BORDER = “num” del tag IMG
BORDER = “0” → bordo assente • Allineamento:
attributo ALIGN=“left” o “right” o “middle” o
Esempio 9
<BODY>
<IMG SRC=“es6.jpg” BORDER=“5” HEIGHT=“60%” WIDTH=“45%”
ALT=“L’attributo ALT di quest’immagine”>
Esercizio
• Creare una pagina Biblioteca con:
– Titolo principale: La mia biblioteca on-line – Sfondo nero, testo azzurro
– 3 links che portano a tre pagine diverse (definire attributi LINK e VLINK):
• Romanzi gialli
• Romanzi d’avventura • Romanzi fantasy
– Al fondo della pagina, centrato e in
grassetto, c’è un mailto al vostro indirizzo e-mail
36
• Creare la pagina Gialli (raggiungibile
mediante il link precedentemente creato) con:
– Titolo: I Romanzi Gialli, in giallo appunto su sfondo nero.
– Più in basso, un elenco (ordinato) di 3 autori (Christie, Doyle, Simenon) utilizzati come
collegamenti interni a 3 sezioni che riassumono l’opera degli autori.
– Ogni sezione ha come titoletto il nome
dell’autore ed è separata dalla altre da una linea.
– Al termine di ogni sezione, allineato a destra è presente un link che porta alla pagina dedicata al relativo autore.
• Creare la pagina Christie (raggiungibile mediante il link della relativa sezione) con:
– Titolo: Agatha Christie, colori a scelta per sfondo e testo.
– Poco sotto, centrata, con bordo n°2, una fotografia della autrice con dimensioni e attributo ALT definito:
– La foto è un link al sito ufficiale della autrice (www.agathachristie.com).
– La pagina è composta da un elenco (non ordinato) di titoli che conducono ognuno
