Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Saat membuat sebuah website, terkadang kamu mungkin ingin menambahkan efek bergerak atau animasi pada tulisannya. Salah satu cara yang populer untuk melakukannya adalah dengan membuat tulisan berjalan atau marquee. Pada artikel ini, kita akan membahas cara membuat tulisan berjalan di HTML.
Sebelum kita bisa membuat tulisan berjalan, tentu saja kita harus memiliki dokumen HTML terlebih dahulu. Kamu bisa membuat file baru dengan ekstensi .html di mana saja kamu suka, dan masukkan struktur dasar HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>Jangan lupa untuk mengisi bagian “Judul Halaman” dengan judul yang sesuai.
Untuk membuat tulisan berjalan, kita akan menggunakan tag marquee di HTML. Tag ini memungkinkan kita untuk membuat efek bergerak pada tulisan. Tempatkan tag ini di dalam body dokumen HTML kamu, seperti contoh berikut:
<body>
<marquee>Tulisan ini akan bergerak</marquee>
</body>Tulisan di antara tag marquee adalah teks yang akan bergerak. Kamu bisa mengubahnya dengan apapun yang kamu inginkan.
Secara default, tulisan akan bergerak dari kanan ke kiri. Namun, kamu bisa mengubahnya dengan menambahkan atribut direction pada tag marquee. Nilai yang bisa kamu gunakan adalah “up”, “down”, “left”, atau “right”. Berikut adalah contohnya:
<marquee direction="up">Tulisan ini akan bergerak ke atas</marquee>Kamu juga bisa menambahkan style CSS pada tulisan berjalan agar tampilannya lebih menarik. Cukup tambahkan atribut style dan atur seperti yang kamu inginkan. Berikut adalah salah satu contohnya:
<marquee style="font-size:20px; color:red;">
Tulisan ini akan bergerak dan berwarna merah
</marquee>Sekarang kamu sudah tahu cara membuat tulisan berjalan di HTML. Walau tag marquee ini cukup mudah digunakan, perlu diingat bahwa tag ini bukan merupakan standar HTML dan mungkin tidak akan bekerja pada beberapa browser modern. Selalu pastikan untuk tes website kamu di berbagai browser dan pertimbangkan alternatif lain seperti CSS atau JavaScript jika perlu.
Link terkait: