Pinned

Cara Membuat Kutipan pada HTML

Elemen kutipan pada HTML digunakan untuk mengutip teks pada laman web, dimana ukuran dari teks yang dikutip akan tampil dengan ukuran berbeda dari ukuran normal teks pada laman web

6 Jenis Utama Pembuatan Kutipan pada HTML
Ilustrasi Kutipan HTML

Sebelum memahami lebih dalam materi tentang Cara Membuat Kutipan pada HTML, terlebih dahulu pelajari materi tentang: Cara Membuat Teks Tebal Miring dan Garis Bawah Pada HTML [klik], Elemen Paragraf pada HTML dan Fungsinya [klik], dan Atribut Populer HTML dan Fungsinya [klik].

Berikut ini adalah beberapa elemen kutipan yang sering digunakan pada HTML:

satu, Elemen <q>: Elemen ini digunakan untuk mengatur sekumpulan teks dalam tanda kutip. Elemen <q> memiliki bagian pembukaan dan bagian penutupan pada penggunaan elemennya. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan -->

 

<head>

<title>

Quotations

</title>

</head>

 

<body>

 

<h3>

Saling melompat

</h3>

 

<p>

Serigala coklat melompati kucing gendut<br>

</p>

 

<!--dalam quotes-->

<p>

<q>Serigala coklat melompati kucing gendut</q>

</p>

 

</body>

</html>

Output:

Saling melompat

Serigala coklat melompati kucing gendut

Serigala coklat melompati kucing gendut


dua, Elemen <blockquote>: Elemen ini juga digunakan untuk kutipan, namun dengan cara yang berbeda. Ketimbang meletakkan teks pada kutipan, elemen ini mengubah letak teks itu sendiri sehingga menjadi bentuk yang unik dari teks yang lainnya. Elemen ini memiliki bagian pembukaan dan bagian penutupan. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan-->

 

<head>

<title>

Blockquote

</title>

</head>

 

<body>

 

<h3>

Saling melompat

</h3>

 

<p>

Serigala coklat melompat diatas kucing gendut<br>

</p>

 

<!--Dalam blockquotes-->

<p>

<blockquote>

Serigala coklat melompat

di atas kucing gendut</blockquote>

</p>

 

</body>

</html>

Output:

Saling melompat

Serigala coklat melompat diatas kucing gendut

Serigala coklat melompat di atas kucing gendut


tiga, Elemen <address>: Merupakan elemen yang digunakan untuk mendefinisikan alamat pada sebuah laman web, denga teks yang berada di dalam alamat tersebut akan menjadi emphasize. Elemen ini memiliki bagian pembukaan dan bagian penutupan. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan -->

 

<head>

<title>

Address

</title>

</head>

 

<body>

 

<h3>

Alamat rumah

</h3>

 

<address>

<p>

Alamat:<br>

710-B, Advant Navis Business Park,<br>

Sector-142, Noida Uttar Pradesh – 201305

</p>

</address>

 

</body>

</html>

Output:

Alamat rumah

Alamat:
710-B, Advant Navis Business Park,
Sector-142, Noida Uttar Pradesh – 201305


empat, Elemen <abbr>: Merupakan elemen yang digunakan untuk mendefinisikan teks sebagai akronim atau singkatan. Atribut title atau judul juga dapat digunakan untuk menampilkan versi penuh dari akronim, ketika mouse diarahkan menuju ke elemen <abbr>. Elemen ini memiliki bagian pembukaan dan bagian penutupan. Penggunaan elemen ini sangat berguna pada browser dan mesin pencari. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan -->

 

<head>

<title>

Abbreviations

</title>

</head>

 

<body>

 

<h3>

Selamat datang

</h3>

 

<!--Akronim dari teks-->

<p>

Selamat datang di <abbr title="Rumah Makan Padang">RMP</abbr>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang di RMP


Baca Juga:

lima, Elemen <bdo>: Merupakan elemen yang digunakan untuk mendefinisikan bidireksional dari teks atau dengan kata lain teks yang ditulis dari kiri ke kanan akan ditulis sebaliknya. Elemen ini memiliki bagian pembukaan dan penutupan. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan -->

 

<head>

<title>

Bidirectional

</title>

</head>

 

<body>

 

<h3>

Selamat datang

</h3>

 

<!--Teks dalam format normal-->

<p>

Serigala coklat melompat di atas kucing gendut<br>

</p>

 

<!--Inside <bdo> tag-->

<p>

<bdo dir="rtl">Serigala coklat melompat

di atas kucing gendut</bdo>

</p>

 

</body>

</html>

Output:

Selamat datang

Serigala coklat melompat di atas kucing gendut

Serigala coklat melompat di atas kucing gendut


enam, Elemen <cite>: Elemen ini digunakan untuk mendefinisikan sebuah judul dari sebuah pekerjaan dan melakukan emphasize dari teks tersebut. 

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML kutipan-->

 

<head>

<title>

Cite

</title>

</head>

 

<body>

 

<h3>

Selamat datang

</h3>

 

<!--judul berada dalam cite tag-->

<p>

Tim <cite>Merah</cite> adalah kelompok terbaik dalam<br>

lomba makan nasi padang.

</p>

 

</body>

</html>

Output:

Selamat datang

Tim Merah adalah kelompok terbaik dalam
lomba makan nasi padang.


Referensi Tambahan:
Artikel ini didedikasikan kepada: Nadya Putri Al-Fath, Nena Mahaesti, Nyawiji Rizki Lestari, Putri Safina Liestyana, dan Rafi' Alauddin.

6 komentar:

  1. Apa yang dimaksud dengan kutipan pada HTML?

    BalasHapus
    Balasan
    1. HTML quotation digunakan untuk membuat sebuah kutipan pada HTML. Tag kutipan pada HTML digunakan untuk mendefinisikan bentuk kutipan dari sebuah kalimat atau kata yang akan ditampilkan pada website HTML.

      Hapus
  2. Apa yang dimaksud dengan kutipan secara umum?

    BalasHapus
    Balasan
    1. Kutipan merupakan bentuk kata atau frasa yang diambil dari orang lain atau dari karya sastra atau literatur yang diminta dari sumber tertentu. Contoh, kutipan ketika seseorang mengambil suatu bagian dari karya Shakesspeare dan mengulangi kalimat dari karya tersebut pada karya sendiri atau tulisan sendiri tanpa mengubah satu kata pun dari karyanya.

      Hapus
  3. Apa yang dimaksud dengan tag kutipan HTML?

    BalasHapus
    Balasan
    1. Tag kutipan dalam HTML digunakan untuk menampilkan kutipan dengan menggunakan tag < q > ataupun menggunakan tag kutipan lainnya yang tersedia pada HTML. Tag ini membantu untuk menunjukkan bahwa teks yang terkandung dalam suatu kalimat merupakan saduran dari sumber lain atau berupa kalimat kutipan.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things come from small things -