| << | >> | Indice |
|---|
Come abbiamo accennato nel discorsetto di presentazione dell'HTML, in questo linguaggio, se voglio che un pezzo di testo abbia una certa apparenza, devo includerlo all'interno di un tag (comando) che dica al browser come mostrare all'utente il testo in questione. Ad esempio, possiamo scrivere:
NOME
Per produrre questa scritta rossa abbiamo utilizzato il seguente pezzo di codice:
<P>
<font face="helvetica" size="4px" color="#FF0000">
<strong>
NOME
</strong>
</font>
</p>
Il tag <p> sta per paragraph, abbiamo quindi incluso la nostra scritta all'interno di un paragrafo e per specificare font, colore e dimensioni abbiamo utilizzato il tag <Font> specificando al suo interno i relativi attributi; infine, per fare la scritta in grassetto, abbiamo utilizzato il tag <Strong>.
Questo modo di indicare le caratteristiche degli oggetti (pezzi di testo, immagini, etc.) utilizzando tag come <Font> (oppure specificando, all'interno di un tag, attributi seguendo la sintassi dell'esempio proposto) è ormai deprecato, e le specifiche delle ultime versioni dell'HTML raccomandano di utilizzare l'attributo Style o di fare uso degli Style Sheets.
Il seguente esempio mostra una scritta uguale alla precedente (potrebbe in effetti apparire diversa per i motivi che spiegheremo nel prossimo capitolo), ma ottenuta con un diverso codice che è mostrato a seguito.
NOME
<p style="color:#ff0000;
font: small Helvetica;
font-weight: bold;
font-size: 0.8em">
NOME
</p>
In questo caso, all'interno del tag <p> abbiamo inseirto l'attributo style all'interno del quale abbiamo specificato tutte le caratteristiche che volevamo che il testo avesse all'interno del paragrafo. Sostanzialmente abbiamo ridotto il numero dei tag utilizzati, ma la cosa più interessante è che esiste il modo di stabilire una volta per tutte, all'interno di un documento, che faccia deve avere, ad esempio, il testo racchiuso in un particolare tag. Questo si può fare introducendo il tag <style> all'interno della testa del documento, ovvero all'interno del tag <head>. Per produrre questo documento ho utilizzato proprio questo metodo (potete visualizzare il codice html scegliendo l'apposita voce dei menù offertivi dal vostro browser), l'HEAD di questo documento appare più o meno così:
<head>
<style>
p.mia {text-align:justify;
color:#000000;
font: small Times;
font-size: 1em;
margin-right:1em
}
p.prova {background: #ffffff;
color:#ff0000;
font: small Helvetica;
font-weight: bold;
font-size: 1em
}
</style>
</head>
A questo punto se voglio un paragrafo scritto in questo modo, basta che aggiungo l'attributo class="prova" al tag <p>, come ho fatto per questo particolare paragrafo cioè devo scrivere:
<P class="prova">
... testo del paragrafo ....
</P>
Si può notare come all'interno della definizione della classe prova ci sia anche lo sfondo: con i fogli di stile è possibile definire lo sfondo di ciascun pezzo del documento.
Per il resto del capitolo ho utilizzato la classe "mia", che come vedete produce testo giustificato, a differenza della classe "prova".
Questo modo di specificare gli attributi riduce notevolmente le dimensioni del file, in quanto per ogni "classe" (o tipo) di testo, basta definire gli attributi una sola volta, all'inizio del file, mentre con il vecchio metodo, bisognava rispecificare gli attributi di una classe di testo ogni volta che questa si presentava nel file. Chiaramente, oltre a risparmiare sulla grandezza del file (che incide sulla velocita necessaria all'utente per accedere al documento), in questo modo produciamo anche un file sorgente notevolmente più leggibile, e quindi più facilmente modificabile in futuro. Infine, se un giorno decido che nel mio esempio i paragrafi della classe "mia" non devono più essere scritti con il font Times, ma voglio il Font Helvetica, basta che modifico l'indicazione del font nella definizione della classe "mia", ed il cambiamento si ripercuoterà magicamente su tutto il testo. Con il vecchio metodo avrei dovuto cambiare a mano l'attributo font di ogni istanza di tale classe. Infine osserviamo che se avessi scritto:
<style>
p {text-align:justify;
color:#000000;
font: small Times;
font-size: 1em;
margin-right:1em
}
p.prova {background: #ffffff;
color:#ff0000;
font: small Helvetica;
font-weight: bold;
font-size: 1em
}
</style>
avrei avuto che la prima definizione si sarebbe ripercossa su tutti i paragrafi contrassegnati dal tag <P> senza l'attributo classe, mentre nel caso di scritture del tipo <p class="prova"> avrei comunque ottenuto l'orrenda scritta rossa presentata precedentemente.
Tutto quanto abbiamo detto sulla semplificazione della gestione di un documento con i metodi introdotti, può essere esteso alla gestione di un intero sito, ovvero di un gruppo di documenti. Per fare questo basta raccogliere tutte le definizioni delle classe in un unico file (con estenzione .css), lo style sheet ed aggiungere la seguente riga (invece di quelle mostrate prima) al tag style:
<style>
<link href="file.css" rel="stylesheet" type="text/css">
</style>
In questo modo si ottengono per lo meno i seguenti effetti positivi:
Per concludere questo paragrafo di introduzione agli style sheets, se volete saperne di più vi rimando ai seguenti indirizzi:
Nel prossimo capitolo affronteremo la questione della fruibilità delkle pagine.
| << | >> | Indice |
|---|