Rien de trop ardu pour une page web de ce type : un titre, un menu, le contenu de la page, et un pied de page contenant les informations d'ordre informatif.
Voir le résultat final que l'on souhaite obtenir
Télécharger les sources des fichiers (zip)
Voici le code HTML construit pour cette page :
<!DOCTYPE html">
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="#" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>
<nav>
<ul id="menu">
<li><a href="#">Etape n°1</a></li>
<li><a href="#">Etape n°2</a></li>
<li><a href="#">Etape n°3</a></li>
<li><a href="#">Etape n°4</a></li>
<li><a href="#">Etape n°5</a></li>
</ul>
</nav>
<div id="contenu">
<h2>Un titre</h2>
<p>Un paragraphe</p>
</div>
<p id="footer">Réalisation des codes HTML/CSS, du tutoriel et du design par ElMoustiko</p>
</div>
</body>
</html>Notez qu'aucun style n'a été appliqué à la page, vous remarquerez que le site est tout à fait lisible et utilisable, certes peu agréable à l'œil mais fonctionnel
Note : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser la source (Alsacreations).