HTML-MARQUEE, SEBUAH TUTORIAL (1)

Posted on 30 April 2009 by Blog Kesuksesan Hidup

Blog Kesuksesan Hidup: 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:

<Marquee></Marquee>

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:

<Marquee direction="up" height="75"><p>blog a</p><br><p>blog b</p><br><p>blog c</p></Marquee>

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,

Blog Kesuksesan Hidup






Silahkan Baca Juga Artikel Terkait (Related Post) Berikut:

8 komentar:

Tampilkan/Sembunyikan Seluruh Komentar

Roes mengatakan...

wah tips bagus ne....

Wisata SEO Sadau mengatakan...

hahaha.. makasi sob..
detail juga nih, lengkap.. :)

syamil mengatakan...

wah...kang terima kasih nih..artikelnya,
manfaat sekali buat penambahan ilmu sy,
mudah2han ilmu nya makin nambah.

Deogracias mengatakan...

Thank's atas tutorialnya..Teman blogger yang berdiskusi dengan anda itu memang tidak mengerti seni..Atas dasar apa pengetahuan dikatakan tidak mendidik..??
Benar-benar buta,dan tidak menghargai sama sekali tutorial orang lain..

MF Nurhuda Yusro mengatakan...

thanks ya tutorialnya.. btw, kalau warna latar belakangnya dibikin lebih lebar (maksudnya tinggi rendahnya), ketimbang tulisannya gimana caranya?

widiana mengatakan...

wes lumayan berguna jg mas thx bgt..
tp lo saya pengen buat yang ndak ada putusna gmana ya?? maksudna sebelum textna habis udah tmplil lg d blakangna.thx b 4

Anonim mengatakan...

thx banget ats artikelnya

Indoproperty BSD mengatakan...

info seperti ini jarang saya temukan di tempat lain....

thnx atas sumbangan knowledge-nya

Poskan Komentar

Terima kasih telah meluangkan waktu untuk membaca artikel ini.
Jika berkenan, silahkan berikan komentar Sahabat.
Jangan pernah ragu untuk beropini atau berdiskusi disini.

Mohon jangan spam, karena dengan berat hati Admin akan menghapus komentar yang dianggap spam dan yang dianggap dapat mengganggu para pembaca artikel-artikel Blog Kesuksesan Hidup.

Sekali lagi terima kasih.

Sukses Selalu...

MARIO TEGUH CORNER - KATA BIJAK DAN MOTIVASI MARIO TEGUH

NILAI MEREKA BAGI ANDA HANYA SETINGGI PENGHORMATAN ANDA KEPADA MEREKA.
NILAI DARI SETIAP PRIBADI DALAM KEHIDUPAN ANDA, ADALAH NILAI DARI KEHIDUPAN ANDA.
JANGANLAH HANYA HIDUP UNTUK DIRI SENDIRI
ANDA AKAN MUDAH TERPEROSOK DALAM KESEDIHAN DAN KEPUTUS-ASAAN, JIKA YANG ANDA PIKIRKAN HANYA DIRI ANDA SENDIRI
(MARIO TEGUH - ANDA HANYA MENJADI SIAP UNTUK HAL-HAL YANG ANDA SIAPKAN)
ADVERTISEMENT AREA


Page copy protected against web site content infringement by Copyscape