Cara Membuat HTML

Marquee (Text Bergerak)

Monday, January 10th, 2011 · Tutorial HTML

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 marqueedan 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 membuatmarquee, diantara text / gambar yang akan kita buat
bergerak. Berikut kode dasar HTMLmarquee :

<marquee>Text atau gambar disini</marquee>

Dari kode HTML dasar marquee tersebut, jika kita aplikasikan

dalam web / blog, maka hasilnya menjadi seperti ini :

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%">Tex
t 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 :

Kode HTML Marquee Hasil

<marquee height="50px">Tex
t 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 :

Kode HTML Marquee Hasil

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

<marquee direction="right">Tex
t 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 (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>
 <marquee behavior="slide">Text
atau Gambar Disini</marquee>

<marquee behavior="alternate">Tex
t 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 :

Kode HTML Marquee Hasil

<marquee>Text atau Gambar

Disini</marquee> tanpa
scrollamount

<marquee scrollamount="15">Tex
t atau Gambar Disini</marquee>

<marquee scrollamount="50">Tex
t 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 :

Kode HTML Marquee Hasil

<marquee>Text atau Gambar

Disini</marquee> tanpa
scrolldelay

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

<marquee scrollamount="600">Tex
t 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.

Kode HTML Marquee Hasil

<marquee>Text atau Gambar

Disini</marquee> tanpa
bgcolor

<marquee bgcolor="green">Tex
t 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.

Kode HTML Marquee Hasil

<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 :

Kode HTML Marquee Hasil

<marquee loop="2"behavior="alternate">Te
xt 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 :
 Kode HTML Marquee Hasil

Paragraph
Paragraph
<marquee hspace="10"
bgcolor="yellow">Ini
contoh hspace</marquee>
Paragraph
Paragraph

Paragraph
Paragraph
<marquee vspace="30"
bgcolor="yellow">ini
contoh vspace</marquee>
Paragraph
Paragraph

Nah…demikianlah pembahasan lengkap tentang HTML Marquee

berikut cara membuat marquee. Semoga bermanfaat dan silahkan
dicoba .