BLOG PEMBELAJARAN INORMATIKA KELAS IX: Belajar HTML

Belajar HTML : Cara Membuat Tulisan Berjalan di HTML

<marquee bgcolor="white" style="color: red; font-family: "arial"; font-size: 22px;">SELAMAT DATANG DI BLOG PEMBELAJARAN TIK SMP PGRI 1 CIBINONG. BLOG INI MEMUDAHKAN SISWA UNTUK MENGAKSES BLOG TEMAN-TEMANNYA DISEKOLAH DAN INFORMASI PEMBELAJARAN TIK </marquee><br />

<marquee direction="right"white" style="color: red; font-family: "arial"; font-size: 22px;">SELAMAT DATANG DI BLOG PEMBELAJARAN TIK SMP PGRI 1 CIBINONG. BLOG INI MEMUDAHKAN SISWA UNTUK MENGAKSES BLOG TEMAN-TEMANNYA DISEKOLAH DAN INFORMASI PEMBELAJARAN TIK </marquee><br />

<marquee direction="left"white" style="color: red; font-family: "arial"; font-size: 22px;">SELAMAT DATANG DI BLOG PEMBELAJARAN TIK SMP PGRI 1 CIBINONG. BLOG INI MEMUDAHKAN SISWA UNTUK MENGAKSES BLOG TEMAN-TEMANNYA DISEKOLAH DAN INFORMASI PEMBELAJARAN TIK </marquee><br />

Anda tentunya pernah melihat teks berjalan atau running text di beberapa media seperti website, TV (umumnya ada pada di layar bagian bawah) dan lain sebagainya. Tentunya, teks berjalan tersebut membuat Anda tertarik untuk membacanya sekaligus bertanya – tanya tentang bagaimana cara membuat teks berjalan seperti itu.

Umumnya, teks berjalan pada sebuah website digunakan sebagai media pemberitahuan, informasi pendek, ataupun hiburan (hiasan) semata. Pembuatan teks berjalan tidaklah sulit karena kita hanya perlu memanfaatkan elemen yang disediakan oleh HTML. HTML menyediakan elemen khusus yang disebut dengan marquee. Untuk lebih jelasnya, mari simak penjelasan dibawah ini :

Elemen marquee

Elemen marquee digunakan untuk membuat teks atau media lain (seperti gambar atau video) bergerak baik secara horizontal maupun vertikal. Saat ini beberapa browser sudah tidak lagi mendukung elemen marquee sehingga elemen ini jarang digunakan. Dibandingkan menggunakan marquee, Anda lebih dianjurkan menggunakan Javascript dan CSS. Tetapi pada materi kali ini kita akan membahas tentang penggunaan HTML marquee.

Untuk dapat membuat teks berjalan, Anda dapat menggunakan pasangan tag <marquee>Isi teks disini</marquee>. Pada tag <marquee> juga terdapat beberapa atribut seperti :

Atribut width dan height

Atribut width digunakan untuk menentukan ukuran lebar dari elemen marquee dengan nilai angka yang dapat ditulis seperti 18, 15% atau 30px. Sedangkan, atribut height digunakan untuk menentukan ukuran tinggi dari elemen marquee dengan nilai angka yang sama seperti width, yaitu 18, 15% atau 30px.

Berikut contoh kode penulisan width dan height di HTML :

<!DOCTYPE html>
 <html>
 <head>
  <title>Atribut Width dan Height di Tag Marquee</title>
 </head>
 <body>
  <marquee width="500" height="40">Teks ini berjalan</marquee>
 </body>
 </html>

Setelah Anda menjalankan kode diatas di browser maka akan tampil seperti gambar dibawah ini:

Jika Anda tidak memberikan pengaturan untuk width dan height maka width-nya secara default 100% (lebar penuh jendela browser) dan height-nya menyesuaikan dengan ukuran tinggi kontennya.

Berikut contoh kode penulisannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Default Width dan Height di Tag Marquee</title>
 </head>
 <body>
  <marquee>Teks ini berjalan</marquee>
 </body>
</html>

Setelah Anda menjalankan kode HTML diatas, maka akan tampil seperti gambar dibawah ini:

tanpa atribut width dan height pada marquee

Atribut direction

Atribut direction digunakan untuk menentukan arah gerak dari konten yang berada di dalam tag marquee. Dimana terdapat empat nilai di dalam atribut ini yaitu up (atas), down (bawah), left (kiri) dan right (kanan).

Secara default jika kita menggunakan nilai “left” maka teks akan berjalan dari kanan ke sisi kiri dan begitu pula dengan nilai “right” maka teks akan berjalan dari kiri ke sisi kanan. Kemudian, untuk “up” akan bergerak dari bawah ke atas sedangkan “down” akan bergerak dari atas ke bawah. Berikut contoh code penulisan dan penggunaannya di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Direction di Tag Marquee</title>
 </head>
 <body>
  <marquee direction="right">Teks ini ke kanan</marquee>
  <marquee direction="left">Teks ini ke kiri</marquee>
 </body>
</html>

Setelah Anda menjalankan kode HTML diatas, maka akan tampil seperti gambar dibawah ini:

Dibawah ini contoh lain penggunaan atribut direction (up dan down) :

<!DOCTYPE html>
 <html>
 <head>
  <title>Atribut Direction di Tag Marquee</title>
 </head>
 <body>
  <marquee direction="up" height="50">Teks ini bergerak dari bawah ke atas</marquee><br>
  <marquee direction="down" height="50">Teks ini bergerak dari atas ke bawah</marquee>
 </body>
 </html>

Setelah Anda menjalankan kode HTML diatas, maka akan tampil seperti gambar dibawah ini:

Atribut behavior

Atribut behavior digunakan untuk menentukan tipe pergerakan marquee. Nilai yang dapat diisi di atribut behavior yaitu slide, scroll ataupun alternate. Jika Anda tidak membuat atribut behavior di tag <marquee> maka secara default nilainya adalah “scroll”.

Scroll artinya konten bergerak ke sisi yang satu dan muncul kembali dari sisi yang berlawanan. Kemudian, slide artinya konten bergerak menuju ke satu sisi dan ketika sampai di sisi tersebut konten tersebut diam (berhenti bergerak). Sedangkan, alternate artinya konten bergerak menuju ke satu sisi kemudian kembali lagi ke sisi yang berlawan seperti terpantul.

Berikut contoh kode HTMLnya :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Behavior di Tag Marquee</title>
 </head>
 <body>
  <marquee behavior="scroll" width="400">Welcome</marquee><br>
  <marquee behavior="slide" width="400">Welcome</marquee><br>
  <marquee behavior="alternate" width="400">Welcome</marquee><br>
 </body>
</html>

Setelah Anda menjalankan kode diatas, maka di browser akan tampil seperti gambar dibawah ini:

Senin, 06 November 2017

Belajar HTML

Elemen marquee

Atribut width dan height

Atribut direction

Atribut behavior

1 komentar:

PERANGKAT KERAS DAN PERANGKAT LUNAK