Πώς να δημιουργήσετε ένα διαδραστικό χρονοδιάγραμμα HTML

Συγγραφέας: Clyde Lopez
Ημερομηνία Δημιουργίας: 23 Αύγουστος 2021
Ημερομηνία Ενημέρωσης: 15 Νοέμβριος 2024
Anonim
Tutor LMS Wordpress Learning Management System
Βίντεο: Tutor LMS Wordpress Learning Management System

Περιεχόμενο

Το χρονοδιάγραμμα είναι ένας χρήσιμος τρόπος για να εμφανιστεί μια λίστα συμβάντων σε μια ιστοσελίδα και ένα διαδραστικό χρονοδιάγραμμα δίνει στους χρήστες τον έλεγχο της προβολής περιεχομένου. Ενώ υπάρχουν πολλοί τρόποι για να δημιουργήσετε ένα διαδραστικό χρονοδιάγραμμα, πολλοί χρειάζονται περισσότερο από HTML. Ωστόσο, υπάρχει μια πολύ απλή λύση HTML: μπορείτε να δημιουργήσετε διαδραστικές γραμμές κύλισης στο χρονολόγιό σας χρησιμοποιώντας το χαρακτηριστικό HTML "style". Με αυτόν τον τρόπο, οι χρήστες θα μπορούν να μετακινούνται ελεύθερα στο περιεχόμενο.

Βήμα 1

Δημιουργήστε το αρχείο HTML. Ανοίξτε ένα νέο έγγραφο σε ένα πρόγραμμα επεξεργασίας κειμένου και δημιουργήστε μια βασική σελίδα HTML. Προσθέστε αυτόν τον κωδικό στην ενότητα "σώμα" του HTML:

Το διαχωριστικό ("div") είναι ένα κοντέινερ για τη λίστα των συμβάντων στο χρονολόγιό σας. Η τιμή "αυτόματη" στο "υπερχείλιση" προσθέτει διαδραστικές γραμμές κύλισης όταν το χρονοδιάγραμμα είναι μεγαλύτερο ή μεγαλύτερο από το κοντέινερ. Αποθηκεύστε τη σελίδα ως "timeline.html".


Βήμα 2

Δημιουργήστε το περιεχόμενο. Στο διάστημα μεταξύ των ετικετών "div", προσθέστε τα συμβάντα στο χρονοδιάγραμμα με αύξουσα ή φθίνουσα σειρά. Προσθέστε κάθε συμβάν στη δική του καλά διαμορφωμένη ενότητα HTML. Αποθηκεύστε συνεχώς τη σελίδα καθώς εργάζεστε.

Βήμα 3

Δοκιμάστε τον κώδικα HTML. Ανοίξτε το αρχείο "timeline.html" στο πρόγραμμα περιήγησης ιστού του υπολογιστή σας. Εάν το περιεχόμενο είναι μεγαλύτερο από το κοντέινερ "div", θα δείτε μια διαδραστική γραμμή κύλισης. Ρυθμίστε τις τιμές "πλάτους" και "ύψους" του δοχείου ώστε να ταιριάζει στην κατακόρυφη ή οριζόντια διαδρομή του.