Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata").
La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano.
Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:
- larghezza
- altezza
- distanza dall’alto
- distanza da sinistra
- colore o immagine di sfondo
- colore, tipo e grandezza dei bordi
- distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)
Per “livello” (o “layer”) in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina.
La sintassi dei CSS è molto diversa da quella dell’HTML solito.
Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi.
Nella <head>:
<style type="text/css">
#logo {
position:absolute;
left:200;
top:50;
width:600px;
height:80px;
background-image: url(sfondo.gif);
border: 1px solid #000000;
}
</style>
nel <body>:
<div id="logo">
<img src="logo.gif" alt="HTML.it" title="HTML.it" width="224" height="69">
<img src="logo1.gif" alt="HTML.it" title="HTML.it" width="59" height="70">
</div>
L’esempio completo si trova a questo indirizzo.
Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato).
Per gli approfondimenti vi rimandiamo alla guida sui fogli di stile di HTML.it che approfondisce questo argomento.
Ultimi articoli HTML/XHTML
Inserire video nelle pagine Web con HTML5Codec, compatibilità dei browser, tools, codice e best practices per... |
LungoJS: semantica HTML5 per il mobileRealizzare layout per dispositivi mobili tenendo conto della... |
Web storage, i cookies secondo HTML5Come rendere persistenti i dati con HTML5 |
HTML5, section o article? ...E il div?Cerchiamo di fare chiarezza sull'uso di questi due nuovi elementi e... |
HTML5, la validazione del codiceGli strumenti per verificare l'aderenza agli standard di pagine e... |
Guide HTML/XHTML
Guida HTML5Una guida per conoscere e applicare da subito le novità introdotte... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |