Belajar HTML Part 7 - Membuat Kutipan (Quotations)

Assalamu'alaikum Warahmatullaahi Wabarakatuh

Pada artikel sebelumnya kita telah belajar tentang Text Formatting. Pada kali ini kita akan belajar membuat sebuah kutipan atau dalam istilah HTML disebut quotations. Langsung saja siapkan Notepad++ Anda. 

A. <q> untuk Kutipan Pendek

Ketik script berikut pada Notepad++ Anda :

<p> Jack Sparrow berkata : <q>The Problem is not the Problem. The Problem is your attitude about the problem</q></p>

Simpan dengan nama quotations.html kemudian jalankan pada web browser Anda. Berikut hasilnya :

Dengan tag <q>, browser akan menandai elemen yang kita beri tag tersebut dengan "(tanda kutip)

B. <blockquote> untuk Kutipan Panjang

Untuk membuat kutipan panjang, ketik script berikut pada Notepad++ :

<p> Rasulullah SAW bersabda : <blockquote> Iman terbagi menjadi 60 atau 70 lebih cabang. Cabang yang paling utama adalah kalimat Laa ilaaha illallaah, cabang yang yang terendah adalah menyingkirkan gangguan dari jalan, dan malu adalah cabang dari iman</blockquote> </p>

Simpan misal dengan nama quotations.html kemudian jalankan pada web browser. Berikut hasilnya :

Seperti yang kita lihat, browser akan merubah elemen yang diapit tag <blockquote> dengan penulisan yang berbeda.

C. <abbr> untuk Singkatan

Tag <abbr> ini digunakan untuk mendefinisikan singkatan. Coba ketik script berikut :

<p> <abbr title="Badan Usaha Milik Negara">BUMN</abbr> merupakan singkatan dari Badan Usaha Milik Negara</p>

Simpan kembali dengan nama quotations.html. Secara fisik tidak ada perubahan. Namun tag <abbr> ini bermanfaat untuk mendefinisikan sebuah singkatan sehingga bisa lebih mudah dilacak oleh search engine.

D. <address> untuk Informasi Kontak

Tag <address> digunakan untuk menandai sebuah informasi kontak. Ketik script berikut :

<p> Berikut Informasi Kontak saya : <address> Nama : Kamaludin Khoir<br> Alamat : Kp. Gunung Tanjung RT/01Rw 09, Kel. Sukamanah, Kec. Cipedes, Kota Tasikmalaya </address> Terima kasih</p>

Simpan dengan nama quotations.html. Berikut hasilnya :

Secara otomatis elemen dalam tag <address> akan dibuat italic(miring) dan diberi jeda satu enter dengan konten sebelumnya.

E.<cite> untuk titel atau sitasi Buah Karya

Tag <cite> digunakan untuk memberi titel atau sitasi dari sebuah karya. Contoh, coba ketik script berikut :

Kalau sampai waktuku<br> 
‘Ku mau tak seorang ‘kan merayu<br> 
Tidak juga kauTak perlu sedu sedan ituAku ini binatang jalang<br> 
Dari kumpulannya terbuangBiar peluru menembus kulitku<br> 
Aku tetap meradang menerjangLuka dan bisa kubawa berlari<br> 
Berlari<br> 
Hingga hilang pedih perih <br>
Dan akan akan lebih tidak perduli<br> 
Aku mau hidup seribu tahun lagi<br> 
<cite>Aku</cite> Karya : Chairil Anwar

Simpan dengan nama quotations.html. Kemudian jalankan pada web browser. Berikut hasilnya :

Secara otomatis, elemen dengan tag <cite> akan ditulis secara miring.

F. Tag <bdo> untuk Arah Penulisan Sebuah Teks.

bdo adalah singkatan dari Bi-Directional Override. Sebuah teks bisa kita ubah arah penulisannya untuk kebutuhan tertentu. Ketik script berikut :

<bdo dir="rtl">Teks ini akan ditampilkan dari arah kanan ke kiri</bdo>

Seperti biasa simpan dengan nama quotations.html kemudian jalankan pada web browser Anda. Berikut adalah tampilan yang dihasilkan :

Dalam script yang kita tulis di atas, terdapat atribut dir="rtl" yang berarti direction atau arah penulisan akan ditulis secara rtl (Right to Left) atau dari kanan ke kiri. Dan hasilnya, seperti yang kita lihat, teks yang kita tulis akan terbalik menjadi dari arah kanan ke kiri. 

Demikian Seri Belajar HTML Membuat Kutipan (Quotations). Semoga bermanfaat. Terima kasih,

Wassalamu'alaikum Warahmatullaahi Wabarakatuh.