Belajar HTML Part 9 - Membuat Kutipan (Quotation) di HTML

Kutipan (Quotation)
Kutipan atau quotation dalam HTML digunakan saat menulis teks yang berasal dari suatu sumber ataupun dari sumber lain.
Contoh

<!DOCTYPE html>
<html>
<body>

<p>Di bawah ini adalah contoh kutipan sebuah blog:</p>

<blockquote cite="http://king-octahasan.blogspot.co.id/">
Blog ini berisi konten pembelajaran bagi kita semua. Saya harap blog ini bisa bermanfaat bagi yang mempunyai hobi belajar tentunya. Apabila Anda menemukan kesulitan untuk mencari konten yang dimaksud, maka carilah lewat Daftar Isi blog ini.
</blockquote>

</body>
</html>

Hasilnya:

HTML <blockquote> untuk Kutipan Panjang

Tag <blockquote> digunakan untuk menuliskan kutipan teks yang panjang yang diambil dari sumber lain. Elemen blockquote memiliki aturan teks dengan indent yang agak rapat ke dalam.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>Di bawah ini adalah contoh kutipan panjang:</p>

<blockquote cite="http://king-octahasan.blogspot.co.id/">
Blog ini berisi konten pembelajaran bagi kita semua. Saya harap blog ini bisa bermanfaat bagi yang mempunyai hobi belajar tentunya. Apabila Anda menemukan kesulitan untuk mencari konten yang dimaksud, maka carilah lewat Daftar Isi blog ini.
</blockquote>

</body>
</html>

Hasilnya:

HTML <q> untuk Kutipan Pendek

Tag <q> digunakan untuk mengutip kalimat yang pendek (kutipan pendek) yang akan disatukan dengan text yang ada.

Tag <q> memiliki sifat inline element yang artinya kutipan pendek yang terletak di dalam baris (inline). Browser biasanya menyisipkan tanda kutip disekitar elemen <q>.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>About My Blog: <q>Blog merupakan blog personal saya, sebagai pemilik, penulis, dan satu-satunya admin situs ini.</q></p>

</body>
</html>

HTML <abbr> untuk Singkatan

Elemen <abbr> merupakan tag untuk singkatan atau akronim. Element <abbr> digunakan bersamaan dengan atribut title yang menjelaskan kepanjangan dari singkatan tersebut.

Untuk melihat hasilnya, arahkan mouse di kata yang diberi tag <abbr>.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>Perguruan Tinggi <abbr title="Sekolah Tinggi Managemen Informatika dan Komputer">STMIK</abbr> Kampus 2 Gorontalo Utara</p>

</body>
</html>

Hasilnya:

Perhatikan hasil dari contoh diatas, jika kita arahkan mouse / kursor ke kata STMIK, maka akan muncul kalimat yang ada dalam tag <abbr> yaitu kalimat "Sekolah Tinggi Manajemen Informatika dan Komputer".

HTML <address> Informasi Kontak

Elemen HTML <address> digunakan untuk menunjukan informasi kontak penulis atau pemilik dari sebuah dokumen atau artikel.

Elemen <address> biasanya ditampilkan dalam huruf miring. Kebanyakan browser akan menambahkan satu baris sebelum dan sesudah elemen.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<address>
Ditulis oleh king_octahasan<br> 
Kunjungi hanya di:<br>
king-octahasan.blogspot.co.id<br>
Kwandang, Gorontalo Utara<br>
Gorontalo, Indonesia
</address>

</body>
</html>

Hasilnya:

HTML <cite>
Elemen HTML <cite> digunakan untuk membuat judul sebuah karya. Browser biasanya menampilkan elemen <cite> dengan font italic.
Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p><cite>Tutorial Belajar HTML</cite> oleh king-octahasan, 2018</p>

</body>
</html>

Hasilnya:

HTML <bdo>

Elemen HTML <bdo> merupakan singkatan dari bi-directional override. Elemen <bdo> digunakan untuk mengganti atau mengubah arah teks:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

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

</body>
</html>

Hasilnya:

Perhatikan hasil dari contoh diatas! Terlihat bahwa teks diatas hanya bisa dibaca terbalik, yaitu dari kanan ke kiri.

Demikian pembahasan tentang cara membuat Kutipan pada HTML.

Semoga bemanfaat!

Sumber: https://www.w3schools.com