TP : Création d’un site web avec HTML5, CSS3 et Javascript
Dans ce TP, nous allons créer un site web en utilisant HTML5, CSS3 et Javascript. L’étudiant sera capable de créer un site web statique implémentant les différents types de balises HTML, en ajoutant du style avec CSS (inline ou script), à créer un lien de navigation entre les différentes pages du site et à stocker les données localement avec Javascript.
Outils à utiliser
- Un éditeur : Visual Studio Code. Après son installation, choisissez “Auto Save” dans le menu File pour assurer l’enregistrement automatique des changements au niveau du code.
- Live Server : Installer le serveur à partir de visual code
- Un navigateur
Première partie
Créez la page index.html
Maitenant, nous allons ajouter du contenu à notre page index.html. Copiez le code dans votre fichier et suivez l’affichage sur le navigateur.
Pour visualier le contenu de votre site, appuyez avec le bouton droit de la souris à l’écran et choisir Open with Live Server. A cette étape rien ne sera affiché.
(Checkpoint 1) Visualisation sur les balises du HTML en général et un Mockup de la page à faire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bienvenue à notre site web Cake's Shop</title>
<meta name="author" content="Cake's shop owner">
<meta name="description" content="Storefront for Cake's Shop">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Ajouter du texte à notre page index.html
Ajoutons du contenu à notre page. Dans ce texte, nous allons utiliser la balise de “heading” avec “h1” et “p” pour organiser le paragraphe. Remarquez au niveau du “p”, vous avez ajouté du style à ce pargraphe. Vous avez organisé le contenu en alignant le texte à gauche. Copiez ce contenu :
<body>
<h1>Bienvenue à notre boutique !</h1>
<h2>Bienvenue à notre boutique !</h2>
<h3>Bienvenue à notre boutique !</h3>
<h4>Bienvenue à notre boutique !</h4>
<h5>Bienvenue à notre boutique !</h5>
<h6>Bienvenue à notre boutique !</h6>
<p style="text-align: left;">
Pendant de nombreuses années, Cake's Shop a préparé les gâteaux les plus délicieux en Tunisie.
En 2013, nous avons ouvert notre première boutique dans une petite rue charmante au cœur de Tunis.
Les gens du monde entier sont tombés amoureux de nos moelleux gâteaux, nos cheesecakes divins et nos tartes aux
pommes épicées...
La boutique a rapidement connu un grand succès.
En 2015, pas moins de 100 gâteaux étaient vendus chaque jour, et Cake's Shop a déménagé dans un espace plus grand
pour répondre à la demande croissante.
Suite à de nombreuses demandes, il est devenu évident que la prochaine étape était de permettre à chacun de
commander nos gâteaux depuis chez eux, et ce, de n'importe où dans le monde.
Vous découvrez maintenant le résultat de ce projet : notre propre boutique en ligne, vous permettant de
commander les délicieux gâteaux de Cake's Shop à tout moment !
</p>
</body>
Rajoutez l’usage des balises suivantes :
- Balise “p” à chaque début de paragraphe.
- Balise “b” pour mettre le nom de la boutique en gras.
- Balise “i” pour mettre en italique le terme “ la demande croissante”.
Ajoutez des images à notre page index.html
Téléchargez une image de cheesecake du web de votre choix. Nous allons structurer notre page web index.html de manière à avoir cette hérarchie:
<body>
<article>
<h1>Bienvenue à notre boutique !</h1>
<p style="text-align: left;">
Pendant de nombreuses années, Cake Shop a préparé les gâteaux les plus délicieux chez eux en Tunisie.
En 2013, nous avons ouvert notre première boutique dans une petite rue charmante au cœur de Tunis.
Les gens du monde entier sont tombés amoureux de nos moelleux gâteaux, nos cheesecakes divins et nos tartes aux
pommes épicées...
La boutique a rapidement connu un grand succès.
<br> En 2015, pas moins de 100 gâteaux étaient vendus chaque jour, et Cake Shop a déménagé dans un espace plus grand
pour répondre à la demande croissante.
Suite à de nombreuses demandes, il est devenu évident que la prochaine étape était de permettre à chacun de
commander nos gâteaux depuis chez eux, et ce, de n'importe où dans le monde.
Vous découvrez maintenant le résultat de ce projet : notre propre boutique en ligne, vous permettant de
commander les délicieux gâteaux de Cake Shop à tout moment !
</p>
<hr>
<section>
<h3 style="font-family:verdana;"> Nos promotions hebdomadaire</h3>
<h4>Cheese cake</h4>
30dt - 4 personnes<br>
<img src="cheesecake.jpg" width="500" alt="Cheesecake avec caramel" height="300" />
</section>
</article>
</body>
Remarquez que vous avez des balises auto-fermante qui veut dire que vous n’ajoutez pas / pour indiquer la fin de son effet. Visualisez le résultat et raffiner le choix des fonts pour soigner l’ergonomie de la page.
Structurez notre page
Une page web a une structure organisée par les éléments sémantiques du HTML. Nous comptons organiser la page index.html de manière
à avoir une barre de navigation au niveau du header et un footer qui contient l’adresse et les auteurs de la page. Dans la partie centrale (entre header et footer), nous
consacrons la partie à gauche pour la navigation et la partie à droite pour le contenu à rajouter. Nous distingons les balises sémantiques suivantes:
- article
- section
- nav
- aside
- header
- footer
- main Pour ce faire, nous suivons les étapes suivantes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bienvenue à notre site web Cake's Shop</title>
<meta name="author" content="Cake's shop owner">
<meta name="description" content="Storefront for Cake's Shop">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: #e6e4d9;
}
nav {
height: 60px;
width: 1000px;
margin: 0 auto 20px;
}
#main {
float: right;
width: 70%;
margin-bottom: 20px;
}
footer {
clear: both;
width: 100%;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
</style>
</head>
<body>
</body>
</html>
A cette étape là, qu’obtenez vous comme affichage sur votre site web? Remarquez la différence entre les CSS selectors, certains sont précédés par ., d’autres par #.
Ajoutons notre header, notre menu de navigation à gauche, le contenu de la page et le footer.
<header id="mainheader">
<nav>
Header menu goes here
</nav>
</header>
<div style="width:1000px;margin-left: auto;margin-right: auto;">
<aside id="leftmenu">
<header>
<h4 style="text-align: center;">Explorez nos cakes</h4>
</header>
<input type="search" class="searchbox" placeholder="Chercher dans notre boutique" />
</aside>
<main id="main">
<article>
<header>
<h1 style="font-size:35px;color:#a593c2">Bienvenue à notre boutique !</h1>
</header>
<h2>Notre histoire</h2>
<p>
Pendant de nombreuses années, Cake Shop a préparé les gâteaux les plus délicieux chez eux en Tunisie.
En 2013, nous avons ouvert notre première boutique dans une petite rue charmante au cœur de Tunis.
Les gens du monde entier sont tombés amoureux de nos moelleux gâteaux, nos cheesecakes divins et nos tartes aux
pommes épicées...
La boutique a rapidement connu un grand succès.
En 2015, pas moins de 100 gâteaux étaient vendus chaque jour, et Cake Shop a déménagé dans un espace plus grand
pour répondre à la demande croissante.
Suite à de nombreuses demandes, il est devenu évident que la prochaine étape était de permettre à chacun de
commander nos gâteaux depuis chez eux, et ce, de n'importe où dans le monde.
Vous découvrez maintenant le résultat de ce projet : notre propre boutique en ligne, vous permettant de
commander les délicieux gâteaux de Cake Shop à tout moment !
</p>
<hr>
<section>
<h3 style="font-family:verdana;"> Nos promotions hebdomadaire</h3>
<h4>Cheese cake</h4>
30dt - 4 personnes<br>
<img src="cheesecake.jpg" width="500" alt="Cheesecake avec caramel" height="300" />
</section>
</article>
</main>
</div>
<footer>
<p>Notre adresse est <address>Cake's Shop - Rue de la patisserie 216 tunis Tunisie</address>
</p>
<small>2024 ENIT - All rights reserved</small>
</footer>
Visualisez votre page. A ce stade, la page ne semble organisée bien qu’elle contienne toutes les parties ciblées dans notre objectifs. Nous allons ajouter encore plus de style dans notre page afin d’améliorer le contenu. (Checkpoint 2)
<style>
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: #e6e4d9;
background-image: url('pattern.png');
}
#mainheader {
background-color: #9c93c2;
}
#leftmenu {
float: left;
width: 30%;
margin-bottom: 20px;
}
nav {
height: 60px;
width: 1000px;
margin: 0 auto 20px;
}
.searchbox {
padding: 5px;
margin: 10px 10px;
width: 200px;
}
#main {
float: right;
width: 70%;
margin-bottom: 20px;
}
footer {
clear: both;
width: 100%;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
</style>
Téléchargez le pattern du background :
Ajoutez les figures : cake.svg dans le mainheader, logo.png dans le leftmenu et cakes.jpg dans main de manière à avoir le code suivant :
<header id="mainheader">
<nav>
<img src="cake.svg" height="55" />
</nav>
</header>
<aside id="leftmenu">
<img src="logo.png" />
<header>
<h4 style="text-align: center;">Explorez nos cakes</h4>
</header>
<input type="search" class="searchbox" placeholder="Chercher dans notre boutique" />
</aside>
<figure>
<img src="cakes.jpg" width="600" alt="La vitrine de notre boutique" />
<figcaption>Vitrine de la boutique Cake's shop</figcaption>
</figure>
Checkpoint 3 (Voir less autres structures de pages Web, Block, inline)
Générons notre favicon
Favicon est l’icône, qui est essentiellement une autre image, est l’image utilisée par le navigateur lorsque l’utilisateur navigue sur notre site. Elle s’affiche dans l’onglet. Sa taille est
entre 16x16 ou 32x32 pixels. Pour générer notre icône, rendez-vous sur au site favicon.io . Générer Favicon à partir de l’image pie.png et ajoutez cette balise au niveau du head.
<link rel="icon" type="image/png" href="favicon.png">
Les tableaux du HTML
Créez deux nouvelles pages tousdetails.html, template.html avec le même contenu que vous pouvez copier de la cellule du code ci-après :
Attention ! Créez les dossiers “images/products/” et ajoutez les images:
 |
 |
 |
 |
 |
 |
 |
<main id="main">
<table>
<tr>
<td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
<td>Cheese cake</td>
<td>Un pur plaisir.</td>
<td>12Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/applepiesmall.jpg" width="100"></td>
<td>Apple pie</td>
<td>Notre tarte de pommes vedette</td>
<td>14DT</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
<td>Cherry pie</td>
<td>La classique!</td>
<td>18Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/cranberrypiessmall.jpg" width="100"></td>
<td>Cranberry pie</td>
<td>En un mot ... Onctueuse !</td>
<td>16DT</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/peachpiesmall.jpg" width="100"></td>
<td>Peach pie</td>
<td>Un délice!</td>
<td>18Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
<td>Pumpkin pie</td>
<td>Le sommet du goût !</td>
<td>17Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
<td>Strawberry Cheese Cake</td>
<td>L'authentique</td>
<td>13DT</td>
<td>Voir détails</td>
</tr>
</table>
</main>
Rajoutez les instructions de mise en page à la balise style :
table,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
Visualisez le site à ce niveau. Nous continuons l’édition de notre tableau en ajoutant les balises caption, thead, tbody, le code suivant :
<table border="1">
<caption>
Our delicious selection of pies for you to enjoy!
</caption>
<thead>
<tr>
<th>Image</th>
<th>Nom de la tarte/Cake</th>
<th>Description</th>
<th>Prix</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
<td>Cheese cake</td>
<td>Un pur plaisir.</td>
<td>12Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/applepiesmall.jpg" width="100"></td>
<td>Apple pie</td>
<td>Notre tarte de pommes vedette</td>
<td>14DT</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
<td>Cherry pie</td>
<td>La classique!</td>
<td>18Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/cranberrypiessmall.jpg" width="100"></td>
<td>Cranberry pie</td>
<td>En un mot ... Onctueuse !</td>
<td>16DT</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/peachpiesmall.jpg" width="100"></td>
<td>Peach pie</td>
<td>Un délice!</td>
<td>18Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
<td>Pumpkin pie</td>
<td>Le sommet du goût !</td>
<td>17Dt</td>
<td>Voir détails</td>
</tr>
<tr>
<td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
<td>Strawberry Cheese Cake</td>
<td>L'authentique</td>
<td>13DT</td>
<td>Voir détails</td>
</tr>
</tbody>
</table>
Avec le style suivant:
<style>
table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
Checkpoint 4 (La différence entre les éléments Inline et block)
Ajouter la navigation aux pages
Nous pouvons ajouter des bookmarks ! Celà nous permet de se rendre directement à la partie concernée sans scroller la page. Pour ce faire, nous allons modifier notre leftmenu en ajoutant les liens suivants : Remarquez #promos ! Ceci montre que nous n’allons pas quitter la page, mais nous allons vers une certaine partie de la page web là où vous naviguez.
<aside id="leftmenu">
<img src="logo.png" />
<header>
<h4 style="text-align: center;">Explorez nos cakes</h4>
</header>
<input type="search" class="searchbox" placeholder="Search our store" />
<ul>
<li><a href="tousdetails.html">Tous</a></li>
<li><a href="cheesecakes.html">Cheese cakes</a></li>
<li><a href="pies.html">Tartes</a></li>
<li><a href="#promos">Promotions</a></li>
</ul>
</aside>
Marquons cette partie. Attribuez à la section l’id promos pour rendre le lien ci-avant créé, fonctionnel :
<section id="promos">
<h3 style="font-family:verdana;"> Nos promotions hebdomadaire</h3>
<h4>Cheese cake</h4>
0dt - 4 personnes<br>
<img src="cheesecake.jpg" width="500" alt="Cheesecake avec caramel" height="300" />
</section>
Préparons maintenant les liens de navigation de notre page, dans la barre de navigation. Pour ce faire, commençons tout d’abord par:
<body>
<header id="mainheader">
<nav>
<ul>
<li><img src="cake.svg" height="55" /></li>
<li><a href="index.html">Home</a></li>
<li><a href="tousdetails.html">Tous</a></li>
</ul>
</nav>
</header>
<div style="width:1000px;margin-left: auto;margin-right: auto;">
<aside id="leftmenu">
<img src="logo.png" />
<header>
<h4 style="text-align: center;">Explorez nos cakes</h4>
</header>
<input type="search" class="searchbox" placeholder="Search our store" />
<ul>
<li><a href="tousdetails.html">Tous</a></li>
<li><a href="cheesecakes.html">Cheese cakes</a></li>
<li><a href="pies.html">Tartes</a></li>
<li><a href="#promos">Promotions</a></li>
</ul>
</aside>
L’affichage de la partie de navigation n’est pas aussi ergonomique. Pour l’ajuster, ajoutons ces règles de styles à la balise style de la même page. Le symbole > indique que la règle concerne une relation parent-enfant directe. Cela signifie que le style ne sera appliqué qu’à la balise <ul> qui se trouve directement sous la balise <nav>. Par contre, l’absence de > dans la règle nav>ul>li a veut dire que le style est appliqué sur a et elle n’est pas en lien de parenté direct avec li. Il suffit que la balise soit imbriquée sous li.
nav>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav>ul>li {
float: left;
}
nav>ul>li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-weight: bold;
}
```
Visualisez l'effet de ce code sur votre site. Maintenant, nous allons organiser notre site de manière à mettre tout le CSS dans un fichier à part et l'ajouter via un lien dans les pages concernées. Ajoutez ce code au niveau de la balise head et copiez tout le contenu de la balise style dans le nouveau fichier style.css en insérant ce code au niveau du head.
```html
<link rel="stylesheet" href="style.css">
Ajouter du Javascript au site
Nous allons nous servir du local Storage cela réfère à un espace de mémoire de votre machine que le nvigateur s’en sert pour enregistrer ses données. Ajoutez ce contenu dans la page index.html.
<script>
function save() {
localStorage.setItem("liked", true);
}
window.onload = function () {
var favorite = document.getElementById('favorite');
if (window.localStorage) {
var storage = window.localStorage;
if (storage.getItem('liked') == 'true') {
favorite.innerHTML = "Merci d'avoir aimé nos produits!";
}
}
}
</script>
Toujours dans index.html, ajoutez ce bouton au début de la partie main.
<button onclick="save()" type="button">J'aime</button>
<span id="favorite"></span>
Appuyez sur j’aime et raffraichissez la page. Observez le résultat!