Penggunakan TAG Pada HTML 12 - Membuat Text Berjalan Dengan Marquee

Cara membuat marquee (text bergerak). Mungkin anda pernah melihat sebuah efek text bergerak di salah satu web atau blog yang pernah anda kunjungi. Efek text bergerak tersebut dalam program HTML dinamakan marquee. Berikut adalah sedikit penjelasan tentang marquee dan bagaimana cara membuat marquee.

Apa itu Marquee

Marquee merupakan tag non-standard element HTML yang menyebabkan suatu text / gambar bergerak ke atas, bawah, kanan, atau kiri secara otomatis. Untuk membuat marquee, caranya cukup simple dan mudah sekali. Kita hanya perlu menyisipkan kode HTML untuk membuat marquee, diantara text / gambar yang akan kita buat bergerak. Berikut kode dasar HTML marquee :

 
<marquee>Text atau gambar disini</marquee>

Marquee Attribute

Untuk lebih memperjelas dalam membuat marquee, berikut beberapa attribute yang sering digunakan dalam tag marquee :

WIDTH = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :

<marquee width="50%">Text atau Gambar Disini</marquee>

Jika attribute width tidak digunakan, maka secara default width yang digunakan yaitu 100%. Misalnya marquee disimpan di bagian sidebar yang memiliki width 300px, maka width marquee pun memiliki width 300px.

HEIGHT = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :

<marquee height="50px">Text atau Gambar Disini</marquee>

Jika attribute height tidak digunakan, maka secara default height yang digunakan sesuai dengan ukuran font (font-size).

DIRECTION = menentukan arah pergerakan marquee, value yang digunakan yaitu left, right, up, dan down. Contoh :

<marquee direction="left">Text atau Gambar Disini</marquee>    
<marquee direction="right">Text atau Gambar Disini</marquee>    
<marquee direction="up">Text atau Gambar Disini</marquee>    
<marquee direction="down">Text atau Gambar Disini</marquee>

Jika attribute direction tidak digunakan, maka secara default direction yang digunakan adalah left. Khusus untuk direction up dan down, sebaiknya tentukan juga tinggi dari area marquee tsb, yaitu dengan menambahkan attribute height. Hal ini dimaksudkan untuk mengatasi value height secara default untuk attribute direction up dan down yaitu sekitar 150px – 200px

BEHAVIOR = menentukan perilaku pergerakan marquee, value yang digunakan yaitu scroll, slide dan alternate. Contoh :

<marquee behavior="scroll">Text atau Gambar Disini</marquee>
<marquee behavior="slide">Text atau Gambar Disini</marquee>
<marquee behavior="alternate">Text atau Gambar Disini</marquee>

Jika attribute behavior tidak digunakan, maka secara default value yang digunakan adalah scroll.

SCROLLAMOUNT = menentukan kecepatan pergerakan dalam piksel. Value yang digunakan berupa angka (integer). Contoh :

<marquee>Text atau Gambar Disini</marquee> tanpa scrollamount
<marquee scrollamount="15">Text atau Gambar Disini</marquee>
<marquee scrollamount="50">Text atau Gambar Disini</marquee>

Jika attribute scrollamount tidak digunakan, maka secara default akan menggunakan value 6.

SCROLLDELAY = menentukan kecepatan pergerakan marquee dalam milisecond. Value yang digunakan berupa angka (integer). Contoh:

<marquee>Text atau Gambar Disini</marquee> tanpa scrolldelay
<marquee scrolldelay="300">Text atau Gambar Disini</marquee>
<marquee scrollamount="600">Text atau Gambar Disini</marquee>

Jika attribute scrolldelay tidak digunakan, maka secara default akan menggunakan value 85.

BGCOLOR = menentukan warna background dari marquee. Value yang digunakan berupa nilai warna dalam hexa atau text.

<marquee>Text atau Gambar Disini</marquee> tanpa bgcolor
<marquee bgcolor="green">Text atau Gambar Disini</marquee>

Secara default, value dari attribute bgcolor yaitu none (tanpa warna).

LOOP = menentukan jumlah pengulangan marquee. Secara default jika attribute ini tidak digunakan, maka marquee akan melakukan pengulangan secara terus menerus.


<marquee loop="2">Text atau Gambar Disini</marquee>

salah satu masalah yang sering dialami ketika menggunakan attribute loop yaitu text / gambar yang ada di dalam marquee akan menghilang setelah pengulangan selesai (seperti contoh diatas). Untuk mengatasi hal ini, jangan lupa setiap kali menggunakan attribute loop sebaiknya sertakan juga attribute behavior dengan value slide atau alternate. Contoh :


<marquee loop="2" behavior="alternate">Text atau Gambar Disini</marquee>
<marquee loop="2" behavior="slide">Text atau Gambar Disini</marquee>

HSPACE dan VSPACE = menentukan spasi dari kiri dan kanan (hspace) dan spasi dari atas dan bawah (vspace). Value dalam angka (integer). Contoh :


<marquee hspace="10" bgcolor="yellow">Ini contoh hspace</marquee>
<marquee vspace="30" bgcolor="yellow">ini contoh vspace</marquee>

Tutorials Perancangan Website