Agencement HTML

Les sites Web affichent souvent le contenu en colonnes multiples (comme les magazines et les journaux).

Mise en page HTML en utilisant l'élément <div>

Remarque :L'élément <div> est souvent utilisé comme outil de mise en page, car il peut être positionné facilement avec CSS.

Cet exemple utilise quatre éléments <div> pour créer une mise en page en colonnes multiples :

Exemple

<body>
<div id="header">
<h1>Galerie de la ville</h1>
</div>
<div id="nav">
Londres<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>Londres</h1>
<p>
Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,
avec une aire métropolitaine de plus de 13 millions d'habitants.
</p>
<p>
Située sur la rivière la Tamise, Londres a été un grand établissement pendant deux millénaires,
Son histoire remonte à sa fondation par les Romains, qui l'ont appelée Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Essayer personnellement

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>

Conception de site web en utilisant HTML5

Les éléments sémantiques nouveaux de HTML5 définissent différentes parties des pages web :

Éléments sémantiques HTML5

header Définir un en-tête pour un document ou une section
nav Définir un conteneur pour des liens de navigation
section Définir une section dans un document
article Définir un article autonome et inclusif
aside Définir du contenu en dehors du contenu principal (comme une barre latérale)
footer Définir le pied de page d'un document ou d'une section
details Définir des détails supplémentaires
résumé Définir le titre de l'élément details

Cet exemple utilise <header>, <nav>, <section> et <footer> pour créer une mise en page en colonnes multiples :

Exemple

<body>
<header>
<h1>Galerie de la ville</h1>
</header>
<nav>
Londres<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>Londres</h1>
<p>
Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni,
avec une aire métropolitaine de plus de 13 millions d'habitants.
</p>
<p>
Située sur la rivière la Tamise, Londres a été un grand établissement pendant deux millénaires,
Son histoire remonte à sa fondation par les Romains, qui l'ont appelée Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Essayer personnellement

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; 
}

Mise en page HTML en utilisant des tableaux

Remarque :L'élément <table> n'a pas été conçu comme outil de mise en page.

L'élément <table> est utilisé pour afficher des données tabulaires.

L'utilisation de l'élément <table> peut obtenir un effet de mise en page, car il est possible de définir le style de l'élément table via CSS :

Exemple

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    L'élément table n'a pas été conçu pour être un outil de mise en page.
  </td>
</tr>
</table>
</body>

Essayer personnellement

CSS

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