HTML - Présentation Web

Introduction à la Présentation Web

Salut à toi, futur développeur web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du HTML et créer notre propre présentation web. En tant que votre enseignant de quartier bienveillant, je suis ravi de vous guider dans ce processus, même si vous n'avez jamais écrit une ligne de code auparavant. Alors, attachez vos ceintures et plongeon !

HTML - Web slide Desk

Qu'est-ce qu'une Présentation Web ?

Avant de commencer à coder, comprenons ce que nous allons construire. Une présentation web est essentiellement une présentation qui s'exécute dans un navigateur web. C'est comme PowerPoint, mais plus cool car vous la créez à partir de zéro en utilisant du HTML ! Cela signifie que vous pouvez y accéder n'importe où, n'importe quand, tant que vous avez une connexion internet.

Configuration de Notre Document HTML

Commençons par la structure de base de notre document HTML. Ne vous inquiétez pas si cela paraît intimidant au départ - nous allons le décomposer étape par étape.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title.Ma Super Présentation Web</title>
<style>
/* Nous ajouterons un peu de CSS ici plus tard */
</style>
</head>
<body>
<!-- Nos diapositives iront ici -->
</body>
</html>

Reprenons cela :

<!DOCTYPE html> indique au navigateur que c'est un document HTML5.
<html lang="fr"> est l'élément racine de notre page HTML, avec "fr" spécifiant le français.
La section <head> contient des informations méta sur le document.
<meta charset="UTF-8"> spécifie l'encodage des caractères pour le document.
<meta name="viewport"...> assure un rendu correct sur les appareils mobiles.
<title> définit le titre de notre page web.
La balise <style> est où nous ajouterons notre CSS plus tard.
Le <body> est où le contenu visible de notre présentation ira.

Création de Notre Première Diapositive

Maintenant, créons notre première diapositive. Nous utiliserons des balises <section> pour définir chaque diapositive.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>Bienvenue dans Ma Présentation Web !</h1>
<p>Créée par [Votre Nom]</p>
</section>
</div>
</body>

Ici, nous avons :

Ajouté un <div> avec la classe "slideshow-container" pour contenir toutes nos diapositives.
Créé un <section> avec la classe "slide" pour notre première diapositive.
Ajouté un titre <h1> et un paragraphe <p> à notre diapositive.

Ajout de Plus de Diapositives

Ajoutons quelques diapositives supplémentaires à notre présentation :

<div class="slideshow-container">
<section class="slide">
<h1>Bienvenue dans Ma Présentation Web !</h1>
<p>Créée par [Votre Nom]</p>
</section>

<section class="slide">
<h2>Que Nous Couvrons</h2>
<ul>
<li>Base du HTML</li>
<li>Stylisation CSS</li>
<li>JavaScript Simple</li>
</ul>
</section>

<section class="slide">
<h2>Merci !</h2>
<p>Des questions ?</p>
</section>
</div>

Nous avons ajouté deux diapositives supplémentaires, chacune avec des structures de contenu différentes. La deuxième diapositive utilise une liste non ordonnée <ul> pour afficher des points de suspension.

Application de Styles à Nos Diapositives avec CSS

Maintenant, ajoutons un peu de style à nos diapositives. Nous mettrons cela dans la balise <style> dans notre section <head> :

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

Reprenons ce CSS :

Nous avons défini la hauteur et les marges pour body et html.
La .slideshow-container utilise flexbox pour le layout et scroll-snap-type pour un défilement en douceur.
Chaque .slide est définie pour avoir une largeur et une hauteur minimales, avec un contenu centré.
Nous utilisons scroll-snap-align pour que les diapositives s'arrêtent correctement lors du défilement.
Des couleurs de fond différentes sont définies pour chaque diapositive en utilisant :nth-child.

Ajout de Boutons de Navigation

Pour rendre notre présentation plus conviviale, ajoutons quelques boutons de navigation :

<body>
<div class="slideshow-container">
<!-- ... diapositives ici ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Précédent</button>
<button class="next" onclick="changeSlide(1)">Suivant ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

Nous avons ajouté :

Des boutons "Précédent" et "Suivant" avec des événements onclick.
Une fonction changeSlide en JavaScript pour gérer la navigation.

Stylinsons ces boutons :

<style>
/* ... styles précédents ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

Détails Finaux

Pour que notre navigation fonctionne en douceur, nous devons ajouter des IDs à nos diapositives :

<section id="slide1" class="slide">
<h1>Bienvenue dans Ma Présentation Web !</h1>
<p>Créée par [Votre Nom]</p>
</section>

<section id="slide2" class="slide">
<h2>Que Nous Couvrons</h2>
<ul>
<li>Base du HTML</li>
<li>Stylisation CSS</li>
<li>JavaScript Simple</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>Merci !</h2>
<p>Des questions ?</p>
</section>

Conclusion

Félicitations ! Vous venez de créer votre propre présentation web en utilisant HTML, CSS et un peu de JavaScript. C'est apenas le début - vous pouvez maintenant expérimenter avec différents styles, ajouter plus d'éléments interactifs, ou même incorporer des animations.

Souvenez-vous, le développement web est tout au sujet de la pratique et de la créativité. N'ayez pas peur de modifier le code et de voir ce qui se passe. Qui sait ? Vous pourriez découvrir quelque chose d'incroyable !

Bonne programmation, futurs mages du web !

Credits: Image by storyset