Comment créer des diapositives de présentation avec HTML et CSS

Fatigué d'apprendre un nouveau logiciel de présentation? Tirez parti de vos compétences en développement Web existantes! Ce tutoriel vous montre comment créer des présentations interactives époustouflantes en utilisant Just HTML, CSS et JavaScript - les technologies Web de base que vous connaissez déjà. Nous structurerons les diapositives avec HTML5 moderne, les styliser avec CSS et ajouter des effets dynamiques en utilisant JavaScript.

Ce guide adapté aux débutants est parfait pour construire vos compétences HTML5, CSS et JavaScript grâce à un projet pratique. Vous pourrez même créer des decks de diapositives HTML5 dynamiques ou des alternatives PPT alimentées par JavaScript!

Voici un aperçu de la présentation finale:

prêt à commencer? Plongeons-nous.

1. Configuration du projet

Tout d'abord, créez un répertoire de projet simple avec ces fichiers:

• index.html
• css/style.css
• js/scripts.js

ces fichiers seront initialement vides.

2. Structure HTML de base (index.html)

Ajoutez le code suivant à votre fichier index.html. Cela comprend des icônes de police impressionnantes (pour le style), votre feuille de style et le fichier JavaScript. La classe <div> avec la classe <code>container tiendra notre présentation.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Presentation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="container">
    <div id="presentation-area"></div>
</div>

Le contenu de diapositive réel sera ajouté dans le presentation-area div en utilisant JavaScript plus tard. La classe .show (définie dans CSS) contrôlera quelle diapositive est visible.

3. Style avec CSS (style.css)

Le CSS gérera la présentation visuelle et les transitions de diapositive. Nous utiliserons la classe screenStatus pour gérer l'orientation de l'écran (0 pour l'écran complet, 1 pour les écrans plus petits). totalSlides (initialisé à 0) suivra le nombre de diapositives. (Remarque: le code CSS et JavaScript complet est trop étendu pour inclure ici, mais les extraits ci-dessous illustrent les fonctionnalités clés. Reportez-vous à l'original pour le code complet.)

4. Fonctionnalité JavaScript (scripts.js)

Le JavaScript gérera la navigation de diapositive et le mode plein écran. Les fonctions clés incluent:

• moveToLeftSlide() et moveToRightSlide(): Ces fonctions gèrent les transitions de diapositive en supprimant et en ajoutant la classe .show aux diapositives appropriées.
• fullScreenMode() et smallScreenMode(): Ceux-ci basculent le mode plein écran.
• hideLeftButton() et hideRightButton(): Ceux-ci cachent les boutons de navigation lors de la première ou de la dernière diapositive.
• getCurrentSlideNo(): met à jour le numéro de diapositif actuel.
• setSlideNo(): Affiche le numéro de diapositif actuel.
• init(): Initialise les variables et configure les auditeurs d'événements. Cette fonction est appelée après chaque transition de diapositive.

Cette approche utilise JavaScript pour gérer dynamiquement la visibilité des diapositives, offrant un moyen propre et efficace de créer des présentations interactives. N'oubliez pas d'inclure le code CSS et JavaScript complet de l'original pour une présentation entièrement fonctionnelle.

Ce tutoriel fournit une base pour construire des présentations HTML plus complexes et visuellement attrayantes. Explorez plus loin en ajoutant des animations, des transitions et des fonctionnalités JavaScript plus avancées pour améliorer votre glissière.