Tutorial Perintah HTML untuk Teks Berjalan dan Contohnya
Irhan Hisyam Dwi Nugroho
•
28 May 2025
•
83
Warga Bimbingan, pernah lihat teks yang bergerak di web dan penasaran perintah html untuk teks berjalan? MinDi siap bantu dengan tutorial mudah pakai HTML.
Kamu akan belajar tag <marquee> dan contoh variasi teks berjalan yang bisa langsung dicoba. Ini cara cepat buat bikin tampilan web jadi lebih menarik.
Yuk, simak langkah dan contohnya supaya kamu bisa praktek sendiri dengan mudah!
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Perintah HTML untuk Membuat Teks Berjalan
Perintah html untuk teks berjalan di halaman web bisa menarik perhatian pengunjung dan memberikan efek dinamis pada konten.
Dalam HTML, cara paling sederhana untuk membuat teks bergerak adalah dengan menggunakan tag <marquee>.
Tag ini memungkinkan teks bergerak secara otomatis dari satu sisi layar ke sisi lain, dengan berbagai opsi pengaturan arah, kecepatan, dan perilaku.
Sintaks Dasar:
<marquee> Teks yang ingin berjalan </marquee> |
Contoh Penempatan Sintaks di HTML
<!DOCTYPE html> <html> <head> <title>Contoh Teks Berjalan</title> </head> <body> <h1>Selamat Datang di Website MinDi</h1> <marquee>Ini adalah teks berjalan menggunakan tag marquee!</marquee> <p>Semoga kamu suka contoh ini.</p> </body> </html> |
Langkah-Langkah Membuat Teks Berjalan
- Buka file HTML menggunakan teks editor pilihan kamu.
- Letakkan tag <marquee> di depan dan di belakang teks yang ingin kamu buat berjalan.
- Gunakan atribut direction untuk mengatur arah gerakan, seperti left, right, up, atau down.
- Tambahkan atribut behavior untuk menentukan gaya pergerakan, misalnya scroll (berjalan terus) atau alternate (memantul bolak-balik).
- Sesuaikan tampilan dengan menambahkan atribut style seperti warna latar belakang, border, dan lain-lain agar teks lebih menarik.
Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
Contoh Implementasi Teks Berjalan
Sumber: Canva
Warga Bimbingan, setelah paham dasar tag <marquee>, MinDi bakal kasih contoh berbagai cara membuat perintah html untuk teks berjalan.
Setiap contoh lengkap dengan kode dan penjelasan supaya kamu mudah praktek. Yuk, langsung cek!
1. Teks Berjalan Biasa
<marquee>Ini adalah teks berjalan standar.</marquee> |
Kode ini membuat teks bergerak secara otomatis dari kanan ke kiri. Ini adalah cara paling sederhana untuk membuat teks berjalan di halaman web. Cocok digunakan untuk menarik perhatian tanpa perlu pengaturan tambahan.
Baca juga : Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
2. Teks Berjalan Memantul (Bounce)
<marquee behavior="alternate">Teks ini memantul bolak-balik.</marquee> |
Atribut behavior="alternate" membuat teks bergerak maju mundur, seperti memantul. Efek ini memberikan variasi dan bisa membuat tampilan web lebih dinamis. Biasanya digunakan untuk menyorot informasi penting secara bergantian.
3. Teks Berhenti Saat Kursor Hover
<marquee behavior="scroll" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"> Teks ini berhenti ketika kursor diarahkan. </marquee> |
Kode ini memungkinkan teks berjalan berhenti saat mouse diarahkan di atasnya. Saat mouse keluar, teks berjalan kembali. Fitur ini memudahkan pembaca untuk berhenti sejenak dan membaca teks dengan lebih jelas.
Baca juga : Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula
4. Teks Berjalan dengan Kecepatan Lambat
<marquee scrollamount="2">Teks ini berjalan dengan kecepatan lambat.</marquee> |
Atribut scrollamount mengatur kecepatan teks berjalan, dengan angka kecil berarti lebih lambat.
Kecepatan lambat cocok untuk teks yang ingin dibaca dengan santai. Ini membantu mengurangi efek melelahkan saat membaca teks yang bergerak.
5. Teks Berjalan dengan Latar Belakang Warna
<marquee style="background-color: yellow; color: black;"> Teks ini punya latar belakang kuning. </marquee> |
Menambahkan style CSS membuat teks berjalan lebih menarik secara visual. Latar belakang warna kontras membantu teks lebih mudah dibaca. Kamu bisa mengganti warna sesuai tema web atau kebutuhan.
6. Mengatur Arah Teks Berjalan
<marquee direction="right">Teks ini berjalan dari kiri ke kanan.</marquee> |
Atribut direction="right" mengubah arah pergerakan teks dari kiri ke kanan. Secara default, teks bergerak dari kanan ke kiri. Pengaturan ini memberikan variasi sesuai desain halaman web yang diinginkan.
Baca juga : Cara Membuat Website dengan HTML dan CSS Langkah Mudah
Pengen Jadi Developer Web Profesional?
Setelah belajar tutorial perintah HTML untuk teks berjalan dan contohnya, kini saatnya kamu mengasah skill coding lebih dalam!
Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan belajar HTML, CSS, JavaScript, dan teknologi web modern lainnya dengan kurikulum praktis dan mentor berpengalaman.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang karier di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu jadi Web Developer handal! #BimbingSampeJadi!
Referensi
- How to move a text in HTML ? [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
