Dipublikasi pada tanggal 20 Mei 2026
Kode HTML Tulisan Berjalan dan Berwarna: Contoh & Cara Membuatnya
Saat mulai belajar HTML, banyak pemula ingin mencoba membuat tampilan website yang lebih menarik, salah satunya dengan membuat tulisan berjalan dan berwarna.
Efek tulisan berjalan sering digunakan untuk:
- Teks sambutan
- Pengumuman
- Banner website
- Promo
- Heading animasi
- Tampilan website sederhana
Pada artikel ini, kamu akan belajar:
- Kode HTML tulisan berjalan dan berwarna
- Cara membuat teks berjalan di HTML
- Cara mengubah warna tulisan HTML
- Cara mengatur kecepatan tulisan berjalan
- Cara membuat animasi teks modern menggunakan CSS
Artikel ini cocok untuk pemula yang baru belajar HTML dan CSS.
Apa Itu Tulisan Berjalan di HTML?
Tulisan berjalan di HTML adalah teks yang bergerak secara otomatis pada halaman website.
Dulu jika menggunakan HTML 3 atau HTML 4, efek ini biasanya dibuat menggunakan tag HTML seperti ini:
<marquee>Tulisan Berjalan</marquee>Tag <marquee> akan membuat teks bergerak secara otomatis:
- Ke kiri
- Ke kanan
- Ke atas
- atau Ke bawah
Walaupun sederhana, efek ini masih sering digunakan pemula untuk belajar dasar HTML.
Kode HTML Tulisan Berjalan dan Berwarna
Berikut contoh kode HTML tulisan berjalan dan berwarna yang paling sederhana.
<marquee>
<font color="red">
Selamat Datang di Easy Coding
</font>
</marquee>Hasil:
- Tulisan akan berjalan
- Warna tulisan menjadi merah
Penjelasan Kode HTML
Berikut penjelasan dari kode di atas.
Tag <marquee>
Digunakan untuk membuat teks bergerak otomatis.
Tag <font color="">
Digunakan untuk mengubah warna tulisan.
Contoh:
<font color="blue">Teks Biru</font>
Cara Mengubah Warna Tulisan HTML
Kamu bisa mengganti warna tulisan sesuai kebutuhan.
Contoh Warna Dasar
<font color="blue">Biru</font>
<font color="green">Hijau</font>
<font color="purple">Ungu</font>
Menggunakan Kode HEX Color
Kamu juga bisa menggunakan kode warna HEX.
<font color="#ff0000">Merah</font>
<font color="#00ff00">Hijau</font>
<font color="#0000ff">Biru</font>Cara ini lebih fleksibel untuk desain website modern.
Cara Mengatur Arah Tulisan Berjalan
Tag <marquee> memiliki atribut direction untuk mengatur arah gerakan teks.
Bergerak ke Kiri
<marquee direction="left">
Tulisan Bergerak ke Kiri
</marquee>
Bergerak ke Kanan
<marquee direction="right">
Tulisan Bergerak ke Kanan
</marquee>
Bergerak ke Atas
<marquee direction="up">
Tulisan Bergerak ke Atas
</marquee>
Bergerak ke Bawah
<marquee direction="down">
Tulisan Bergerak ke Bawah
</marquee>
Cara Mengatur Kecepatan Tulisan Berjalan
Kamu bisa mengatur kecepatan animasi menggunakan atribut scrollamount.
Contoh
<marquee scrollamount="15">
Tulisan Lebih Cepat
</marquee>Semakin besar nilainya, maka semakin cepat gerakan teks
Cara Membuat Tulisan Berjalan dengan Background Warna
Kamu juga bisa menambahkan background color agar tampilan lebih menarik.
<marquee bgcolor="black">
<font color="white">
Selamat Belajar HTML
</font>
</marquee>Hasil:
- Background hitam
- Tulisan putih berjalan
Contoh Kode HTML Tulisan Berjalan dan Berwarna Lengkap
Berikut contoh lengkap yang bisa langsung dicoba.
<!DOCTYPE html>
<html>
<head>
<title>Tulisan Berjalan</title>
</head>
<body>
<marquee direction="left" scrollamount="10" bgcolor="black">
<font color="yellow">
Selamat Datang di Easy Coding
</font>
</marquee>
</body>
</html>
Kenapa Tag <marquee> Sudah Jarang Digunakan?
Walaupun masih bisa digunakan di beberapa browser, tag <marquee> sebenarnya sudah deprecated.
Artinya:
- Tidak direkomendasikan lagi untuk website modern
- Tidak termasuk standar HTML terbaru
Karena itu, developer modern biasanya menggunakan:
- CSS Animation
- JavaScript Animation
untuk membuat efek tulisan bergerak.
Cara Modern Membuat Tulisan Berjalan Menggunakan CSS
Berikut contoh animasi teks berjalan menggunakan CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: berjalan 10s linear infinite;
color: red;
font-size: 24px;
}
@keyframes berjalan {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="marquee">
Selamat Datang di Easy Coding
</div>
</body>
</html>Keuntungan menggunakan CSS:
- Lebih modern
- Lebih fleksibel
- Lebih responsive
- Lebih profesional
Perbedaan Marquee dan CSS Animation
Berikut adalah beberapa perbedaan ketika menggunakan <marquee> dengan CSS Animation:
| Marquee | CSS Animation |
|---|---|
| Cara lama | Cara modern |
| Fitur terbatas | Lebih fleksibel |
| Deprecated | Direkomendasikan |
| Sulit dikustomisasi | Mudah dikustomisasi |
Jika ingin menjadi Frontend Developer modern, sebaiknya mulai belajar animasi menggunakan CSS.
Jika Kamu Ingin Belajar HTML dan CSS dari Nol
Jika kamu ingin belajar HTML, CSS, JavaScript, hingga membuat website modern untuk pemula, kamu bisa mengikuti kelas berikut.
Kelas ini juga di lengkapi dengan:
- Projek Akhir
- Optimasi SEO
- Deploy Website
- Sharing Pengalaman Kerja Remote 🔥
Tips Membuat Animasi Tulisan yang Bagus
Beberapa tips dalam membuat animasi tulisan yang bagus:
Jangan Terlalu Cepat
Animasi terlalu cepat membuat teks sulit dibaca.
Gunakan Warna yang Kontras
Contoh:
- Putih di background Hitam
- Hitam di background Putih
Hindari Terlalu Banyak Animasi
Terlalu banyak efek bergerak membuat website terlihat kurang profesional.
Gunakan CSS untuk Website Modern
CSS Animation lebih direkomendasikan dibanding tag <marquee>.
Kesalahan Pemula Saat Membuat Tulisan Berjalan
Beberapa kesalahan pemula pada saat membuat tulisan berjalan:
Salah Menutup Tag HTML
Pastikan semua tag ditutup dengan benar.
Menggunakan Warna yang Sulit Dibaca
Hindari kombinasi warna yang terlalu terang atau terlalu gelap.
Animasi Terlalu Cepat
Gunakan kecepatan yang nyaman untuk dibaca.
Tidak Menggunakan CSS Modern
Mulailah belajar CSS Animation agar skill frontend lebih berkembang.
Kesimpulan
Kode HTML tulisan berjalan dan berwarna dapat dibuat menggunakan tag <marquee> dan pengaturan warna tulisan HTML.
Namun untuk website modern, penggunaan CSS Animation jauh lebih direkomendasikan karena:
- Lebih fleksibel
- Lebih profesional
- Lebih responsive
- Sesuai standar web modern
Jika kamu masih pemula, mempelajari efek seperti ini adalah langkah bagus untuk memahami dasar HTML dan CSS sebelum lanjut ke frontend development yang lebih kompleks.
