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 :
<marquee> Isi yang ingin kamu tampilkan taruh disini </marquee>
Maka tampilan dari tag diatas akan seperti berikut :
Yang dapat digerakkan bukan hanya teks tapi gambar atau bahkan video pun juga bisa menggunakan tag Marquee ini :
<marquee> ini adalah logo bunnoichi.blogspot.com<img src="http://bunnoichi.blogspot.com/logo.jpg"> </marquee>
Tampilannya akan seperti berikut :
WIDTH and HEIGHT
Atribut ini digunakan untuk menentukan ukuran dari tampilan untuk tag MARQUEE
Contoh :
Contoh :
<marquee width=200 height=50> bunnoichi.blogspot.com</marquee>
Akan menghasilkan
Sedangkan,
<marquee width=200 height=200> bunnoichi.blogspot.com</marquee>
menghasilkan
DIRECTION
Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah.
Contoh :
<marquee direction=left> bunnoichi.blogspot.com </marquee>
<marquee direction=right> bunnoichi.blogspot.com </marquee>
<marquee direction=up> bunnoichi.blogspot.com </marquee>
<marquee direction=down> bunnoichi.blogspot.com </marquee>
Hasilnya,
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.
<marquee behaviour=scroll> bunnoichi.blogspot.com </marquee>
Contoh :
BEHAVIOR = SCROLL
Dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan.
<marquee behaviour=scroll> bunnoichi.blogspot.com </marquee>
Akan menghasilkan,
Dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya.
<marquee behaviour=slide> bunnoichi.blogspot.com </marquee>
Hasilnya,
Dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik.
<marquee behaviour=alternative> bunnoichi.blogspot.com </marquee>
Hasilnya akan seperti ini,
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
<marquee> bunnoichi.blogspot.com </marquee>
Hasilnya,
Delay 500 mili detik
<marquee scrolldelay=500> bunnoichi.blogspot.com </marquee>
Hasilnya,
Delay 1000 mili detik
<marquee scrolldelay=1000> bunnoichi.blogspot.com </marquee>
hasilnya,
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:
Contoh berikut merupakan perbedaan antara marquee normal dengan marquee yang mempunyai nilai SCROLLAMOUNT 20 mili detik dan 70 mili detik:
<marquee> bunnoichi.blogspot.com </marquee>
<marquee scrollamount=20> bunnoichi.blogspot.com </marquee>
<marquee scrollamount=70> bunnoichi.blogspot.com </marquee>
hasilnya,
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 :
<marquee bgcolor=purlpe> bunnoichi.blogspot.com </marquee>
Hasilnya,
Tag diatas akan menghasilkan tulisan bergerak yang memiliki warna latar berwarna ungu.
HSPACE
Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan.
Contoh :
Halo kawan <marquee width=25% bgcolor=purple>
bunnoichi.blogspot.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 Halo kawan..
Sedangkan kode berikut ini mempunyai nilai HSPACE sebesar 70.
Halo kawan <marquee hspace=70 width=25% bgcolor=purple>
bunnoichi.blogspot.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
Hasilnya,
Halo kawan Halo kawan..
VSPACE
Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan.
Contoh :
Contoh :
Halo kawan <br /><marquee width=25% bgcolor=purple>
bunnoichi.blogspot.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 kawanHalo kawan..
Sedangkan dibawah ini kode untuk memberikan jarak sebesar 50 px diatas dan dibawah marquee.
Halo kawan <br /><marquee vspace=50 width=25% bgcolor=purple>
bunnoichi.blogspot.com <br />
Tempat dimana kamu bisa belajar segalanya !!
</marquee><br />Halo kawan..
Hasilnya,
Halo kawan
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 :
Contoh penggunaan :
<marquee loop="2"> bunnoichi.blogspot.com </marquee>
Hasilnya,
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.
Artikel Terkait:
0 Comments
