Beranda
HTML

Belajar HTML (05): Format Kutipan

Subscribe channel BangHaji CotCom

Tulisan sebelumnya sudah menjelaskan tentang bagaimana memformat tulisan pada halaman web, pada tulisan ini kita masih bicara tentang format tulisan tetapi khusus untuk format kutipan. Di dalam sebuah kutipan juga bisa berisi format-format seperti tebal, miring dan sebagainya.

Ada beberapa bentuk kutipan pada halaman web -meski tidak semuanya untuk kutipan- yang akan kita bahas, silahkan nanti digunakan sesuai keperluan.

blockquote

Format kutipan ini adalah yang umum digunakan, secara default akan menghasilkan bentuk tulisan dengan margin kanan dan kiri yang lebih besar dari format tulisan normal (lebar bidang kutipan akan lebih kecil dari format tulisan).

Cara penulisan kode HTMLnya adalah dengan meletakkan kalimat kutipan di antara tanda <blockquote> dan </blockquote>.

Contohnya seperti ini.

<p>Wikipedia menyebutkan bahwa:</p><blockquote>HTML (Hyper Text Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</blockquote>

q

Tag kedua yang bisa digunakan untuk kutipan adalah q, yang merupakan bentuk kutipan singkat dan bisa diterapkan secara inline. Kalimat kutipan diletakkan di antara <q> dan </q> dan akan menghasilkan tampilan dengan tanda petik ganda.

Misalnya:

<p>HTML: <q>Hyper Text Markup Language</q></p>

Agar lebih jelas bagaimana perbedaan hasil antara blockquote dan q, silahkan ketik kode berikut dan jalankan, simpan dengan nama file 08-html-format-kutipan-blockquote-q.html.

<!DOCTYPE html><html><head>   <title>Format Kutipan</title></head><body>   <h1>Format Kutipan</h1>      <h3>Contoh blockquote</h3>   <p>Wikipedia menyebutkan bahwa:</p>   <blockquote>HTML (Hyper Text Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</blockquote>      <h3>Contoh q</h3>   <p>HTML: <q>Hyper Text Markup Language</q></p></body></html>

Jadinya seperti gambar ini 😀

Tampilan file 08-html-format-blockquote-q.html

abbr

Tag abbr digunakan untuk mendefinisikan singkatan atau akronim. Tag ini juga penting untuk browser dan mesin pencari. Contoh penulisannya: <p><abbr title="Negara Kesatuan Republik Indonesia">NKRI</abbr> merdeka pada tahun 1945.</p>. Hasilnya adalah, tulisan NKRI akan diberi garis bawah putus-putus dan jika kursor diletakkan di atasnya akan menampilkan tulisan “Negara Kesatuan Republik Indonesia”.

address

Tag address digunakan untuk mendefiniisikan alamat kontak. Pada browser akan ditampilkan dalam bentuk cetak miring. Contoh penulisannya sebagai berikut.

<address>   Dikirim oleh banghaji<br>    Kunjungi:<br>   www.banghaji.com<br>   Palangka Raya, Kalimantan Tengah<br>   Indonesia</address>

cite

Tag cite digunakan untuk membuat cetak miring pada kalimat atau kata tertentu yang biasanya dijadikan judul suatu karya atau produk, misalnya judul buku. Tag ini cocok untuk menuliskan daftar pustaka. Contoh penulisannya: <p>Erfan, Muhammad. 2016. <cite>Kode Praktis HTML5.</cite> BanghajiDotCom Press. Palangka Raya</p>.

Silahkan ketik kode berikut, simpan dengan nama file 09-html-format-kutipan-abbr-address-cite.html, kemudian diakses.

<!DOCTYPE html><html><head>   <title>Format Kutipan</title></head><body>   <h1>Format Kutipan</h1>      <h3>Contoh abbr</h3>   <p><abbr title="Negara Kesatuan Republik Indonesia">NKRI</abbr> merdeka pada tahun 1945.</p>      <h3>Contoh address</h3>   <address>      Dikirim oleh banghaji<br>       Kunjungi:<br>      www.banghaji.com<br>      Palangka Raya, Kalimantan Tengah<br>      Indonesia   </address>      <h3>Contoh cite</h3>   <p>Erfan, Muhammad. 2016. <cite>Kode Praktis HTML5.</cite> banghajidotcom press. Palangka Raya</p></body></html>

Hasilnya begini 😀

Tampilan file 09-html-format-abbr-address-cite.html

bdo

Tag terakhir yang kita bahas pada format kutipan ini adalah dbo, Bi-Directional Override, gunanya untuk membalik arah tulisan. Pada tag tesebut ditambahkan atribut dir, masih ingat bahasan tentang atribut? Ada 2 value untuk atribut dir, yaitu ltr (left to right) dan rtl (right to left).

Langsung saja, contoh selengkapnya sebagai berikut, simpan dengan nama file 10-html-format-kutipan-bdo.html, dan lihat hasilnya.

<!DOCTYPE html><html><head>   <title>Format Kutipan</title></head><body>   <h1>Format Kutipan</h1>      <h3>Contoh bdo</h3>   <bdo dir="ltr">Kalimat ini akan ditampilkan secara normal.</bdo>   <br><br>   <bdo dir="rtl">Kalimat ini akan ditampilkan secara terbalik dari kanan ke kiri. Agar bisa terbaca secara jelas, silahkan gunakan cermin, letakkan cermin di samping layar monitor Anda dengan sudut 90 derajat antara layar monitor dan cermin.</bdo></body></html>

Tampilan file 10-html-format-kutipan-bdo.html

Demikian, tutorial HTML tentang format kutipan, kita akan lanjutkan lagi pada tulisan lainnya. 😎

Related Posts