[successivo]
[precedente]
[inizio]
[fine]
[indice generale]
[indice ridotto]
[indice analitico]
[volume]
[parte]
Capitolo 487. Blocchi
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 487.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. |
|
487.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="2007.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.w3.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 487.3. Aspetto del file blocchi-css-01.html.
|
487.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="2007.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.w3.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 487.5. Aspetto del file blocchi-css-02.html.
|
487.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="2007.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 487.7. Aspetto del file blocchi-css-03.html.
|
487.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.
Appunti di informatica libera 2007.02 --- Copyright © 2000-2007 Daniele Giacomini -- <daniele (ad) swlibero·org>
Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome blocchi.htm
[successivo]
[precedente]
[inizio]
[fine]
[indice generale]
[indice ridotto]
[indice analitico]
