Comment créer une chronologie HTML interactive

Auteur: Ellen Moore
Date De Création: 14 Janvier 2021
Date De Mise À Jour: 13 Peut 2024
Anonim
Comment créer une chronologie HTML interactive - Électronique
Comment créer une chronologie HTML interactive - Électronique

Contenu

Une chronologie est un moyen utile d'afficher une liste d'événements sur une page Web, et une chronologie interactive permet aux utilisateurs de contrôler l'affichage du contenu. Bien qu'il existe de nombreuses façons de créer une chronologie interactive, beaucoup nécessitent plus que du HTML. Cependant, il existe une solution HTML très simple: vous pouvez créer des barres de défilement interactives sur votre timeline en utilisant l'attribut HTML "style". En faisant cela, les utilisateurs pourront se déplacer librement dans le contenu.

Étape 1

Créez votre fichier HTML. Ouvrez un nouveau document dans un éditeur de texte et créez une page HTML de base. Ajoutez ce code dans la section "body" du HTML:

Le diviseur ("div") est un conteneur pour la liste des événements de votre chronologie. La valeur "auto" dans "overflow" ajoute des barres de défilement interactives lorsque la chronologie est plus longue ou plus large que le conteneur. Enregistrez la page sous "timeline.html".


Étape 2

Créez le contenu. Dans l'espace entre les balises "div", ajoutez les événements de la chronologie par ordre croissant ou décroissant. Ajoutez chaque événement dans sa propre section HTML bien formée. Enregistrez la page en continu pendant que vous travaillez.

Étape 3

Testez votre code HTML. Ouvrez le fichier "timeline.html" dans le navigateur Web de votre ordinateur. Si le contenu est plus grand que le conteneur "div", vous verrez une barre de défilement interactive. Ajustez les valeurs "largeur" ​​et "hauteur" du conteneur pour s'adapter à son trait vertical ou horizontal.