Layout HTML

I siti web spesso mostrano i contenuti in colonne multiple (come riviste e giornali).

Layout HTML utilizzando l'elemento <div>

Nota:<div> Element è spesso utilizzato come strumento di layout, poiché può essere facilmente posizionato tramite CSS.

Questo esempio utilizza quattro elementi <div> per creare una layout a più colonne:

Esempio

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Londra<br>
Parigi<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
Londra è la capitale dell'Inghilterra. È la città più popolosa del Regno Unito,
con una area metropolitana che supera i 13 milioni di abitanti.
</p>
<p>
Situata sul fiume Tamigi, Londra è stata un insediamento importante per due millenni,
La sua storia risale alla fondazione da parte dei Romani, che la chiamarono Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Prova da solo

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Layout del sito web utilizzando HTML5

Gli elementi semantici nuovi forniti da HTML5 definiscono le diverse parti delle pagine web:

Elementi semantici HTML5

header Definire l'intestazione di un documento o di una sezione
nav Definire il contenitore dei link di navigazione
section Definire una sezione del documento
article Definire un articolo autonomo e inclusivo
aside Definire il contenuto al di fuori del contenuto (ad esempio, una barra laterale)
footer Definire il piè di pagina di un documento o di una sezione
details Definire dettagli aggiuntivi
summary Definire il titolo dell'elemento details

Questo esempio utilizza <header>, <nav>, <section> e <footer> per creare una layout a più colonne:

Esempio

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
Londra<br>
Parigi<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
Londra è la capitale dell'Inghilterra. È la città più popolosa del Regno Unito,
con una area metropolitana che supera i 13 milioni di abitanti.
</p>
<p>
Situata sul fiume Tamigi, Londra è stata un insediamento importante per due millenni,
La sua storia risale alla fondazione da parte dei Romani, che la chiamarono Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Prova da solo

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Layout HTML utilizzando tabelle

Nota:L'elemento <table> non è stato progettato come strumento di layout.

L'elemento <table> viene utilizzato per visualizzare dati tabulari.

È possibile ottenere un effetto di layout utilizzando l'elemento <table>, poiché è possibile impostare lo stile dell'elemento tabella tramite CSS:

Esempio

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    L'elemento tabella non è stato progettato per essere uno strumento di layout.
  </td>
</tr>
</table>
</body>

Prova da solo

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>