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}
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:
| Type | Stile di numerazione |
|---|
| 1 | numeri arabi | 1, 2, 3, ... |
| a | lettere minuscole | a, b, c, ... |
| A | lettere maiuscole | A, B, C, ... |
| i | numeri romani minuscoli | i, ii, iii, ... |
| I | numeri romani maiuscoli | I, 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>
- Introduzione
- Descrizione progetto
- Scopo progetto
- Finalita` necessarie
- Possibilita` aggiuntive
- Obbiettivi raggiunti
- 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>
- Capitolo 1: Introduzione
- Capitolo 2: Descrizione progetto
- Sezione 2.A: Scopo progetto
- Sezione 2.A.I: Finalita` necessarie
- Sezione 2.A.II: Possibilita` aggiuntive
- Sezione 2.B: Obiettivi raggiunti
- Capitolo 3: Applicazioni
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>
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>
.........
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>
- 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)".
- Lo stile puo' essere definito in 3 diverse zone:
- 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
- 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.
- 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