Minicorso HTML - Lezione 2
di Paolo Subiaco iw3grx
16 settembre 2001

Indice | Precedente lezione | Prossima lezione


6 Liste ed elenchi

Nel linguaggio HTML e' incluso anche un oggetto di tipo lista, definito dal tag <dl>, attraverso cui e` possibile creare delle liste di oggetti composte da uno o piu' espressioni (definite dal tag <dt>) e dalla sua/loro descrizione (definita dal tag <dd>).
Un esempio di lista sono le novita` del sito ir3ip, di cui propongo di seguito il codice e l'output.
<dl class="news">
<dt>September 15, 2001
<dd>Attivato <a href="/iw3grx/icecast/">streaming audio</a>
 per gli utenti locali
<dt>August 18, 2001
<dd>Inserita scheda di registrazione per <a href="homepages/register.php">
 ottenere un account su ir3ip</a>
<dt>July 27,2001
<dd>Nuova <a href="homepages/">lista delle homepage</a>
 degli utenti locali
<dt>July 15,2001
<dd>Simpatica <a href="qsl/">QSL Gallery</a> in cui vedere
 ed inserire QSL radioamatoriali
</dl>

September 15, 2001
Attivato streaming audio per gli utenti locali
August 18, 2001
Inserita scheda di registrazione per ottenere un account su ir3ip
July 27,2001
Nuova lista delle homepage degli utenti locali
July 15,2001
Simpatica QSL Gallery in cui vedere ed inserire QSL radioamatoriali

Nel caso della pagina principale di ir3ip, gli stili sono definiti in un file css esterno, nel quale erano in particolare inserite le seguenti 3 linee:
dl.news {background-color: lightyellow}
.news dt {font-size:10pt; color:green}
.news dd {font-size:9pt; margin:0em; padding-left:0.5em; padding-bottom:1em}
In questo modo possiamo approfondire ulteriormente l'uso degli stili.
Alla lista e` associata la classe con nome "news", per la quale e` definito uno sfondo giallo chiaro (lightyellow), come visibile nella linea dl.news {}.
La seconda linea indica le caratteristiche (colore del testo e grandezza del carattere) dell'elemento dt che appartiene alla classe "news".
Pertanto, tutti gli elementi all'interno della lista (<dl>), che e` stata definita classe uguale a "news", apparterranno a tale classe, e lo stile ad esso associato potra` essere definito proprio con la sintassi .NOMECLASSE ELEMENTO {DEFINIZIONE_STILE}
Lo stesso dicasi per la terza riga, relativa all'elemento <dd> in cui si e` altresi' specificata la spaziatura del testo dal bordo sinistro ed inferiore.

Oltre alle liste, vi sono anche gli elenchi, che possono essere del tipo numerato o non numerato. L'elenco e` fatto da alcune voci, in inglese "list item" abbreviate dal tag <li>. L'elenco numerato viene creato attraverso il tag <ol>, e puo' avere diversi tipi di numerazione, definite attraverso l'opzione type:

TypeStile di numerazione
1numeri arabi1, 2, 3, ...
alettere minuscolea, b, c, ...
Alettere maiuscoleA, B, C, ...
inumeri romani minuscolii, ii, iii, ...
Inumeri romani maiuscoliI, II, III, ...
Facciamo un esempio:

<ol>
 <li>Introduzione
 <li>Descrizione progetto
 <ol type="A">
  <li>Scopo progetto
  <ol type="I">
   <li>Finalita` necessarie
   <li>Possibilita` aggiuntive
  </ol>
  <li>Obbiettivi raggiunti
 </ol>
 <li>Applicazioni
</ol>

  1. Introduzione
  2. Descrizione progetto
    1. Scopo progetto
      1. Finalita` necessarie
      2. Possibilita` aggiuntive
    2. Obbiettivi raggiunti
  3. Applicazioni

Analogamente, anche l'elenco non numerato (definito dal tag <ul>) puo' utilizzare diversi simboli definiti sempre dall'opzione "type", che puo` assumere i valori disc, circle e square; vediamo un esempio:
<ul type="square">
 <li>Capitolo 1: Introduzione
 <li>Capitolo 2: Descrizione progetto
 <ul type="circle">
  <li>Sezione 2.A: Scopo progetto
  <ul type="disc">
   <li>Sezione 2.A.I:  Finalita` necessarie
   <li>Sezione 2.A.II: Possibilita` aggiuntive
  </ul>
  <li>Sezione 2.B: Obiettivi raggiunti
 </ul>
 <li>Capitolo 3: Applicazioni
</ul>




7 Divisioni e blockquote

Spesso risulta indispensabile inserire nelle proprie pagine dei riquadri, come quelli presenti in questo documento per visualizzare il blocco di codice HTML e l'output da esso generato.
I riquadri possono essere creati attraverso il tag <div> , le cui caratteristiche possono come al solito essere definite attraverso i fogli di stile.
Vediamo ad esempio come sono definite le divisioni di questo corso in cui e` contenuto il codice HTML illustrato:
<div class="html">
testo da inserire nella divisione.......
</div>
Ma dove sono definiti il colore dello sfondo e del testo, eccetera?
Si noti che alla divisione e` associata la classe "html", che consente di identificare il tipo di divisione ed associare determinate caratteristiche definite nei fogli di stile: nel nostro caso, all'inizio del documento (nel blocco head) e' stato definito lo stile "html" associato alle divisioni, in questo modo:
<html>
<head>
.........
<style>
body {margin:1.5em;background-color:#FFFFe0; text-align:justify}
div.html {padding:1em; background:#f0f0f0;
 color:red; border:solid 1px black}
div.view {background:#ffffff}
div.viewtext {padding:1em; background:#ffffff; border:solid 1px black}
td.html {padding-left:0.5em; padding-right:1em; background:#f0f0f0;
 color:red; font-family:courier,fixed}
td.view {padding-left:1em; padding-right:0.5em; background:#ffffff}
tt {font-weight:700}
</style>
</head>
<body>
.........
Si noti quindi la definizione dello stile div.html, in cui e` specificato di utilizzare un padding (spaziatura del testo all'interno della divisione) di 1em (ricordo che l'"em" e` una unita` di misura tipografica), sfondo grigio chiaro (valore di rosso, verde e blu pari a 240/255), colore del testo rosso, ed infine bordo della divisione costituita da una linea nera di 1 pixel.
Molte altre caratteristiche sono applicabili, come ad esempio il tipo di font (font-family, font-size, font-weight, font-slant), il margine della divisione (ovvero la spaziatura esterna alla divisione), ed altro ancora.

Ovviamente all'interno di una divisione si possono creare altri oggetti, quali tabelle, ulteriori divisioni, immagini.

Una particolare divisione, utilizzata ad esempio per creare un sommario che precede la trattazione di un articolo, e' il blockquote, utilizzabile anche per la trascrizione di poesie.
blockquote crea una divisione con alcuni centimetri di margine.
Questo testo, ad esempio, e` racchiuso in un blockquote, in cui e` stato soltanto definito lo sfondo per mettere in evidenza il margine utilizzato, ovvero la spaziatura all'esterno del blocco.
Ovviamente oltre al risultato ottenuto puo' essere utile vedere il codice con il quale e` stato generato il blockquote, ed ancora una volta si presti attenzione a come si puo' facilmente definirne lo sfondo o altre caratteristiche, attraverso la definizione dello stile che questa volta viene fatta in linea.
<blockquote style="background:lightcyan">
Questo testo, ad esempio, e` racchiuso in un blockquote, in cui e` stato soltanto definito lo
sfondo per mettere in evidenza il margine utilizzato, ovvero la spaziatura all'esterno del blocco.
</blockquote>
Risultano a questo punto indispensabili due precisazioni:
  1. il colore puo' essere definito sia attraverso il proprio nome (white,black,grey,red,orange, yellow,green,maroon,blue,purple,cyan), eventualmente preceduto dal prefisso "light" o "dark" per definire una tonalita` chiara oppure scura, oppure attraverso la sua rappresentazione esadecimale RGB a 16 milioni di colori (per ciascuno dei 3 colori fondamentali si associa una intensita` da 0 (scuro) a 255 (chiaro) attraverso dei numeri esadecimali da 00 a FF, ad esempio style="background:#F0E0E0");
    sconsiglio l'uso della notazione a 4096 colori, ovvero in cui per ognuno dei 3 colori fondamentali e' specificato un valore di intensita` compreso fra 0 e F , come ad esempio style="background:#FEE" in quanto non largamente supportata dai browser.
    Si puo' infine specificare l'intensita` dei colori attraverso la funzione rgb(r,g,b), ad esempio style="background:rgb(240,224,224)".
  2. Lo stile puo' essere definito in 3 diverse zone:
    1. in linea, come appare nel blockquote appena definito, ovvero all'interno dello stesso tag blockquote abbiamo specificato anche lo stile; questo sistema risulta molto comodo per gli oggetti che non si ripetono all'interno dello stessa pagina
    2. nell'header della pagina, all'interno del tag <style>: in questo caso per ogni stile e' necessario definire una classe di oggetti a cui tale stile si definisce.
      Questo sistema risulta praticissimo per la definizione dello stile di oggetti che si ripetono molte volte all'interno della pagina, cosicche` la modifica dello stile si ripercuotera` automaticamente su tutti gli oggetti appartenenti a tale classe.
    3. in un file a parte con estensione .css, che verra` chiamato foglio di stile, nel quale sono raggruppati gli stili degli oggetti di tutte le pagine che includono quel foglio di stile.
      Quest'ultimo sistema si presta benissimo per la realizzazione di siti omogenei, in cui ad esempio bastera` cambiare la definizione dello stile una sola volta, nel file .css, per cambiare le impostazioni di tutto il sito.
      Un esempio di questo? Basti provare l' accesso al bbs IK3GET in cui, nel menu, potrete scegliere uno stile che definira` il colore, il tipo delle tabelle, l'evidenziazione dei link eccetera per tutte le pagine relative al dpbox.
      Se un domani sarete stufi dei soliti colori, in questo modo potrete cambiare agevolmente il look di tutte le vostre pagine! Che ne dite??



Indice | Precedente lezione | Prossima lezione