Lorsque vous commencez à appréhender le HTML et le CSS, vous êtes confrontés à de nombreuses ressources sur le web vous parlant des balises HTML, des metas, des sélecteurs, etc.
Avant de commencer à réaliser votre premier site from scratch, il me semble nécessaire de connaitre certaines notions très simples, mais essentielles afin d’être réellement opérationnelle.
En effet, la conception d’une page web en HTML et CSS est en réalité beaucoup plus simple que vous ne le pensez.
Comment préparer votre environnement de travail
Que vous travailliez en local (sur votre machine) ou sur un serveur en ligne, vous aurez besoin de la même chose. Un dossier principal comprenant les fichiers de votre site web.
Dans sa forme la plus simple, l’environnement de travail comprend des fichiers et dossiers de base avec une nomenclature universelle. Autrement dit, dans votre dossier principal vous retrouverez les éléments suivants :
- Le dossier img ou image
- Le dossier css qui comprend votre feuille de style généralement nommée style.css
- Le dossier js lorsque vous avez besoin de faire du JavaScript
- Le fichier index.html qui représente votre page d’accueil
Dans le dossier img, vous y insèrerez toutes les images de votre site web. Vous pouvez bien entendu reclasser les images à l’intérieur d’autre dossier. Avoir une bonne organisation et une bonne nomenclature des fichiers vous facilitera toujours la vie, surtout si le projet prend de l’ampleur.
Dans le dossier css, vous y mettrez toutes vos feuilles de style. En effet votre site web peut contenir une ou plusieurs feuilles de style.
Le dossier js permet de stocker vos fichiers JavaScript. Dans l’exemple d’aujourd’hui, nous n’en aurons pas besoin.
Le fichier index.html représente votre page d’accueil. Il se trouve à la racine de votre site web. Ainsi, toutes vos pages HTML se trouveront à la racine de votre dossier.
Avant de démarrer la conception de la page web, il faut connaitre sa structure HTML
Vouloir créer un site web c’est une bonne étape en soi, mais il faut absolument comprendre comment cette page web est découpée.
Savoir identifier chaque zone de votre design est essentiel afin d’utiliser les bonnes balises. Lorsqu’on crée un site web, il faut connaitre les balises structurantes de base, celles qui vont entourer les grandes parties de votre site. À savoir :
- Le header (l’entête du site) qui comprends au minimum le logo et le menu de navigation principal
- Le main qui comprend les différentes sections dans lesquelles se trouve le contenu de votre page web
- Le footer (le pied de page) qui comprend diverses informations telles que des menus de navigation secondaires, le copyright, etc.
Prenons l’exemple du design ci-dessous. Il s’agit d’une page web basique que nous allons découper avec les grandes balises structurantes.
La zone bleue correspond au header et comprends le logo à gauche et un menu de navigation à droite. Par convention sur le web, le logo est cliquable et ramène toujours à la page d’accueil.
La zone verte en bas de page correspond au footer et comprends uniquement un copyright.
Le contenu se trouvant entre la zone bleue et la zone verte est le main, autrement dit, la zone de contenu principal.
Les 4 zones délimitées par les traits rouges correspondent à des sections ce qui permet de découper le contenu en différents thèmes.
Passons maintenant au code HTML
Dans cet article nous ne parlerons pas du CSS, mais uniquement de la structure HTML. Afin de transformer notre maquette en site web, nous allons ouvrir notre fichier index.hmtl avec notre éditeur de code.
Pour l’éditeur de code, c’est à vous de choisir, pour ma part j’utilise Visual Studio Code qui est un outil complet et facile à prendre en main.
Tout d’abord, il faut créer votre document type en HTML. Vous trouverez l’exemple ci-dessous. Pour automatiser la mise en place de votre doctype avec VS code, il vous suffit de mettre un « ! » et d’appuyer sur la touche Tab.
<!DOCTYPE html>
<!-- Il faut insérer la langue du site web -->
<html lang="fr">
<head>
<!-- Ici vous trouvez les meta de base, le charset pour l'encodage de caractère, la compatibilité avec edge et le viewport -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Il faut insérer le titre de votre page web au niveau de la balise title -->
<title>Site de test</title>
</head>
<body data-rsssl=1>
</body>
</html>
Créer le header
Nous allons maintenant procéder à la création du header avec un logo et un menu de navigation comme représenté sur le design ci-dessus.
Tout le contenu visible par l’utilisateur se trouve entre l’ouverture et la fermeture de la balise body. On retrouve donc le header entre l’ouverture et la fermeture de ladite balise.
<!DOCTYPE html>
<!-- Il faut insérer la langue du site web -->
<html lang="fr">
<head>
<!-- Ici vous trouvez les meta de base, le charset pour l'encodage de caractère, la compatibilité avec edge et le viewport -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Il faut insérer le titre de votre page web au niveau de la balise title -->
<title>Site de test</title>
</head>
<body data-rsssl=1>
<header>
<a href="/">
<img src="img/logo.png" alt="Description claire de l'image">
</a>
<nav>
<ul>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
</ul>
</nav>
</header>
</body>
</html>
Dans le header on retrouver une image entourée d’une balise a qui est une balise de lien.
Pour le menu de navigation principal, il est identifié avec la balise nav. Le menu est une liste de lien, on utilise donc la balise ul.
Créer le main
Le main est la partie de contenu principale, elle se trouve donc dans la balise body et entre les balises header et footer.
Cette partie du site web est ensuite divisée en plusieurs sections dans lesquelles nous trouverons le contenu de la page. Dans l’exemple, nous ne verrons pas le contenu des sections. Cela fera l’objet d’un autre article.
<!DOCTYPE html>
<!-- Il faut insérer la langue du site web -->
<html lang="fr">
<head>
<!-- Ici vous trouvez les meta de base, le charset pour l'encodage de caractère, la compatibilité avec edge et le viewport -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Il faut insérer le titre de votre page web au niveau de la balise title -->
<title>Site de test</title>
</head>
<body data-rsssl=1>
<header>
<a href="/">
<img src="img/logo.png" alt="Description claire de l'image">
</a>
<nav>
<ul>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
</main>
</body>
</html>
Créer le footer
Tout comme pour le header et le main, le footer se trouve entre l’ouverture et la fermeture de la balise body.
On retrouve le footer en dernière position, juste après la fermeture de la balise main. Dans l’exemple, le footer est composé uniquement d’un copyright.
<!DOCTYPE html>
<!-- Il faut insérer la langue du site web -->
<html lang="fr">
<head>
<!-- Ici vous trouvez les meta de base, le charset pour l'encodage de caractère, la compatibilité avec edge et le viewport -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Il faut insérer le titre de votre page web au niveau de la balise title -->
<title>Site de test</title>
</head>
<body data-rsssl=1>
<header>
<a href="/">
<img src="img/logo.png" alt="Description claire de l'image">
</a>
<nav>
<ul>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
<li><a href="#">Titre de navigation</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
<section>
<!-- A l'intérieur des section il y a du contenu que nous verrons dans un autre article -->
</section>
</main>
<footer>
<p>Copyright du site web de test <a href="#">Lien externe</a></p>
</footer>
</body>
</html>
Dans le prochain article, nous ferons un focus sur l’utilisation du CSS pour commencer à styliser notre page web.
Si vous souhaitez être formé et accompagné à l’apprentissage du HTML et CSS, contactez-nous pour obtenir votre devis.
