Tuesday, January 24, 2017

Belajar HTML untuk Pemula Sesi 5

Pada sesi ini akan dibahas cara membuat teks berjalan/running teks. Mungkin ketika nonton tv kita sering melihat running teks dibawah layar tv ataupun media lain, yang tujuannya adalah mengarahkan perhatian pada berita/teks tersebut. Nah, di dunia website pembuatan runing teks dikenal dengan istilah marquee.

Marquee adalah tag HTML yang mampu membuat tampilan bergerak secara vertikal ataupun horizontal. Kode dasar yang digunakan adalah
<html>
  <head>
    <title>Kode marquee</title>
     </head>
   <body>
  <marquee>contoh teks berjalan</marquee>
 </body>
</html>
hasilnya:
Kode marquee contoh teks berjalan
Apabila ingin memberikan variasi gerak teks diperlukan kode-kode yang lain. Untuk pemabahsannya ada dibawah ini:
Pertama, membuat animasi teks berjaln dari kiri ke kanan, kanan ke kiri dan memantul Tag yang digunakan untuk membuat animasi bergerak adalah tag <marquee>. Contoh:
<html>
  <head>
    <title>Teks Berjalan</title>
  </head>
<body>
  <marquee direction="left"bgcolor="green">Teks berjalan dari kanan ke kiri</marquee>
    <marquee direction="right"bgcolor="yellow">Teks berjalan dari kiri ke kekanan</marquee>
  <marquee behavior="alternate"bgcolor="magenta">Teks berjalan memantul</marquee>
</body>
hasilnya:
Teks Berjalan Teks berjalan dari kanan ke kiri Teks berjalan dari kiri ke kekanan Teks berjalan memantul

Keterangan :
Kode direction berfungsi mengarahkan tulisan sesuai yagn diinginkan contohnya left dan right. Kode direction juga bisa mengarahkan tulisan ke atas (up), ke bawah(down). Untuk itu cobalah membuat tulisan dari atas kebawah atau dari bawah ke atas dengan menggunakan kode direction.
Kode bgcolor berfungsi memberi warna bacground tulisan
Kode behavior berfungsi mengatur jenis gherakan sperti:
  • Alternate apabila menginginkan tulisan berjalan memantul 
  • Scroll apabila menginginkan tulisan berjalan terus kesalah satu sisi 
  • Slide apabila menginginkan tulisan berjalan dengan tersendat
Untuk kode behavior silahkan anda mencoba teknik scroll dan slide, penulisannya sama dengan metode alternate yaitu behavior=”kode”. Lau bagaimana caranya agar teks yang berjalan itu berhenti ketika mouse diarahkan ke teks yang bergerak tersebut? Jawabannya adalah dengan menggunakan kode onmouseover="thsi.stop()" onmouseout="this.start()". Contoh:
<html>
  <head>
    <title>kode onmouse</title>
  </head>
<body>
  <marquee behavior="left"bgcolor="#ffff00" onmouseover="this.stop()"
   onmouseout="this.start()">Inilah blog yang berisi materi pemrograman HTML, selamat belajar sukses selalu</marquee>
  </body>
</html>
hasilnya:
kode onmouse Inilah blog yang berisi materi pemrograman HTML, selamat belajar sukses selalu
Selamat mencoba Sukses selalu!!!
Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)