kode marquee

Marquee adalah tag HTML yang berguna untuk membuat tampilan yang bergerak vertical atau horizontal. Dengan menggunakan tag Marquee ini kamu dapat menghasilkan suatu tampilan yang cukup interaktif dikarenakan tag ini menghasilkan tampilan yang bergerak sehingga akan sangat menarik perhatian para pengunjung. Tag ini akan sangat baik bila digunakan untuk menampilkan suatu pengumuman-pengumuman pendek seperti yang kita lihat di televisi. Penggunaannya cukup simple cukup gunakan tag berikut :

view plaincopy to clipboardprint?

1. <marquee> Isi yang ingin kamu tampilkan taruh disini </marquee>  

<marquee> Isi yang ingin kamu tampilkan taruh disini </marquee>

Maka tampilan dari tag diatas akan seperti berikut :
Isi yang ingin kamu tampilkan taruh disini Yang dapat digerakkan bukan hanya teks tapi gambar atau bahkan video pun juga bisa menggunakan tag Marquee ini :

view plaincopy to clipboardprint?

1. <marquee> ini adalah logo klikbelajar.com <img src="http://klikbelajar.com/logo.jpg"> </marquee>  

<marquee> ini adalah logo klikbelajar.com  </marquee>

Tampilannya akan seperti berikut :
ini adalah logo klikbelajar.com

WIDTH and HEIGHT

Atribut ini digunakan untuk menentukan ukuran dari tampilan untuk tag MARQUEE
Contoh :

view plaincopy to clipboardprint?

1. <marquee width=200 height=50> Klikbelajar.com </marquee>  

<marquee width=200 height=50> Klikbelajar.com </marquee>

Akan menghasilkan
Klikbelajar.com
Sedangkan,

view plaincopy to clipboardprint?

1. <marquee width=500 height=200> Klikbelajar.com </marquee>  

<marquee width=500 height=200> Klikbelajar.com </marquee>

menghasilkan,
Klikbelajar.com

DIRECTION

Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah.
Contoh :

view plaincopy to clipboardprint?

1. <marquee direction=left> Klikbelajar.com </marquee>  
2. <marquee direction=right> Klikbelajar.com </marquee>  
3. <marquee direction=up> Klikbelajar.com </marquee>  
4. <marquee direction=down> Klikbelajar.com </marquee>  

<marquee direction=left> Klikbelajar.com </marquee>
<marquee direction=right> Klikbelajar.com </marquee>
<marquee direction=up> Klikbelajar.com </marquee>
<marquee direction=down> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com
Klikbelajar.com
Klikbelajar.com
Klikbelajar.com
Kalian dapat mencoba atribut-atribut diatas di papan tulis yang kami sediakan di bagian bawah halaman.

BEHAVIOUR

Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan adalah perilaku geraknya.
Contoh :
BEHAVIOR = SCROLL
Dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan.

view plaincopy to clipboardprint?

1. <marquee behaviour=scroll> Klikbelajar.com </marquee>  

<marquee behaviour=scroll> Klikbelajar.com </marquee>

Akan menghasilkan,
Klikbelajar.com

BEHAVIOR = SLIDE Dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya.

view plaincopy to clipboardprint?

1. <marquee behaviour=slide> Klikbelajar.com </marquee>  

<marquee behaviour=slide> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com

BEHAVIOR = ALTERNATE
Dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik.

view plaincopy to clipboardprint?

1. <marquee behaviour=alternate> Klikbelajar.com </marquee>  

<marquee behaviour=alternate> Klikbelajar.com </marquee>

Hasilnya akan seperti ini,
Klikbelajar.com

Kalian dapat mencoba atribut-atribut diatas di papan tulis yang kami sediakan di bagian bawah halaman.

SCROLL DELAY

Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan. Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik.
Contoh :
Normal

view plaincopy to clipboardprint?

1. <marquee> Klikbelajar.com </marquee>  

<marquee> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com

Delay 500 mili detik

view plaincopy to clipboardprint?

1. <marquee scrolldelay=500> Klikbelajar.com </marquee>  

<marquee scrolldelay=500> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com

Delay 1000 mili detik

view plaincopy to clipboardprint?

1. <marquee scrolldelay=1000> Klikbelajar.com </marquee>  

<marquee scrolldelay=1000> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com

Kalian dapat mencoba atribut-atribut diatas di papan tulis yang kami sediakan di bagian bawah halaman.

SCROLL AMOUNT

Meskipun kelihatannya hampir sama dengan atribut sebelumnya SCROLLDELAY, SCROLLAMOUNT memiliki sedikit perbedaan dengan atribut tersebut. Jika SCROLLDELAY berfungsi untuk menentukan jeda waktu antara tiap gerakan, maka atribut SCROLLAMOUNT berfungsi untuk menentukan jauhnya lompatan untuk setiap gerakan.
Contoh berikut merupakan perbedaan antara marquee normal dengan marquee yang mempunyai nilai SCROLLAMOUNT 20 mili detik dan 70 mili detik:

view plaincopy to clipboardprint?

1. <marquee> Klikbelajar.com </marquee>  
2. <marquee scrollamount=20> Klikbelajar.com </marquee>  
3. <marquee scrollamount=70> Klikbelajar.com </marquee>  

<marquee> Klikbelajar.com </marquee>
<marquee scrollamount=20> Klikbelajar.com </marquee>
<marquee scrollamount=70> Klikbelajar.com </marquee>

Perbedaan tersebut akan terlihat seperti berikut ini,
Klikbelajar.com
Klikbelajar.com
Klikbelajar.com

Kalian dapat mencoba atribut-atribut diatas di papan tulis yang kami sediakan di bagian bawah halaman.

BGCOLOR

Penggunaan atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan memiliki warna. Prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag TABLE yaitu memberikan warna latar.
Contoh :

view plaincopy to clipboardprint?

1. <marquee bgcolor=yellow> Klikbelajar.com </marquee>  

<marquee bgcolor=yellow> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com
Tag diatas akan menghasilkan tulisan bergerak yang memiliki warna latar berwarna kuning.

HSPACE

Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan.
Contoh :

view plaincopy to clipboardprint?

1. Halo kawan <marquee width=25% bgcolor=yellow>  
2. Klikbelajar.com <br />  
3. Tempat dimana kamu bisa belajar segalanya !!  
4. </marquee> Halo kawan..  

Halo kawan <marquee width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..

Kode diatas mempunyai nilai HSPACE default yaitu 0 sehingga tidak ada jarak dikiri dan kanan marquee seperti terlihat dibawah ini,
Halo kawan Klikbelajar.com
Tampat dimana kamu bisa belajar segalanya !! Halo kawan..

Sedangkan kode berikut ini mempunyai nilai HSPACE sebesar 70.

view plaincopy to clipboardprint?

1. Halo kawan <marquee hspace=70 width=25% bgcolor=yellow>  
2. Klikbelajar.com <br />  
3. Tempat dimana kamu bisa belajar segalanya !!  
4. </marquee> Halo kawan..  

Halo kawan <marquee hspace=70 width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..

Hasilnya,
Halo kawan Klikbelajar.com
Tampat dimana kamu bisa belajar segalanya !! Halo kawan..

VSPACE

Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan.
Contoh :

view plaincopy to clipboardprint?

1. Halo kawan <br /><marquee width=25% bgcolor=yellow>  
2. Klikbelajar.com <br />  
3. Tempat dimana kamu bisa belajar segalanya !!  
4. </marquee><br />Halo kawan..  

Halo kawan <br /><marquee width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br />Halo kawan..

Kode diatas mempunyai nilai HSPACE default yaitu 0. Hasilnya terlihat seperti berikut,
Halo kawan
Klikbelajar.com
Halo kawan..

Sedangkan dibawah ini kode untuk memberikan jarak sebesar 50 px diatas dan dibawah marquee.

view plaincopy to clipboardprint?

1. Halo kawan <br /><marquee vspace=50 width=25% bgcolor=yellow>  
2. Klikbelajar.com <br />  
3. Tempat dimana kamu bisa belajar segalanya !!  
4. </marquee><br />Halo kawan..  

Halo kawan <br /><marquee vspace=50 width=25% bgcolor=yellow>
Klikbelajar.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br />Halo kawan..

Hasilnya,
Halo kawan
Klikbelajar.com
Halo kawan..

LOOP

Pengulangan dari tampilan bergerak dengan tag MARQUEE dapat diatur jumlahnya dengan atribut ini. Jika kamu tidak mengatur jumlah pengulangan dengan atribut loop maka secara otomatis akan diartikan bahwa tampilan itu akan bergerak terus menerus tanpa batas.
Contoh penggunaan :

view plaincopy to clipboardprint?

1. <marquee loop=2> Klikbelajar.com </marquee>  

<marquee loop=2> Klikbelajar.com </marquee>

Hasilnya,
Klikbelajar.com
Sedangkan,
Klikbelajar.com

Tag diatas mengkombinasikan atribut LOOP dengan atribut BEHAVIOR sehingga akan menghasilkan pengulangan sebanyak empat kali lalu setelah itu teks tersebut akan berhenti pada titik akhir.