Il linguaggio html approfondimento della marcatura di base by Corso Grafica e Web Design

Il linguaggio HTML: approfondimento della marcatura di base

Introduzione Conoscendo già il funzionamento del linguaggio HTML e molti dei suoi elementi di marcatura, in questa lezione vedremo in che modo utilizzare alcuni degli elementi di base, introdotti nell’unità “Elementi di HTML”, e in che modo questi saranno poi visualizzati nella finestra del browser.

Organizzare i paragrafi Utilizzo delle "intestazioni" (elementi h1-h6) Come abbiamo giĂ visto, il linguaggio HTML prevede lâ&#x20AC;&#x2122;utilizzo di 6 marcature per definire 6 diverse tipologie di intestazioni o titoli. Il numero, compreso tra 1 e 6 che segue le lettera h allâ&#x20AC;&#x2122;interno delle parentesi <â&#x20AC;Ś> del tag indica il livello di importanza del titolo racchiuso.

Pertanto i tag <h1>â&#x20AC;Ś</h1> indicheranno quel titolo di maggiore importanza mentre i tag <h6>â&#x20AC;Ś</h6> racchiuderanno la titolatura a cui si vuol dare la minore rilevanza allâ&#x20AC;&#x2122;interno di una pagina. Vediamo subito la seguente struttura esplicativa e il relativo output: <html> <head><title>Esempio Titoli</title> <style type="text/css"> h1 {color: red; } body {text-align: center; } </style> <head> <body> <h1>Titolo 1</h1> <h2>Titolo 2</h2>

<h3>Titolo 3</h3> <h4>Titolo 4</h4> <h5>Titolo 5</h5> <h6>Titolo 6</h6> </body> </html> Output

Come si può vedere dall’output, ogni tag di titolatura agisce come un tag di paragrafo <p>, inserendo automaticamente un’interruzione di linea e uno spazio successivo automatico. Tale spazio di default, dopo l’utilizzo di uno dei 6 tag diversi per le titolature, corrisponde ad una linea. Proprio per questo è possibile utilizzare i tag di intestazione anche per delimitare e separare diverse parti di contenuto. Inoltre, come messo in evidenza dalla struttura di esempio, è possibile associare stili diversi ai singoli titoli, specificando come selettore di stile il tag <h1>-<h6> scelto.

Vediamo ad esempio anche la seguente struttura di esempio che definisce le prime 4 titolature (<h1>-<h4>) in relazione al normale font di paragrafo (<p>). <html> <head><title>Titoli e stili</title> <style type="text/css"> h1 { font-size: 18pt; font-family: Arial; font-weight: bold; } h2 { font-size: 16pt; font-family: Arial; font-weight: bold; } h3 { font-size: 14pt; font-family: Arial; font-weight: bold; } h4 { font-size: 12pt; font-family: Arial;

font-weight: bold; } p { font-size: 12pt; font-family: Verdana; font-weight: normal; } </style> </head> <body> <h1>Titolo 1</h1> <h2>Titolo 2</h2> <h3>Titolo 3</h3> <h4>Titolo 4</h4> <p>Applicare regole di stile diverse ai singoli titoli</p> </body> </html>

Output

Per le loro caratteristiche i tag HTML relativi ai titoli appartengono allo stesso "livello gerarchico" dei tag di paragrafo <p>â&#x20AC;Ś</p> come evidenziato ad esempio nello schema seguente.

Schema di una struttura gerarchica di base di un documento (X)HTML

Inserire line orizzontali Per separare i contenuti delle nostre pagine web esattamente dove desideriamo Ă¨ possibile utilizzare la marcatura specifica <hr> (non necessita di un tag di chiusura cosĂŹ come il tag <br/ >) che andrĂ a creare, dove posizionata, una linea orizzontale di separazione. Ad esempio, se si desidera separare diverse parti di testo contenute in uno stesso paragrafo (<p>) Ă¨ possibile inserire alcuni tag hr per creare delle interruzioni, come evidenziato nella struttura seguente e nel relativo output.

<html> <head> <title>Esempio tag hr</title> <style type="text/css"> body { background-color: #B0C4DE; } </style> </head> <body> <p> E la Diva dalle bianche braccia rise, e in quel riso dalla man del figlio prese il nappo. Ed ei poscia agli altri Eterni, incominciando a destra, e dal cratere il nèttare attignendo, a tutti in giro lo mescea. Suscitossi infra' Beati immenso riso nel veder Vulcano per la sala aggirarsi affaccendato in quell'opra. Così, fino al tramonto, tutto il dì convitossi, ed egualmente del banchetto ogni Dio partecipava. </p> <p> Né l'aurata mancò lira d'Apollo, né il dolce delle Muse alterno canto. Ratto, poi che del Sol la luminosa lampa si spense, a' suoi riposi ognuno ne' palagi n'andò, che fabbricati a ciascheduno avea con ammirando artifizio Vulcan l'inclito zoppo.

</p> <p> E a' suoi talami anch'esso, ove qual volta soave l'assalìa forza di sonno, corcar solea le membra, il fulminante Olimpio s'avviò. Quivi salito addormentossi il nume, ed al suo fianco giacque l'alma Giunon che d'oro ha il trono. </p><hr> <p>Canto secondo</p> <p> Tutti ancora dormìan per l’alta notte i guerrieri e gli Dei; ma il dolce sonno già le pupille abbandonato avea di Giove che pensoso in suo segreto divisando venìa come d’Achille, con molta strage delle vite argive, illustrar la vendetta.</p> </body> </html>

Output

Eâ&#x20AC;&#x2122; ovviamente possibile non solamente separare tra loro i paragrafi ma anche creare delle righe di separazione interne agli stessi tag <p>â&#x20AC;Ś</p>.

Struttura esempio <html> <head> <title>Esempio tag hr</title> <style type="text/css"> body { background-color: #B0C4DE; } h3 { text: bold; color: red; ] </style> </head> <body> <p> E la Diva dalle bianche braccia rise, <hr> e in quel riso dalla man del figlio prese il nappo. Ed ei poscia agli altri Eterni, incominciando a destra, e dal cratere il nĂ¨ttare attignendo, a tutti in giro lo mescea. Suscitossi infra' Beati immenso riso nel veder Vulcano per la sala aggirarsi affaccendato in quell'opra. CosĂŹ, fino al tramonto, tutto il dĂŹ convitossi, ed egualmente del banchetto ogni Dio partecipava. </p>

<p> Né l'aurata mancò lira d'Apollo, né il dolce delle Muse alterno canto. Ratto, poi che del Sol la luminosa lampa si spense, a' suoi riposi ognuno ne' palagi n'andò, che fabbricati a ciascheduno avea con ammirando artifizio Vulcan l'inclito zoppo. </p> <p> E a' suoi talami anch'esso, ove qual volta soave l'assalìa forza di sonno, corcar solea le membra, il fulminante Olimpio s'avvïò. Quivi salito addormentossi il nume, ed al suo fianco giacque l'alma Giunon che d'oro ha il trono. </p><hr><h3>Canto secondo</h3> <p> Tutti ancora dormìan per l’alta notte i guerrieri e gli Dei; ma il dolce sonno già le pupille abbandonato avea di Giove che pensoso in suo segreto divisando venìa come d’Achille,5 con molta strage delle vite argive, illustrar la vendetta.</p> </body> </html>

Output

Ovviamente la visualizzazione finale dell’elemento hr può essere modificata in modi diversi. Ad esempio è possibile associare al tag hr degli specifici attributi del linguaggio HTML, relativi al colore (attributo color), all’allineamento (attributo align) e alla grandezza (attributi size, width e height), come indicato nell’ esempio seguente: <hr color="red" align="center"> Altrimenti è ugualmente possibile utilizzare delle regole di stile in linea, interne alla stessa marcatura HTML, come nel seguente esempio: <hr style="width: 100px; align: center;">

Preservare la formattazione originale Se si desidera che il browser interpreti il contenuto del documento sorgente esattamente così come è stato inserito, è necessario utilizzare l’elemento <pre>. Questa marcatura, come già menzionato nell’unità introduttiva, comunica al browser che il testo racchiuso tra i tag <pre>…</pre> dovrà apparire esattamente come digitato nella struttura HTML realizzata. Vediamo la seguente struttura di esempio relativa al tag <pre>.

<html> <head><title>Esempio tag pre</title> <style type="text/css"> body {background-color: #FF8C00; } h2 {color: #9932CC; } </style> </head> <body> <h2>Esempio di utilizzo del tag pre</h2> <pre> Questo testo contiene diverse spaziature. Si tratta di un esempio di testo relativo allâ&#x20AC;&#x2122;utilizzo del tag <strong>pre</strong>

</pre> <p>Questo Ă¨ un esempio di testo non racchiuso tra i tag pre</p> </body> </html> Output

Come si può vedere dall’output il browser renderà in automatico con un font monospace il testo contenuto nei tag <pre>…</pre> Impostare i rientri Per modificare l’aspetto tra i diversi paragrafi contenuti in una struttura HTML è possibile utilizzare una proprietà di stile specifica: text-indent (valori espressi in percentuale o in pixel) che, associata agli elementi di marcatura HTML, permette di creare un rientro di prima linea.

Ad esempio nella struttura seguente la prima linea di paragrafo avrĂ un rientro di 50 px. <html> <head><title>Creare dei rientri</title> <style type="text/css"> body { background-color: #FA8072; } p { text-indent: 50px; } </style> <body> <hr color="white"> <p> Creare un rientro di prima linea con le <b><i>regole di stile</i></b><br/ > e la marcatura HTML <hr color="white">

</p> </body> </html> Output

Nel caso in cui si voglia differenziare paragrafi diversi utilizzando proprio la proprietĂ text-indent Ă¨ possibile impostare rientri diversi utilizzando lâ&#x20AC;&#x2122;attributo class per distinguere i diversi tag di paragrafo.

Esempio

<html> <head><title>Gestire i rientri</title> <style type="text/css"> body {background-color: #7FFFD4; } p { text-indent: 20px; } .rientro {text-indent: 40px; } </style> </head> <body> <p>Primo paragrafo <br/ >con rientro di prima riga di 20 pixel</p> <p class="rientro">Secondo paragrafo <br/ > con rientro di prima riga di 40 pixel</p>

</body> </html> Output

Per ottenere questo effetto e differenziare così i vari paragrafi basterà specificare un termine da associare all’elemento di identificazione class, inserito in questo caso nel tag di paragrafo <p>, che andrà ripreso come selettore (.rientro) nella regola di stile.

Per impostare il rientro di un paragrafo intero Ă¨ possibile utilizzare le proprietĂ padding-left e padding-right (i valori associabili possono essere espressi in pixel, punti e valori percentuale). Queste proprietĂ servono semplicemente ad aggiungere dello spazio a sinistra e/o a destra di un dato elemento di blocco. Ad esempio, per aggiungere dello spazio a sinistra di un paragrafo, possiamo utilizzare la seguente struttura di base. <html> <head><title>Padding sinistro</title> <style type="text/css"> body {background-color: #00FF7F; } p {padding-left: 40px; color: red; }

</style> </head> <body> <p><b>Paragrafo con padding sinistro di 40 pixel</b></p> </body> </html> Output

Infine Ă¨ possibile utilizzare il tag <blockquote> per far facilmente rientrare un paragrafo sia a destra che a sinistra. <html> <head><title>esempio blockquote</title> <style type="text/css"> body {background-color: #F08080; } p {color: #FFDAB9; } </style> </head> <body> <p><b>Rientro di paragrafo attraverso il tag blockquote</b></p> <p> <blockquote>

<pre> "A me pare uguale agli dei chi a te vicino cosĂŹ dolce suono ascolta mentre tu parli e ridi amorosamente. Subito a me il cuore si agita nel petto solo che appena ti veda, e la voce si perde sulla lingua inerte" </pre> </blockquote> </p> </body> </html>

Output

Utilizzi dell’elemento generico div Adesso che abbiamo visto in quali modi è possibile cambiare l’aspetto e la formattazione di un elemento paragrafo <p>, vediamo in che modo modificare la formattazione di più paragrafi insieme. Supponiamo ad esempio di voler creare un rientro per un’intera sezione di testo e di voler aggiungere un bordo intorno a questo. Prendiamo in considerazione la seguente struttura dove un attributo class viene utilizzato per impostare uno stile a più paragrafi insieme.

<html> <head> <title>Bordi & paragrafi</title> <style type="text/css"> body { background-color: #FFF5EE; text-align: center;} .bordo { padding-left: 50px; padding-right: 50px; border: solid 3px; width: 200px; } </style> </head> <body> <p class="bordo"> O graziosa luna, io mi rammento. Che, or volge l'anno, sovra questo colle io venia pien d'angoscia a rimirarti: E tu pendevi allor su quella selva. Siccome or fai, che tutta la rischiari</p> <p class="bordo"> Ma nebuloso e tremulo dal pianto che mi sorgea sul ciglio, alle mie luci il tuo volto apparia, che travagliosa era mia vita: ed Ă¨, nĂ¨ cangia stile. O

mia diletta luna. E pur mi giova la ricordanza, e il noverar l'etate del mio dolore. </p> <p class="bordo"> Oh come grato occorre nel tempo giovanil, quando ancor lungo la speme e breve ha la memoria il corso il rimembrar delle passate cose, ancor che triste, e che l'affanno duri! </p> </body> </html>

Output

Ogni paragrafo come evidenziato nell’output viene visualizzato circondato da un proprio bordo. Nella struttura è stato utilizzato l’attributo class per specificare un unico stile da applicare ai paragrafi con uno stesso identificatore per il class: in questo caso il termine bordo, associato all’elemento specifico p con l’aggiunta di un punto – .bordo {…}. Il tag <div> può essere utilizzato nella struttura per creare invece un unico bordo per tutti i paragrafi. Infatti l’elemento generico div può essere proprio utilizzati per “unire” diversi elementi di blocco livello affinchè siano considerati come un elemento unico.

Invece che definire bordi diversi e uno stile specifico per ogni paragrafo, sempre attraverso l’utilizzo del selettore class è possibile avere un unico bordo attorno a tutti i paragrafi, impostando delle regole di stile solo per l’elemento <div>, usato nell’esempio per unire in un solo insieme tutti i paragrafi. Esempio

<html> <head> <title> Divisione con l’elemento div</title> <style type=“text/css”> .divisore { padding-left: 50px; padding-right: 50px; border: solid 3px; width: 200px;} </style>

</head> <body> <div class="divisore"> <p> O graziosa luna, io mi rammento. Che, or volge l'anno, sovra questo colle io venia pien d'angoscia a rimirarti: E tu pendevi allor su quella selva. Siccome or fai, che tutta la rischiari </p> <p> Ma nebuloso e tremulo dal pianto che mi sorgea sul ciglio, alle mie luci il tuo volto apparia, che travagliosa era mia vita: ed Ă¨, nĂ¨ cangia stile. O mia diletta luna. E pur mi giova la ricordanza, e il noverar l'etate del mio dolore.</p> <p> Oh come grato occorre nel tempo giovanil, quando ancor lungo la speme e breve ha la memoria il corso il rimembrar delle passate cose, ancor che triste, e che l'affanno duri! </p> </div> </body> </html>

Output

L’elemento <div> può essere utilizzato allo stesso modo per raggruppare diversi elementi di blocco e non solamente gli elementi paragrafo <p>. Ad esempio è possibile mettere insieme diverse intestazioni e linee orizzontali all’interno di uno dei paragrafi indicati nella struttura precedente e il bordo impostato racchiuderà sempre gli elementi indicati. Esempio

<html> <head> <title> Elemento div - esempio 2</title>

<hr> <p> Oh come grato occorre nel tempo giovanil, quando ancor lungo la speme e breve ha la memoria il corso il rimembrar delle passate cose, ancor che triste, e che l'affanno duri! </p> </div> </body> </html>

Output

Utilizzi dellâ&#x20AC;&#x2122;elemento generico span Il tag <span>, al contrario del <div> viene utilizzato per raggruppare gli elementi in linea in un documento HTML e non gli elementi di blocco livello. Lâ&#x20AC;&#x2122;utilizzo del solo tag <span> non comporta alcuna modifica nella visualizzazione degli elementi che racchiude. Questo specifico elemento di marcatura fornisce tuttavia un ulteriore modo per cambiare lâ&#x20AC;&#x2122;aspetto di specifiche parti del documento HTML, senza dover intervenire direttamente nella marcatura.

Quando una parte di testo è racchiusa tra i tag <span> è possibile aggiungere degli elementi di stile direttamente al suo contenuto oppure manipolarlo attraverso programmi JavaScript. Come vedremo nelle lezioni dedicate ai fogli di stile CSS l’elemento generico span è molto utile qualora si desideri applicare facilmente solo ad una singola parte di testo uno stile specifico, come ad esempio nella struttura seguente: <html> <head><title>esempio utilizzo span</title> </title> <style type="text/css"> body {text-align: center; }

span {color: red; font-weight: bold; } </style> </head> <body> <h3>Esempio di utilizzo del tag span!</h3> <hr color="blue";> <p>Oggi il <span>sole</span> splende!</p> </body> </html>

Output

Oppure Ă¨ possibile applicare uno stile direttamente in linea nella marcatura HTML, come nellâ&#x20AC;&#x2122;esempio seguente:

<html> <head><title>secondo esempio di utilizzo del tag span</title> </title> <style type="text/css"> body {background-color: #00BFFF; text-align: center; } </style> </head> <body> <h3>Esempio di utilizzo del tag span!</h3> <hr color="blue";> <p>Oggi il <span style="color: yellow">sole</span> splende!</p> </body> </html>

Output

Un altro vantaggio dell’impiego dell’elemento span è quello di rendere alcuni dati presenti nella struttura HTML molto più facilmente “trovabili”. Nel seguente esempio, ogni numero di telefono presente nella lista viene identificato attraverso il valore “cell” dell’attributo class. <html> <head><title>esempio span e class</title> </title> <style type="text/css"> body {background-color: #FFEBCD; } ul {color: green; } .cell {color: red; }

</style> </head> <ul> <li>Giovanna: <span class="cell">320.1234567</span></li> <li>Elisa: <span class="cell">347.1234567</span></li> <li>Stefano: <span class="cell">349.1234567</span></li> <li>Daniele: <span class="cell">335.1234567</span></li> </ul> </body> </html> Output

Gli attributi HTML Gli elementi del linguaggio HTML possono avere degli attributi. Generalmente, stessi attributi possono essere associati a elementi diversi. Come abbiamo visto nellâ&#x20AC;&#x2122;unitĂ introduttiva e nel corso di questa stessa lezione, tali attributi (come ad esempio bgcolor, color, align, ecc.) specificano delle informazioni relative ad un elemento. Tali attributi vengono sempre specificati nel tag di apertura e sono sempre composti da un indicatore (es. bgcolor) e da un valore (es. colore blu): <body bgcolor="blue"> â&#x20AC;Ś </body>

La tabella seguente illustra quelli che sono gli attributi HTML di più largo utilizzo, utilizzati spesso in connessione alle regole di stile per modificare la visualizzazione finale di un documento. Attributo class

Valore

Descrizione

Nome di classe: <selettore Specifica un dato nome di class="nome scelto"> classe per un elemento di marcatura. Uno stesso nome “class” può essere utilizzato in connessione a più elementi di uno stesso tipo.

style

Identificatore di elemento Specifica un unico id per un solo elemento di <selettore id="nome id" marcatura Definizione di stile

Specifica uno stile in linea per un singolo elemento <selettore style="stile";> di marcatura

Ovviamente esistono molti altri attributi HTML. Tuttavia quegli attributi come bgcolor, align, color ecc., relativi a modifiche della visualizzazione finale di una struttura HTML, sono stati attualmente soppiantati attraverso un largo utilizzo degli stili (CSS).

Utilizzo degli attributi id e class Questi attributi vengono utilizzati come “identificatori” di diversi elementi della marcatura HTML. Dal momento che a tali attributi vanno associate delle parole scelte direttamente da chi realizza una struttura HTML, esistono alcune regole da seguire per una scelta corretta. In particolare i termini scelti come valori di class e id sono sempre case-sensitive e non devono contenere spaziature, underscore, sottolineature o elementi di punteggiatura interni. E’ possibile utilizzare insieme lettere e numeri ma la parola scelta dovrà sempre iniziare con una lettera dell’alfabeto.

Abbiamo già visto negli esempi precedenti l’utilizzo dell’attributo class per applicare uno stesso stile a quei paragrafi indicati da uno stesso class="valore". Vediamo ora esempi specifici, relativi proprio all’utilizzo degli attributi di identificazione e classificazione class e id. L’esempio seguente utilizza il codice ISBN di un libro come elemento identificativo principale all’interno di una lista. Mettendo tali elementi all’interno di un <div> andiamo a specificare la loro relazione concettuale.

Due libri presenti in lista non possono condividere lo stesso valore id dal momento che un singolo valore id puĂ˛ essere utilizzato una volta sola allâ&#x20AC;&#x2122;interno di uno stesso documento. <html> <head><title>Esempio div e class </title> <style type="text/css"> body {background-color: #FF1493; } </style> </head> <body> <div id="ISBN0321127307"> // questo primo id Ă¨ diverso dal secondo! <img src="immagine.formato" />

<p><cite>Guida allâ&#x20AC;&#x2122;arte giapponese</cite>, Ito Mikura</p> <p>Dal Medioevo giapponese allâ&#x20AC;&#x2122;arte contemporanea</p> </div> <div id="ISBN0881792063"> // questo secondo id Ă¨ diverso dal primo! <img src="immagine.formato" /> <p><cite>Sushi & cucina giapponese</cite>, Haruka Sano</p> <p>Cucinare il pesce secondo la tradizione giapponese</p> </div> </body> </html>

Output

Durante la progettazione della struttura delle pagine web l’attributo id viene spesso utilizzato per identificare e quindi distinguere le varie sezioni di una pagina. In questo modo comparirà sempre una sola “intestazione” all’interno della struttura.

Es. <div id="intestazione"> (Titolo di pagina e barra di navigazione principale) </div> <div id="main"> (Contenuti principali) </div> <div id="collegamenti"> (lista di collegamenti) </div> <div id="footer"> (Informazioni di copyright) </div>

Al contrario dell’attributo id, diversi elementi possono condividere allo stesso tempo uno stesso valore di class. Unendo alcuni elementi sotto una stessa classe è possibile applicare uno stesso stile in una sola volta a tutti gli elementi. Prendiamo in considerazione la struttura di prima, utilizzando stavolta anche l’attributo class. In particolare nel seguente esempio sono stati aggiunti degli attributi class ad alcuni paragrafi <p> per classificarli come “descrizione”. <html> <head><title>esempio class</title> <div id="ISBN0321127307" class="lista">

<p><cite>Il manuale completo dell’HTML</cite>, James White</p> <p class="descrizione">L’ultima guida con esempi al linguaggio HTML</p> </div> <div id="ISBN0881792063" class="lista"> <p><cite>CSS 2.0: Guida completa</cite>, Robert Brown</p> <p class="descrizione">Guida agli ultimi stili per il web</p> </div> </body> </html>

Inoltre gli elementi <div> presenti sono stati classificati anche come "lista", attraverso l’aggiunta dell’attributo class. Pertanto uno stesso elemento può avere sia un identificatore id che un identificatore class.

Infine è possibile far si che gli elementi HTML scelti appartengano a classi multiple. Nell’esempio seguente ogni <div> è stato classificato, non solo attraverso un id indicante il codice ISBN identificativo, ma anche come "libro", attraverso l’attributo class, affinchè risulti separato da categorie diverse come ad es. “cd” e “dvd”, elencate magari altrove nel documento di base. Inoltre entrambi gli attributi class sono stati utilizzati per applicare stili diversi proprio alla “descrizione” e alla nomenclatura dei libri indicati.

<html> <head><title>Esempio class multiple e id</title> <style type="text/css"> body { background-color: #FFF5EE; text-align: center;} .descrizione { border: solid 3px; color: red; } .libro {color: green; } </style> </head> <body> <div id="ISBN0321127307" class="libro"> <p><cite>Cuccioli</cite>, Helen White</p> <p class="descrizione">Come scegliere e crescere i propri amici a Quattro zampe</p> </div> <div id="ISBN0881792063" class="libro"> <p><cite>Manhattan</cite>, Randall Flag</p>

<p class="descrizione">Guida pratica per la scoperta di New York</p> </div> </body> </html> Output

Attraverso gli esempi riportati abbiamo visto come gli attributi class e id possono essere utilizzati soprattutto insieme agli elementi div e span per fornire significati e strutture particolari ai documenti HTML. Come applicare regole di stile attraverso gli identificatori id e class Come vedremo in maniera piĂš dettagliata nel modulo dedicato alla gestione degli stili, gli identificatori id e class, come abbiamo visto in alcuni degli esempi precedenti, sono molto utili per velocizzare

l’applicazione delle regole di stile e per distinguere in maniera specifica singoli elementi di marcatura. E’ infatti possibile richiamare, sia nella sezione head del file HTML sia in un foglio di stile separato .css, i valori attribuiti agli identificatori class e id. Nel seguente esempio all’elemento qualificato attraverso l’id "nome" viene applicata una regola di stile affinchè questo venga visualizzato in rosso. L’id viene richiamato utilizzando il simbolo di “cancelletto” # prima del valore dell’id: #nome {stile;}

<html> <head><title>Esempio stili id e class</title> <style type="text/css"> #nome {color: red; } </style> </head> <body> <p><b>Stile e selettore id</b></p> <div id="nome">Clara</div> <p>nata a Cagliari</p> <p>il 15/10/1970</p> </body> </html>

Output

Nellâ&#x20AC;&#x2122;esempio successivo vediamo invece come applicare uno stesso stile agli elementi classificati con uno stesso valore class. Nella sezione head del documento (ma anche in un foglio di stile a parte) il selettore della regola (il valore dellâ&#x20AC;&#x2122;indentificatore class) verrĂ richiamato nel modo seguente: .valoreclass {stile;}

<html> <head><title>Stili e class</title> <style type="text/css"> body {background-color: #FAEBD7; color: #FF7F50; text-align: center; } .nome {color: red; } </style> </head> <body> <p><b>Stili e identificatori class</b></p> <div class="nome">Camilla</div> <p>nata a Roma</p> <p>il 16/05/1985</p> <div class="nome">Chiara</div> <p>nata a Bari</p> <p>il 22/11/1968</p>

<div class="nome">Cristina</div> <p>nata a Firenze</p> <p>il 06/06/1981</p> </body> </html>

Output

Lo stessa regola avrebbe potuto essere applicata al class “bordo” nel seguente modo: p.bordo {…}. Tuttavia in quest’ultimo caso lo stile sarebbe stato applicato solamente agli elementi p, indicati dal class “bordo”. Ad esempio ad un elemento <em class="bordo"> la regola di stile non sarebbe stata applicata. Al contrario richiamando il valore di class con il solo “punto”, lo stile funzionerà con tutti gli elementi identificati dalla stessa class.

Gli attributi id e class possono essere utilizzati quasi in tutti gli elementi del linguaggio HTML, non solo in associazione ai tag div e span, come abbiamo visto in alcuni esempi della lezione. Le uniche eccezione di associazione sono le seguenti: head, html, meta, script, style e title, tutti elementi che non possono essere classificati e/o identificati dagli attributi id e class. In XHTML tuttavia lâ&#x20AC;&#x2122;attributo id Ă¨ stato reso associabile anche a questi elementi.

Caratteri particolari Alcuni caratteri di uso comune come ad esempio il simbolo di copyright ©, non fanno parte del gruppo standard di caratteri ASCII che contiene solo lettere, numeri e solo pochi simboli di base. Altri caratteri come ad esempio i segni di minore < e maggiore > sono comunque disponibili. Tuttavia quando questi vengono utilizzati all’interno di un documento (X)HTML vengono poi automaticamente interpretati come simboli indicanti i tag. Pertanto, volendo inserire nei contenuti testuali dei documenti HTML alcuni simboli particolari, è necessario usare al loro posto una codifica specifica affinchè vengano letti correttamente dal browser.

Esistono due modalitĂ con cui far riferimento ad uno specifico carattere: attraverso un valore numerico assegnato (entitĂ numerica) oppure utilizzando un nomenclatura predefinita e abbreviata per quell dato carattere (entitĂ di nome). Entrambe le codifiche di riferimento iniziano sempre con una "&" e terminano con ";". Utilizzando tali codifiche i caratteri â&#x20AC;&#x153;specialiâ&#x20AC;? inseriti saranno interpretati correttamente, con il loro valore simbolico. Vediamo ad esempio come utilizzare tali codifiche per inserire i simboli < e > senza che questi vengano considerati come tag HTML.

<p>5>2<1</p> <p>5&gt;2&lt;1</p> oppure con codifica numerica: <p>5&#62;2&#60;1</p> Eâ&#x20AC;&#x2122; possibile visualizzare una lista completa di tali caratteri speciali attraverso il seguente link: www.webstandards.org/learn/reference/charts/ entities/.

FINE LEZIONE