Cara Membuat Garis Masa HTML Interaktif

Garis masa adalah cara yang berguna untuk memaparkan senarai peristiwa di laman web, dan garis masa interaktif memberikan pengguna kawalan terhadap melihat kandungan. Walaupun terdapat banyak cara untuk membuat garis masa interaktif, kebanyakan memerlukan lebih daripada sekadar bahasa markup hiperteks (HTML). Walau bagaimanapun, ada satu penyelesaian HTML yang sangat mudah. Anda boleh membuat bar tatal interaktif dengan mudah untuk jangka masa anda dengan menggunakan atribut "gaya" HTML. Dengan berbuat demikian, pengguna garis masa anda akan dapat menelusuri kandungannya mengikut kehendak mereka.

Langkah 1

Buat fail HTML anda. Buka dokumen baru dalam program perisian penyunting teks dan buat halaman HTML asas. Tambahkan kod ini dalam bahagian "badan" HTML:Elemen pembahagian ("div") adalah wadah untuk senarai acara garis masa anda. Nilai "limpahan" dari "auto" menambah bar tatal interaktif apabila garis masa anda semakin luas atau lebih tinggi daripada bekas ini. Simpan halaman sebagai "timeline.html".

Langkah 2

Buat kandungan garis masa anda sendiri. Di ruang antara tag "div" pembuka dan penutup, tambahkan peristiwa garis masa anda mengikut urutan menaik atau menurun. Tambahkan setiap acara dalam bahagian HTML yang tersusun dengan baik. Terus menyimpan halaman semasa anda bekerja.

Uji kod HTML anda. Buka penyemak imbas web komputer anda dan muatkan "timeline.html." Sekiranya kandungannya lebih besar daripada bekas "div", anda akan melihat bar tatal interaktif. Laraskan nilai "lebar" dan "tinggi" bekas agar sesuai dengan susun atur menegak atau mendatar anda.

Petua

• Susun atur menegak adalah yang paling mudah dikodkan. Cukup bungkus setiap bahagian acara anda dalam elemen "div" sendiri. Untuk susun atur mendatar, anda boleh menggunakan jadual dengan satu baris dan sel lajur untuk setiap acara. Sekiranya anda melakukan ini, menjadikan ketinggian meja anda sama dengan ketinggian bekas "div" anda. Berhati-hati dengan nilai "margin" dan "padding" menegak meja anda.
• Artikel ini membuat bar tatal interaktif dengan menggunakan helaian gaya lata ("sebaris"). Lembaran gaya "sebaris" masuk ke dalam atribut "gaya" pada tag pembuka elemen HTML. Anda boleh menggunakan helaian gaya "dalaman" atau "luaran", namun begitu. Lembaran gaya "dalaman" masuk ke dalam bahagian "kepala" HTML. Lembaran gaya "luaran" adalah fail ".css" yang berasingan. Menggunakan salah satu daripada jenis ini memberi anda lebih banyak kawalan terhadap pemformatan kandungan HTML apa pun.
• Anda boleh memperluas interaktiviti contoh dengan menggunakan JavaScript. Anda boleh memulakan dengan menambahkan butang HTML, dan kemudian tulis JavaScript untuk memindahkan kandungan garis masa anda apabila pengguna mengklik butang.

Item yang anda perlukan

• Program perisian penyunting teks