Comme quand vous construisez un site web, la meilleure chose à faire est de commencer par les blocs de construction de base : le contenu de votre site ! Prenons ce que nous voyons dans la maquette et traduisons-le en HTML basique. Je vais utiliser l'application appelée Sublime Text, mais vous êtes libre d'utiliser l’éditeur de texte de votre choix.
Tout d'abord, vous devez créer un nouveau fichier appeléindex.html. Dans ce document, nous allons faire l'équivalent de ce que vous venez de faire dans Photoshop avec des groupes de calques : vous déterminerez l'ordre de votre contenu et réfléchirez à la répartition des éléments dans les différents groupes.
La création d'une page HTML passe toujours par les étapes suivantes :
déclarer le document en HTML ;
créer une section
head;et créer une section
body.
Le début et la fin de chacune de ces sections sont marqués par ce qu'on appelle une balise d'ouverture et une balise de fermeture. C’est une notion de base en HTML. Chaque fois que vous allez ajouter un élément, vous spécifiez son type dans une balise d'ouverture, et vous devez vous assurer de bien fermer l'élément avec la balise de fermeture correspondante une fois que vous avez ajouté son contenu (et avant de passer à l'élément suivant).
Nous allons commencer directement par le body – ce que l’utilisateur verra de votre page. Vous allez y lister et y organiser les dossiers que vous aviez dans le document Photoshop. Pensez à un architecte faisant un plan. Il ne commencerait pas par dessiner une porte spécifique : il commencerait par définir l’architecture générale de la maison, puis définirait ensuite les éléments spécifiques.
Pour vous aider à définir cette organisation, vous pouvez créer des "notes" pour vous-même qui ne seront pas visibles par les utilisateurs. C’est ce qu'on appelle les commentaires. Ceux-ci peuvent être des annotations, des explications aléatoires, des rappels de choses à faire, ou toute autre note. Pas d’inquiétude, vous serez le seul à les voir ! Ils ne s'afficheront pas sur la page web.
Sentez-vous libre d'écrire autant de commentaires que vous le sentez. Cela vous sera très utile pour ajouter les balises HTML au bon endroit.
Un commentaire HTML s'ouvre en utilisant le code <!-- et se ferme en ajoutant -->.
<!DOCTYPE html>
<!-- Header -->
<!-- Section 1 -->
<!-- Section 2 Description -->
<!-- Section 3 Contenu mis en avant -->
<!-- Section 4 Details -->
<!-- Section 5 Big picture -->
<!-- Section 6 A propos -->
<!-- Section 7 Gammes de prix -->
<!-- Footer -->
Ici, vous pouvez voir que j’ai organisé la page selon l'organisation en groupes de calques du fichier Photoshop. Leurs noms sont écrits sous forme de commentaires HTML et m’aideront à les ajouter de manière organisée, des balises HTML qui afficheront du contenu.
Chacun de ces groupes d'éléments constituant une sorte de grande partie, vous pouvez utiliser la balise HTML5 <section>. Y ajouter un id reprenant le nom qui est dans votre commentaire vous assure une organisation adéquate de votre CSS ultérieurement.
Nous en reparlerons !
<!DOCTYPE html>
<!-- Header -->
<!-- Section 1 -->
id="section_one"
<!-- Section 2 Description -->
id="description"
<!-- Section 3 Contenu mis en avant -->
id="featured_content"
<!-- Section 4 Details -->
id="details"
<!-- Section 5 Big picture -->
id="big_picture"
<!-- Section 6 A propos -->
id="about"
<!-- Section 7 Gammes de prix -->
id="price_ranges"
Bravo ! Vous avez désormais la structure de base de votre page, organisée en différentes parties dans votre document HTML. Vous pouvez déjà commencer à voir le parallèle entre l'organisation du contenu en groupes de calques dans Photoshop et l’organisation de votre contenu en différents groupes au sein de votre HTML !
Commencez toujours par les éléments les plus généraux en premier. Pensez à votre contenu ou imaginez votre maquette à une échelle plus globale lorsque vous commencez à la construire, et intégrez-y ensuite des éléments plus petits, comme les images ou le texte.
N'ajoutez pas encore les autres éléments, nous le ferons dans les chapitres suivants. Pour l'instant, le plus important est que vous ayez compris la logique : "Du global au particulier" 
.
