Créer une Page Web Promenade en Forêt

Vous devez créer un site web attrayant pour promouvoir une promenade en forêt.

Sans une bonne structure et design, votre site risque de ne pas captiver les visiteurs, impactant l’intérêt pour la promenade.

Cet article vous guide dans l’utilisation de HTML, CSS et jQuery pour concevoir un site web captivant et interactif.

Table de matière

Découvrir l’exercice Rédiger le code HTML de la page web Structurer la page web avec les éléments HTML de base Styliser le contenu de la section Positionner la boîte d’information FAQ Conclusion

Formation Maîtriser jQuery : Les Fondamentaux de Manière Pratique

Apprenez les bases de jQuery à travers des projets pratiques et engageants.

Découvrir l’exercice

Vous allez faire un premier exercice concret de ce que vous avez appris jusqu’à présent en l’occurrence, un site qui ferait la promotion d’une balade en forêt. Il sera donc question pour vous d’utiliser toutes vos compétences acquises pour le moment tant en HTML/CSS qu’en jQuery afin de développer ladite page web.

Rédiger le code HTML de la page web

Le HTML vous permettra de définir le fond de votre page web. Alors, une fois le squelette HTML mis en place, vous allez donc déclarer une balise « section » et à l’intérieur il aura un titre de niveau 1 (« h1 ») où il sera écrit « Promenade en forêt ». Puis après le titre, insérez un paragraphe « p » ayant comme pour contenu, une petite description de la forêt en question. Après cela, cette fois vous déclarerez un titre de niveau 4 « h4 » dans lequel il aura le tarif de la promenade. Enfin vous allez ajouter un paragraphe « p » qui va contenir les informations sur la promenade, mais cette fois dans une balise « div » avec un « id = info ».

Vous avez ici l’ensemble du code nécessaire du fichier « index.html » pour la rédaction du code HTML de la page web :

				
					
 <!DOCTYPE html>
<html lang="fr">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promenade en forêt</title>
<link rel="stylesheet" href="css/style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-8442c668-5930-4466-bf98-5c9390d9668a: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8442c668-5930-4466-bf98-5c9390d9668a: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8442c668-5930-4466-bf98-5c9390d9668a","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<h1>Promenade en forêt</h1>
<p>Cette forêt est peuplée de nombreuses espèces de mammifères, d'amphibiens et d'oiseaux dont une cinquantaine est protégée. Les chauves-souris apprécient l'endroit. Le site accueille de beaux spécimens de chênes pédonculés et sessiles, de hêtres, de pins maritimes… Mais aussi des jacinthes des bois, des fougères, des iris… Ne cueillez pas le fragon petit-houx : l'espèce végétale est protégée. Et tout ce bois mort, il sert à quoi ? C'est la nourriture d'une armée d'insectes qui le transforment en nutriments dont se nourrissent les arbres. Le lucane cerf-volant est l'un de ces insectes utiles.</p>
<h4>Tarif: <span class="georgia">25</span> <span class="small">&euro;/personne</span> <sup><i class="fa-solid fa-circle-info"></i></sup></h4>
<div id="info">
<p>Offre valable du 01 juin au 31 aoùt <br>
Départ  le samedi matin à 10h00 <br>
Retour le vendredi suivant à 18h00</p>
</div>
</section>

<script src="https://kit.fontawesome.com/50786edb2e.js" crossorigin="anonymous" data-rocket-defer defer></script>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"d6f9e36d97","url":"https:\/\/blog.alphorm.com\/creation-site-web-html-css-jquery-promenade-foret","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Vous aurez dans votre navigateur quelque chose qui ressemble à ça :

Ensemble, nous allons utiliser les éléments de base de HTML afin de structurer notre page web.

Structurer la page web avec les éléments HTML de base

Pour donner une meilleure allure à notre page web, il va falloir ajouter du code CSS.

Alors, dans votre fichier « style.css », vous allez définir une panoplie de propriétés sur le sélecteur « body » pour une meilleure vue de votre page web. Après, vous allez manipulez la « section » afin de donner une bonne forme à la section de contenu de votre page web.

Vous avez ici l’ensemble du code nécessaire du fichier « style.css » pour la structure de votre page web :

				
					
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/**
* Styles pour l'élément body.
*
* Définit l'image d'arrière-plan, la famille de polices et la mise en page.
*
* @exemple
* Cela définira l'image d'arrière-plan sur `background.jpg` et la centrera.
*/
body {
background-image: url('../img/background.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
margin: 0;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
/**
* Styles pour les éléments de section.
*
* Définit la largeur maximale, la couleur d'arrière-plan, le remplissage et le rayon de la bordure.
*
* @exemple
* Cela définira la largeur maximale sur 600 px et la couleur d'arrière-plan sur un gris foncé.
*/
section {
max-width: 600px;
width: 75%;
background-color: rgba(65,61,89,0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 3px #444;
position: relative;
}

Avec ces différentes propriétés appliquées à vos sélecteurs, vous aurez comme résultat :

Après cela, nous poursuivrons dans la mise en forme de la page web et cette fois en donnant du style au contenu de la « section ».

Styliser le contenu de la section

Tout juste après le sélecteur « section », vous aurez à manipuler les sélecteurs « h1 », « p », « h4 » afin de donner un meilleur style au contenu de la « section » de votre page web.

Vous avez ici tout le code nécessaire pour styliser le contenu de la « section » de votre page web :

				
					
 /**
* Styles pour les éléments h1 dans les éléments de section.
*
* Définit l'alignement du texte, la marge, la taille de la police, la couleur et l'ombre du texte.
*
* @exemple
* Cela définira la taille de la police sur 1,7rem et la couleur sur un jaune vif.
*/
section h1 {
text-align: center;
margin-top: 0;
text-transform: uppercase;
font-size: 1.7rem;
color: rgb(202,249,14);
letter-spacing: 1px;
text-shadow: 2px 2px 3px #333;
}
/**
* Styles pour les éléments p dans les éléments de section.
*
* Définit l'alignement du texte, la taille de la police, la couleur et l'ombre du texte.
*
* @exemple
* Cela définira la taille de la police sur 1,2rem et la couleur sur un gris clair.
*/
section p {
text-align: justify;
font-size: 1.2rem;
color: #eee;
text-shadow: 2px 2px 3px #333;
}
/**
* Styles pour les éléments h4 dans les éléments de section.
*
* Définit l'alignement du texte, la taille de la police et l'ombre du texte.
*
* @exemple
* Cela définira la taille de la police sur 1,3rem et l'ombre du texte sur une lueur blanche.
*/
section h4 {
text-align: right;
font-size: 1.3rem;
text-shadow: 0 0 7px #fff;
}
/**
* Styles pour les éléments i dans les éléments h4 dans les éléments de section.
*
* Définit la couleur, le curseur et la taille de la police.
*
* @exemple
* Cela définira la couleur sur un rose vif et le curseur sur un pointeur.
*/
section h4 i {
color: rgb(226,41,78);
cursor: pointer;
font-size: 1.1rem;
margin-left: 15px;
}
/**
* Styles pour les éléments i dans les éléments h4 dans les éléments de section hover.
*
* Définit la couleur sur un rose plus foncé.
*
* @exemple
* Cela définira la couleur sur un rose plus foncé en survol.
*/
section h4 i:hover {
color: rgb(237,99,125);
}

Vous aurez donc le résultat suivant dans votre navigateur :

Toujours dans le contenu de la section, nous allons ensemble s’attarder sur le style de la partie du tarif.

Formater la présentation du tarif

Ici, vous allez pouvoir redonner du style à la zone de tarif en manipulant les classes du sélecteur « h4 ».

Voici donc tous le code nécessaire pour la mise en forme de la zone de tarif :

				
					
 /**
* Styles pour les éléments de classe "Georgia".
*
* Définit la famille de polices et la taille de la police.
*
* @exemple
* Cela définira la famille de polices sur Georgia et la taille de police sur 2,5rem.
*/
.georgia {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 2.5rem;
}
.small {
font-size: 0.9rem;
}

Bien que tout est pratiquement mis en forme, nous allons ensemble apporter des modifications sur le style de la boîte d’information.

Vous aurez donc dans votre navigateur au niveau du tarif le résultat suivant :

Positionner la boîte d’information

Dans cette partie, vous allez manipuler l’id « info » en y ajoutant des propriétés bien précises.

Alors, pour ce faire, vous allez utiliser le code suivant :

				
					
 /**
* Styles pour l'élément #info.
*
* Définit la largeur, la couleur d'arrière-plan, le remplissage et le rayon de la bordure.
*
* @exemple
* Cela définira la largeur sur 290 px et la couleur d'arrière-plan sur un gris clair.
*/
#info {
width: 290px;
background-color: #f3f3f3;
padding: 9px;
border-radius: 10px;
box-shadow: 4px 4px 3px #555;
position: absolute;
bottom: -35px;
right: -25px;
}
/**
* Styles pour les éléments p dans l'élément #info.
*
* Définit la couleur, l'ombre du texte, la taille de la police et l'alignement du texte.
*
* @exemple
* Cela définira la taille de la police sur 0,9rem et l'alignement du texte au centre.
*/
#info p {
color: #000;
text-shadow: none;
font-size: 0.9rem;
text-align: center;
margin: 0;
}

A la suite de tout ça, nous allons ajouter du script jQuery afin de rendre notre page web encore plus attrayant.

Développer le script jQuery pour la page web

Maintenant, il ne reste plus qu’à mettre en place notre script jQuery.

Dans votre fichier « script.js », Vous devrez ajouter le code nécessaire pour permettre à la boîte info d’être masquée une fois sur la page web afficher les informations sur la promenade en forêt à son survol.

				
					
 /**
* jQuery est utilisé ici pour attacher des écouteurs d'événements aux événements mouseover et mouseout
* de tous les éléments i dans les éléments h4 dans les éléments de section. Lorsque l'événement de survol de la souris
* est déclenché, l'élément #info est affiché. Lorsque l'événement mouseout est déclenché,
* L'élément #info est masqué.
*/
$(document).ready(function() {
$('#info').hide();
$('section h4 i').mouseover(function() {
$('#info').show();
});
$('section h4 i').mouseout(function() {
$('#info').hide();
});
});

Après donc le script jQuery ci-dessus, vous parviendrez à ces résultats :

Sans le sur survol de la souris, vous aurez :

Question : Comment les informations sur la promenade ont été masquées ?

Au survol de la souris sur la boîte info, vous aurez le résultat suivant :

Question : Quelles méthodes d’événement permettent de d’afficher et masquer les informations sur la promenade en forêt au survol de l’icône de la boîte d’info ?

Méthode	Description
mouseover()	Attache un gestionnaire d’événements pour l’événement mouseover (lorsque la souris passe au-dessus d’un élément).
mouseout()	Attache un gestionnaire d’événements pour l’événement mouseout (lorsque la souris sort d’un élément).
hide()	Est utilisée pour masquer les éléments sélectionnés de la page.
show()	Est utilisée pour afficher les éléments sélectionnés qui ont été précédemment masqués avec .hide()

En somme, à travers cet exercice, vous avez eu l’occasion d’explorer quelques notions en HTML, CSS notamment la manipulation des sélecteurs par diverses propriétés vous permettant ainsi d’aboutir à une page web attrayante. Par ailleurs, vous avez pu manipuler des sélecteurs de telles sortes à avoir une page web dynamique grâce aux méthodes d’événements de jQuery et en même temps apprendre à organiser vos codes beaucoup plus sainement.

Réjouissez-vous donc de vos efforts déployés jusqu’à maintenant et restez à l’affût de nouvelles notions encore plus importantes sur jQuery.

Découvrez ci-dessous un aperçu interactif de l’exercice grâce à l’intégration du CodePen, où vous pouvez tester et explorer le code directement :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment créer un site web pour une promenade en forêt ?

Pour créer un site web dédié à une promenade en forêt, vous devez structurer votre page avec HTML pour définir le contenu principal. Utilisez une balise ‘section’ pour contenir le titre, la description, le tarif et les informations sur la promenade. Ensuite, utilisez CSS pour styliser le design de votre page, en définissant des propriétés esthétiques pour les éléments de texte et de section. Enfin, intégrez jQuery pour ajouter des fonctionnalités interactives, comme afficher ou masquer des informations au survol de la souris.

Quels sont les éléments HTML de base pour structurer une page web ?

Les éléments HTML de base pour structurer une page web incluent les balises ‘html’, ‘head’, ‘body’, ‘h1’ pour le titre principal, ‘p’ pour les paragraphes, et ‘div’ pour les divisions de contenu. Dans cet exercice, une ‘section’ englobe des titres et des descriptions, tandis que des balises ‘h4’ et ‘span’ sont utilisées pour afficher le tarif. Ces éléments posent le fondement de votre page, facilitant l’application ultérieure de styles CSS et d’interactions jQuery.

Comment styliser une page web avec CSS ?

Pour styliser une page web avec CSS, commencez par définir des propriétés sur les sélecteurs HTML tels que ‘body’, ‘section’, ‘h1’, et ‘p’. Par exemple, en appliquant des styles de texte comme la taille de police, la couleur et l’alignement, vous pouvez améliorer l’apparence visuelle de votre site. Ajoutez également des styles pour l’arrière-plan, les marges, et les ombres pour donner de la profondeur et de la personnalité à votre design. Ces styles CSS assurent une mise en page cohérente et attrayante.

Comment utiliser jQuery pour améliorer une page web ?

jQuery simplifie l’ajout d’interactions dynamiques à une page web. Dans cet exercice, il est utilisé pour afficher ou masquer des informations lors du survol de la souris sur une icône d’information. En utilisant les événements ‘mouseover’ et ‘mouseout’, vous pouvez contrôler la visibilité d’un élément avec les méthodes ‘show()’ et ‘hide()’. Cela rend votre page interactive et engageante, enrichissant l’expérience utilisateur en fournissant des informations supplémentaires de manière intuitive.

Quels sont les avantages d'utiliser HTML, CSS et jQuery ensemble ?

L’utilisation combinée de HTML, CSS et jQuery offre de nombreux avantages dans le développement web. HTML fournit la structure essentielle de la page, CSS permet de styliser et de personnaliser l’apparence, tandis que jQuery facilite l’ajout de fonctionnalités interactives. Ensemble, ces technologies permettent de créer des sites web attrayants et dynamiques avec une expérience utilisateur enrichie. Cette synergie améliore l’efficacité du développement et offre plus de flexibilité dans la conception.

Conclusion

En combinant HTML, CSS et jQuery, vous avez créé un site web dynamique et attrayant pour une promenade en forêt. Quelle prochaine fonctionnalité envisagez-vous d’ajouter pour enrichir encore plus votre site web ?