Chiamaci Web Design Roma - Via spinoza 86,
Chiamaci
00137 Roma - Tel. 06 86891320
Web Design Roma Home
ELABORARE.COM
CATERING MATRIMONIO
ADRCENTER.IT
MONDOADR.IT
ASIR.IT
WSRMAG.IT
SPECIALMAG.IT
ARBAKA.COM
CATENELLA58.IT
EVENTISPETTACOLARI.IT
STARSITALIA.IT
VINICASTELLIROMANI.IT
FOTOGALLERY
AUTOMOTOCLUBROMA.ORG
EMCA4.C0M
GIANFRANCODEMEO.IT
LUCIOVECCHIOTTI.COM
EIDOSTUDIO.COM
ALLIANCECULTURELLE.COM
IBUSINESSPROMOTER.IT
PINOLEONE.COM
NEGOTIATE.IT
COMPUTER-ROMA.IT
PERCORSIFORMATIVI.IT

Separare il layout dal contenuto

Scritto da Federico Albani   

L'HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio <p>qui il mio testo</p>) e i tag che indicano uno stile o una colorazione del contenuto (ad esempio <font color="red">, che colora il testo di rosso) si trovavano mischiati allo stesso livello.

Tuttavia vari anni di Web hanno fatto nascere l'esigenza di separare il contenuto dalla presentazione del contenuto medesimo.

Se per esempio io avessi tutti i titoli del mio documento in rosso e in grassetto, e a un certo punto decidessi di trasformarli in verde e in corsivo, con l'HTML classico (cioè l'HTML 3.2) dovrei andare a modificarmi a mano ogni tag contente le indicazioni della formattazione.

Quindi:

<p>
  <font color="red">
    <b>titolo 1</b>
  </font>
</p>

diventerebbe:

<p>
  <font color="green">
    <i>titolo 1</i>
  </font>
</p>

Ma se questa operazione non comporta difficoltà su una singola pagina, diventa insostenibile (o quantomeno difficoltosa, tanto che converrebbe scrivere un programma che effettuasse la conversione al posto nostro) su website molto grandi, a volte di centinaia di pagine.

Proprio per questo - come dicevamo - da un certo punto in poi è nata l'esigenza di separare il contenuto (la scritta "titolo 1"), dalla formattazione (il colore rosso e il grassetto). Per farlo è necessario utilizzare i fogli di stile, e il contenuto della pagina vista pocanzi diventerebbe qualcosa di questo genere:

<p class="formattaTitoli">
  titolo 1
</p>

la colorazione del testo verrebbe affidata alla classe "formattaTitoli", descritta altrove del documento, o su un file separato. Dunque basta editare la classe "formattaTitoli" per cambiare l'aspetto anche di centinaia di pagine.

È importante sapere da subito che alcune cose che stiamo imparando hanno la possibilità di essere espresse con una soluzione più elegante, e che consente al webmaster di gestire più agevolmente i propri siti. Alcuni elementi descritti nella guida corrente sono addirittura "deprecati"dal W3C, cioè destinati a cadere in disuso (come il tag <font>): man mano che li incontreremo (perché allo stato attuale del Web è ancora importante conoscerli) vi avvertirò che esistono altre soluzioni applicabili tramite i fogli di stile. Tuttavia in questo contesto non esamineremo i fogli di stile (detti anche CSS: "Cascading Style Sheets"), perché è un argomento che presuppone già la conoscenza del linguaggio HTML. Per questo vi rimandiamo all'apposita guida ai CSS di WebDesignRoma.com, che se vorrete potrete consultare dopo aver letto la guida all'HTML.

Hits: 227
Commenti (0)Add Comment

Scrivi commento
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
< Prec.   Pros. >