C’est le moment que vous attendez avec impatience, et vous avez raison !
Il est temps de construire le HTML de Yummy Nouilles dans un dossier créé spécialement pour l’occasion.
Vous pouvez utiliser l’éditeur de code de votre choix. Pour ma part, j’utiliserai VS Code.
Exportez les assets graphiques
Pour commencer, il convient de repérer et exporter toutes les ressources dont vous allez avoir besoin pour l’intégration.
Mais où sont ces ressources ?
Sur Figma bien sûr ! Retournez sur l’onglet “Maquette” et cliquez sur le logo de Yummy Nouilles de façon à ce qu’il soit sélectionné.
Ensuite, rendez-vous dans le menu Design, tout en bas duquel vous trouverez l’option Export.
Comme vous pouvez vous en douter, c’est ici que nous allons pouvoir exporter le logo Yummy Nouilles, ainsi que toutes les images du site !
Nous allons exporter le logo au format SVG.
Une fois le logo téléchargé, nous allons créer un dossier assets dans le dossier de notre projet, et y ajouter le logo renommé logo.svg pour l’occasion.
Nous allons maintenant faire la même chose avec les images, à la seule différence que nous allons les exporter en JPG.
Et pourquoi pas au format SVG ?
Très bonne question ! Le format SVG utilise des formes simples de couleur qui sont tracées via un ensemble d’instructions de positions.
Si vous ouvrez un fichier SVG, vous verrez que ça ressemble à du HTML.
Une image, par contre, est un ensemble de pixels de couleur, le format JPG est donc plus adapté.
Dans le dossier assets, créez un sous-dossier img dans lequel vous allez créer un sous-dossier restaurant et un autre sous-dossier social.
Téléchargez et ajoutez les images des sections Nos Adresses et Réseaux sociaux dans les dossiers correspondants.
Pour les icônes du Footer, vous pouvez les exporter au format SVG comme le logo. Mettez-les dans un sous-dossier de assets que vous nommerez icons.
Appliquez le HTML
Vous avez déjà eu l’occasion d’aborder la structure d’un fichier HTML, donc nous allons passer rapidement sur la structure globale et nous concentrer sur le reste.
Tout d’abord, créez votre fichier index.html à la racine du projet.
Une fois que vous avez créé la structure du fichier HTML, ajoutez un titre à l’onglet de la page grâce à la balise <title> dans le head de la page.
Votre fichier devrait ressembler à quelque chose dans ce genre-là :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Yummy Nouilles - Accueil</title>
</head>
<body>
</body>
</html>Si vous ouvrez le fichier index.html dans votre navigateur, vous remarquerez que l’onglet a un titre ! Merveilleux, non ?
C’est bien sympa que l’onglet ait un titre, mais les sites que j’utilise ont tous un logo en plus du titre, comment est-ce que je fais pour l’ajouter ?
Il suffit d’ajouter une balise <link> dans le head en indiquant que c’est l'icône du site, le chemin vers le fichier logo.svg et son type :
<link rel="icon" type="image/svg+xml" href="assets/logo.svg">
Rechargez la page dans votre navigateur et observez le résultat !
Il est maintenant temps de construire le Body de la page index.html en suivant la structure du découpage effectué dans le chapitre précédent.
Ainsi, voici à quoi devrait ressembler le header une fois traduit en HTML :
<header>
<img src="assets/logo.svg" alt="Logo Yummy Nouilles">
<nav>
<a href="index.html">Accueil</a>
<a href="menu.html">Menu</a>
<a href="contact.html">Contact</a>
</nav>
</header>Pour les textes <p> contenant des textes en gras, vous pouvez utiliser la balise <strong> et faire vos retours à la ligne grâce à la balise orpheline <br> .
Comme vous vous en doutez probablement, vous allez devoir configurer les balises <a> et <img> pour que les liens redirigent vers les bonnes pages, et que les images s’affichent correctement.
J’ai remarqué que dans l’exemple, la balise <img> dispose d’un attribut alt, à quoi sert-il ?
L’attribut alt est très utile dans plusieurs cas :
Lorsque l’image ne peut pas être chargée ou que le fichier est corrompu, l’attribut alt permet d’afficher des informations sur ce qui aurait dû se trouver à cet endroit ;
Pour l’accessibilité du Web aux personnes malvoyantes, les outils de navigation par lecture de contenu Web en audio se basent sur l’attribut alt pour décrire les images d’une page.
À noter que cet attribut peut être utilisé pour décrire des graphiques, des objets et tout un ensemble de balises contextuelles qui ne contiennent pas directement du texte.
Il peut paraître fastidieux de prendre le temps pour l’accessibilité, mais il est bon de rappeler que ces bonnes pratiques, en plus de faire du Web un endroit plus inclusif, sont fortement récompensées par les moteurs de recherche, tels que Google, qui mettent plus volontiers en avant les sites accessibles !
À vous de jouer !
Vous avez maintenant toutes les clés en main pour construire la totalité du HTML du site Yummy Nouilles !
Je vous invite à prendre le temps de bien construire les pages index.html, menu.html et contact.html avant de jeter un œil à la correction.
Voici le lien du Replit avec le HTML complet.
En résumé
Exportez les assets d’une maquette Figma dans le bon format avec la fonction Export du menu Design.
Créez une arborescence de fichiers avec des noms clairs, et limitez les soucis de compatibilité lors du déploiement.
Ajoutez un titre et une icône à votre page dans le
<head>grâce à<title>et<link>.Mettez en valeur le texte et revenez à la ligne avec
<strong>et<br>.Décrivez les éléments non textuels avec l’attribut alt pour améliorer l’accessibilité et le référencement de votre site.
Yummy Nouilles est dès à présent un site utilisable, mais il manque un petit quelque chose pour qu’il soit présentable… Retrouvez-moi au chapitre suivant pour appliquer le CSS !
