[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home] [volume] [parte]


Capitolo 496.   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 496.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.

496.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&ugrave; sul software libero si
     43 pu&ograve; 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 496.3. Aspetto del file blocchi-css-01.html.

blocchi-css-01.html

496.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&ugrave; sul software libero si
     48 pu&ograve; 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 496.5. Aspetto del file blocchi-css-02.html.

blocchi-css-02.html

496.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&ugrave; 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 496.7. Aspetto del file blocchi-css-03.html.

blocchi-css-02.html

496.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:

verifica-blocchi-css-01.html

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:

  1. la stampa del risultato ottenuto attraverso il navigatore;

  2. 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 2008 --- Copyright © 2000-2008 Daniele Giacomini -- <appunti2 (ad) gmail·com>


Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome blocchi.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home]

Valid ISO-HTML!

CSS validator!

Gjlg Metamotore e Web Directory