Cara Membuat Garis Waktu HTML Interaktif

Garis waktu adalah cara yang berguna untuk menampilkan daftar acara di halaman web, dan garis waktu interaktif memberi pengguna beberapa kendali untuk melihat konten. Meskipun ada banyak cara untuk membuat garis waktu interaktif, sebagian besar membutuhkan lebih dari sekadar bahasa markup hiperteks (HTML). Namun, ada satu solusi HTML yang sangat sederhana. Anda dapat dengan mudah membuat bilah gulir interaktif untuk garis waktu Anda dengan menggunakan atribut "gaya" HTML. Dengan melakukan ini, pengguna garis waktu Anda akan dapat menggulir kontennya sesuka mereka.

Langkah 1

Buat file HTML Anda. Buka dokumen baru dalam program perangkat lunak editor teks dan buat halaman HTML dasar. Tambahkan kode ini di dalam bagian "body" HTML:

Elemen pembagian ("div") adalah wadah untuk daftar acara garis waktu Anda. Nilai "melimpah" dari "otomatis" menambahkan bilah gulir interaktif ketika garis waktu Anda menjadi lebih lebar atau lebih tinggi dari penampung ini. Simpan halaman sebagai "timeline.html".

Langkah 2

Buat konten garis waktu Anda sendiri. Di ruang antara tag "div" pembuka dan penutup, tambahkan acara garis waktu Anda dalam urutan menaik atau menurun. Tambahkan setiap acara dalam bagiannya sendiri dari HTML yang terbentuk dengan baik. Terus simpan halaman saat Anda bekerja.

Uji kode HTML Anda. Buka browser web komputer Anda dan muat "timeline.html." Jika isinya lebih besar dari wadah "div", Anda akan melihat scrollbar interaktif. Sesuaikan nilai "lebar" dan "tinggi" wadah agar sesuai dengan tata letak vertikal atau horizontal Anda.