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.
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 :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h3>Belajar Tag bdo di HTML</h3>
<p>
<bdo dir="ltr">Warung Belajar adalah website belajar komputer,
anda bisa belajar mengenai pemrogaman web seperti HTML,CSS,Javascript,PHP, dan Mysql</bdo></p>
<p>
<bdo dir="rtl">Warung Belajar adalah website belajar komputer,
anda bisa belajar mengenai pemrogaman web seperti HTML,CSS,Javascript,PHP, dan Mysql</bdo></p>
</body>
</html>lalu silahkan anda simpan, dan buka melalui browser.
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
Post a Comment (0)