HTML - Mises en page
Une mise en page Web est très importante pour donner une meilleure apparence à votre site Web. Il faut beaucoup de temps pour concevoir la mise en page d'un site Web avec une belle apparence.
De nos jours, tous les sites Web modernes utilisent un cadre basé sur CSS et JavaScript pour créer des sites Web réactifs et dynamiques, mais vous pouvez créer une bonne mise en page en utilisant de simples tableaux HTML ou des balises de division en combinaison avec d'autres balises de mise en forme. Ce chapitre vous donnera quelques exemples sur la façon de créer une mise en page simple mais fonctionnelle pour votre page Web en utilisant du HTML pur et ses attributs.
Mise en page HTML - Utilisation de tableaux
Le moyen le plus simple et le plus populaire de créer des mises en page consiste à utiliser la balise HTML <table>. Ces tableaux sont organisés en colonnes et en lignes, vous pouvez donc utiliser ces lignes et colonnes comme vous le souhaitez.
Exemple
Par exemple, l'exemple de mise en page HTML suivant est obtenu à l'aide d'un tableau avec 3 lignes et 2 colonnes, mais la colonne d'en-tête et de pied de page couvre les deux colonnes à l'aide de l'attribut colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Disposition à plusieurs colonnes - Utilisation de tableaux
Vous pouvez concevoir votre page Web pour mettre votre contenu Web sur plusieurs pages. Vous pouvez garder votre contenu dans la colonne du milieu et vous pouvez utiliser la colonne de gauche pour utiliser le menu et la colonne de droite peut être utilisée pour mettre de la publicité ou d'autres choses. Cette mise en page sera très similaire à celle que nous avons sur notre site Web tutorialspoint.com.
Exemple
Voici un exemple pour créer une disposition à trois colonnes -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Cela produira le résultat suivant -
Dispositions HTML - Utilisation de DIV, SPAN
L'élément <div> est un élément de niveau bloc utilisé pour regrouper des éléments HTML. Alors que la balise <div> est un élément de niveau bloc, l'élément HTML <span> est utilisé pour regrouper des éléments à un niveau en ligne.
Bien que nous puissions obtenir de jolies mises en page avec des tableaux HTML, les tableaux n'étaient pas vraiment conçus comme un outil de mise en page. Les tableaux sont plus adaptés à la présentation de données tabulaires.
Note - Cet exemple utilise la feuille de style en cascade (CSS), donc avant de comprendre cet exemple, vous devez avoir une meilleure compréhension du fonctionnement de CSS.
Exemple
Ici, nous allons essayer d'obtenir le même résultat en utilisant la balise <div> avec CSS, tout ce que vous avez obtenu en utilisant la balise <table> dans l'exemple précédent.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Cela produira le résultat suivant -
Vous pouvez créer une meilleure mise en page en utilisant DIV, SPAN avec CSS. Pour plus d'informations sur CSS, veuillez consulter le didacticiel CSS.