Rien de trop ardu pour une page de ce type, un titre, un menu, le contenu de la page (ce que vous êtes en train de lire), et un pied de page contenant les informations d'ordre informatif (en général).
A noter 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 ! Je vais plutôt vous proposer ci-après le code xhtml utilisé pour cette page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Language" content="fr" /> </head> <body> <div id="conteneur"> <h1 id="header"><a href="etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1> <ul id="menu"> <li><a href="etape1.html">Etape n°1</a></li> <li><a href="etape2.html">Etape n°2</a></li> <li><a href="etape3.html">Etape n°3</a></li> <li><a href="etape4.html">Etape n°4</a></li> <li><a href="etape5.html">Etape n°5</a></li> </ul> <div id="contenu"> <h2>Un titre</h2> <p>Un paragraphe</p> </div> <p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p> </div> </body> </html>
Passons maintenant à l'étape n°2, le début de la mise en forme et en place du design.