Cara membuat tulisan berjalan di HTML menggunakan Marquee – Kalian pasti pernah melihat running teks atau teks berjalan di televisi (biasanya di bagian bawah televisi atau pada saat berita mulai), website dan banyak lainnya.
Dengan teks berjalan tersebut membuat pembaca menjadi antusias dan penasaran untuk membaca teks tersebut, dan banyak juga yang bertanya-tanya bagaimana seseorang membuat teks berjalan tersebut.
Baca juga : 10 Website belajar coding online secara gratis
Tidak jauh beda dengan televisi teks berjalan di website juga biasanya digunakan untuk informasi, pemberitahuan, dan hiburan. Pembuatannya tidaklah begitu sulit kalian dapat menggunakan elemen html untuk membuatnya.
Cara Membuat Tulisan Berjalan atau Teks Berjalan di HTML
Kalian dapat menggunakan elemen khusus dari HTML yang bisa disebut marquee atau <marquee>TEKS </marquee>, Untuk caranya kalian dapat melihatnya di bawah ini :
1. Teks Berjalan
Untuk membuat teks berjalan kalian dapat menggunakan kode HTML berikut :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee> Teks Ini Berjalan </marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
2. Teks Berjalan Ke Kanan dan Ke Kiri
Teks berjalan bisa dibuat ke kanan dan ke kiri menggunakan kode direction=”right” apabila ke kanan dan direction=”left” apabila ingin ke kiri , berikut ini caranya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee direction=”right”> Teks Ini Berjalan Ke Kanan </marquee>
<marquee direction=”left”> Teks Ini Berjalan Ke Kiri</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
3. Teks Berjalan Memantul
Teks berjalan berikut ini akan memantul apabila sudah sampai di ujung tampilan, menggunakan behavior=”alternate”, pantulannya ke kanan dan ke kiri, berikut ini kodenya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee behavior=”alternate”> Teks Ini Berjalan Memantul </marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
4. Teks Berjalan Stop
Teks berjalan berikut ini apabila sudah sampai ujung dia akan berhenti secara otomatis, menggunakan kode behavior=”slide”. Berikut ini kode lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee behavior=”slide”> Teks Ini Berjalan Lalu Stop</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
5. Teks Berjalan Dengan Lambat
Jika kalian tidak menyukai berjalan dengan cepat kalian dapat mengurangi kecepatannya dengan menggunakan kode scrolldelay=”kecepatan yang kalian inginkan” semakin tinggi angka yang kalian masukkan akan membuat teks makin lama berjalannya. Berikut ini kode lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee scrolldelay=”300″> Teks Ini Berjalan Dengan Lambat</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
6. Teks Berjalan dengan Backround berwarna
Kalian dapat mengkreasikan teks berjalan kalian dengan menggunakan kode bgcolor=”warna yang kalian ingin masukkan atau kode warna”. Berikut ini kode lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee bgcolor=”yellow”> Teks Ini Berjalan Dengan Background Kuning</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
7. Teks Berjalan Ke Atas atau Ke Bawah
Selain ke kanan atau ke kiri teks berjalan juga bisa ke atau atau ke bawah, dengan menggunakan kode direction=”up” untuk ke atas atau atau directoin=”down” untuk ke bawah. Berikut ini kode lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee direction=”up”> Teks Ini Berjalan Ke Atas</marquee>
<marquee direction=”down”> Teks Ini Berjalan Ke Bawah</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
8. Teks Berjalan Dengan Warna Teks yang Berbeda
Selain warna hitam di teksnya kalian juga dapat merubahanya dengan menggunakan kode style=”color : blue”. Berikut kode lengkapnya
<!DOCTYPE html>
<html>
<head>
<title> TEKS BERJALAN </title>
</head>
<body>
<marquee style=”color:blue”> Teks Ini Berjalan Ke Atas</marquee>
<marquee direction=”down” style=”color:blue” > Teks Ini Berjalan Ke Bawah</marquee>
<body>
<html>
Hasil setelah kalian menjalankan kode diatas :
Jika kalian ingin membaca artikel inspiratif lainnya di blog ini kalian dapat mengunjungi link berikut : kabelkusutblog.com
