🎯 1. Pendahuluan
Teks berjalan (scrolling text) adalah teks yang bergerak secara horizontal atau vertikal pada halaman web. Efek ini sering digunakan untuk:
- Pengumuman
- Banner informasi
- Running text berita
- Highlight pesan penting
Pada HTML klasik, teks berjalan dibuat menggunakan tag:
👉 <marquee> (meskipun sekarang sudah deprecated / tidak direkomendasikan)
🖼️ Ilustrasi Teks Berjalan
8
📚 2. Cara Membuat Teks Berjalan dengan HTML (Tag <marquee>)
🔹 Sintaks Dasar
<marquee>Teks Anda di sini</marquee>
🔹 Contoh Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Teks Berjalan</title>
</head>
<body><marquee>Selamat Datang di Website Saya!</marquee></body>
</html>
📌 Hasil:
Teks akan bergerak dari kanan ke kiri secara otomatis.
⚙️ 3. Atribut Penting pada <marquee>
🔸 a. Direction (arah gerakan)
<marquee direction="right">Teks ke kanan</marquee>
<marquee direction="up">Teks ke atas</marquee>
<marquee direction="down">Teks ke bawah</marquee>
🔸 b. Behavior (perilaku gerakan)
<marquee behavior="scroll">Default (terus berjalan)</marquee>
<marquee behavior="slide">Berhenti di akhir</marquee>
<marquee behavior="alternate">Bolak-balik</marquee>
🔸 c. Speed (kecepatan)
<marquee scrollamount="10">Cepat</marquee>
<marquee scrollamount="2">Lambat</marquee>
🔸 d. Loop (pengulangan)
<marquee loop="3">Hanya 3 kali</marquee>
🔸 e. Warna dan Style
<marquee style="color:red; font-size:20px;">
Teks Berwarna Merah
</marquee>
🧪 4. Contoh Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Contoh Marquee Lengkap</title>
</head>
<body><marquee direction="left" behavior="alternate" scrollamount="5" style="color:blue; font-size:24px;">
🎓 Selamat Datang di Kelas Pemrograman Web Dasar!
</marquee></body>
</html>
🎥 5. Video Pembelajaran
⚠️ 6. Kekurangan Tag <marquee>
Tag <marquee> memiliki beberapa kelemahan:
- ❌ Tidak termasuk standar HTML modern
- ❌ Tidak didukung penuh oleh semua browser
- ❌ Tidak fleksibel untuk desain profesional
👉 Oleh karena itu, disarankan menggunakan CSS atau JavaScript
🚀 7. Alternatif Modern: CSS Animation
🔹 Contoh Menggunakan CSS
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 10s linear infinite;
}@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body><div class="marquee">
<span>🌐 Belajar HTML Lebih Modern dan Profesional!</span>
</div></body>
</html>
📌 Keunggulan:
- ✔ Lebih fleksibel
- ✔ Standar modern
- ✔ Bisa dikombinasikan dengan desain UI/UX
🖼️ Ilustrasi CSS Animation
7
🧠 8. Latihan Mahasiswa
✏️ Latihan 1 (Dasar)
Buat teks berjalan:
- Arah ke kanan
- Warna hijau
- Kecepatan sedang
✏️ Latihan 2 (Menengah)
Buat teks:
- Bolak-balik
- Berhenti setelah 5 kali
- Ukuran font besar
✏️ Latihan 3 (Lanjutan)
Gunakan CSS Animation untuk membuat:
- Running text
- Bisa pause saat hover
📌 9. Tugas
Buat halaman web sederhana yang berisi:
- Header dengan teks berjalan
- Konten utama
- Footer dengan teks bergerak menggunakan CSS
🏁 10. Kesimpulan
- Tag
<marquee>mudah digunakan tapi sudah usang - CSS Animation adalah solusi modern
- Pemahaman ini penting untuk dasar animasi web
