Alcune proprietà riferite ai blocchi di testo rettangolari sono descritte nella tabella successiva. Si tratta in particolare dei margini, dei bordi e della dichiarazione di blocchi fluttuanti.
Tabella 342.1. Proprietà riferite al testo racchiuso in blocchi rettangolari.
Proprietà
Valori
Descrizione
margin-top
auto
Margine superiore automatico.
npt
Margine superiore in punti.
ncm
Margine superiore in centimetri.
nmm
Margine superiore in millimetri.
n%
Margine superiore relativo in percentuale.
margin-bottom
auto
Margine inferiore automatico.
npt
Margine inferiore in punti.
ncm
Margine inferiore in centimetri.
nmm
Margine inferiore in millimetri.
n%
Margine inferiore relativo in percentuale.
margin-left
auto
Margine sinistro automatico.
npt
Margine sinistro in punti.
ncm
Margine sinistro in centimetri.
nmm
Margine sinistro in millimetri.
n%
Margine sinistro relativo in percentuale.
margin-right
auto
Margine destro automatico.
npt
Margine destro in punti.
ncm
Margine destro in centimetri.
nmm
Margine destro in millimetri.
n%
Margine destro relativo in percentuale.
border-width
thin
Bordo sottile.
medium
Bordo medio.
thick
Bordo spesso.
border-color
colore
Colore del bordo.
border-style
none
Bordo non visibile.
dotted
Bordo puntato.
dashed
Bordo tratteggiato.
solid
Bordo continuo.
double
Bordo continuo doppio.
width
auto
Larghezza automatica.
npt
Larghezza in punti.
ncm
Larghezza in centimetri.
nmm
Larghezza in millimetri.
n%
Larghezza relativa in percentuale.
height
auto
Altezza automatica.
npt
Altezza in punti.
ncm
Altezza in centimetri.
nmm
Altezza in millimetri.
n%
Altezza relativa in percentuale.
float
none
Blocco fisso.
left
Blocco fluttuante collocato a sinistra con testo che scorre a destra.
right
Blocco fluttuante collocato a destra con testo che scorre a sinistra.
clear
none
Scorre normalmente.
left
Salta un oggetto che si trova a sinistra.
right
Salta un oggetto che si trova a destra.
both
Salta qualunque oggetto fluttuante.
342.1
File «blocchi-css-01.html»
Si realizzi il file blocchi-css-01.html con il contenuto seguente, riutilizzando eventualmente esercitazioni già svolte:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
5 <META NAME="Description" CONTENT="Blocchi, esempio 01">
6 <META NAME="Keywords" CONTENT="HTML, CSS, blocchi, esempio">
7 <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
8 <META NAME="Date" CONTENT="2006.01.01">
9 <META NAME="Resource-type" LANG="en" CONTENT="Document">
10 <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
11 <META NAME="Robots" CONTENT="ALL">
12 <TITLE>Blocchi</TITLE>
13 <STYLE TYPE="text/css">
14 <!--
15 A.sinistra {
16 float: left;
17 margin-right: 2cm;
18 }
19 A.destra {
20 float: right;
21 margin-left: 2cm;
22 }
23 H1 {
24 font-weight: bolder;
25 font-size: 2cm;
26 }
27 P {
28 font-family: sans-serif;
29 font-size: 8mm;
30 text-align: justify;
31 }
32 -->
33 </STYLE>
34 </HEAD>
35 <BODY>
36 37 <H1>Le cose che mi piacciono</H1>
38 39 <P><A CLASS="sinistra" HREF="http://www.gnu.org"><IMG
40 SRC="http://www.gnu.org/graphics/philosophical-gnu-sm.jpg" ALT="GNU
41 filosofico"></A>Ci sono due cose che mi piacciono: il software libero e
42 gli standard liberi. Per saperne di più sul software libero si
43 può leggere qualcosa di utile a partire dal sito
44 http://www.gnu.org (basta fare clic sull'immagine del "GNU filosofico"
45 che appare qui a sinistra).</P>
46 47 <P><A CLASS="destra" HREF="http://validator.w3.org/check/referer"><IMG
48 SRC="http://validator.w3.org/images/v15445" ALT="Valid
49 ISO-HTML!"></A>Per quanto riguarda gli standard, si veda in particolare
50 il W3C (http://www.w3c.org), ma per verificare la correttezza sintattica
51 di questa pagina basta fare un bel clic sulla superficie dell'icona che
52 appare a destra.</P>
53 54 </BODY>
55 </HTML>
Figura 342.3. Aspetto del file blocchi-css-01.html.
342.2
File «blocchi-css-02.html»
Si realizzi il file blocchi-css-02.html, partendo da una copia di blocchi-css-01.html, in modo da arrivare al contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
5 <META NAME="Description" CONTENT="Blocchi, esempio 02">
6 <META NAME="Keywords" CONTENT="HTML, CSS, blocchi, esempio">
7 <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
8 <META NAME="Date" CONTENT="2006.01.01">
9 <META NAME="Resource-type" LANG="en" CONTENT="Document">
10 <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
11 <META NAME="Robots" CONTENT="ALL">
12 <TITLE>Blocchi</TITLE>
13 <STYLE TYPE="text/css">
14 <!--
15 A.sinistra {
16 float: left;
17 margin-right: 2cm;
18 }
19 A.destra {
20 float: right;
21 margin-left: 2cm;
22 }
23 H1 {
24 font-weight: bolder;
25 font-size: 15mm;
26 margin-left: 2cm;
27 margin-right: 2cm;
28 margin-top: 2cm;
29 margin-bottom: 2cm;
30 border-style: solid;
31 }
32 P {
33 font-family: sans-serif;
34 font-size: 8mm;
35 text-align: justify;
36 }
37 -->
38 </STYLE>
39 </HEAD>
40 <BODY>
41 42 <H1>Le cose che mi piacciono</H1>
43 44 <P><A CLASS="sinistra" HREF="http://www.gnu.org"><IMG
45 SRC="http://www.gnu.org/graphics/philosophical-gnu-sm.jpg" ALT="GNU
46 filosofico"></A>Ci sono due cose che mi piacciono: il software libero e
47 gli standard liberi. Per saperne di più sul software libero si
48 può leggere qualcosa di utile a partire dal sito
49 http://www.gnu.org (basta fare clic sull'immagine del "GNU filosofico"
50 che appare qui a sinistra).</P>
51 52 <P><A CLASS="destra" HREF="http://validator.w3.org/check/referer"><IMG
53 SRC="http://validator.w3.org/images/v15445" ALT="Valid
54 ISO-HTML!"></A>Per quanto riguarda gli standard, si veda in particolare
55 il W3C (http://www.w3c.org), ma per verificare la correttezza sintattica
56 di questa pagina basta fare un bel clic sulla superficie dell'icona che
57 appare a destra.</P>
58 59 </BODY>
60 </HTML>
Figura 342.5. Aspetto del file blocchi-css-02.html.
342.3
File «blocchi-css-03.html»
Si realizzi il file blocchi-css-03.html, riutilizzando eventualmente porzioni di esercitazioni già svolte. Il file deve avere il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
5 <META NAME="Description" CONTENT="Blocchi, esempio 03">
6 <META NAME="Keywords" CONTENT="HTML, CSS, blocchi, esempio">
7 <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
8 <META NAME="Date" CONTENT="2006.01.01">
9 <META NAME="Resource-type" LANG="en" CONTENT="Document">
10 <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
11 <META NAME="Robots" CONTENT="ALL">
12 <TITLE>Blocchi</TITLE>
13 <STYLE TYPE="text/css">
14 <!--
15 TABLE {
16 border-style: solid;
17 border-width: thin;
18 }
19 TH {
20 border-style: none;
21 background-color: green;
22 }
23 TD {
24 border-style: dotted;
25 border-width: thin;
26 }
27 P {
28 margin-top: 5mm;
29 margin-bottom: 5mm;
30 margin-left: 5mm;
31 margin-right: 5mm;
32 font-size: 6mm;
33 }
34 -->
35 </STYLE>
36 </HEAD>
37 <BODY>
38 39 <H1>Operatori</H1>
40 41 <P>Segue una tabella contenente l'elenco degli operatori matematici
42 più comuni.</P>
43 44 <TABLE SUMMARY="operatori">
45 <CAPTION>Operatori matematici comuni</CAPTION>
46 <THEAD>
47 <TR>
48 <TH ROWSPAN="2"></TH>
49 <TH ROWSPAN="2"><P>Operatore e operandi</P></TH>
50 <TH COLSPAN="2"><P>Annotazioni</P></TH>
51 </TR>
52 <TR>
53 <TH><P>Operazione</P></TH>
54 <TH><P>Descrizione</P></TH>
55 </TR>
56 </THEAD>
57 <TBODY>
58 <TR>
59 <TH ROWSPAN="4"><P>le quattro operazioni</P></TH>
60 <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE></P></TD>
61 <TD><P>somma</P></TD>
62 <TD><P>Somma i due operandi.</P></TD>
63 </TR>
64 <TR>
65 <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE></P></TD>
66 <TD><P>sottrazione</P></TD>
67 <TD><P>Sottrae il valore del secondo operando da quello
68 del primo.</P></TD>
69 </TR>
70 <TR>
71 <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE></P></TD>
72 <TD><P>moltiplicazione</P></TD>
73 <TD><P>Moltiplica i due operandi.</P></TD>
74 </TR>
75 <TR>
76 <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE></P></TD>
77 <TD><P>divisione</P></TD>
78 <TD><P>Divide il primo operando per il valore del secondo.</P></TD>
79 </TR>
80 </TBODY>
81 </TABLE>
82 83 </BODY>
84 </HTML>
Figura 342.7. Aspetto del file blocchi-css-03.html.
342.4
Verifica sull'uso delle proprietà riferite ai blocchi
In base a quanto appreso fino a questo punto, si realizzi il file verifica-blocchi-css-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
Si osservi che il testo nelle celle ha un margine di 5mm e che i valori numerici sono allineati alla destra.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
la stampa del risultato ottenuto attraverso il navigatore;
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.