Membuat tulisan berjalan atau tulisan bergerak menggunakan kode HTML itu dinamakan "marquee". Anda bisa melihat berbagai metode atau kombinasi kode marquee di situs-situs yang fokus di kode-kode HTML.
Madya sendiri pernah menggunakan kode marquee ini untuk mensiasati luas ruang tulisan sehingga dibuatlah tulisan berjalan agar pembaca bisa membacanya. Selain itu, tulisan bergerak ini juga bisa menarik perhatian pengunjung.
Meskipun judulnya kode HTML Tulisan Bergerak, namun pada prakteknya bisa juga digunakan pada gambar. Jadi Anda juga bisa membuat gambar bergerak dengan kode HTML marquee. Apakah sama dengan CSS untuk gambar slide? Entahlah. Saya kurang paham,hehe
[Baca juga : Kode HMTL Tulisan Bergerak Lengkap Bag. 1]
Tulisan mengenai kode HTML Tulisan bergerak ini akan dibagi menjadi 2 artikel karena cukup banyak atribut yang bisa dipasangkan di kode marquee. Di artikel pertama (bisa klik link di atas) sudah membahas 5 hal yaitu kode nya, atur gerakan, kecepatan, arah, dan jumlah gerakan.
Di artikel kedua ini akan membahas sisanya. Yaitu atribut-atribut lain yang tak kalah penting. Untuk kode dasar marquee, silahkan lihat di artikel pertama atau klik di sini. Yuk, dari pada penasaran, berikut kode-kode HTML tulisan berjalan/bergerak :
6. Buat Kotak
Kelanjutan dari artikel kemarin yaitu kode ke-6 adalah kode untuk memberikan garis atau kotak untuk menampung tulisan bergerak. Atribut yang membuat kotak merupakan atribut umum yang biasa digunakan yaitu "style" dengan tambahan "border:value" (tanpa tanda petik).
Value dari border bisa diganti sesuai dengan keinginan Anda. Bisa berbentuk garis solid, putus-putus, titik-titik, atau garis ganda. Atau Anda bisa cari di mesin pencari secara lengkap mengenai kode garis. Untuk value yang bisa dipakai sebagai berikut :
- Value "solid" : untuk membuat garis biasa
- Value "dotted" : untuk membuat garis titik-titik
- Value "dashed" : untuk membuat garis putus-putus
- Value "double" : untuk membuat garis ganda
Maka hasil dari kode di atas sebagai berikut ini
Anda tinggal beri atribut sesuai keinginan Anda. Sedangkan untuk merubah bentuk garisnya, tinggal ganti value atau kata "solid" ke value yang sesuai keinginan Anda. Berikut contoh hasil dari kode yang sama tetapi garisnya berbeda :
Garis titik-titik
Garis putus-putus
Garis ganda
7. Membuat Kotak Dengan Ukuran
Selanjutnya, Anda juga bisa membuat ukuran kotaknya sesuai keinginan Anda. Di cara nomor 6 merupakan kotak yang otomatis menyesuaikan dengan ukuran yang ada atau default. Sedangkan di sini, kita dapat merubah ukuran kotak sesuai kebutuhan.
Dengan menambahkan atribut "height" dan "width" untuk mengatur tinggi dan lebar kotaknya. Adapun kodenya sebagai berikut :
Dari kode di atas, kita cukup mengatur arah gerakan teksnya dari kanan ke kiri, lalu garisnya menggunakan garis biasa, sedangkan ukuran lebar 100 dan tingginya 100. Hasil kode di atas sebagai berikut ini:
Kita ubah ukurannya misalnya lebar 200 dan tinggi 50 maka hasilnya seperti ini :
8. Membuat Margin Dengan Kotak
Berikutnya, Anda juga bisa mengatur margin teks bergerak dari kotaknya. Atau misalnya tanpa kotak juga bisa. Yang dimaksud margin adalah jarak antara teks bergerak dengan tulisan lainnya atau antara teks bergerak dengan kotaknya.
Caranya menggunakan atribut "hspace" dan "vspace" untuk margin atas bawah dan kanan kiri. Langsung saja kodenya sebagai berikut :
Kode di atas adalah kode awal untuk margin tanpa kode membuat ukuran kotak. Untuk mengatur kotaknya tinggal tambahkan kode yang sudah ada di nomor 7. Sedangkan kotaknya tetap ada karena masih terdapat kode "border". Adapun hasil kode di atas, sebagai berikut ini :
Kenapa kok kotaknya ikut tergeser? Karena kotaknya menyesuaikan dengan teks bergeraknya dan kodenya berada di dalamnya. Kalau tidak mau tergeser atau kotaknya tetap, maka buatlah kode di luar kode marquee. Misalnya kode berikut ini :
Hasilnya jadi seperti ini :
Berhasil, bukan?! Tinggal ubah ukuran kotak atau buat kode kotak di luar kode marquee nya. Untuk lihat kode-kode kotak garis atau kode kotak secara lengkap, dapat Anda cari semuanya di blog ini atau langsung klik di sini.
9. Membuat Tulisan Memantul Tak Beraturan dalam Kotak
Kode terakhir merupakan kode dari pasang-pasang atau utak-atik kode marquee beserta kotaknya. Dari sekian banyak kode, tinggal Anda kreasikan menjadi bentuk yang unik dan indah. Misalnya Anda juga bisa membuat tulisannya memantul tak beraturan di dalam kotak. Lihat hasilnya berikut ini:
Menarik, bukan?! Kok bisa? Apa kode-kodenya? Kok bisa memantul berulang kali dan berbalik? Bisa, kodenya dengan menumpuk 2 kode marquee. Artinya ada kode marquee di dalam kode marquee. Atau lihat kodenya berikut ini :
Demikian artikel singkat mengenai kode HTML Tulisan Bergerak Lengkap bagian kedua. Anda bisa memodifikasi atau menambahkan kode marquee dengan atribut sesuka hati. Terima kasih telah berkunjung dan jangan lupa komentar!
Tidak ada komentar:
Posting Komentar