Membuat Timeline HTML Interaktif: Panduan Praktis

Membuat Timeline HTML Interaktif

Timeline merupakan cara yang efektif untuk menampilkan rangkaian peristiwa di halaman web. Dengan menambahkan scrollbar interaktif, pengunjung dapat menggulir konten sesuai keinginan.

Langkah 1: Siapkan File HTML

1. Buka editor teks (misalnya Notepad++, VS Code, Sublime).
2. Buat file baru dan simpan sebagai timeline.html.
3. Tambahkan struktur dasar HTML berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Timeline Interaktif</title>
</head>
<body>
    <div id="timeline" style="width: 100%; max-width: 800px; height: 400px; overflow: auto; border: 1px solid #ccc; padding: 10px;">
        
    </div>
</body>
</html>

Elemen <div> berfungsi sebagai wadah konten. Properti overflow: auto menambahkan scrollbar otomatis ketika isi melebihi batas.

Langkah 2: Tambahkan Konten Timeline

Di dalam tag <div id="timeline">, masukkan peristiwa-peristiwa Anda. Setiap peristiwa dapat disusun dalam <section> atau <article> yang memuat judul, tanggal, dan deskripsi.

<div id="timeline" style="...">
    <section class="event">
        <h3>1979 – Penerbitan Buku Pertama</h3>
        <p>Tahun di mana saya menerbitkan buku pertama saya…</p>
    </section>
    <section class="event">
        <h3>2005 – Lahir Blog</h3>
        <p>Mulai menulis blog tentang teknologi…</p>
    </section>
</div>

Simpan perubahan dan buka timeline.html di browser. Scrollbar akan muncul bila isi melebihi tinggi div.

Tips & Trik

Layout Vertikal: Cara termudah. Setiap event ditempatkan di <div> terpisah.
Contoh: <div class="event">…</div>
Layout Horizontal: Gunakan tabel satu baris atau <div> fleksibel dengan display: flex; flex-direction: row;. Pastikan tinggi tabel atau div konsisten.
Penggunaan CSS: Anda dapat memindahkan gaya ke internal (dalam <style>) atau external (file .css) untuk kontrol lebih. Contoh internal:
<style> #timeline { /* gaya */ } .event { margin-bottom: 20px; } </style>
Interaksi Tambahan: Tambahkan tombol “Mundur” dan “Maju” serta skrip JavaScript sederhana untuk men-scroll konten secara otomatis.

Perangkat yang Dibutuhkan

Editor teks (VS Code, Sublime Text, Notepad++, dll.)
Browser web (Chrome, Firefox, Edge, Safari)

Dengan langkah-langkah di atas, Anda dapat membuat timeline interaktif sederhana hanya dengan HTML dan sedikit CSS. Untuk fungsionalitas lebih canggih, pertimbangkan menambahkan JavaScript.

URL:https://komputer.whycomputer.com/Internet/101303388.html

Panduan Mengedit Judul Blog Menggunakan HTML

Bagaimana Mencari Stempel Waktu di Riwayat Penelusuran Internet Anda

Internet

Panduan Membuat Label CD di Mac

Membuat Label CD di Mac: Cara Mudah dengan Microsoft Word Menyiapkan label CD tidak lagi menjadi pekerjaan eksklusif perusahaan musik atau desainer grafis. Saat ini banyak orang menyimpan backup data, daftar musik kustom, serta dokumen penting di CD. Menggunakan label CD Avery standar memudahkan pem

Panduan Lengkap Membuat Situs Web Matematika

Situs web matematika merupakan cara sempurna untuk membantu orang lain, menyediakan tempat bagi pelajar berbagi catatan dan belajar, serta memungkinkan siapa pun belajar atau memperbarui keterampilan matematika. Situs ini dapat sesederhana atau sesulit apa pun yang Anda inginkan. Pastikan Anda menyi

Panduan Membuat Situs Web Politik

Panduan Membuat Situs Web Politik Ingin menjadi komentator politik atau menyuarakan kritik terhadap keputusan dewan kota? Dengan internet, siapa saja dapat menjadi jurnalis warga, menulis opini, atau sekadar mengutarakan frustrasi. Anda tidak perlu gelar ilmu politik atau menjadi kolumnis berserikat

Internet