Belajar HTML Part 12 Cara Merubah arah text di HTML

Hai sahabat warung belajar, bertemu lagi di seri tutorial html, kali ini kita akan membahas mengenai bagaimana cara merubah arah text di HTML.
Semisal nih kita mau menuliskan text dengan huruf arab, pastinya anda harus membalikkan textnya kan.
Nah pertanyaannya apakah ada tag yang fungsinya digunakan untuk merubah arah text di html.


Video Tutorial Belajar HTML – Cara Merubah arah text di HTML

 

 

Tag <bdo> untuk Merubah arah Text di HTML

Tag <bdo> merupakan singkatan dari Bidirectional Override. Tag ini digunakan untuk merubah arah penulisan text yang secara normal adalah dari kiri ke kanan, menjadi dari kanan ke kiri.
Tag ini bisa anda gunakan untuk membuat tulisan yang biasanya ditulis dengan arah terbalik seperti huruf arab.

Tag memiliki attribute dir yang memiliki nilai :
1. ltr (Left to Right) value ini digunakan jika anda menginginkan penulisan text dari kiri ke kanan
2. rtl (Right to Left) value ini digunakan jika anda menginginkan penulisan text dari kanan ke kiri

tag ini masuk ke dalam tipe tag inline, sehingga text tetap ditampilkan mengikuti alur text yang sudah dibuat.

Baik kita akan coba buat skrip html sederhana seperti dibawah ini :

lalu silahkan anda simpan, dan buka melalui browser.

merubah arah text di html dengan tag bdo

nah terlihat dari ada 2 paragraf :

  • paragraf pertama arah penulisan textnya masih normal yaitu dari kiri ke kanan.
  • paragraf kedua arah penulisan textnya berganti dari kanan ke kiri hal ini karena menggunakan tag bdo serta untuk attribute dir menggunakan value rtl.

nah mudah kan untuk membuat arah text di html, anda cukup menggunakan tag <bdo> saja,  ukey sekian dulu tutorial kali ini kita akan melanjutkan ditutorial selanjutnya di seri tutorial html

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]

Leave a Reply

Your email address will not be published. Required fields are marked *