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

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

Βήμα 1

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

Βήμα 2

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

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

Συμβουλές

Οι κατακόρυφες διατάξεις είναι οι πιο εύκολες στην κωδικοποίηση. Απλά τυλίξτε κάθε τμήμα του γεγονότος μέσα στο δικό του στοιχείο div. Για μια οριζόντια διάταξη, θα μπορούσατε να χρησιμοποιήσετε ένα τραπέζι με μία μόνο σειρά και ένα κελί στήλης για κάθε συμβάν. Εάν το κάνετε αυτό, κάντε το ύψος του τραπεζιού σας το ίδιο με το ύψος του δοχείου "div". "περιθωρίου" και "παραγεμίσματος" του τραπεζιού σας.

Αυτό το άρθρο δημιουργεί μια διαδραστική γραμμή κύλισης χρησιμοποιώντας ένα "inline" φυλλοειδές φύλλο στυλ (CSS). Τα φύλλα στυλ "Inline" εμπίπτουν στο χαρακτηριστικό "στυλ" της ετικέτας ανοίγματος ενός στοιχείου HTML. Εντούτοις, μπορείτε να χρησιμοποιήσετε ένα φύλλο στυλ "εσωτερικού" ή "εξωτερικού" στυλ. Τα "εσωτερικά" φύλλα στυλ μπαίνουν μέσα στην ενότητα "κεφάλι" HTML. Τα "εξωτερικά" φύλλα στυλ είναι ξεχωριστά αρχεία ".css". Η χρήση ενός από αυτούς τους τύπους σας δίνει μεγαλύτερο έλεγχο στη μορφοποίηση οποιουδήποτε περιεχομένου HTML.

Μπορείτε να επεκτείνετε την αλληλεπίδραση του παραδείγματος χρησιμοποιώντας το JavaScript. Μπορείτε να ξεκινήσετε προσθέτοντας κουμπιά HTML και στη συνέχεια να γράψετε ένα JavaScript για να μετακινήσετε το περιεχόμενο γραμμής ώρας όταν οι χρήστες κάνουν κλικ στα κουμπιά.

Στοιχεία που θα χρειαστείτε

Πρόγραμμα λογισμικού επεξεργασίας κειμένου