Comment créer une chronologie HTML interactive

Une chronologie est un moyen utile d'afficher une liste d'événements sur une page Web, et une chronologie interactive donne aux utilisateurs un certain contrôle sur l'affichage du contenu. Bien qu'il existe de nombreuses façons de créer une chronologie interactive, la plupart nécessitent plus qu'un simple langage de balisage hypertexte (HTML). Cependant, il existe une solution HTML très simple. Vous pouvez facilement créer des barres de défilement interactives pour votre chronologie en utilisant l'attribut "style" de HTML. En faisant cela, les utilisateurs de votre chronologie pourront faire défiler son contenu à leur guise.

Étape 1

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

L'élément de division ("div") est un conteneur pour la liste des événements de votre chronologie. La valeur "débordement" de "auto" ajoute une barre de défilement interactive lorsque votre ligne de temps devient plus large ou plus haute que ce conteneur. Enregistrez la page sous le nom "timeline.html".

Étape 2

Créez votre propre contenu chronologique. Dans l'espace entre les balises "div" d'ouverture et de fermeture, ajoutez les événements de votre chronologie par ordre croissant ou décroissant. Ajoutez chaque événement dans sa propre section de code HTML bien formé. Continuez à enregistrer la page pendant que vous travaillez.

Testez votre code HTML. Ouvrez le navigateur Web de votre ordinateur et chargez "timeline.html". Si son contenu est plus grand que le conteneur "div", vous verrez une barre de défilement interactive. Ajustez les valeurs de "largeur" ​​et de "hauteur" du conteneur en fonction de votre disposition verticale ou horizontale.