Cara Membuat Tulisan Berjalan Di HTML

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

cara membuat tulisan berjalan

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 :

TEKS BERJALAN Teks Ini Berjalan

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 :

TEKS BERJALAN Teks Ini Berjalan Ke Kanan Teks Ini Berjalan Ke Kiri

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 :

TEKS BERJALAN Teks Ini Berjalan Memantul

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 :

TEKS BERJALAN Teks Ini Berjalan Lalu Stop

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 :

TEKS BERJALAN Teks Ini Berjalan Dengan Lambat

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 :

TEKS BERJALAN Teks Ini Berjalan Dengan Background Kuning

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 :

TEKS BERJALAN Teks Ini Berjalan Ke Atas Teks Ini Berjalan Ke Bawah

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 :

TEKS BERJALAN Teks Ini Berjalan Berwarna Biru Teks Ini Berjalan Ke Bawah Berwarna Biru

Jika kalian ingin membaca artikel inspiratif lainnya di blog ini kalian dapat mengunjungi link berikut : kabelkusutblog.com