Home > seputar wordpress > Cara Membuat HTML Marquee (Text Bergerak)

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


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

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

About these ads
Categories: seputar wordpress
  1. 07/01/2012 at 2:38 pm

    Thank you for being my personal tutor on this topic. We enjoyed the article a lot and most of all preferred the way in which you handled the aspect I regarded as controversial. You happen to be always very kind to readers much like me and assist me in my lifestyle. Thank you.

  1. No trackbacks yet.

leave a comment please..

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 94 other followers

%d bloggers like this: