Cara Membuat HTML Marquee (Text Bergerak)

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 dinamakanmarquee. 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>

Dari kode HTML dasar marquee tersebut, jika kita aplikasikan dalam web / blog, maka hasilnya menjadi seperti ini :

Text atau Gambar disini

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 :

Kode HTML Marquee	Hasil
<marquee width="50%">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 :

Kode HTML Marquee	Hasil
<marquee height="50px">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 :

Kode HTML Marquee	Hasil
<marquee direction="left">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee direction="right">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee direction="up">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee direction="down">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 (kalo ga salah  )

---

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

Kode HTML Marquee	Hasil
<marquee behavior="scroll">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee behavior="slide">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee behavior="alternate">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 :

Kode HTML Marquee	Hasil
<marquee>Text atau Gambar Disini</marquee> tanpa scrollamount	Text atau Gambar Disini
<marquee scrollamount="15">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee scrollamount="50">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 :

Kode HTML Marquee	Hasil
<marquee>Text atau Gambar Disini</marquee> tanpa scrolldelay	Text atau Gambar Disini
<marquee scrolldelay="300">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee scrollamount="600">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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.

Kode HTML Marquee	Hasil
<marquee>Text atau Gambar Disini</marquee> tanpa bgcolor	Text atau Gambar Disini
<marquee bgcolor="green">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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.

Kode HTML Marquee	Hasil
<marquee loop="2">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

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 :

Kode HTML Marquee	Hasil
<marquee loop="2" behavior="alternate">Text atau Gambar Disini</marquee>	Text atau Gambar Disini
<marquee loop="2" behavior="slide">Text atau Gambar Disini</marquee>	Text atau Gambar Disini

---

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

Kode HTML Marquee	Hasil
Paragraph <marquee hspace="10" bgcolor="yellow">Ini contoh hspace</marquee> Paragraph	Paragraph Text atau Gambar DisiniParagraph
Paragraph <marquee vspace="30" bgcolor="yellow">ini contoh vspace</marquee> Paragraph	Paragraph Text atau Gambar DisiniParagraph

---

Nah…demikianlah pembahasan lengkap tentang HTML Marquee berikut cara membuat marquee. Semoga bermanfaat dan silahkan dicoba  .

sumber : http://kangmizwar.com/blog/cara-membuat-html-marquee-text-bergerak.html

Posted in: seputar wordpress