Etape 1 : le code XHTML

Vous trouverez ci-dessous le code de la page HTML que vous êtes en train de lire. Eh 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.

La page est divisée horizontalement en trois parties distinctes :

  1. l'en-tête (identifié par "header"), destiné à accueillir la bannière et éventuellement une devise ou slogan.
  2. 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).
  3. 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="global">
			<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>
				<div id="sidebar">
					<h3>Navigation</h3>
					<ul id="menu">
						<li><a href="./" title="Introduction">Introduction</a></li>
						<li><a href="etape1.html" title="Première étape : le code (X)HTML">Etape 1</a></li>
						<li><a href="etape2.html" title="Deuxième étape : le positionnement">Etape 2</a></li>
						<li><a href="etape3.html" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>
						<li><a href="etape4.html" title="Quatrième étape : le menu">Etape 4</a></li>
						<li><a href="etape5.html" title="Cinquième étape : titres & liens">Etape 5</a></li>
						<li><a href="etape6.html" title="Sixième étape : ajustements pour IE">Etape 6</a></li>
					</ul>
					<h3>Brèves</h3>
					<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>
					<h3>Liens</h3>
					<ul>
						<li><a href="https://www.alsacreations.com" title="AlsacréationS apprendre XHTML, les CSS et les standards W3C de la conception Web">Alsacréations</a></li>
					</ul>
				</div>
			</div>
			<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>
		</div>
	</body>
</html>