Capitolo 6. Formattare il testo con HTML e CSS

Capitolo 6 Formattare il testo con HTML e CSS 6.1 Elementi a livello di carattere 6.2 Formattazione dei caratteri con i CSS 6.3 Testo preformattato 6.4 Righelli orizzontali 6.5 Interruzioni di riga 6.6 Indirizzi 6.7 Citazioni 6.8 Caratteri speciali 6.9 Allineamento del testo 6.10 Font e dimensioni di font 6.11 <nobr> e <wbr> 6.12 Riepilogo 6.13 Laboratorio Nei capitoli 4 e 5 si sono appresi i fondamenti di HTML, compresi i tag utilizzati per descrivere la struttura della pagina e creare i collegamenti. Con questa conoscenza di base, ora si è pronti per imparare cosa possono fare HTML e CSS dal punto di vista della formattazione e del layout. In questo capitolo In questo capitolo verrà descritta in dettaglio gran parte dei tag rimanenti di HTML che è necessario conoscere per creare le pagine, compresi i tag di HTML 2.0 e fino a HTML 4.01, così come gli attributi HTML dei singoli browser. In particolare si apprenderà come: Specificare l aspetto dei singoli caratteri (grassetto, corsivo, sottolineato). Includere i caratteri speciali (caratteri con accenti, simboli di copyright e così via). Creare testo preformattato (testo che mantiene spazi e tabulazioni). Allineare il testo a sinistra, a destra e al centro. Modificare il font e le sue dimensioni. Creare altri elementi di testo HTML, comprese le interruzioni di riga, le linee dei righelli, gli indirizzi e le citazioni. HTML.indb 125 06/04/2007 8.16.07

126 C APITO L O 6 Inoltre, verranno esaminate le differenze tra HTML standard e le estensioni HTML, e quando scegliere quali tag utilizzare nelle pagine. Si apprenderà anche quali di questi tag sono sconsigliati in XHTML, e come sfruttare CSS per ottenere gli stessi effetti. Infine, si creerà una pagina Web completa che utilizza molti dei tag illustrati nel capitolo, così come le informazioni dei quattro capitoli precedenti. In questo capitolo verranno descritti diversi tag e numerose opzioni, quindi la lettura potrebbe risultare leggermente pesante. Per ora non ci si deve preoccupare di ricordare tutto, basta farsi un idea del tipo di formattazione che si può eseguire in HTML; i tag specifici si potranno esaminare più avanti. 6.1 Elementi a livello di carattere Quando si utilizzano i tag HTML per i paragrafi, i titoli o gli elenchi, tali tag influiscono sul quell intero blocco di testo: modificando il font e la spaziatura sopra e sotto la riga, o aggiungendo i caratteri (nel caso di elenchi puntati). Questi vengono chiamati elementi a livello di blocco. Gli elementi a livello di carattere sono i tag che influiscono sulle parole o sui caratteri all interno di altre entità HTML e modificano l aspetto di quel testo così che sia diverso da quello circostante: per esempio, trasformandolo in grassetto o sottolineandolo. Per modificare l aspetto di un set di caratteri all interno del testo, è possibile utilizzare uno di questi due tipi di tag: stili logici o stili fisici. Stili logici I tag di stile logico descrivono il significato del testo presente al loro interno, non come deve essere presentato. Sono simili ai comuni tag di elemento per i paragrafi o i titoli. Per esempio, i tag di stile logico possono indicare una definizione, una porzione di codice o una parola evidenziata. Tutto questo può essere leggermente fuorviante poiché esistono standard di fatto che collegano ciascuno di questi tag a un determinato stile visuale. In altre parole, anche se un tag come <strong> ha significati diversi per persone differenti, nei borwser Web significa grassetto. Utilizzando i tag di stile logico, il browser stabilisce la reale presentazione del testo, che sia grassetto, corsivo o qualsiasi altra modifica nell aspetto. Non è possibile garantire che il testo evidenziato attraverso questi tag sarà sempre grassetto o corsivo, quindi non si deve dipendere da esso. Oggi, i creatori di browser si sono abbastanza adattati al modo in cui ciascuno di questi tag logici viene visualizzato, ma è comunque importante comprendere che questi tag hanno un significato più profondo dei semplici stili fisici che applicano. HTML.indb 126 06/04/2007 8.16.07

F O RMATTARE IL TES T O CON HTML E CSS 127 Ciascuno stile di carattere dispone di tag di apertura e di chiusura e influisce sul testo all interno di questi due tag. Di seguito sono riportati gli otto tag di stile logico: <em> Questo tag indica che i caratteri devono essere evidenziati in qualche modo; in altre parole, vengono formattati in modo diverso rispetto al resto del testo. Solitamente, nei browser grafici <em> evidenzia il testo in corsivo. Per esempio: <p>the anteater is the <em>strangest</em> looking animal, isn t it?</p> <strong> Con questo tag, i caratteri devono essere evidenziati maggiormente rispetto a <em>: solitamente in grassetto. Si consideri quanto segue: <p>take a <strong>left turn</strong> at <strong>dee s Hop Stop</strong></p> <code> Questo tag indica che il testo al suo interno è un esempio di codice e deve essere visualizzato con un font a larghezza fissa come Courier. Per esempio: <p><code>#include trans.h </code></p> <samp> Questo tag indica un testo di esempio e solitamente viene presentato con un font a larghezza fissa, come <code>. Ecco un esempio di utilizzo di questo tag: <p>the URL for that page is <samp>http://www.cern.ch/</samp></p> <kbd> Questo tag indica che il testo deve essere inserito dall utente. Viene anche presentato con un font a larghezza fissa. Si consideri quanto segue: <p>type the following command: <kbd>find. -name prune -print</kbd></p> <var> Questo tag indica il nome di una variabile, o di una qualche entità, da sostituire con un valore reale. Spesso viene visualizzato in corsivo o sottolineato, e utilizzato nel modo seguente: <p><code>chown</code> <var>your_name for the_file</var></p> <dfn> Questo tag indica una definizione. <dfn> viene utilizzato per evidenziare una parola (solitamente in corsivo) che verrà definita o che è appena stata definita, come nell esempio seguente: <p>styles that are named after how they are actually used are called <dfn>logical styles</dfn></p> <cite> Questo tag indica una breve citazione, come illustrato di seguito: <p>eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> HTML.indb 127 06/04/2007 8.16.07

128 C APITO L O 6 NOTA Dei tag di questo elenco, tutti eccetto <dfn> fanno parte della raccomandazione ufficiale HTML 2.0. <dfn> è stato aggiunto nella raccomandazione HTML 3.2. Nella raccomandazione XHTML 1.0 sono ancora tutti validi. HTML 4.01 ha introdotto due ulteriori tag di stile logico molto utili per i browser audio. Un browser grafico, come Netscape o Internet Explorer, non li visualizzerà in modo diverso. Tuttavia, quando un browser audio legge il contenuto incluso in uno di questi tag, ciascuna lettera viene pronunciata singolarmente. Per esempio, fox viene pronunciata F-O-X. Anche questi tag dispongono di un apertura e di una chiusura e influiscono sul testo al loro interno. Quelli che seguono sono i nuovi tag: <abbr> Questo tag indica l abbreviazione di una parola, come nel seguente esempio: <p>use the standard two-letter state abbreviation (such as <abbr>ca</abbr> for California)</p> <acronym> Simile al tag <abbr>, <acronym> indica una parola formata dall unione delle lettere iniziali di diverse parole, come nel seguente esempio: <p>jonathan learned his great problem-handling skills from <acronym>steps</ acronym> (Simply Tackle Each Problem Seriously)</p> Sono stati memorizzati tutti i tag? Ottimo. Alla fine del capitolo è riportato un questionario. La seguente porzione di codice illustra ciascuno dei tag di stile logico, e la Figura 6.1 mostra come vengono visualizzati. <p>the anteater is the <em>strangest</em> looking animal, isn t it?</p> <p>take a <strong>left turn</strong> at <strong>dee s Hop Stop </strong></p> <p><code>#include trans.h </code></p> <p>the URL for that page is <samp>http://www.cern.ch/</samp></p> <p>type the following command: <kbd>find. -name prune -print</kbd></p> <p><code>chown </code><var>your_name the_file</var></p> <p>styles that are named after how they are used are called <dfn>logical styles</dfn></p> <p>eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> <p>use the standard two-letter state abbreviation (such as <abbr>ca</abbr> for California)</p> <p>jonathan learned his great problem-handling skills from <acronym>steps</acronym> (Simply Tackle Each Problem Seriously) HTML.indb 128 06/04/2007 8.16.08

F O RMATTARE IL TES T O CON HTML E CSS 129 Output Figura 6.1 I vari stili logici visualizzati in un browser. Stili fisici Oltre a questi tag di stile, per modificare il reale stile di presentazione del testo (grassetto, corsivo o monospaziato) è possibile utilizzare un set di tag di stile fisico. Come i tag per lo stile di carattere, ciascun tag di formattazione dispone di un apertura e di una chiusura. HTML 2.0 standard ha definito tre tag di stile fisico: <b> Grassetto. <i> Corsivo. <tt> Font monospaziato. HTML 3.2 ha definito diversi ulteriori tag di stile fisico, tra cui: <u> Sottolineato (sconsigliato in HTML 4.0). <s> Barrato (sconsigliato in HTML 4.0). <big> Stampa più grande rispetto al testo circostante. <small> Stampa più piccola. <sub> Pedice. <sup> Apice. NOTA I browser basati sul testo, come Lynx e quelli associati ai dispositivi wireless, non possono visualizzare il testo in grassetto, corsivo o a cui sia stato applicato uno stile. Solitamente evidenziano il testo in qualche modo, ma questo varia a seconda del browser e della piattaforma. È possibile annidare i tag di carattere, per esempio utilizzando sia grassetto che corsivo per un set di caratteri, nel seguente modo: <b><i>text that is both bold and italic</i></b> HTML.indb 129 06/04/2007 8.16.08

130 C APITO L O 6 Tuttavia, il risultato a video dipende dal browser, come per tutti i tag HTML. Non apparirà necessariamente il testo sia in grassetto sia in corsivo; potrebbe venire visualizzato uno stile o l altro: <p>in Dante s <i>inferno</i>, malaboge was the eighth circle of hell, and held the malicious and fraudulent.</p> <p>all entries must be received by <b>september 26, 1999</b>.</p> <p>type <tt>lpr -Pbirch myfile.txt</tt> to print that file.</p> <p>sign your name in the spot marked <u>sign Here</u>:</p> <p>people who wear orange shirts and plaid pants <s>have no taste</s> are fashion-challenged.</p> <p>rcp floor mats give you <big>big</big> savings over the competition!</p> <p>then, from the corner of the room, he heard a <small>tiny voice </small>.</p> <p>in heavy trading today. Consolidated Orange Trucking rose ¹/₄ points on volume of 1,457,900 shares.</p> La Figura 6.2 mostra alcuni tag fisici e il loro aspetto. Output Figura 6.2 Gli stili fisici visualizzati in un browser. 6.2 Formattazione dei caratteri con i CSS È già stato descritto il modo in cui è possibile utilizzare gli stili per modificare l aspetto dei vari elementi. Uno qualsiasi di questi effetti associati ai tag introdotti in questo capitolo può essere creato anche utilizzando i CSS. Tuttavia, prima di descrivere queste proprietà, è meglio spiegare come utilizzarle. Come è già stato accennato, l attributo style può essere sfruttato con la maggior parte dei tag. Tuttavia, molti tag influiscono in qualche modo sull aspetto del testo che racchiudono. Esiste un tag che non ha alcun effetto sul testo che include: il tag <span>, che esiste solamente per essere associato ai fogli di stile; esso HTML.indb 130 06/04/2007 8.16.08

F O RMATTARE IL TES T O CON HTML E CSS 131 viene utilizzato esattamente come qualsiasi altro tag esaminato in questo capitolo. Basta inserirlo intorno a un testo, in questo modo: <p>this is an example of the <span>usage of the span tag</span>.</p> Utilizzato da solo, il tag <span> non ha alcun effetto. Se accoppiato con l attributo style, può sostituire qualsiasi tag di questo capitolo e può anche eseguire un ottimo lavoro. La proprietà di decorazione del testo La proprietà text-decoration viene utilizzata per specificare quale decorazione, se presente, verrà applicata al testo incluso nel tag su cui influisce. Valori validi per questa proprietà sono underline, overline, line-through e blink. L applicazione di ciascuno di essi è rispettivamente sottolineato, sovralineato, barrato e lampeggiante. Di seguito è riportato un esempio che illustra come utilizzare ognuno di questi valori: <p>here is some <span style= text-decoration: underline >underlined text</span>.</p> <p>here is some <span style= text-decoration: overline >overlined text</ span>.</p> <p>here is some <span style= text-decoration: line-through >line-through text</span>.</p> <p>here is some <span style= text-decoration: blink >blinking text</span>.</p> L utilizzo di <span> e della proprietà text-decoration per sottolineare il testo non è diverso dall impiego del tag <u>, a eccezione del fatto che alcuni browser più datati che non supportano i CSS potrebbero non supportare questa soluzione. La buona notizia è che è possibile utilizzare questa proprietà, e tutte le proprietà descritte in questo capitolo, con qualsiasi tag che racchiude il testo. Si osservi il seguente esempio: <h1 style= text-decoration: underline >An Underlined Heading</h1> Utilizzando l attributo style, è possibile specificare l aspetto del testo del titolo. La scelta tra questo approccio e il tag <u> è indifferente: se si desidera eliminare la sottolineatura dal titolo, è necessario tornare indietro e modificare il tag stesso, indipendentemente che sia stato utilizzato il tag <u> o l attributo style. Più avanti, si imparerà come i fogli di stile possono essere sfruttati per controllare contemporaneamente l aspetto di molti elementi. HTML.indb 131 06/04/2007 8.16.08

132 C APITO L O 6 Proprietà dei font Quando si desidera modificare l aspetto del testo, l altra grande famiglia di proprietà che si può utilizzare sono le proprietà dei font, che possono essere sfruttate per cambiare praticamente qualsiasi aspetto del carattere utilizzato per visualizzare il testo in un browser. Una delle peculiarità delle proprietà dei font è che sono molto più specifiche rispetto ai tag descritti finora. Innanzitutto, si osserveranno alcune delle sostituzioni dirette dei tag già esaminati. La proprietà font-style può essere utilizzata per applicare il corsivo al testo. Ha tre valori possibili, normal, che è quello predefinito, italic, che visualizza il testo allo stesso modo del tag <i>, e oblique, che rappresenta una via di mezzo tra lo stile corsivo e quello normale, e non è supportata dai browser quanto il corsivo. Ecco alcuni esempi: <p>here s some <span style= font-style: italic >italicized text</span>.</p> <p>here s some <span style= font-style: oblique >oblique text</span> (which may look like regular italics in your browser).</p> Ora si esaminerà come utilizzare i CSS per creare un testo in grassetto. Nel mondo di HTML, esistono due opzioni: grassetto e non grassetto. Con i CSS, in teoria si hanno più possibilità. In teoria perché il supporto del browser per la vasta gamma di pesi dei font disponibili attraverso i CSS non è omogeneo. Per specificare che il testo deve essere visualizzato in grassetto, si utilizza la proprietà font-weight, i cui valori validi sono normal (quello predefinito), bold, bolder, lighter, e da 100 a 900, in unità di 100. Ecco acuni esempi: <p>here s some <span style= font-weight: bold >bold text</span>.</p> <p>here s some <span style= font-weight: bolder >bolder text</span>.</p> <p>here s some <span style= font-weight: lighter >lighter text</span>.</p> <p>here s some <span style= font-weight: 700 >bolder text</span>.</p> È anche possibile impostare il carattere per il testo utilizzando la proprietà font-family. Si può anche impostare il font specifico per il testo, argomento che però verrà esaminato più avanti nel capitolo. Nel frattempo, si osservi come definire il font per un membro di una particolare famiglia di font. Il font specifico verrà preso dalle preferenze dell utente. La proprietà per la modifica è font-family, i cui valori possibili sono serif, sans-serif, cursive, fantasy e monospace. Quindi, se si desidera specificare che un font monospaziato deve essere utilizzato con i CSS al posto del tag <tt>, si scriverà il seguente codice: <p><span style= font-family: monospace >This is monospaced text.</span></p> Verrà ora esaminata un opzione non disponibile attraverso i normali tag HTML. Utilizzando la proprietà font-variant, è possibile visualizzare il testo HTML.indb 132 06/04/2007 8.16.08

F O RMATTARE IL TES T O CON HTML E CSS 133 in modo che le lettere minuscole vengano sostituite da lettere maiuscole più grandi. I due valori possibili sono normal e small-caps. Ecco un esempio: <p><span style= font-variant: small-caps >This Text Uses Small Caps.</span></ p> La finestra del browser mostrata nella Figura 6.3 contiene un testo che utilizza la proprietà font-variant e tutte le altre proprietà descritte in questo paragrafo. Output Figura 6.3 Il testo con gli stili applicati attraverso i CSS. 6.3 Testo preformattato La maggior parte delle volte, il testo di un file HTML viene formattato in base ai tag HTML utilizzati per marcarlo. Come accennato nel Capitolo 3, qualsiasi spazio vuoto supplementare (spazi, tabulazioni, ritorni a capo) inserito nel testo viene eliminato dal browser. L unica eccezione a questa regola è il tag per il testo preformattato, <pre>. Qualsiasi spazio vuoto inserito nel testo racchiuso tra i tag <pre> e </pre> viene mantenuto nell output finale. Con questi tag, la spaziatura del testo nel codice sorgente HTML viene conservata quando questo è visualizzato sulla pagina. Lo svantaggio è che solitamente il testo preformattato viene visualizzato (almeno nei browser grafici) con un font monospaziato come Courier. Il testo preformattato è adatto per la visualizzazione di esempi di codice in cui si desidera che il testo venga formattato esattamente con i rientri utilizzati dall autore. Poiché per allineare il testo inserendo gli spazi è possibile utilizzare HTML.indb 133 06/04/2007 8.16.08

134 C APITO L O 6 il tag <pre>, esso può essere sfruttato per semplici tabelle. Tuttavia, il fatto che le tabelle vengano presentate con un font monospaziato non lo rende la scelta migliore (nel Capitolo 8 si apprenderà come creare vere tabelle). Di seguito è riportato un esempio di una tabella creata con <pre>: <pre> Diameter Distance Time to Time to (miles) from Sun Orbit Rotate (millions of miles) --------------------------------------------------------------------- Mercury 3100 36 88 days 59 days Venus 7700 67 225 days 244 days Earth 7920 93 365 days 24 hrs Mars 4200 141 687 days 24 hrs 24 mins Jupiter 88640 483 11.9 years 9 hrs 50 mins Saturn 74500 886 29.5 years 10 hrs 39 mins Uranus 32000 1782 84 years 23 hrs Neptune 31000 2793 165 days 15 hrs 48 mins Pluto 1500 3670 248 years 6 days 7 hrs </pre> La Figura 6.4 mostra come appare in un browser. Output Figura 6.4 Una tabella creata con <pre>, mostrata in un browser. Quando si crea il testo per il tag <pre>, è possibile utilizzare i tag di collegamento e gli stili di carattere, ma non i tag di elemento come i titoli o i paragrafi. È necessario interrompere le righe con i ritorni a capo e cercare di mantenere 60 caratteri o meno per riga. Alcuni browser possono avere uno spazio orizzontale limitato in cui visualizzare il testo. Poiché solitamente i browser non riformattano il testo preformattato per adattarlo a tale spazio, HTML.indb 134 06/04/2007 8.16.08

F O RMATTARE IL TES T O CON HTML E CSS 135 occorre assicurarsi che il testo rimanga entro i limiti per evitare che i lettori debbano scorrere da un lato all altro. Occorre prestare attenzione alle tabulazioni nel testo preformattato: il numero reale di caratteri per ciascuna tabulazione varia da browser a browser. Un browser può avere una tabulazione ogni quattro caratteri, mentre un altro ogni otto. È necessario convertire in spazi qualsiasi tabulazione presente nel testo preformattato così che la formattazione non venga compromessa se il testo viene visualizzato con impostazioni di tabulazione diverse rispetto a quelle del programma utilizzato per inserirlo. Il tag <pre> è adatto anche per convertire velocemente e facilmente in HTML i file che in origine avevano una qualche forma di solo testo, come i messaggi di posta o gli invii di notizie Usenet. Basta circondare l intero contenuto dell articolo con i tag <pre> e si ottiene immediatamente HTML, come nel seguente esempio: <pre> To: lemay@lne.com From: jokes@lne.com Subject: Tales of the Move From Hell, pt. 1 I spent the day on the phone today with the entire household services division of northern California, turning off services, turning on services, transferring services and other such fun things you have to do when you move. It used to be you just called these people and got put on hold for and interminable amount of time, maybe with some nice music, and then you got a customer representative who was surly and hard of hearing, but with some work you could actually get your phone turned off. </pre> Un utilizzo creativo del tag <pre> consiste nel creare immagini ASCII per le pagine Web. I seguenti esempi di input e output HTML mostrano una semplice immagine di mucca ASCII: <pre> ( ) Moo (oo) \/------\ \ ---W * </pre> HTML.indb 135 06/04/2007 8.16.09

136 C APITO L O 6 Il risultato è visualizzato nella Figura 6.5. Output Figura 6.5 Un immagine ASCII che illustra il funzionamento del testo preformattato. 6.4 Righelli orizzontali Il tag <hr>, che in HTML non dispone di un tag di chiusura e non ha alcun testo associato, crea una riga orizzontale sulla pagina. Le linee dei righelli vengono utilizzate per separare visualmente le sezioni di una pagina Web, per esempio prima dei titoli, o per staccare il corpo del testo da un elenco di voci. L input seguente mostra una linea del righello e un elenco scritti in XHT- ML 1.0: <hr /> <h2>to Do on Friday</h2> <ul> <li>do laundry</li> <li>send FedEx with pictures</li> <li>have lunch with Mollie</li> <li>read Email</li> <li>set up Ethernet</li> Chiudere gli elementi vuoti In HTML, il tag <hr> non dispone di un tag di chiusura. Per convertire questo tag in XHTML e assicurare la compatibilità con i browsers HTML, aggiungere alla fi ne del tag uno spazio e una barra laterale: <hr /> Se la riga orizzontale dispone di attributi, la barra laterale appare comunque alla fi ne del tag, come mostrato nei seguenti esempi: <hr size= 2 /> <hr width= 75% /> <hr align= center size= 4 width= 200 /> HTML.indb 136 06/04/2007 8.16.09

F O RMATTARE IL TES T O CON HTML E CSS 137 Figura 6.6 Un esempio di utilizzo dei righelli orizzontali intorno a un elenco. </ul> <hr /> La Figura 6.6 mostra l aspetto in un browser. Output Attributi del tag <hr> In HTML 2.0, il tag <hr> ha l aspetto illustrato, senza tag di chiusura o attributi. Tuttavia, HTML 3.2 ha introdotto diversi attributi per il tag <hr> così da disporre di un maggiore controllo sull aspetto della riga disegnata. Nella specifica HTML 4.01, tutti questi attributi sono stati sconsigliati in favore dei fogli di stile. NOTA Sebbene gli attributi di presentazione come size, width e align siano ancora supportati in HTML 4.01, i fogli di stile rappresentano ora il metodo raccomandato per controllare l aspetto di una pagina. L attributo size indica lo spessore, in pixel, della linea del righello. Il valore predefinito è 2, che rappresenta anche la dimensione più piccola. La Figura 6.7 mostra gli spessori campione delle linee dei righelli creati con il seguente codice: <h2>2 Pixels</h2> <hr size= 2 /> <h2>4 Pixels</h2> <hr size= 4 /> <h2>8 Pixels</h2> <hr size= 8 /> <h2>16 Pixels</h2> <hr size= 16 /> HTML.indb 137 06/04/2007 8.16.09

138 C APITO L O 6 Output Figura 6.7 Esempi di spessori delle linee dei righelli. L attributo width specifica la larghezza orizzontale della linea del righello. È possibile indicare la larghezza esatta del righello in pixel. Si può anche specificare il valore come percentuale della larghezza del browser (per esempio, 30% o 50%). Se la larghezza di un righello orizzontale viene impostata su una percentuale, essa cambierà per adattarsi alle dimensioni della finestra se l utente ridimensiona la finestra del browser. La Figura 6.8 mostra il risultato del seguente codice, che visualizza alcune larghezze campione per le linee del righello: <h2>100%</h2> <hr /> <h2>75%</h2> <hr width= 75% /> <h2>50%</h2> <hr width= 50% /> <h2>25%</h2> <hr width= 25% /> <h2>10%</h2> <hr width= 10% /> HTML.indb 138 06/04/2007 8.16.09

F O RMATTARE IL TES T O CON HTML E CSS 139 Output Figura 6.8 Esempi di larghezze delle linee dei righelli. Se si specifica una larghezza inferiore a quella reale della finestra del browser, è anche possibile indicare l allineamento di quel righello con l attributo align, facendo in modo che venga allineato a sinistra (align= left ), a destra (align= right ), o che sia centrato (align= center ). Per impostazione predefinita, le linee dei righelli sono centrate. Infine, nella maggior parte dei browser odierni, l attributo noshade mostrato nell esempio seguente costringe il browser a disegnare la linea del righello come una semplice riga senza l ombreggiatura tridimensionale, come mostrato nella Figura 6.9. Output Figura 6.9 Le linee dei righelli senza ombreggiatura. HTML.indb 139 06/04/2007 8.16.09

140 C APITO L O 6 Gestire gli attributi senza valori In HTML 4.0 e nelle versioni precedenti, l attributo noshade non richiede alcun valore. Il metodo utilizzato per applicare questo attributo è il seguente: <hr align= center size= 4 width= 200 noshade> Tuttavia, per conformarsi a XHTML 1.0, tutti gli attributi necessitano di un valore. La specifi ca HTML 4.01 richiede che gli attributi booleani (come noshade) abbiano come valore solo il nome dell attributo stesso. L esempio seguente illustra come applicare l attributo noshade al tag <hr> in conformità alla specifi ca XHTML 1.0. <hr align= center size= 4 width= 200 noshade= noshade /> <hr align= center size= 4 width= 300 noshade= noshade /> <hr align= center size= 4 width= 400 noshade= noshade /> <h1 align= center >NorthWestern Video</h1> <hr align= center size= 4 width= 400 noshade= noshade /> <hr align= center size= 4 width= 300 noshade= noshade /> <hr align= center size= 4 width= 200 noshade= noshade /> <h2 align= center >Presents</h2> 6.5 Interruzioni di riga Il tag <br> interrompe una riga di testo nel punto in cui appare. Quando un browser Web incontra un tag <br>, fa ripartire il testo dopo il tag dal margine sinistro (qualunque sia il margine sinistro corrente per l elemento). È possibile utilizzare <br> all interno di altri elementi, come i paragrafi o le voci di elenco; <br> non aggiungerà spazio supplementare sopra o sotto la nuova riga o modificherà il font o lo stile dell entità corrente. Il suo compito consiste nel far ripartire il testo sulla riga successiva. Chiudere correttamente i tag singoli Come il tag <hr>, in HTML <br> non dispone del tag di chiusura. Per convertire questo tag in XHTML e assicurare la compatibilità con i browser HTML, aggiungere uno spazio e una barra laterale alla fi ne del tag e dei suoi attributi, come mostrato nell esempio seguente: And then is heard no more: it is a tale <br /> Told by an idiot, full of sound and fury, <br /> Signifying nothing.</p> L esempio seguente mostra un semplice paragrafo in cui ciascuna riga (a eccezione dell ultima, che termina con un tag <p> di chiusura) finisce con <br>: <p>tomorrow, and tomorrow, and tomorrow,<br /> Creeps in this petty pace from day to day,<br /> To the last syllable of recorded time;<br /> HTML.indb 140 06/04/2007 8.16.09

F O RMATTARE IL TES T O CON HTML E CSS 141 And all our yesterdays have lighted fools<br /> The way to dusty death. Out, out, brief candle!<br /> Life s but a walking shadow; a poor player,<br /> That struts and frets his hour upon the stage,<br /> And then is heard no more: it is a tale <br /> Told by an idiot, full of sound and fury, <br /> Signifying nothing.</p> La Figura 6.10 mostra come appare in un browser. NOTA clear è un attributo del tag <br> e viene utilizzato con le immagini circondate dal testo. Questo attributo verrà esaminato nel Capitolo 7. Output Figura 6.10 Interruzioni di riga. 6.6 Indirizzi Il tag di indirizzo <address> viene utilizzato sulle pagine Web per entità di tipo firma. I tag di indirizzo solitamente vengono inseriti nella parte inferiore di ciascuna pagina Web e vengono impiegati per indicare la persona che ha scritto la pagina Web, chi contattare per ulteriori informazioni, la data, qualsiasi informazione sul copyright o altri avvertimenti, e tutto ciò che sembri appropriato. Spesso gli indirizzi sono preceduti da una linea di righello (<hr>), e il tag <br> può essere utilizzato per separare le righe. Senza un indirizzo o un qualche altro metodo di firma delle pagine Web, è praticamente impossibile scoprire chi ha scritto la pagina o chi contattare per ulteriori informazioni. La firma di ciascuna pagina Web attraverso il tag <address> rappresenta un ottimo modo per assicurarsi che le persone possano contattare l autore. <address> è un tag a livello di blocco che mostra il testo al suo interno in corsivo. L input seguente illustra un indirizzo: <hr /> <address> HTML.indb 141 06/04/2007 8.16.09

142 C APITO L O 6 Laura Lemay <a href= mailto:lemay@lne.com >lemay@lne.com</a><br /> A service of Laura Lemay, Incorporated <br /> last revised January 10, 2003 <br /> Copyright Laura Lemay 2003 all rights reserved <br /> Void where prohibited. Keep hands and feet inside the vehicle at all times. </address> La Figura 6.11 mostra il suo aspetto in un browser. Output Figura 6.11 Un blocco di indirizzo. 6.7 Citazioni Il tag <blockquote> viene utilizzato per creare un blocco di testo con rientro all interno di una pagina (a differenza del tag <cite>, che evidenzia brevi citazioni, <blockquote> viene impiegato per citazioni più lunghe che non devono essere annidate in altri paragrafi). Per esempio, il monologo del Macbeth utilizzato nell esempio delle interruzioni di riga avrebbe funzionato meglio come <blockquote> che come semplice paragrafo. Ecco un esempio di input: <blockquote> During the whole of a dull, dark, and soundless day in the autumn of the year, when the clouds hung oppressively low in the heavens, I had been passing alone, on horseback, through a singularly dreary tract of country, and at length found myself, as the shades of evening grew on, within view of the melancholy House of Usher. ---Edgar Allen Poe </blockquote> Come per i paragrafi, è possibile dividere le righe presenti in <blockquote> utilizzando il tag per l interruzione di riga, <br>. Il seguente esempio di input mostra questo impiego: <blockquote> Guns aren t lawful, <br /> nooses give.<br /> gas smells awful.<br /> HTML.indb 142 06/04/2007 8.16.10

F O RMATTARE IL TES T O CON HTML E CSS 143 You might as well live.<br /> ---Dorothy Parker </blockquote> La Figura 6.12 illustra come appare in un browser l esempio di input precedente. Output Figura 6.12 Una citazione. NOTA Il tag <blockquote> viene spesso utilizzato non per indicare le citazioni all interno del testo, ma per creare i margini su entrambi i lati di una pagina allo scopo di renderla più leggibile. Questa tecnica funziona, anche se rappresenta un utilizzo improprio del tag. Oggi, i margini vengono controllati con i Cascading Style Sheet, come descritto nel Capitolo 9. 6.8 Caratteri speciali Come si è appreso nei capitoli precedenti, i file HTML sono composti da testo ASCII e non devono contenere alcuna formattazione o strani caratteri. Infatti, gli unici caratteri che è possibile inserire nei file HTML sono quelli realmente presenti sulla tastiera. Se per produrre un singolo carattere occorre tenere premuto un tasto diverso da Maiusc, o digitare una strana combinazione di tasti, non è possibile utilizzare tale carattere nel file HTML. Questo comprende i caratteri utilizzati quotidianamente, come i trattini lunghi e le virgolette inglesi (se il word processor è impostato per eseguire automaticamente le virgolette inglesi, occorre disattivare questa funzione quando si scrivono i file HTML). Ma se è possibile digitare sulla tastiera un carattere come un pallino o una a accentata attraverso una speciale sequenza di tasti, lo si può includere in un file HTML, e il browser lo visualizza correttamente, qual è il problema? Il problema è che la codifica interna eseguita dal proprio computer per produrre quel carattere (che ne consente la corretta visualizzazione nel file HTML.indb 143 06/04/2007 8.16.10

144 C APITO L O 6 HTML e nel browser) probabilmente non verrà interpretata da altri computer. Chiunque su Internet legga il file HTML contenente quello strano carattere potrebbe vederne un altro o semplicemente trovarsi davanti a una sequenza di caratteri incomprensibile. Oppure, a seconda del modo in cui la pagina viene inviata su Internet, il carattere potrebbe andare perso prima che raggiunga il computer su cui verrà visualizzato il file. Quindi, cosa fare? HTML fornisce una soluzione ragionevole: definisce uno speciale set di codici, chiamati entità di carattere, che possono essere inclusi nei file HTML allo scopo di rappresentare i caratteri che si desidera utilizzare. Quando interpretati da un browser, queste entità di carattere vengono visualizzate come i caratteri speciali corretti per la piattaforma e il font. Alcuni caratteri speciali non provengono dal set di caratteri ASCII esteso. Per esempio, le virgolette e le & commerciali possono essere presentate su una pagina utilizzando le entità di carattere anche se sono presenti nel set di caratteri ASCII standard. Nei documenti HTML questi caratteri hanno un significato particolare in un determinato contesto, quindi possono essere rappresentati con le entità di carattere allo scopo di evitare di confondere i browser Web. Generalmente i browser moderni non hanno problemi con questi caratteri, ma è meglio utilizzare comunque le entità. Entità di carattere per i caratteri speciali Le entità di carattere hanno le due seguenti forme: entità con nome ed entità numerate. Le entità con nome iniziano con una & commerciale e terminano con un punto e virgola (;). Tra questi due simboli si trova il nome del carattere (o, più probabilmente, una versione abbreviata di quel nome, come agrave per una a con l accento grave, o reg per un simbolo di marchio registrato).a differenza di altri tag HTML, i nomi sono sensibili all utilizzo delle maiuscole, quindi occorre assicurarsi che siano scritti correttamente. Le entità con nome hanno il seguente aspetto: à " «Anche le entità numerate iniziano con una & commerciale e terminano con un punto e virgola, ma al posto di un nome, contengono il simbolo # e un numero. I numeri corrispondono alle posizioni dei caratteri nel carattere ISO-Latin-1 (ISO 8859-1). Ogni carattere che è possibile digitare o per cui si può utilizzare un entità con nome dispone anche di un entità numerata. Le entità numerate hanno il seguente aspetto: &#130; õ HTML.indb 144 06/04/2007 8.16.10