02 April 2015

HTML Marquees

Sebelum ke topik pembahasan mau sedikit berbagi saat pertama kali mengenal internet dan dapet akses tanpa batas 24 jam. Apa yang kamu suka saat browsing? Klo Rani mah jaman dulu banget sih, blom ngetrend FB, twitter, ato instagram. Friendster juga baru kesini sini nya. Mungkin dasar cewek yah, dulu seneng banget ngumpulin gambar disney yang bisa bergerak (gif file). Nah pas kebetulan pertama belajar code itu windows app pake VB6, pengen bikin tulisan bergerak. Lumayan panjang tuh, proses nya. Tapi klo di HTML sih tinggal pake tag <marquee>.

Tag <marqueee> adalah tampilan teks bergerak secara horizontal maupun vertikal, tergantung pada setingan.
Catatan: Bisa jadi marqueee tidak didukung beberapa browser, selain menggunakan tag ini untuk membuat efek serupa kita dapat menggunakan javascript dan css.

Sintaks:
<marquee namaatribut1="nilai1" namaatribut2="nilai2" dst...>

konten

</marquee>

Isi konten dari marquee bisa berupa teks ataupun gambar. Sementara beberapa atribut penting dalam tag ini adalah sebagai berikut:

AtributKeterangan
widthMenentukan ukuran lebar dari elemen marquee. Bisa diisi dengan nilai angka seperti 18 atau 25% atau 50px, dsb.
heightMenentukan ukuran tinggi dari elemen marquee. Bisa diisi dengan nilai angka seperti 18 atau 25% atau 50px, dsb.
directionMenentukan arah marquee bergerak. Diisi dengan up (= atas), down (=bawah), left (=kiri) atau right (=kanan).
behaviorMenentukan tipe pergerakan marquee. Bisa diisi dengan nilai scroll, slide atau alternate.
scrolldelayMenentukan waktu tunda tiap per langkah. Diisi dengan nilai angka seperti 10.
scrollamountMenentukan kecepatan marquee. Diisi dengan nilai angka seperti 10.
loopMenentukan berapa kali putaran. Nilai defaultnya adalah tak terbatas.
bgcolorMenentukan warna latar. Diisi dengan nama warna atau dengan kode hex warna.
hspaceMenentukan ruang horizontal sekitar maequee. Diisi nilai berupa angka seperti 18 atau 25% atau 50px, dsb.
vspaceMenentukan ruang vertikal sekitar maequee. Diisi nilai berupa angka seperti 18 atau 25% atau 50px, dsb.

Berikut ini beberapa contoh marquee:
Contoh 1:
<marquee>Contoh marquee yang paling dasar.</marquee>
Hasilnya:
Contoh marquee yang paling dasar.

Contoh 2:
<marquee width="50%">Contoh ini hanya memiliki lebar 50%.</marquee>
Hasilnya:
Contoh ini hanya memiliki lebar 50%.

Contoh 3:
<marquee behavior="scroll">Contoh marquee dengan behavior scroll.</marquee>
<marquee behavior="slide">Contoh marquee dengan behavior slide.</marquee>
<marquee behavior="alternate">Contoh marquee dengan behavior alternate.</marquee>

Hasilnya:
Contoh marquee dengan behavior scroll. Contoh marquee dengan behavior slide. Contoh marquee dengan behavior alternate.

Contoh 4:
<marquee direction="left">Teks ini akan bergerak dari kanan ke kiri.</marquee>
<marquee direction="right">Teks ini akan bergerak dari kiri ke kanan.</marquee>
<marquee direction="up">Teks ini akan bergerak dari bawah ke atas.</marquee>
<marquee direction="down">Teks ini akan bergerak dari atas ke bawah.</marquee>

Hasilnya:
Teks ini akan bergerak dari kanan ke kiri. Teks ini akan bergerak dari kiri ke kanan. Teks ini akan bergerak dari bawah ke atas. Teks ini akan bergerak dari atas ke bawah.




Click here if you like this article.


0 comments: