HTML-MARQUEE, SEBUAH TUTORIAL (1)

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Pernah mendengar tentang Marquee? Ya Marquee... kode HTML yang membuat tulisan dapat bergerak.

Saya menulis artikel ini, sebagai follow up hasil diskusi saya dan teman-teman blogger mengenai HTML khususnya Marquee. Topik ini kami angkat ketika ada beberapa teman blogger yang masih baru, sama juga seperti saya, mengatakan bahwa mereka tidak terlalu suka dengan metode pengajaran beberapa tutorial yang pernah mereka jumpai, karena dalam tutorial tersebut, mereka hanya diberi kode-kode HTML dan tanpa ada penjelasan-penjelasan yang sebenarnya sangat penting dalam mengaplikasikan kode-kode Marquee tersebut. Sehingga mereka berkesimpulan bahwa metode tutorial semacam itu, tidak ada unsur 'mendidik'-nya.

Lucu juga ya teman-teman saya ini, sudah diberi tutorial, tidak bilang 'terima kasih', malah bilang 'metode tutorial yang tidak mendidik'.
Tapi saya bisa mengerti, karena memang ada beberapa teman, yang bisa dikatakan benar-benar 'buta' dengan yang namanya HTML, tidak dapat mengaplikasikan kode-kode Marquee yang diberikan atau tidak senang dengan tampilan Marquee yang sudah mereka aplikasikan ke blog mereka. Ya ini jelas karena ada perbedaan ukuran template blog yang digunakan.

Tapi sudahlah... Saya tidak akan panjang lebar lagi membicarakan kondisi teman-teman saya dangan kekesalan mereka.
Sekarang saya akan langsung membahas kode-kode HTML untuk Marquee...

Pasangan Tag dari Marquee adalah:

Jadi secara sederhana, untuk membuat teks bergerak menggunakan Marquee, cukup dengan kode berikut ini:

<Marquee>Marque default (standar), teks bergerak dari kanan ke kiri</Marquee>

Hasilnya:
Marque default (standar), teks bergerak dari kanan ke kiri

1. ARAH GERAKAN

Untuk mengatur arah gerakan pada Marquee, teman-teman tinggal menambahkan kode direction="".

Ada 4 arah gerakan pada Marquee, yaitu:

direction="left" (untuk gerakan dari kiri ke kanan)
direction="right" (untuk gerakan dari kanan ke kiri)
direction="up" (untuk gerakan dari bawah ke atas)
direction="down" (untuk gerakan dari atas ke bawah)

Misalnya teman-teman ingin mengubah gerakan teks yang secara default bergerak dari kanan ke kiri, menjadi dari kiri ke kanan, maka kode untuk gerakan arah tersebut adalah:

<Marquee direction="left">Teks bergerak dari kiri ke kanan</Marquee>

Hasilnya:
Marquee bergerak dari kiri ke kanan

Atau teman-teman ingin mengubah gerakan Marquee menjadi gerakan vertikal yaitu gerakan dari bawah ke atas atau sebaliknya.
Misalnya teman-teman ingin mengubah gerakan teks menjadi dari bawah ke atas, maka kode untuk gerakan tersebut adalah:

<Marquee direction="up">Teks bergerak dari bawah ke atas</Marquee>

Hasilnya:
Teks bergerak dari bawah ke atas

2. PERILAKU GERAKAN
Untuk mengatur perilaku gerakan pada Marquee, teman-teman tinggal menambahkan kode behavior="".

Ada 3 perilaku gerakan Marquee, yaitu:

behavior="scroll"
behavior="alternate"
behavior="slide"

Berikut penjelasan dari masing-masing perilaku gerakan tersebut diatas:

Untuk behavior="scroll", teks akan bergerak dari ujung yang satu ke ujung yang lainnya, seperti biasanya.

Kode Marquee untuk perilaku tersebut adalah:

<Marquee behavior="scroll">Teks bergerak dari kanan ke kiri</Marquee>

Hasilnya:
Teks bergerak dari kanan ke kiri

Untuk behavior="alternate", teks akan bergerak dari ujung yang satu kemudian kembali lagi (bergerak bolak balik), begitu seterusnya.
Kode Marquee untuk perilaku tersebut adalah:

<Marquee behavior="alternate">Teks bergerak bolak balik</Marquee>

Hasilnya:
Teks bergerak bolak balik

Untuk behavior="slide", teks akan bergerak dari ujung yang satu kemudian berhenti.
Kode Marquee untuk perilaku tersebut adalah:

<Marquee behavior="slide">Teks bergerak dari ujung yang satu kemudian berhenti</Marquee>

Hasilnya:
Teks bergerak dari ujung yang satu kemudian berhenti

3. KECEPATAN GERAKAN

Kecepatan gerakan teks pada Marquee dinyatakan dalam piksel.
Angka-angka yang didefinisikan atau ditetapkan dalam kode ini, jelas akan mempengaruhi kecepatan gerakan teks. Semakin besar angkanya, semakin cepat pula gerakan teks. Begitupun sebaliknya.
Untuk mengatur kecepatan gerak pada Marquee, teman-teman tinggal menambahkan kode scrollamount="".
Untuk membandingkan kecepatan gerak, maka saya akan membuat kode Marquee untuk angka 2 dan 6.

Kode Marquee untuk angka 2 (scrollamout="2") adalah:

<Marquee scrollamount="2">Keceptan gerak teks dengan scrollamout="2"</Marquee>

Kode Marquee untuk angka 6 (scrollamout="6") adalah:

<Marquee scrollamount="6">Kecepatan gerak teks dengan scrollamout="6"</Marquee>

Hasilnya:
Kecepatan gerak teks dengan scrollmout="2"

Kecepatan gerak teks dengan scrollamout="6"

4. JEDA ANTARA SETIAP GERAKAN
Untuk mengatur jeda antara setiap gerakan pada Marquee, teman-teman tinggal menambahkan kode scrolldelay="".

Semakin tinggi nilainya, maka gerakan teks akan semakin lambat.
Nilai terendah adalah 60. Apabila teman-teman memilih nilai dibawah nilai 60, maka nilai tersebut akan diabaikan dan didefinisikan sebagai nilai 60, kecuali jika teman-teman menambahkan kode truespeed="" dan di atur pada posisi "true" (truespeed="true").
Supaya teman-teman tidak bingung, saya langsung akan aplikasikan masing-masing kode Marquee.

Berikut kodenya:

<Marquee scrolldelay="60">scrolldelay="60"</Marquee>

<Marquee scrolldelay="100">scrolldelay="100"</Marquee>

<Marquee scrolldelay="40">scrolldelay="40", diabaikan dan didefinisikan dengan nilai 60</Marquee>

<Marquee scrolldelay="40" truespeed="true">scrolldelay="40", dengan truespeed="true"</Marquee>

Hasilnya:
scrolldelay="60"
scrolldelay="100"
scrolldelay="40", diabaikan dan didefinisikan dengan nilai 60
scrolldelay="40", dengan truespeed="true"

5. LEBAR GERAKAN
Lebar default adalah lebar halaman blog tempat teman-teman meletakkan tulisan.
Untuk mengatur lebar gerakan atau lintasan pada Marquee, teman-teman tinggal enambahkan kode width="".
Untuk mengatur lebar gerakan pada Marquee, dapat dilakukan dengan 2 cara yaitu:

Dengan Pixel (px)
Dengan Prosentase (%)

Dengan Pixel (px)

Misalnya teman-teman ingin menyesuaikan lebar lintasan Marquee dengan lebar diblog teman-teman, dimana lebar diblog teman-teman adalah 120px, maka kode marquee untuk lebar tersebut adalah:

<Marquee width="150">Teks bergerak selebar 150px</Marquee>

Hasilnya:
Teks bergerak selebar 150px

Dengan Prosentase (%)
Misalnya teman-teman hanya ingin tulisan bergerak selebar 50% dari lebar halaman blog tempat teman-teman meletakan tulisan, maka kode Marquee untuk lebar tersebut adalah:

<Marquee width="50%">Teks bergerak selebar 50%</Marquee>

Hasilnya:
Teks bergerak selebar 50%

6. TINGGI GERAKAN

Tinggi gerakan default (standar) adalah tinggi teks yang teman-teman gunakan.
Biasanya pengaturan tinggi gerakan pada Marque ini digunakan, untuk gerakan teks secara vertikal.
Untuk mengatur tinggi gerakan pada Marquee, teman-teman tinggal menambahkan kode height="".
Untuk mengatur tinggi gerakan pada Marquee, dapat dilakukan dengan 2 cara, yaitu:

Dengan Pixel (px)
Dengan Prosentase (%)

Dengan Pixel (px)

Misalnya teman-teman ingin menyesuaikan tinggi gerakan dengan tinggi halaman blog teman-teman, dimana tinggi halaman blog teman-teman maka kode marquee untuk tersebut adalah:

<Marquee direction="up" height="50px">
Teks bergerak setinggi 50px</Marquee>

Hasilnya:
Teks bergerak setinggi 50px

Dengan prosentase (%)

Misalnya teman-teman hanya ingin tulisan bergerak selebar 50% dari tinggi halaman blog tempat teman-teman meletakan tulisan, maka kode Marquee untuk tinggi tersebut adalah:

<Marquee direction="up" height="75%">Teks bergerak setinggi 75%</Marquee>

Hasilnya:
Teks bergerak setinggi 75%

Jika teman-teman ingin menuliskan sebuah daftar atau blogroll, misalnya blog a, blog b, dan blog c, maka kode Marquee untuk format tersebut adalah:

Hasilnya:

blog a

blog b

blog c

7. WARNA LATAR BELAKANG

Warna latar belakang default (standar) dari teks adalah warna latar belakang dimana teks diletakkan.
Untuk mengatur atau mengubah warna latar belakang pada Marquee, teman-teman tinggal menambahkan kode bgcolor="".
Misalnya teman-teman ingin mengubah warna latar belakang teks dengan warna merah, maka kode Marquee untuk warna tersebut adalah:

<Marquee bgcolor="red">Latar belakang teks berwarna red</Marquee>

Hasilnya:
Latar belakang teks berwarna red

Warna yang digunakan dalam dokumen HTML juga menggunakan nomor hexadecimal atau nama dari RGB.

Misalnya untuk warna latar belakang merah seperti diatas, dengan menggunakan nomor hexadecimal, maka kode Marquee menjadi:

<Marquee bgcolor="#ff0000">Latar belakang teks menggunakan nomor hexadecimal untuk red</Marquee>

Hasilnya:
Latar belakang teks menggunakan nomor hexadecimal untuk yellow

Sebagai catatan penutup:

Teman-teman dapat mengkombinasikan semua kode Marquee diatas dan juga kode HTML yang lain sesuai dengan keinginan teman-teman.

Nah, mudah-mudahan kode-kode HTML untuk Marquee diatas lebih mudah untuk diaplikasikan sesuai dengan keinginan teman-teman. Kalau diantara teman-teman ada yang belum mengerti, atau butuh bantuan saya, silahkan beritahu saya melalui komentar di artikel ini,
atau melalui Guest Book juga bisa. Saya akan langsung memberikan solusinya pada saat saya berkunjung ke blog teman-teman.

Demikian artikel saya kali ini, semoga memberikan manfaat yang positif bagi anda.
Terima Kasih.

Sukses Selalu,