Home Top Ad

Cara Membuat Tulisan Berjalan Menggunakan HTML di Blogger


Pengetahuan SEO - Anda tentu saja pernah lihat teks berjalan atau running text di sejumlah media seperti web, TV (biasanya ada di di monitor sisi bawah) dan lain-lain.

Tentu saja, teks berjalan itu membuat Anda tertarik untuk membacanya sekaligus juga menanyakan – bertanya mengenai bagaimanakah cara membuat teks berjalan semacam itu.

Biasanya, teks berjalan pada suatu web dipakai jadi media pemberitahuan, info pendek, atau hiburan (hiasan) semata-mata. Pengerjaan teks berjalan tidak susah sebab kita perlu manfaatkan komponen yang disiapkan oleh HTML.




CARA MEMBUAT TULISAN BERJALAN MENGGUNAKAN HTML 


HTML sediakan komponen spesial yang disebutkan dengan marquee. Untuk lebih detilnya, silahkan baca keterangan langkah membuat tulisan di HTML berikut ini :

1. KOMPONEN <marque>

Komponen marquee dipakai untuk bikin teks atau media lain (seperti gambar atau video) bergerak baik dengan horizontal atau vertikal. Sekarang beberapa browser tidak memberi dukungan komponen marquee hingga komponen ini jarang-jarang dipakai.

Dibanding memakai marquee, Anda lebih disarankan memakai Javascript serta CSS. Tapi pada materi kesempatan ini kita akan mengulas mengenai pemakaian HTML marquee.

Agar bisa membuat teks berjalan, Anda bisa memakai pasangan tag
Isi teks disini. Pada tag ada banyak atribut seperti :


2. ATRIBUT WIDTH & HEIGHT 


Atribut width dipakai untuk memastikan ukuran lebar dari komponen marquee dengan nilai angka yang bisa dicatat seperti 18, 15% atau 30px. Sedang, atribut height dipakai untuk memastikan ukuran tinggi dari komponen marquee dengan nilai angka yang sama dengan width, yakni 18, 15% atau 30px.

Dibawah ini adalah contoh kode tulisan width serta 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>


Sesudah Anda jalankan kode di atas di browser maka tampil seperti gambar berikut ini:

atribut width dan height pada marquee

Bila Anda tidak memberi penataan untuk width serta height karena itu width-nya dengan default 100% (lebar penuh jendela browser) serta height-nya sesuaikan dengan ukuran tinggi isinya.

Berikut adalah contoh tulisan kode HTMLnya :

tanpa atribut width dan height pada marquee

Sesudah Anda jalankan kode HTML di atas, maka tampil seperti gambar berikut ini:


3. ATRIBUT DIRECTION 

Atribut direction dipakai untuk memastikan arah gerak dari content yang ada di tag marquee. Dimana ada empat nilai di atribut ini yakni up (atas), down (bawah), left (kiri) serta right (kanan).

Dengan default bila kita memakai nilai “left” karena itu teks akan berjalan dari kanan ke bagian kiri serta begitu halnya nilai “right” karena itu teks akan berjalan dari kiri ke bagian kanan. Selanjutnya, untuk “up” akan bergerak dari bawah ke atas sedang “down” akan bergerak dari atas ke bawah. Tersebut contoh code tulisan serta pemakaiannya 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>

Sesudah Anda jalankan kode HTML di atas, maka tampil seperti gambar berikut ini:

Berikut ini contoh lain pemakaian atribut direction (up serta down) :

penggunaan atribut direction
Sesudah Anda jalankan kode HTML di atas, maka tampil seperti gambar berikut ini:


4. ATRIBUT BEHAVIOR 

Atribut behavior dipakai untuk memastikan type gerakan marquee. Nilai yang bisa diisi di atribut behavior yakni slide, scroll atau alternate. Bila Anda tidak membuat atribut behavior di tag
karena itu dengan default nilainya ialah “scroll”.

Scroll berarti content bergerak ke bagian yang satu serta ada kembali dari bagian yang bersimpangan. Selanjutnya, slide berarti content bergerak ke arah ke satu bagian serta saat sampai disamping itu content itu diam (berhenti bergerak). Sedang, alternate berarti content bergerak ke arah ke satu bagian selanjutnya balik lagi ke bagian yang berlawan seperti terpantul.

Berikut adalah contoh tulisan 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>


Sesudah Anda jalankan kode di atas, karena itu di browser akan tampil seperti gambar berikut ini:

penggunaan atribut behavior di marquee

5. ATRIBUT SCROLLDELAY 

Atribut scrolldelay dipakai untuk memastikan waktu terlambat (menunda) per langkah dalam unit milisekon ( 1 milisekon = 1/1000 sekon) yang berisi nilai angka seperti 100. Dimana nilai default –nya ialah 85.

Tersebut contoh penulisannya di HTML :
<!DOCTYPE html>
<html> <head> <title>Atribut Scrolldelay di Tag Marquee</title> </head> <body> <marquee width="600">Welcome</marquee><br> <marquee scrolldelay="100" width="600">Welcome</marquee><br> <marquee scrolldelay="400" width="600">Welcome</marquee> </body> </html>


Sesudah Anda jalankan kode HTML di atas di, karena itu di browser akan tampil seperti gambar berikut ini:

penggunaan scrolldelay pada marquee

6. ATRIBUT SCROLLAMOUNT 

Atribut scrollamount dipakai untuk memastikan kecepatan content di tag
dalam bergerak dengan unit piksel. Dimana nilai default-nya ialah 6. Tersebut contoh tulisan kode HTMLnya :

<!DOCTYPE html>
<html> <head> <title>Atribut Scrollamount di Tag Marquee</title> </head> <body> <marquee width="600">Welcome</marquee><br> <marquee scrollamount="15" width="600">Welcome</marquee><br> <marquee scrollamount="25" width="600">Welcome</marquee> </body> </html>


penggunaan scrollamount pada marquee


7. ATRIBUT BGCOLOR

Atribut bgcolor dipakai untuk memastikan warna latar belakang (latar) pada elemenmarquee. Nilai atribut bgcolor dapat dicatat dengan nama warna (contoh:cyan) atau dalam kode hex (#469A9A). Berikut ini contoh kode HTMLnya :


<!DOCTYPE html>
<html>
 <head>
  <title>Atribut BGColor di Tag Marquee</title>
 </head>
 <body>
  <marquee bgcolor="cyan" width="400">Welcome</marquee>
 </body>
</html>


penggunaan atribut bgcolor pada marquee

8. ATRIBUT HSpace 

Atribut HSpace dipakai untuk memastikan ruangan kosong (ruang) yang horizontal pada kiri serta kanan marquee. Umumnya berisi nilai yang berbentuk angka seperti 20, 15% atau 40px. Supaya lebih jelas, baca contoh kode HTMLnya berikut ini

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut HSpace di Tag Marquee</title>
 </head>
 <body>
  <marquee bgcolor="cyan" width="400">Welcome</marquee><br>
  <marquee hspace="15" bgcolor="grey" width="400">Welcome</marquee><br>
  <marquee hspace="40" bgcolor="yellow" width="400">Welcome</marquee>
 </body>
</html>



Saat kode HTML di atas digerakkan, karena itu penampilannya akan semacam ini:


Penggunaan atribut HSpace pada marquee

9. ATRIBUT VSpace 

Atribut VSpace dipakai untuk memastikan ruangan kosong (ruang) yang vertikal pada atas serta bawah marquee. Umumnya berisi nilai yang berbentuk angka seperti 20, 15% atau 40px. Contoh tulisan atribut ini dapat Anda lihat di bawah:


<!DOCTYPE html>
<html>
 <head>
  <title>Atribut VSpace di Tag Marquee</title>
 </head>
 <body>
  <marquee bgcolor="cyan" width="400">Welcome</marquee><br>
  <marquee vspace="15" bgcolor="grey" width="400">Welcome</marquee><br>
  <marquee vspace="20" bgcolor="yellow" width="400">Welcome</marquee>
 </body>
</html>



Sesudah Anda jalankan kode di atas, karena itu di browser akan tampil seperti gambar berikut ini:

Penggunaan atribut VSpace pada marquee


10. ATRIBUT LOOP 

Atribut loop dipakai untuk memastikan berapakah kali content marquee berulang-ulang dengan nilai defaultnya ialah tidak hanya terbatas. Tersebut contoh HTMLnya :

<!DOCTYPE html>
<html>
 <head>
  <title>Atribut Loop di Tag Marquee</title>
 </head>
 <body>
  <marquee loop="2" width="400">Welcome</marquee><br>
  <marquee loop="2" behavior="slide" width="400">Welcome</marquee>
 </body>
</html>


Sesudah Anda menjalankannya di browser, maka tampil seperti gambar berikut ini:

penggunaan atribut loop


11. PENGGUNAAN TAG <marque> PADA GAMBAR

pada gambar
Tag
bisa diaplikasikan bukan sekedar pada teks dan juga pada gambar. Anda cukup menempatkan source gambar antara pasangan tag

Berikut adalah contoh tulisan kode HTMLnya :

<!DOCTYPE html>
<html>
 <head>
  <title>Gambar di Tag Marquee</title>
 </head>
 <body>
  <marquee width="500"><img src="kakigori.jpg" height="100"> <img src="Kimchi.jpg" height="100">
  <img src="mandu.jpg" height="100"></marquee>
 </body>
</html>


Sesudah Anda menjalankannya di browser, maka tampil seperti gambar berikut ini:

gambar pada marquee


Itu materi langkah membuat tulisan atau gambar berjalan di HTML memakai tag marquee. Misalnya ada pertanyaan sekitar tag marquee ini, dapat Anda tanyakanlah pada kotak kometar yang sudah disiapkan. Seterusnya turuti materi belajar HTML seterusnya tentang langkah membuat tabel di HTML.

Kunjungi juga website kami lain nya "Belajar SEO"

Cara Membuat Tulisan Berjalan Menggunakan HTML di Blogger Cara Membuat Tulisan Berjalan Menggunakan HTML di Blogger Reviewed by Tentang SEO on Kamis, Oktober 10, 2019 Rating: 5

Tidak ada komentar

Buy Hosting Get Special Discount

DomaiNesia