Comment créer un calendrier html interactif

Une ligne de temps est un moyen utile pour afficher une liste d`événements sur une page Web, et une ligne de temps interactive donne aux utilisateurs un contrôle sur le contenu de l`affichage. Alors que de nombreux moyens existent pour créer une ligne de temps interactive, la plupart exigent plus que le langage de balisage hypertexte juste (HTML). Cependant, il y a une solution très simple HTML. Vous pouvez facilement créer des barres de défilement interactives pour votre ligne de temps en utilisant HTML de "style" attribut. En faisant cela, les utilisateurs de votre ligne de temps seront en mesure de faire défiler son contenu qu`ils aiment.

Créez votre fichier HTML. Ouvrez un nouveau document dans un logiciel d`éditeur de texte et créer une page HTML de base. Ajoutez ce code dans le code HTML "corps" section: L`élément de division ("div") Est un conteneur pour la liste des événements de votre ligne de temps. le "débordement" valeur de "auto" ajoute une barre de défilement interactif lorsque votre ligne de temps devient plus large ou plus élevé que ce conteneur. Enregistrer la page "timeline.html".

Créez votre propre contenu en ligne de temps. Dans l`espace entre l`ouverture et la fermeture "div" étiquettes, ajouter les événements de votre ligne de temps en ordre croissant ou décroissant. Ajouter chaque événement dans son propre section de HTML bien formé. Continuez à enregistrer la page que vous travaillez.

Testez votre code HTML. Ouvrez le navigateur Web de votre ordinateur et la charge "timeline.html." Si son contenu est plus grand que la "div" conteneur, vous verrez une barre de défilement interactif. Ajuste le "largeur" et "la taille" les valeurs du conteneur en fonction de votre mise en page verticale ou horizontale.

Conseils

• vérifier mises en page verticales sont les plus faciles à code. Enroulez chacun de vos sections d`événements dans son propre "div" élément. Pour une disposition horizontale, vous pouvez utiliser une table avec une seule rangée et une cellule de colonne pour chaque événement. Si vous faites cela, assurez la hauteur de votre table le même que votre "div" la hauteur du récipient. Faites attention avec verticale de votre table "marge" et "rembourrage" valeurs.
• vérifier Cet article crée une barre de défilement interactive en utilisant un "en ligne" feuille de style en cascade (CSS). "En ligne" feuilles de style vont à l`intérieur du "style" attribut de la balise d`ouverture d`un élément HTML. Vous pouvez utiliser un "interne" ou "externe" feuille de style plutôt, cependant. "Interne" feuilles de style vont à l`intérieur du HTML "tête" section. "Externe" feuilles de style sont séparés "Css" des dossiers. En utilisant l`un de ces types vous donne plus de contrôle sur la mise en forme de tout contenu HTML.
• vérifier Vous pouvez étendre l`interactivité de l`exemple en utilisant javascript. Vous pourriez commencer par l`ajout de boutons HTML, puis écrire un javascript afin de déplacer le contenu de votre ligne de temps lorsque les utilisateurs cliquent sur les boutons.

Les références

• lien Styles HTML: W3Schools.com
• lien W3Schools.com: CSS Overflow propriété

A propos de l`auteur

La carrière d`écriture de Steve Sweeney-Turner a débuté en 1989 en tant que journaliste de la musique classique pour des magazines tels que "The Musical Times," "Tempo" et "Cencrastus." Il a également beaucoup écrit en tant qu`universitaire, y compris les chapitres de livres publiés par les presses universitaires d`Oxford, Manchester et Cork. Il est titulaire d`un doctorat en musicologie de l`Université d`Edimbourg et d`un diplôme de troisième cycle en technologie de l`information de l`Université de Glasgow.