Programmazione Web » Css » Separare la grafica dai contenuti
Separare la grafica dai contenuti
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1386 volte
In alcune lezioni precedenti abbiamo già parlato dei Fogli di Stile e della loro importanza. Con questa lezione cercheremo di spiegarne meglio il loro funzionamento, alleggerendo la spiegazione con alcuni esempi.
Nel dettaglio vedremo come sia possibile “snellire” il codice Html separando tutto ciò che riguarda l’aspetto grafico dai contenuti veri e propri del sito.
Sicuramente avrete visto in altri siti che quando avete già visitato un link, o quando vi posizionate con il mouse su di esso, questo cambia colore.
Questo effetto è possibile con due soluzioni. Si potrebbe usare il solo codice Html, o si potrebbe pensare di usare i CSS per definire le regole di ogni link. Quest’ultima soluzione risulta la più ottimale e quindi la più utilizzata. In ogni caso vi presento entrambe le soluzioni.
Per realizzare tale effetto in Html basta aprire un qualsiasi notepad (anche il blocco note di Windows è sufficiente) ed inserire queste righe di codice:
<html>
<head>
<title>Link colorati</title>
</head>
<body text="#000000" link="#FF0000" vlink="#008080">
<p>Link: <a href="#">Link 1</a> | <a href="#">Link 2</a> </p>
</body>
</html>
Come potete notare all’interno del body troviamo alcuni tag ovvero text, link e vlink. In sostanza grazie a questi tre attributi definiamo che il testo deve avere un determinato colore (in questo caso il nero), i link un altro e che i link visitati (vlink) ne debbano avere un altro, in modo da poter riuscire a distinguere quali sono i link che sono stati già visitati.
Questa soluzione, benché semplice e funzionante, non risulta essere quella ottimale. Stando a quanto detto prima il nostro obiettivo è quello di separare la grafica dai contenuti quindi i nostri attributi text, link e vlink andrebbero definiti diversamente.
Pagine: 1 | 2 |
Aggiungi questo tutorial ai preferiti
