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

Capitolo 379. 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 379.1. Proprietà riferite al testo racchiuso in blocchi rettangolari.

Proprietà	Valori	Descrizione
margin-top	auto	Margine superiore automatico.
	`n`pt	Margine superiore in punti.
	`n`cm	Margine superiore in centimetri.
	`n`mm	Margine superiore in millimetri.
	`n`%	Margine superiore relativo in percentuale.
margin-bottom	auto	Margine inferiore automatico.
	`n`pt	Margine inferiore in punti.
	`n`cm	Margine inferiore in centimetri.
	`n`mm	Margine inferiore in millimetri.
	`n`%	Margine inferiore relativo in percentuale.
margin-left	auto	Margine sinistro automatico.
	`n`pt	Margine sinistro in punti.
	`n`cm	Margine sinistro in centimetri.
	`n`mm	Margine sinistro in millimetri.
	`n`%	Margine sinistro relativo in percentuale.
margin-right	auto	Margine destro automatico.
	`n`pt	Margine destro in punti.
	`n`cm	Margine destro in centimetri.
	`n`mm	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.
	`n`pt	Larghezza in punti.
	`n`cm	Larghezza in centimetri.
	`n`mm	Larghezza in millimetri.
	`n`%	Larghezza relativa in percentuale.
height	auto	Altezza automatica.
	`n`pt	Altezza in punti.
	`n`cm	Altezza in centimetri.
	`n`mm	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.

379.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&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.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 379.3. Aspetto del file blocchi-css-01.html.

blocchi-css-01.html

379.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&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.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 379.5. Aspetto del file blocchi-css-02.html.

blocchi-css-02.html

379.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&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 379.7. Aspetto del file blocchi-css-03.html.

blocchi-css-02.html

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

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.

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

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [translators] [docinfo] [indice analitico]