Vous trouverez ci-dessous le code de la page HTML, le contenu est celui que vous êtes en train de lire, mais nous aurions très bien pu utiliser un faux texte. Malgré l'absence de feuille de styles, la page est déjà lisible ! Les liens fonctionnent, les titres sont mis en évidence, les listes structurées, etc.
En effet, le navigateur applique une feuille de style basique par défaut, ce qui vous permet d'avoir un début de mise en page propre et lisible.
La page est divisée horizontalement en trois parties distinctes :
-
l'en-tête (identifié par "
header"), destiné à accueillir la bannière et éventuellement une devise ou slogan. -
la partie centrale ("
center", bien vu !) contiendra les deux colonnes qui nous intéressent. Elle comprend donc elle-même 2 zones distinctes (les divisions sidebar et content). -
le pied de page ("
footer") comprend diverses informations que l'on souhaite afficher discrètement sur toutes les pages, en général des mentions de copyright ou les coordonnées & références de la société ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>
</head>
<body>
<div id="header">
<h1>2cols4u</h1>
</div>
<div id="center">
<div id="content">
<h2>Etape 1 : le code XHTML</h2>
<p>Vous trouverez ci-dessous le code de la page HTML que vous êtes en train de lire. Et oui, malgré l'absence de feuille de style, la page est déjà lisible ! Les liens fonctionnent, les titres sont mis en évidence, les listes structurées, etc.</p>
<p>La page est divisée horizontalement en trois parties distinctes :</p>
<ol>
<li>l'en-tête (identifié par "<em>header</em>"), destiné à accueillir la bannière et éventuellement une devise ou slogan.</li>
<li>la partie centrale ("<em>center</em>", bien vu !) contiendra les deux colonnes qui nous intéressent. Elle comprend donc elle-même 2 zones distinctes (les divisions <em>sidebar</em> et <em>content</em>).</li>
<li>le pied de page ("<em>footer</em>") comprend diverses informations que l'on souhaite afficher discrètement sur toutes les pages, en général des mentions de copyright ou les coordonnées & références de la société ...</li>
</ol>
</div><!-- #content -->
<div id="sidebar">
<h2>Navigation</h2>
<ul id="menu">
<li><a href="#" title="Introduction">Introduction</a></li>
<li><a href="#" title="Première étape : le code (X)HTML">Etape 1</a></li>
<li><a href="#" title="Deuxième étape : le positionnement">Etape 2</a></li>
<li><a href="#" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>
<li><a href="#" title="Quatrième étape : le menu">Etape 4</a></li>
<li><a href="#" title="Cinquième étape : titres & liens">Etape 5</a></li>
<li><a href="#" title="Sixième étape : ajustements pour IE">Etape 6</a></li>
</ul>
<h2>Brèves</h2>
<p>Pourquoi j'aime les standards du W3C ? Pour <a href="http://openweb.eu.org/articles/pourquoi_standards/" title="Openweb : Pourquoi les standards du W3C">ça</a></p>
<h2>Liens</h2>
<ul>
<li><a href="http://www.alsacreations.com" title="AlsacréationS apprendre XHTML, les CSS et les standards W3C de la conception Web">Alsacréations</a></li>
</ul>
</div> <!-- #sidebar -->
</div><!-- #center -->
<div id="footer">
<p>Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.</p>
</div><!-- #footer -->
</body>
</html>
Vous remarquerez la présence de commentaires HTML à côté des balises fermantes (div notamment). Ils servent à préciser quel section nous venons de fermer, c'est une bonne pratique lorsque les conteneurs sont très haut, c'est un bon moyen de s'y retrouver dans son propre code.
N'oublier pas la prochaine étape qui concerne la mise en page des éléments principaux de ce document HTML !