Sino ad ora abbiamo definito la struttura del sito e ne abbiamo realizzato il mockup; abbiamo avuto l’accortezza di scegliere il layout, di posizionare correttamente il logo, di combinare i colori e selezionare i caratteri tipografici più adatti. Arrivati a questo punto, quindi, è necessario aprire il nostro editor preferito ed iniziare a scrivere un po’ di codice.
Abbiamo già avuto modo di precisare che questa non è una guida di HTML ne tantomeno di CSS, quindi daremo per scontato che il lettore abbia già le necessarie competenze per capire i codici che verranno proposti d’ora in avanti all’interno di questa e delle successive lezioni della nostra guida.
Quello che vi proporremo in questa lezione è un semplice layout table-less (cioè realizzato senza l’ausilio delle tabelle HTML, tecnica obsoleta passata in disuso da molti anni). Il nostro layout, da un punto di vista strutturale, sarà pertanto composto da un insieme di tag opportunamente stilizzati che andranno a costituire i contenitori dei vari elementi della nostra pagina.
Dovendo scegliere un tipo di layout (che ci accompagnerà per il resto delle lezioni della guida) ho optato per il design più diffuso, cioè il classico layout a due colonne con sidebar sulla destra e larghezza fissa.
Nello specifico il nostro layout di esempio sarà composto da:
- header
- navbar
- area contenuti (colonna di sinistra)
- sidebar (colonna di destra)
- footer
La struttura HTML
Un esempio di template table-less in HTML4
La prima struttura HTML che vi presento sarà la classica composizione di tag DIV ai quali vengono assegnati degli ID o delle classi che ne definiscono il ruolo e, soprattutto, l’aspetto (mediante i CSS, ovviamente). Il tag DIV di HTML, infatti, è il contenitore per eccellenza e la sua valenza generica lo rende perfetto per la composizione di layout. Segue un’immagine esplicativa:
Questo il markup HTML del nostro layout:
<!DOCTYPE html>
<html lang="it">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="stile.css" media="all"/>
</head>
<body>
<!-- APRO IL CONTENITORE -->
<div id="container">
<!-- HEADER -->
<div id="header"></div>
<!-- NAVBAR -->
<div id="nav"></div>
<!-- AREA PRINCIPALE -->
<div id="main"></div>
<!-- SIDEBAR -->
<div id="sidebar"></div>
<!-- FOOTER -->
<div id="footer"></div>
<!-- CHIUDO IL CONTENITORE -->
</div>
</body>
</html>Un esempio di template table-less in HTML5
Avremmo potuto raggiungere lo stesso risultato anche utilizzando i nuovi tag semantici di HTML5. Si veda di seguito l’immagine di una struttura analoga ma realizzata col nuovo markup:
Di seguito il codice HTML5 del nostro template:
<!DOCTYPE html>
<html lang="it">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="stile.css" media="all"/>
</head>
<body>
<!-- APRO IL CONTENITORE -->
<div id="container">
<!-- HEADER -->
<header></header>
<!-- NAVBAR -->
<nav></nav>
<!-- AREA PRINCIPALE -->
<div id="main"></div>
<!-- SIDEBAR -->
<aside></aside>
<!-- FOOTER -->
<footer></footer>
<!-- CHIUDO IL CONTENITORE -->
</div>
</body>
</html>Da un punto di vista prettamente visivo le due strutture sono identiche (l’aspetto è determinato dai CSS e non dai tag utilizzati), ma da un punto di vista semantico la differenza è notevole. Dovendo realizzare un progetto ex-novo il sugerimento, ovviamente, è di preferire quest’ultimo tipo di markup.
Il foglio di stile CSS
Questo il CSS di base del nostro template in HTML5 (la versione per HTML4 è facilmente ricavabile modificando i selettori):
#container {
width: 960px;
margin: 0 auto;
}
header { }
nav { }
#main {
float: left;
width: 620px;
}
aside {
float: right;
width: 300px;
}
footer {
clear: both;
}Alcune stilizzazioni sono state volutamente omesse in quanto questo CSS si arricchierà gradualmente nelle lezioni successive.
Sino ad ora abbiamo inserito advvero poche regole nel nostro CSS, vediamole una ad una:
- per prima cosa abbiamo assegnato al contenitore (DIV con ID "container") una larghezza fissa di 960 pixel e dei margini laterali automatici in modo da centrarlo nel corpo della pagina;
- abbiamo definito come flottanti le due colonne (cioè il DIV con ID "main" ed il tag ASIDE) assegnando a ciascuna delle dimensioni fisse in larghezza;
- per finire abbiamo assegnato la proprietà clear al tag FOOTER per "dare consistenza" al blocco superiore costituito dalle due colonne flottanti ed interrompere, quindi, il galleggiamento degli elementi.
