Linguaggio HTML (2)

Linguaggio
HTML (2)
Attributi di <FONT>
Per variare lo stile di carattere rispetto al default, si
possono utilizzare tre attributi:
SIZE=“numero” per modificare le dimensioni
FACE=“stile” per modificare lo stile
Es: <FONT SIZE=“5”> … </FONT>
Es: <FONT FACE=“Arial”> … </FONT>
COLOR=”colore” per modificare il colore
Es: <FONT COLOR=“red”> … </FONT>
Nulla vieta di usarli tutti assieme, es:
<FONT SIZE=“5” FACE=“Arial” COLOR=“red”> … </FONT>
es. 17
Il tag <SPAN>
Il tag <SPAN> è un elemento HTML neutro che
consente, di applicare direttamente alcuni attributi,
per esempio:
STYLE=‘ … ’ che può contenere sottoattributi come:
font-size:pti. per le dimensioni
font-family:”tipo di font” per lo stile
background:”colore” per il colore di sfondo
Color:”colore” per il colore del testo
Es: <SPAN STYLE=‘font-size:20’> … </SPAN>
Es: <SPAN STYLE=‘font-family:”Arial”’> … </SPAN>
Es: <SPAN STYLE=‘background:”red”’> … </SPAN>
Es: <SPAN STYLE=‘color:”#FFFFFF”’> … </SPAN>
Se si vuole aggiungere più sottoattributi a style, vanno separati
con un “;”
es. 18
I colori nella pagina web
Per regolare i colori dell’intera pagina web si
usano gli attributi di BODY:
BGCOLOR=“colore” per il colore dello sfondo
TEXT=“colore” per il colore del testo
LINK=“colore” per il colore dei link
ALINK=“colore” per il colore dei link quando vi si
clicca sopra
VLINK=“colore” per il colore dei link visitati
es. 18bis
<OL>: elenchi numerati
Per inserire una serie di voci in un elenco di
punti in ordine crescente:
<OL>
<LI> …
<LI>
</OL>
Tag Ordered List
Per ogni punto della
lista: <LI>
es. 19
Tipi di numerazione
Di default l’elenco numerato segue la
numerazione standard 1, 2, ….
Se si vuole cambiare la numerazione si
usa l’attributo TYPE, assegnandogli:
A = lettere maiuscole
a = lettere minuscole
I = numeri romani maiuscoli
i = numeri romani minuscoli
es. 20
Inizio della numerazione
Se non si desidera iniziare la
numerazione da 1 (o dal primo
elemento per gli latri tipi):
si utilizza l’attributo START,
assegnandogli il numero del punto di
partenza (anche nel caso di numerazioni
di tipo diverso)
es. 21
<UL>: Elenchi puntati
Quando si vuole fare un elenco senza
fornire una numerazione, si utilizza il
tag <UL> esattamente come per la
lista ordinata:
Tag Unordered List
<UL>
<LI> …
Per ogni punto della
lista: <LI>
<LI>
</UL>
es. 22
Simbolo dell’elenco
Di default nella lista puntata viene
messo come simbolo un pallino a fianco
di ciascun punto dell’elenco.
Per cambiare i simboli dell’elenco si usa
l’attributo TYPE attribuendogli:
disc (disco)
circle (cerchio)
square (quadrato)
es. 23
Liste nidificate
I due tipi di lista, possono essere entrambi
nidificati: per ciascun punto della lista si può
cioè creare un sottoelenco.
Il metodo è lo stesso: ciascuna lista deve
essere compresa tra i tag <OL> oppure
<UL>, ogni punto preceduto da <LI>
es. 24
Personalizzare gli elenchi
Combinando nel tag <LI> gli attributi:
TYPE= tipo di elenco
VALUE= numero di punto
è possibile ottenere liste personalizzate
es. 25
Linee orizzontali
Per inserire una linea di separazione:
Per regolare lo spessore:
<HR SIZE= numero >
Per regolare la lunghezza:
<HR> (3D di default)
<HR WIDTH= numero >
<HR WIDTH= % percentuale >
Per ottenere una linea semplice (non 3D):
<HR NOSHADE>
es. 26
<TABLE>: le tabelle
L’inizio di una tabella indicato con l’elemento
<TABLE> e la fine con </TABLE>
Se si vuole il bordo, inserire l’attributo
BORDER
Per inserire la didascalia: <CAPTION>
Iniziare ciascuna riga con <TR>
Le celle di intestazione vengono marcate
con <TH>, quelle di dati con <TD>
es. 27
Allineamento nelle celle
Normalmente i dati vengono allineati al centro
Per modificare l’allineamento di una cella aggiungere
al tag <TD> l’attributo:
ALIGN=
LEFT
RIGHT
CENTER
Allineamento orizzontale
VALIGN=
TOP
MIDDLE
BOTTOM
Allineamento verticale
es. 28
Larghezza delle tabelle
Per fissare la larghezza di una tabella a
piacimento:
<TABLE WIDTH= numero> oppure
<TABLE WIDTH= %percentuale>
es. 29
<IMG>: le immagini
Per inserire un’immagine:
<IMG SRC=“nome.estensione”>
Per allinearla al testo utilizzare
l’attributo ALIGN
Per far comparire un bordo usare
l’attributo BORDER=“numero”
es. 30
Immagini
Per modificare le dimensioni, ci sono gli
attributi:
WIDTH=“numero”
HEIGHT=“numero”
Per inserire un’immagine come sfondo:
<BODY BACKGROUND=“nome.estensione”>
es. 31
Le immagini per i siti
Per recuperare delle immagini da
utilizzare nelle proprie pagine web,
esistono siti specializzati, come per
esempio:
http://www.ditto.com/
http://www.tuttogratis.it/
http://www.graficagratis.com/
Link HREF
I link si effettuano con il tag <A>
Per inserire l’URL usare l’attributo
HREF=“indirizzo URL”
Se l’URL è un indirizzo e-mail:
HREF=“mailto:indirizzo e-mail “
es. 32
Anchor: l’attributo NAME
Spesso è comodo passare a diverse sezioni
della stessa pagina attraverso un link (es: to
the top)
Per fare questo è necessario attribuire
un’etichetta ad un punto della pagina, con
l’attributo NAME:
<A NAME=“etichetta”></A>
In questo caso il testo fra i tag è del tutto opzionale
Richiamare un’etichetta
Per richiamare quel punto della pagina
contrassegnata da una certa etichetta:
<A HREF=”# etichetta”>
In questo modo la pagina si sposta
esattamente nel punto in cui si trova
l’etichetta
es. 33
Esercitazione
Utilizzando gli elementi di HTML trattati,
creare un sito web off-line con le
seguenti caratteristiche:
Tema trattato a scelta
Home page con link
Almeno 5 pagine web
Uso di almeno un tipo di lista
Formattazione del testo