marquee

MARQUEE

Materi

Marquee

Membuat Teks Berjalan dari Kiri

Penggunaan Attribut – attribut Marquee

Membuat Teks Berjalan dari Kanan

Membuat Teks Berjalan dari Bawah ke Atas

Membuat Teks Berjalan dari Atas ke Bawah

Bahasa Pemrograman Berbasis Web I

98 98

PERTEMUAN KE-4 :

MARQUEE

4.1 PENGANTAR

Marquee merupakan sebuah tag dari HTML yang fungsinya

untuk membuat sebuah objek baik berupa teks, gambar, atau apapun

objeknya dapat bergerak, baik dari arah kiri, kanan, memantul ke kiri

dan kanan secara berulang, membuat objek bergerak naik ke atas,

turun ke bawah, memantul naik dan turun, ataupun dapat bergerak zig

– zag.

Marquee dalam dokumen HTML disimbolkan dengan tag

pembuka <MARQUEE> dan ditutup atau diakhiri dengan

</MARQUEE>.

4.2 BENTUK PENULISAN TAG MARQUEE

Seperti yang telah dikatakan sebelumnya bahwa tag HTML

untuk membuat sebuah objek dapat bergerak menggunakan sebuah tag

pembuka <MARQUEE> dan diakhiri tag penutup </MARQUEE>.

Bentuk penulisan dari tag marquee sebagai berikut ini :

<marquee [attribut] > ...Objek ( Teks, gambar, maupun objek lain )

yang akan dibuat bergerak...<marquee>


99 99

Pada bagaian tag pembuka marquee terdapat sebuah attribut,

attribut adalah kemampuan yang dimiliki pada tag tersebut

( marquee ). Attribut – attribut dari tag marquee diantaranya :

Attribut Penjelasan

Behavior Cara atau teknik untuk menjalankan objek pada

Marquee.

Nilai yang diberikan atau terdapat pada behavior :

1. Scroll, mengulang searah teks

2. Slide, menggulung searah teks

3. Alternate, teks berjalan memantul atau bolak –

balik

Direction Untuk mengatur arah objek berjalan pada Marquee

Height Mengatur tinggi jalur dari tag Marquee, nilai dapat

berupa pixel maupun persen

Width Mengatur lebar jalur dari tag Marquee, nilai dapat


Loop Digunakan untuk pengulangan secara terus – menerus.

Nilai untuk melakukan perulangan adalah sebanyak n,

dimana n merupakan bilangan atau angka yang

digunakan untuk membatasi banyaknya perulangan.

Bgcolor Memberikan warna sebagai latar belakang dari jalur

marquee yang dilalui oleh objek bergerak tersebut.

Style Kemampuan tamabahan untuk memformat font,

paragraf, border, numbering, dan position.


100 100

4.3 MEMBUAT TEKS BERJALAN DARI KIRI

Tag marquee bilamana diterapkan ke dalam sebuah media

editor teks, maka secara default akan menghasilkan tampilan objek

yang bergerak ke arah kiri atau bisa dibilang objek bergerak dari arah

kanan menuju ke kiri. Berikut ini adalah contoh dari penggunaan tag

marquee yang disimpan dengan nama file contoh_marquee.htm :

<html>

<head>

<title> Membuat Teks Berjalan </title>

</head>

<body>

Berikut ini adalah contoh dari teks berjalan : <hr>

<marquee>bergerak dari kiri ke kanan</marquee>

</body>

<html>

Setelah selesai disimpan, maka jalankanlah file dari kode

program tersebut sehingga hasil tampilan yang diperoleh sebagai

berikut :


101 101

Gambar 4.1 Hasil Tampilan contoh_marquee.htm

4.4 MEMBUAT TEKS BERJALAN DENGAN ATTRIBUT

Setelah memahami dan menerapkan dasar – dasar dari tag

marquee, maka kali ini akan dibahas mengenai pemakaian attribut –

attribut yang telah diberikan pada sebuah media editor teks.

Attribut yang akan dibahas diantaranya : behavior, height,

width, loop, bgcolor, dan style. Untuk direction akan langsung

diberikan pada masing – masing contoh pada sub bab.

4.4.1. ATTRIBUT BEHAVIOR

Penerapan attribut pertama yang akan diberikan sebagai

contoh adalah behavior. Behavior jika dieja hurufnya terdiri dari huruf

B-E-H-A-V-I-O-R yang kegunaannya untuk menjalankan objek pada

Marquee. Nilai yang terdapat pada behavior :



3. Alternate, teks berjalan memantul atau bolak – balik


102 102

contoh_behavior1.htm merupakan contoh penerapan attribut

behaviour dengan nilai yang diberikan adalah scroll.

<html>

<head>


</head>

<body>

Berikut ini adalah contoh dari teks berjalan dengan attribut

BEHAVIOR : <hr>

<marquee behavior=”scroll”>Objek yang bergerak dengan

BEHAVIOR bernilai SCROLL</marquee>

</body>

<html>

Dari hasil kode program diatas bila dijalankan tidak jauh

berbeda dengan pembuatan objek berjalan secara default. Berikut hasil

tampilannya :

Gambar 4.2 Hasil Tampilan contoh_behavior1.htm


103 103

Selanjutnya, bilamana sebuah attribut dari behavior diberikan

nilai slide seperti pada contoh kode program yang telah disimpan

dengan nama contoh_behavior2.htm berikut ini :

<html>

<head>


</head>

<body>


BEHAVIOR : <hr>

<marquee behavior=“slide”>Objek yang bergerak dengan

BEHAVIOR bernilai SLIDE</marquee>

</body>

<html>

Hasil yang diperoleh ketika file kode program tersebut

dijalankan pada sebuah browser web :



104 104

Dari hasil menjalankan kode program tersebut dapat

disimpulkan bahwa pada saat pemberian nilai slide dari behavior,

objek akan bergerak seperti menggulung sebuah lembar kertas,

bilamana lembaran tersebut telah habis maka akan berhenti.

Nilai terakhir dari behavior adalah alternate. Alternate

merupakan nilai dari sebuah attribut yang membuat gerakan sebuah

objek menjadi terpental bolak – balik. Sebagai contoh seperti kode

program contoh_behavior3.htm dibawah ini :

<html>

<head>


</head>

<body>


BEHAVIOR : <hr>

<marquee behavior=“alternate”>Objek yang bergerak dengan

BEHAVIOR bernilai ALTERNATE</marquee>

</body>

<html>

Hasil tampilan dari kode program diatas seperti tampak pada

gambar dibawah, dimana objek dapat bergerak dari arah kanan ke kiri

kemudian terpental kembali ke arah kanan dan kembali secara

berulang terus – menerus demikian.


105 105


Pada nilai alternate kali ini perlu diperhatikan dengan baik

bahwa tidak semua browser web mendukung nilai attribut tersebut,

misalkan pada saat dijalankan di browser web Google Chrome, kode

program diatas tidak dapat berjalan dengan baik, padahal kode

progrma sudah sesuai dan benar. Untuk membuktikan kebenaran

tersebut dapat digunakan browser web seperti Mozilla atau yang

lainnya.

4.4.2. ATTRIBUT WIDTH DAN HEIGHT

Attribut width dan height ini tentunya sudah tidak asing lagi

di dengarnya, karena attribut ini memiliki tugas dan fungsi yang tak

jauh berbeda dari attribut BODY. Namun untuk merefresh ingatan

kegunaan dari width dan height adalah untuk mengatur lebar dan

tinggi, karena yang dibahas pada pertemuan kali ini adalah marquee

maka fungsinya untuk mengatur panjang dan tinggi dari sebuah jalur

objek itu bergerak.


106 106

Salah satu contoh penerapan dari attribut width dan height

pada sebuah tag marquee seperti kode program contoh_jalur.htm

berikut :

<html>

<head>


</head>

<body>


WIDTH dan HEIGHT : <hr>

<marquee width=“200” height=“100”>Objek yang bergerak

dengan WIDTH = 200 dan HEIGHT = 100</marquee>

</body>

<html>

Dari kode program tersebut bilamana dijalankan dengan

menggunakan browser web :

Gambar 4.4 Hasil Tampilan contoh_jalur.htm

4.4.3. ATTRIBUT LOOP


107 107

Loop merupakan atribut yang terdapat pada tag marquee yang

berfungsi untuk mengulang beberapa kali sesuai dengan banyaknya

jumlah perulangan yang diberikan atau ditentukan.

Untuk membuktikan fungsi dari attribut tersebut, lakukanlah

seperti pada kode program contoh_continue.htm yang mana akan

diberikan perulangan sebanyak 10 kali, kemudian setelah 10 kali

perulangan berakhir maka akan berhenti dan tidak akan muncul

kembali objek berjalannya ( lenyap ) .

<html>

<head>


</head>

<body>


LOOP : <hr>

<marquee loop=“10”>Objek yang bergerak dengan LOOP

sebanyak 10 kali perulangan</marquee>

</body>

<html>

Hasil tampilan dari kode program diatas :


108 108

Gambar 4.5 Hasil Tampilan contoh_continue.htm saat looping

Gambar 4.6 Hasil Tampilan contoh_jalur.htm setelah looping

4.4.4. ATTRIBUT BGCOLOR

Attibut ini digunakan untuk memberikan warna latar belakang

pada jalur objek bergerak. Penerapan didalam sebuah media editor

teks ( contoh_bgcolor.htm )sebagai berikut :

<html>

<head>


</head>

<body>



109 109

BGCOLOR : <hr>

<marquee bgcolor=“red”><font color=“white”>Objek yang

bergerak dengan BGCOLOR</font></marquee>

</body>

<html>

Hasil dari kode program diatas bila dijalankan dengan

browser web seperti berikut :

Gambar 4.7 Hasil Tampilan contoh_bgcolor.htm

4.4.5. ATTRIBUT STYLE

Attribut style digunakan untuk memformat tambahan yang

ada dalam sebuah attribut tersebut, seperti font, paragraf, border,

numbering, dan posisi. Namun disini yang akan dibahas hanyalah

beberapa jenis style saja, diantaranya : jenis tulisan, ukuran, dan

warna tulisan.

Penerapan dalam sebuah media editor teks untuk attribut style

dalam tag marquee seperti pada kode program contoh_style.htm

berikut ini :


110 110

<html>

<head>


</head>

<body>


STYLE : <hr>

<marquee bgcolor=“red” style= “font-

family:jokerman;color:yellow;font-size:36pt”> Objek yang bergerak

dengan STYLE font</marquee>

</body>

<html>

Hasil dari kode program diatas setelah dijalankan

menggunakan sebuah browser web :

Gambar 4.8 Hasil Tampilan contoh_style.htm


111 111

4.5 MEMBUAT TEKS BERJALAN DARI KANAN

Sudahkah paham mengenai dasar – dasar membuat sebuah

objek bergerak dari tag dan attribut – attributnya ? menarik bukan ?

selanjutnya akan dibahas mengenai pemakaian attribut direction yang

tidak dibahas pada sub bab sebelumnya dikarenakan akan digunakan

di pembahasan sub bab ini.

Membuat teks atau objek lain berjalan dari arah kanan dapat

dilakukan dengan menggunakan attribut direction, dimana fungsi dari

attribut ini adalah mengubah atau mengatur arah gerak dari sebuah

objek.

Salah satu contoh dari penggunaan direction terdapat pada

contoh_kanan.htm. kode program tersebut akan menjelaskan

bagaimana cara membuat dan penggunaan dari attribut direction serta

mengarahkan objek bergerak dari kanan ke kiri. Adapun kode

programnya sebagai berikut :

<html>

<head>


</head>


112 112

<body>


<marquee direction=“right”>bergerak dari KANAN ke KIRI

menggunakan attribut DIRECTION</marquee>

</body>

<html>

Setelah selesai membuat kode program tersebut, terlebih

dahulu dikoreksi kembali apakah masih ada kesalahan dalam

mengetikkan kode programnya, jika tidak ada kesalahan dapat

dijalankan dengan menggunakan browser web sehingga hasilnya

terlihat seperti gambar dibawah ini :

Gambar 4.9 Hasil Tampilan contoh_kanan.htm

4.6 MEMBUAT TEKS BERJALAN KE ATAS

Membuat teks atau objek untuk dapat bergerak dari bawah ke

atas sesungguhnya tidaklah begitu susah, karena cukup dengan

memodifikasi penggunaan attribut direction dengan diberikan nilai up.


113 113

Bentuk penulisan kode program untuk membuat sebuah tulisan

atau objek dapat bergerak ke atas seperti pada contoh_atas.htm

berikut ini :

<html>

<head>


</head>

<body>

Berikut ini adalah contoh dari teks berjalan ke atas : <hr>

<marquee direction=“up”>Tulisan ini bergerak dari BAWAH

ke ATAS menggunakan attribut DIRECTION</marquee>

</body>

<html>

Hasil dari menjalankan sebuah kode program tersebut adalah

sebagai berikut :

Gambar 4.10 Hasil Tampilan contoh_atas.htm


114 114

Pergerakan objek dilihat dari gambar masih tampak terlalu

cepat, maka untuk mengatur tempo kecepatan berjalannya

digunakanlah scrollamount. Scrolldelay adalah penentu waktu tunda

gerakan ( jeda waktu pergerakan ). Keduanya merupakan sebuah

attribut tambahan dari tag marquee. Bentuk penulisannya sebagai

berikut :

<marquee scrollamount=“1” direction=“up”> ... Objek maupun teks

yang akan dibuat berjalan... </marquee>

Penjelasan :

Attribut scrollamount : digunakan untuk mengatur tempo

kecepatan gerakan dalam milisecond

(ms).

Nilai scrollamount : jika bilangan yang dimasukkan kecil

maka kecepatan bergeraknya juga akan

kecil ( pelan atau lambat ), begitu pula

jika sebaliknya.

Hasil tampilan dari kode program diatas :


115 115

Gambar 4.11 Hasil Tampilan contoh_atas.htm dengan Scrollamount

Berikut bentuk penulisan dari Scrolldelay :

<marquee scrolldelay=“1” direction=“up”> ... Objek maupun teks

yang akan dibuat berjalan... </marquee>

Penjelasan :

Attribut scrolldelay : digunakan untuk mengatur penentuan

waktu tunda gerakan dalam milisecond

(ms).


116 116

Nilai scrolldelay : jika bilangan yang dimasukkan kecil

maka waktu tunda bergeraknya cepat,

begitu pula jika sebaliknya, maka akan

tampak bergerak patah – patah.

Hasil tampilan dari kode program diatas sebagai berikut :

Gambar 4.12 Hasil Tampilan contoh_atas.htm dengan Scrolldelay

4.7 MEMBUAT TEKS BERJALAN KE BAWAH

Direction dengan nilai down merupakan attribut yang

digunakan untuk membuat sebuah teks atau objek dapat berjalan dari

atas turun ke bawah. Bentuk penulisan kode program seperti pada

contoh_bawah.htm sebagai berikut :

<html>

<head>


117 117


</head>

<body>

Berikut ini adalah contoh dari teks berjalan ke bawah : <hr>

<marquee direction=“down”>Tulisan ini bergerak dari ATAS

ke BAWAH menggunakan attribut DIRECTION</marquee>

</body>

<html>

Hasil Tampilan pada saat dijalankan pada sebuah web browser

seperti pada gambar :

Gambar 4.13 Hasil Tampilan contoh_bawah.htm

4.8 RANGKUMAN

Marquee dalam dokumen HTML disimbolkan dengan tag

pembuka <MARQUEE> dan ditutup atau diakhiri dengan

</MARQUEE>.

Bentuk penulisan dari tag marquee sebagai berikut ini :


118 118

<marquee [attribut] > ...Objek ( Teks, gambar, maupun objek lain )

yang akan dibuat bergerak...<marquee>

Attribut – attribut dari tag marquee diantaranya :

Attribut Penjelasan

Behavior Cara atau teknik untuk menjalankan objek pada

Marquee.

Nilai yang diberikan atau terdapat pada behavior :



3. Alternate, teks berjalan memantul atau bolak –

balik

Direction Untuk mengatur arah objek berjalan pada Marquee

Height Mengatur tinggi jalur dari tag Marquee, nilai dapat


Width Mengatur lebar jalur dari tag Marquee, nilai dapat


Loop Digunakan untuk pengulangan secara terus – menerus.

Nilai untuk melakukan perulangan adalah sebanyak n,

dimana n merupakan bilangan atau angka yang

digunakan untuk membatasi banyaknya perulangan.

Bgcolor Memberikan warna sebagai latar belakang dari jalur

marquee yang dilalui oleh objek bergerak tersebut.

Style Kemampuan tamabahan untuk memformat font,

paragraf, border, numbering, dan position.

Kode program untuk membuat tulisan atau objek bergerak ke

arah kanan :


119 119

<html>

<head>


</head>

<body>


<marquee>bergerak dari kiri ke kanan</marquee>

</body>

<html>


arah kiri :

<html>

<head>


</head>

<body>


<marquee direction=“right”>bergerak dari kanan ke

kiri</marquee>

</body>

<html>


arah atas :

<html>

<head>


</head>


120 120

<body>


<marquee direction=“up”>bergerak dari bawah ke

atas</marquee>

</body>

<html>


arah bawah :

<html>

<head>


</head>

<body>


<marquee direction=“down”>bergerak dari atas ke

bawah</marquee>

</body>

<html>

Selain dapat membuat sebuah objek bergerak sesuai arah,

dapat juga diatur objek tersebut terpantul berulang baik secara

horisontal maupun vertikal. Namun yang menjadi perlu diperhatikan

adalah tidak semua browser web mendukung tag tersebut.


121 121

Untuk membuat sebuah objek tersebut dapat terpental adalah

penggunaan attribut behavior dengan nilai alternate. Adapun kode

program untuk membuatnya sebagai berikut :

<html>

<head>


</head>

<body>


<marquee direction=“down” behavior=“alternate”>bergerak

dari atas ke bawah terpantul berulang kembali ke atas dan ke

bawah</marquee>

</body>

<html>

Sedikit tambahan untuk attribut dimana untuk mengatur

kecepatan dan penentuan jeda waktu pada tag marquee, dapat

dilakukan dengan scrollamount dan scrolldelay.

Scrollamount merupakan digunakan untuk mengatur tempo

kecepatan gerakan dalam milisecond (ms). Jika bilangan yang

dimasukkan kecil maka kecepatan bergeraknya juga akan kecil ( pelan

atau lambat ), begitu pula jika sebaliknya.

Scrolldelay merupakan digunakan untuk mengatur penentuan

waktu tunda gerakan dalam milisecond (ms). Jika bilangan yang


122 122

dimasukkan kecil maka waktu tunda bergeraknya cepat, begitu pula

jika sebaliknya, maka akan tampak bergerak patah – patah.

4.9 LATIHAN

marquee

Documents