docbody ei suoi tag
download 
Reclamo Transcript
body ei suoi tag
HTML – 2
body e i suoi tag
Il tag BODY
<BODY> </BODY>
– Indica il corpo del testo
Attributi
(uso deprecato)
BGCOLOR = “#rrggbb” sfondo
TEXT = “#rrggbb”
testo
LINK = “#rrggbb”
link
VLINK = “#rrggbb”
link visitato
ALINK = “#rrggbb”
link attivo
(mentre e' cliccato)
– BACKGROUND = “...URL...” immagine di
–
–
–
–
–
sfondo
Tecnologie di Sviluppo per il WEB
2
Nota
La specifica CSS aggiunge a quasi tutti i tag
HTML gli attributi
– CLASS, ID e STYLE
Questi attributi non saranno discussi per ogni
tag HTML, ma li analizzeremo quando
parleremo dei fogli di stile
Tecnologie di Sviluppo per il WEB
3
Esempio
<BODY BGCOLOR="#AFFFFF">
Qualcosa di divertente
</BODY>
AFFFFF è la traduzione esadecimale del colore
celeste
Tecnologie di Sviluppo per il WEB
4
Immagini di sfondo
<BODY BACKGROUND="swirlies.gif">
Qualcosa di divertente
</BODY>
Questa è l'immagine di sfondo
Tecnologie di Sviluppo per il WEB
5
Risultato
blundo//
Tecnologie di Sviluppo per il WEB
6
Il WEB ed i colori
I
colori in HTML possono essere
specificati o attraverso un nome (red,
yellow, green, …)
– <body bgcolor=“black”>
oppure
attraverso
la
notazione
esadecimale, 6 cifre precedute dal
carattere #
– <body bgcolor=“#AA33CC”>
Le
sei cifre decimali corrispondono alla
codifica RGB per i colori
Tecnologie di Sviluppo per il WEB
7
Teoria dei colori
La gamma dei colori è determinata dal
numero di bit (associati ad ogni pixel)
usati per memorizzare i dati del pixel
stesso
– 1 bit → 2 colori
– 24 bit → 16.777.216 colori (true color)
• corrispondono allo spettro dei colori distinguibili
dall’occhio umano
Tecnologie di Sviluppo per il WEB
8
Codifica RGB
8 bit
8 bit
8 bit
Green
Red
Blue
• Bianco (255,255,255)
• Rosso (255,0,0)
• Nero
• Verde (0,255,0)
(0,0,0)
• Giallo (255,255,0)
• Blu
Tecnologie di Sviluppo per il WEB
(0,0,255)
9
Colori WEB-safe
Computer e monitor differenti possono
mostrare lo stesso colore in maniera molto
differente
Esistono 216 codici per i colori che sono
“safe” (sicuri) nel senso che essi sono
mostrati nello stesso modo (o quasi) su tutti i
computer
Tutti i monitor supportano i colori a 8 bit (256
colori)
Dovendo rappresentare i colori con la codifica
RGB si ha che 216 (63) è il cubo più vicino a
256
– (valori)posti
Tecnologie di Sviluppo per il WEB
10
Colori sicuri
Un
colore safe sarà composto da triple
scelte nell’insieme di cardinalità 6:
– {00, 33, 66, 99, CC, FF} (in esadecimale)
• 0,51,102,153,204,255 (in decimale)
0033FF
oppure FF3366 sono colori safe
0033F3 oppure 3466FF non lo sono
Un esempio dell’insieme dei colori sicuri
lo si può trovare al seguente indirizzo
– http://www.web-source.net/216_color_chart.htm
– http://www.cookwood.com/html4_4e/examples/appendices/colorcharthex.htm
Tecnologie di Sviluppo per il WEB
11
Esempio di colori sicuri
Tecnologie di Sviluppo per il WEB
12
Esempio di colori non sicuri
Tecnologie di Sviluppo per il WEB
13
Nomi di colori standard
Tecnologie di Sviluppo per il WEB
14
Tipi di tag
Text-level (e.g., <B>)
– Si riferisce ad elementi che formattano solo del
testo
– Non causano un'andata a capo alla chiusura del
tag
– Possono contenere solo elementi text -level
Block-level (e.g., <P>)
– Si riferisce ad elementi che formattano blocchi di
testo
– Causano un'andata a capo alla chiusura del tag
– Possono contenere elementi sia text che blocklevel
Tecnologie di Sviluppo per il WEB
15
Titoli/Intestazioni (heading)
Esistono
6 livelli di titoli che si
ottengono utilizzando i tag contenitori
da <H1> a <H6>
Servono per dividere il documento in
“capitoli”, “sezioni”, “sottosezioni”, …
Non saltare un livello di intestazione nei
documenti
– Esempio, partire con <H1> e continuare
con <H3>
Tecnologie di Sviluppo per il WEB
16
Esempio
<BODY>
<H1> Titolo di livello 1</H1>
<H2> Titolo di livello 2</H2>
<H3> Titolo di livello 3</H3>
<H4> Titolo di livello 4</H4>
<H5> Titolo di livello 5</H5>
<H6> Titolo di livello 6</H6>
</BODY>
Tecnologie di Sviluppo per il WEB
17
Risultato
Tecnologie di Sviluppo per il WEB
18
Attributo del tag <Hx>
ALIGN
: deprecated
Valori:
–
–
–
–
LEFT
RIGHT
TOP
BOTTOM
allinea a sinistra (default)
allinea a destra
allinea in alto
non supportato
Utilizzo
<H5 ALIGN =“LEFT”>
Titolo di livello 5 giustificato a sinistra
</H5>
Tecnologie di Sviluppo per il WEB
19
Paragrafi
Il
browser non riconosce da solo la
formattazione del testo, dobbiamo
indicargliela
Se non viene indicato diversamente, il
browser visualizza i caratteri uno dietro
l'altro.
Se si vuole andare a capo si deve
utilizzare un tag specifico.
Tecnologie di Sviluppo per il WEB
20
Esempio
<BODY >
Prova
di
formattazione
del
testo
</BODY>
Tecnologie di Sviluppo per il WEB
21
Il tag <BR>
Indica
al browser di andare a capo, non
ha un tag di chiusura
Attributo: CLEAR (opzionale, deprecated)
– Indica come disporre il testo seguente
rispetto ad un’immagine flottante presente
nella pagina
– Maggiori dettagli in seguito
Valori:
– LEFT, RIGHT, ALL
Tecnologie di Sviluppo per il WEB
22
Esempio
<BODY >
Prova<BR>
di<BR>
formattazione<BR>
del<BR>
testo
</BODY>
Tecnologie di Sviluppo per il WEB
23
Il tag <P>
Definisce
un nuovo paragrafo, oltre ad
andare a capo inserisce un’interlinea
Il tag </P> può essere omesso, però
abituatevi sempre ad aggiungerlo
Attributo: ALIGN
– VALORI:
•
•
•
•
LEFT
RIGHT
CENTER
JUSTIFY
allinea a sinistra (default)
allinea a destra
allinea a centro
giustificato
Tecnologie di Sviluppo per il WEB
24
Esempio
<BODY >
Prova<P>
di<P>
formattazione<P>
del<P>
testo
</BODY>
Tecnologie di Sviluppo per il WEB
25
Ancora su <P>
si può usare più di un <P> alla
volta; o meglio …
specificando <P><P><P> non si
ottengono tre interlinee, ma soltanto
una
Per aggiungere più interlinee si utilizza
un trucco:
Non
– Si aggiunge un carattere speciale
che significa “spazio”
Tecnologie di Sviluppo per il WEB
26
Esempio
<BODY >
Prova
<P>
<P>
<P>
<P>
<P> di
formattazione
</BODY>
Tecnologie di Sviluppo per il WEB
27
Il tag <PRE>
Si usa per testi preformattati.
Attributo WIDTH=“numero” (deprecato)
– Indica l’ampiezza (numero di caratteri) del testo
Un testo racchiuso tra i tag <PRE> </PRE>
mantiene gli spazi e le interruzioni di linea del
documento HTML.
Gli unici comandi accettati sono quelli di
formattazione logica e fisica e quelli per la
definizione dei link
– e.g. <b>
– Non possono comparire i caratteri >, <, “, &,
bisogna usare < - > - "e; e &
Tecnologie di Sviluppo per il WEB
28
Esempio
<BODY>
<PRE>
Prova di formattazione
del testo
con il comando
<STRONG>
PRE
</STRONG>
</PRE>
una sola linea
Tecnologie di Sviluppo per il WEB
29
Il tag <BLOCKQUOTE>
Usato per citazioni di blocchi di testo
Attributo CITE
– Informa dell’URL da dove ha origine la citazione
La maggior parte dei browser fanno
rientrare entrambi i margini di un testo
Aggiunge un’interlinea prima e dopo del
testo
Usare i fogli di stile se si vuole far rientrare
i margini destro e sinistro di un paragrafo
Tecnologie di Sviluppo per il WEB
30
Esempio
<BODY>
Riportiamo quanto segue
<BLOCKQUOTE>
Browser diversi che girano su hardware diversi forniscono
una visualizzazione differente dei documenti HTML,
usando font diversi, interruzioni di riga in punti diversi e,
generalmente, impedendo di impostare layout più precisi.
</BLOCKQUOTE>
E questo è quanto.
</BODY>
Tecnologie di Sviluppo per il WEB
31
Risultato
Tecnologie di Sviluppo per il WEB
32
Il tag <ADDRESS>
Tag contenitore usato per fornire informazioni
sull’autore della pagina
Spesso i browser visualizzano il contenuto di
ADDRESS in italico
<ADDRESS>
Prof. Mimmo Parente<BR>
Dipartimento di Informatica ed Applicazioni <BR>
Università degli Studi di Salerno <BR>
I-84084 FISCIANO (SA) <BR>
ITALY
</ADDRESS>
Tecnologie di Sviluppo per il WEB
33
Risultato
Tecnologie di Sviluppo per il WEB
34
Formattazione di testo
HTML ha due tipi di stile per il testo
Logico
– Formatta del testo a seconda del suo significato.
– Descrive “l’uso” di una parte di testo
– Lascia al browser l’interpretazione del comando
secondo le proprie capacità
Fisico
– Indica al browser il formato specifico del testo
– Forza il testo ad assumere un particolare aspetto
– Richiede uno specifico formato fisico e causa
problemi se il browser non è in grado di gestire il
formato specificato
Tecnologie di Sviluppo per il WEB
35
Tipi di stile logico
<EM>
<STRONG>
<ADDRESS>
<CITE>
<BLOCKQUOTE>
<DFN>
<CODE>
<KBD>
testo enfatizzato
forte enfasi
indirizzo (già visto)
citazione
già visto
definizione di un termine
codice di un programma
indica testo da digitare
Tecnologie di Sviluppo per il WEB
36
Come appare
lo stile logico
Tecnologie di Sviluppo per il WEB
37
Altri tipi di stile logico
output di un
programma
<VAR>
variabile in un
programma
<ACRONYM>
acronimo
<ABBR>
indica
un’abbreviazione
CODE, SAMP e KBD possono anche
contenere pezzi di codice con >, < e &
<SAMP>
Tecnologie di Sviluppo per il WEB
38
Tipi di stile fisico
<B>
<SUB>
grassetto
italico
sottolineato
testo lampeggiante
barrato
spaziatura fissa
Epedice
<SUP>
Eapice
<I>
<U>
<BLINK>
<STRIKE>
<TT>
Tecnologie di Sviluppo per il WEB
39
Come appare
lo stile fisico
Tecnologie di Sviluppo per il WEB
40
Esempio
<BODY >
<U>Qualcosa</U
>
<I>di</I>
<B>divertente</B
>
</BODY>
Tecnologie di Sviluppo per il WEB
41
Altri stili fisici
<BIG>
carattere più grande
<SMALL> carattere più piccolo
<DEL>
marca del testo cancellato
da versioni precedenti del
testo
<INS>
complemento di <DEL>
<Q>
quotazioni brevi
Tecnologie di Sviluppo per il WEB
42
Come appare
lo stile fisico
Tecnologie di Sviluppo per il WEB
43
Combinazione di tag
I
tag possono essere annidati
<BODY >
Qualcosa di <I><B>divertente
</B></I> </BODY>
Esempio di tag
annidati
Tecnologie di Sviluppo per il WEB
44
Tag annidati
I
tag devono essere annidati e non
interfogliati
<THIS> <THAT> </THIS>
</THAT>
– Tag sovrapposti... Sbagliato
<THIS>
<THAT> </THAT>
</THIS>
– Tag annidati... giusto
Tecnologie di Sviluppo per il WEB
45
Il tag <FONT>
TAG deprecato, usare al suo posto i fogli di
stile
È possibile modificare la dimensione, il colore
ed il tipo di carattere del testo.
I caratteri possono avere varie grandezze,
quella di default è 3.
Si può specificare una grandezza relativa
– Un numero compreso tra –6 e +6
Tecnologie di Sviluppo per il WEB
46
Attributi di <FONT>
SIZE=“x”
– x varia tra 1 e 7 (oppure, tra –6 e +6)
COLOR=“#rrggbb”
FACE=“nome”
– Non supportato da tutti i browser
– Si possono specificare vari tipi di carattere da
usare: Arial , Comic Sans MS, Impact
Quando è possibile usare grandezze relative
(+x, -x) e non assolute
Tecnologie di Sviluppo per il WEB
47
Esempio di FONT
Tecnologie di Sviluppo per il WEB
48
Il tag <BASEFONT>
Serve
per fissare la grandezza dei
caratteri di tutto il documento
Ha un solo attributo
– SIZE
• Default settato a 3
<BASEFONT SIZE=“5”>
– Tutto il testo avrà caratteri di “grandezza”
5.
Tecnologie di Sviluppo per il WEB
49
Esempio
<BODY>
Facciamo un po’ di
<U>
<I>
<B>
<FONT COLOR=“RED" FACE="ARIAL“ SIZE="7">
pratica
</FONT>
</B>
</I>
</U>
</BODY>
Tecnologie di Sviluppo per il WEB
50
Il tag CENTER
Tutto
quello compreso tra la coppia di
tag <CENTER> e </CENTER>
risulterà centrato
Può
contenere qualsiasi tipo di tag
Tecnologie di Sviluppo per il WEB
51
I commenti
<!--
questo è un commento -->
Tutto ciò che compare all’interno di
questo tag viene ignorato
Usato per inserire
– Messaggi nascosti
– Commenti
– Note per chi legge il codice che genera la
pagina HTML
Tecnologie di Sviluppo per il WEB
52
Esempio
<BODY>
<!-- Questo è un commento -->
Un commento può essere inserito in qualsiasi
punto del documento e il browser ignorerà
qualsiasi cosa dentro questo tag. Puoi inserire
messaggi nascosti, <!--Ciao-->, note che ti possono
servire, <!--Aggiungere immagine qui--> o scrivere
un messaggio che può essere utile a chi
legge il sorgente della tua pagina <!--Vietato copiare
-->
</BODY>
Tecnologie di Sviluppo per il WEB
53
Risultato
Tecnologie di Sviluppo per il WEB
54
Tag <HR> - Linee orizzontali
<HR> traccia una riga orizzontale
Attributi:
– SIZE=valore
• specifica lo spessore della riga in pixel.
– WIDTH=valore
• specifica la larghezza in pixel o in percentuale (%)
rispetto alla larghezza della finestra utilizzata
– NOSHADE
• impone che la riga sia solida (non effetto ombra)
– ALIGN= “tipo”
• tipo di allineamento:LEFT, RIGHT, o CENTER.
Tecnologie di Sviluppo per il WEB
55
Esempio
<BODY >
<HR WIDTH=“20%” SIZE =“10”>
<HR WIDTH=“50%”>
<HR WIDTH=“100%” NOSHADE>
<HR WIDTH=“20”>
<HR WIDTH=“50”>
<HR WIDTH=“100” NOSHADE
SIZE =“4” >
</BODY>
Tecnologie di Sviluppo per il WEB
56
Risultato
Tecnologie di Sviluppo per il WEB
57
