Agencement HTML
- Page précédente En-tête HTML
- Page suivante Design responsive 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>
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>
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>
CSS
<style> table.lamp { width:100%; border:1px solid #d4d4d4; } table.lamp th, td { padding:10px; } table.lamp td { width:40px; } </style>
- Page précédente En-tête HTML
- Page suivante Design responsive HTML