Pages

Thursday 7 August 2014

Tutorial HTML - Membuat Animasi Teks dengan HTML

Tutorial HTML kali ini saya akan menunjukkan tag-tag HTML yang akan memberikan efek efek tertentu untuk sebuah teks. Yaitu teks berjalan dan teks berkedip, berikut tutorialnya

Marquee - teks berjalan

Marquee adalah tag untuk membuat teks berjalan.
Marquee dibuka dan ditutup dengan tag <marquee></marquee>. Dengan tag pembuka dan penutup tersebut teks sudah dapat bergerak secara default. Pada tag marquee memiliki beberapa atribut yaitu:


  • Behaviour = menentukan jenis gerakan teks. Ada 3 macam gerakan teks yaitu:
    • scroll : teks akan bergerak memutar, muncul dari salah satu sisi halaman dan akan menghilang di sisi yang lain, gerakan ini dilakukan berulang ulang

    • slide : teks akan muncul dari salah satu sisi halaman dan akan menghilang di sisi yang lain, Gerakan ini hanya dilakukan sekali, begitu teks menghilang tidak akan muncul lagi

    • alternate : teks akan bergerak bolak balik berulang ulang
  • Width dan Height = menentukan lebar dan tinggi daerah teks berjalan
  • Direction = menentukan asal munculnya teks berjalan
  • Scrolldelay = menentukan kecepatan gerak teks, semakin besar nilainya semakin cepat gerakannya
  • Align = menentukan letak mulainya teks berjalan terhadap daerah gerak teks
  • Bgcolor = menentukan warna background teks
  • Onmouseout = menentukan apa yang akan terjadi pada objek marquee ketika mouse tidak menyorotnya
  • Onmouseover = menentukan apa yang akan terjadi pada objek marquee ketika mouse menyorot objek atau daerah marquee

Setelah mengetahui atributnya, mari kita coba. Copy kode di bawah ini ke notepad Anda.

<html>
<head>
     <title>animasi teks dengan HTML</title>
</head>
<body>
     <marquee behaviour="alternate" width="400" direction="right" scrolldelay="2" align="middle" bgcolor="green" onmouseover="this.stop()" onmouseout="this.start()">teks ini berjalan</marquee>
</body>
</html>

Hasilnya adalah seperti di bawah ini.

teks ini berjalan

Blink - teks berkedip

Dengan HTML Anda juga bisa membuat teks yang berkedip (blink). Blink dibuka dan ditutup dengan tag <blink></blink>. Teks diantara tag tersebut akan tampil secara berkedip. Langsung saja di bawah ini saya beri kode untuk Anda coba.

<html>
<head>
     <title>animasi teks dengan HTML</title>
</head>
<body>
     <blink>teks ini berkedip</blink>
</body>
</html>

Hasilnya seperti di bawah ini.

teks ini berkedip

Perlu diketahui bahwa teks blink hanya berkedip pada browser tertentu. Mungkin hanya di Opera dan Mozilla Firefox saja.

Oke sekian tutorial HTML dari saya tentang membuat animasi teks dengan HTML, semoga bermanfaat :)

0 comments:

Post a Comment