4° puntata
Definire i titoli e i paragrafi
Tag per marcare blocchi di testo
Utilizzare le liste
|
4° puntataDefinire i titoli e i paragrafi |
| Ritorna all'indice | |
Anche nella nostra pagina web possiamo evidenziare e distinguere tra loro i diversi blocchi di testo, definirne l'allineamento e inserire righe di separazione, utilizzando una serie di tag già presenti dalle prime versioni del linguaggio HTML, ancora prima che fossero introdotti la grafica e i fogli di stile. |
 |
Nella prima puntata abbiamo visto che il tag TITLE serve a definire il titolo dell'intero documento HTML; il suo contenuto, oltre ad essere usato per l'indicizzazione dai motori di ricerca, viene di solito visualizzato nella barra superiore del browser.
All'interno del documento è invece possibile definire 6 livelli di titoli (detti anche intestazioni, per distinguerli dal titolo di cui abbiamo parlato sopra), utilizzando il tag formato dalla lettera H e da un numero che ne specifica l'importanza (si va da 1, il più importante, al 6, il meno importante). Sono esempi di titoli: <h1>Capitolo 1</h1> e <h2>Sezione 1.1</h2>.
Il tag utilizzato per definire i paragrafi è P: il testo racchiuso tra <p> e </p> (la chiusura del tag è opzionale ma è consigliata) viene separato fisicamente da quanto lo precede e lo segue. Quasi tutti i browser inseriscono una riga vuota prima e dopo ogni paragrafo: questo fatto viene sfruttato per inserire spaziature verticali creando un paragrafo vuoto con il codice <p> </p>.
e gli altri caratteri specialiAbbiamo visto che i browser ignorano gli spazi aggiuntivi, e questo rende molto più leggibile il codice HTML ben strutturato con rientri e righe vuote che non verranno riportate a schermo. Per inserire nel nostro codice HTML un carattere speciale occorre utilizzare una sequenza che inizia con & e termina con il punto e virgola (;). Ogni carattere è definito da un'abbreviazione del nome (per esempio quot, che sta per quotes, apici) oppure dal numero specifico del set di caratteri preceduto da # (per esempio #192 definisce la A maiuscola accentata: À). Tra i caratteri speciali più utilizzati ci sono i seguenti, ciascuno con il suo codice corrispondente:
Ovviamente gli editor HTML più comuni provvedono a tradurre tutti i caratteri speciali, ma ora potete sapere che cosa ci sta a fare una fila di nella vostra pagina web! |
Sia per i titoli che per i paragrafi è possibile definire l'allineamento del testo utilizzando l'attributo ALIGN, certamente uno dei più diffusi fino all'avvento dei fogli di stile; i valori che questo attributo può assumere sono quattro (left, center, right e justify), ma la "giustificazione" del testo, ovvero l'allineamento in colonna sia a sinistra che a destra, è riconosciuta solo dai browser più recenti.
Scomodando il Sommo Poeta, vediamo ora come i nostri browser visualizzano questo semplice documento composto da titoli e paragrafi:
<html>
<head>
<title>HTML 4 - Titoli e paragrafi</title>
</head>
<body>
<h1 align="center">Inferno</h1>
<h3>Canto I</h3>
<p>Nel mezzo del cammin di nostra vita<br>
mi ritrovai per una selva oscura,<br>
ché la diritta via era smarrita.</p>
<p>Ahi quanto a dir qual era è cosa dura<br>
esta selva selvaggia e aspra e forte<br>
che nel pensier rinova la paura!</p>
<p align="right">(continua)</p>
<p align="center">Dante Alighieri</p>
</body>
</html>
| quello che visualizza Internet Explorer (versione 5.0) |
quello che visualizza Netscape Navigator (versione 4.06) |
|---|---|
 |
 |
Ciascun titolo e ciascun paragrafo viene separato dagli elementi adiacenti con l'introduzione di una riga vuota non dichiarata nel codice (e se non volete perdere tempo non tentate di eliminarla...).
In questo e in altri esempi la finestra del browser è stata ridimensionata per mostrare che l'allineamento è relativo alla dimensione corrente (a meno che non si dichiari la larghezza in pixel di ciò che contiene il testo).
Questo è un aspetto di cui bisogna tenere conto quando si progettano le pagine Web. Infatti, essendo nato per essere indipendente dalle impostazioni del sistema e dello schermo, il linguaggio HTML non definisce il "layout" della pagina (ad esempio non possiede tag che definiscano la dimensione del documento o il salto di pagina) e spesso capita che stampando un documento da Internet si notino rilevanti differenze rispetto a ciò che vediamo sul monitor. Riprenderemo ed approfondiremo questo discorso dopo aver imparato ad usare le tabelle, i frame e i fogli di stile.
Finora abbiamo detto che il browser ignora gli spazi aggiuntivi, le tabulazioni e gli a-capo presenti nel testo. Tutto questo è vero con un'unica eccezione, utile per convertire in HTML file già esistenti in formato testuale (TXT).
Infatti il tag PRE definisce una porzione di testo preformattato, che viene riportato così com'è in caratteri "macchina da scrivere" senza perdere gli eventuali allineamenti verticali. Ad esempio il testo seguente sarebbe decisamente illeggibile se non usassimo questo tag:
| Usando <pre> | Nome Cognome Età Mario Rossi 30 Roberta Bianchi 26 |
| Non usando <pre>: | Nome Cognome Età Mario Rossi 30 Roberta Bianchi 26 |
Un tag che viene utilizzato per marcare parti estese del documento è DIV: questo tag, il cui nome deriva da divisione, permette di racchiudere e comprendere un insieme di tag sui quali è così possibile definire l'allineamento utilizzando una sola volta l'attributo ALIGN.
Per capire il concetto osservate i due codici seguenti, che hanno lo stesso effetto:
Con l'avvento di HTML dinamico, DIV viene utilizzato (insieme a LAYER, tag riconosciuto solo da Netscape) per definire blocchi di elementi con posizionamento assoluto, concetto che rivedremo nelle prossime puntate.
Introdotto successivamente e simile al precendente è il tag SPAN, che consente di definire brani di testo non separati dal resto. Sono invece caduti in disuso BLOCKQUOTE (nato per definire una lunga citazione staccata dal resto e utilizzato spesso per simulare l'effetto "tabulazione" del testo rientrato) e ADDRESS (che consente di inserire alla fine della pagine il nome dell'autore ed eventuali note).
Uno dei primi tag che abbiamo incontrato è stato BR, che permette di andare a capo, posizionando nella riga seguente il testo o gli elementi HTML immediatamente successivi.
È possibile anche inserire righe orizzontali con il tag HR, i cui attributi sono la larghezza WIDTH (in pixel o in percentuale), lo spessore SIZE (in pixel) e l'allineamento ALIGN (il suo valore predefinito è center). Esiste poi l'attributo senza valore NOSHADE che rende la linea senza ombreggiatura.
Infine inserendo del testo tra i tag <!-- e --> è possibile fare sul codice HTML un utile commento non visualizzato dal browser (il commento si può fare anche su più righe, in questo caso il tag finale è //-->)
Vediamo ora come i nostri browser leggono la pagina sottostante, che contiene alcuni dei tag di cui abbiamo parlato (notate che solo il testo preformattato mantiene i riporti a capo):
<html>
<head>
<title>HTML 4 - Blocchi di testo e altri tag</title>
</head>
<body>
<!-- i brani sono tratti dalla Divina Commedia -->
<div align="center">
<h4>Inferno</h4>
<hr noshade size="1" width="50%">
</div>
Canto III
<pre>Per me si va ne la città dolente,
per me si va ne l'etterno dolore,
per me si va tra la perduta gente.</pre>
Giustizia mosse il mio alto fattore;
fecemi la divina podestate,
la somma sapïenza e 'l primo amore.
<blockquote>Dinanzi a me non fuor cose create
se non etterne, e io etterno duro.
Lasciate ogne speranza, voi ch'intrate.</blockquote>
<p>Il canto VII si apre con: <div align="right">“Pape Satàn, pape Satàn aleppe!”</div></p>
</body>
</html>
| quello che visualizza Internet Explorer (versione 5.0) |
quello che visualizza Netscape Navigator (versione 4.06) |
|---|---|
 |
 |
Molte pagine web contengono al loro interno elenchi o menu di navigazione. HTML dà la possibilità di generare vari tipi di liste: ciascun tipo di lista è definito da un tag specifico e al suo interno vengono compresi i singoli elementi identificati dal proprio tag. Le liste possono anche essere nidificate una dentro l'altra, creando così delle vere e proprie sottoliste.
Vediamo ora brevemente i due principali tipi di liste:
|
 |
L'attributo principale di questi due tipi di liste è TYPE, che specifica il tipo di "numero" (arabo, romano, lettere) o di simbolo (cerchio, quadrato, ecc.) utilizzato per contrassegnare le singole voci. |
|
Poco usate sono le liste di definizione, nate per costruire dei glossari, che sono demarcate con il tag DL, mentre i tag DT e DD identificano la coppia "termine da definire - definizione del termine". Sono stati del tutto abbandonati i tag MENU e DIR, che costituite da voci prive di contrassegni consentivano di generare liste a menu e a directory.
Nell'esempio sottostante si apprezza il fatto che i browser ignorano gli spazi aggiuntivi; infatti il codice HTML presenta una struttura gerarchica ben ordinata e i vari elementi della pagina, in questo caso le liste e le voci, vengono rientrate a seconda del loro livello.
<html>
<head>
<title>HTML 4 - Liste</title>
</head>
<body>
<ol>
<li>Voce 1
<ol>
<li>Sottovoce 1.1
<li>Sottovoce 1.2
</ol>
<li>Voce 2
</ol>
<ol type="a">
<li>Voce A
<li>Voce B
</ol>
<ul>
<li type="circle">Elemento
<li type="circle">Elemento
<li type="square">Elemento
</ul>
<dl>
<dt>Termine A<dd>Definizione del termine A
<dt>Termine B<dd>Definizione del termine B
</dl>
</body>
</html>
| quello che visualizza Internet Explorer (versione 5.0) |
quello che visualizza Netscape Navigator (versione 4.06) |
|---|---|
 |
 |
Ora che abbiamo concluso la panoramica su quei tag che ci permettono di pubblicare lettere, tesi o pubblicazioni prive di grafica, passiamo alla caratteristica che contraddistingue le pagine Web: dedicheremo la prossima puntata ai collegamenti ipertestuali.
| Ritorna ad inizio pagina | testo e grafica di Francesco Battistelli | Ritorna all'indice |