Niveau : Débutant

Réalisation d'un design complet (HTML / CSS) en 4 étapes

Dans ce tutoriel nous allons voir étape par étape comment concevoir le code initial HTML et CSS d'une page web, afin d'acquérir quelques techniques de base.

Tutoriel par
Créé le , mis à jour le (227006 lectures)
Tags : css, design

Sommaire


Le code HTML

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>

 Voir le résultat initial

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).