Anda tak jarang menonton desain teks alias foto yang berjalan, berputar, alias bergeser-geser menampilkan cuplikan teks alias foto tertentu di halaman web? Teknik ini dapat dilakukan dengan mudah memakai kode HTML biasa, yaitu memakai tag <marquee>. Untuk menambah efek tampilan, marquee juga dapat disisipi kode CSS serta JavaScript. Ingin mencobanya di situs alias blog Anda?
Tag marquee sebetulnya bukan tag standar HTML, jadi ada kemungkinan tak bertujuan dengan baik di browser tertentu. Namun jangan terlalu khawatir, browser-browser terkenal dapat menjalankannya dengan baik. Prinsipnya, kode dasar marquee (tanpa pengaturan tambahan) yang butuh Anda buat merupakan sebagai berikut:
<marquee>Ini baris teks, kode link, alias kode foto yang akan ditampilkan</marquee>
Penjelasan:
- Awali dengan tag pembuka <marquee> serta akhiri dengan tag penutup </marquee>.
- Tempatkan teks, kode HTML link, alias kode HTML foto di antara tag pembuka serta penutup marquee.
Selain contoh kode marquee dasar di atas, Anda bisa mengatur desain marquee sesuai dengan harapan Anda. Caranya dengan menambahkan atribut tertentu di dalam tag marquee. Berikut ini susunan kodenya:
<marquee behavior="tindakan" direction="arah" scrollamount="angka">Ini baris teks, kode link, alias kode foto yang akan ditampilkan</marquee>
Penjelasan:
- Gunakan behavior untuk melakukan perbuatan tertentu, nilainya yaitu: scroll (terus berputar), slide (berputar sekali), alternate (bolak-balik)
- Gunakan direction untuk menentukan arah pergerakannya, nilainya yaitu: left (ke kiri), right (ke kanan), up (ke atas), down (ke bawah).
- Gunakan scrollamount untuk menetapkan kecepatannya, nilainya yaitu: angka, dalam faktor ini angka 1 paling lambat.
Selain memakai pengaturan via atribut behavior, direction, serta scrollamount, Anda juga dapat mencoba menambahkan atribut align (perataan margin), bgcolor (warna latar), width (lebar marquee), loop (membatasi jumlah perulangan), serta scrolldelay (mengatur waktu jeda). Selain itu, tag marquee juga dapat Anda sisipi style (CSS) untuk mempercantik tampilan. Bahkan, Anda dapat menambahkan kode JavaScript di dalamnya. Contoh marquee dengan atribut lainnya:
<marquee behavior="alternate" scrollamount="5" bgcolor="orange" width="50px">Teks berlatar oranye dengan lebar 50 piksel.</marquee>