Skip to content Skip to sidebar Skip to footer
Home / HTML / Web Design

Tutorial Belajar HTML 10 : Quote pada HTML

By Web Design Purbalingga Post a Comment
Quote pada HTML – Yang namanya quote pasti sudah tidak asing lagi. Quote itu adalah sejenis ungkapan kata – kata mutiara atau kutipan kata – kata motivasi, atau mungkin kita ingin mengutip sebuah perkataan seseorang kedalam dokumen kita. Pastinya kita tidak akan menuliskan begitu saja tanpa memberinya sebuah tanda jika hal itu adalah kutipan perkataan atau ungkapan khusus.

Quote (kutipan) pada HTML

Dalam html pun kalian bisa menuliskan quote, quote dalam html didefinisikan dengan beberapa tag. Diantaranya, ada quote atau kutipan yang pendek dan ada yang panjang. Untuk lebih jelasnya perhatikan masing – masing contohnya berikut ini

Kutipan Pendek

Quote atau kutipan pendek maksudnya adalah, jika kalian ingin mengutip sebuah ungkapan tapi teks yang akan kalian kutip tidak terlalu panjang atau kutipan tersebut ingin kalian sisipkan pada dokumen kalian, contohnya seperti berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan HTML</title>
</head>
<body>
  <!-- Quote / Kutipan Pendek -->
  <p> Ada satu prinsip yang selalu saya ingat yaitu : <q>Tekuni minatmu dan jangan putus semangat !</q> </p>
</body>
</html>
Jadi, untuk membuat sebuah quote dengan kalimat yang pendek atau hanya ingin di sisipkan pada kalimat yang kita buat, cukup menggunakan tag <q> dan juga tanpa menambahkan tanda petik dua (“).

Dan hasilnya

Kutipan Panjang

Untuk yang ini, biasanya digunakan untuk mengutip sebuah perkataan yang di ambil dari sumber lain yang teksnya dikutip secara utuh. Misal
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan HTML</title>
</head>
<body>
  <!-- Quote / Kutipan Panjang -->
  <p>Mark Zuckerberg pernah berkata :</p><blockquote>Banyak orang yang penasaran dengan cerita Facebook hingga bisa menjadi seperti ini. Sebenarnya ceritanya sangatlah membosankan. Maksud saya, kami hanya duduk bersama komputer kami selama enam tahun hanya untuk coding.</blockquote>
</body>
</html>
Tag <blockquote> pada html digunakan untuk membuat quote atau membuat kutipan utuh yang di ambil dari sumber lain. Tentunya memiliki sedikit kemiripan dengan tag <q> yang pertama.
Hasilnya


Intinya kalian jelas bisa membedakan antara quote pendek dan yang panjang. Jika kutipan pendek itu menggunakan tanda petik dua sedangkan untuk kutipan panjang dia membuat paragraf baru seperti contoh di atas.

Tambahan

Ini hanya materi tambahan saja, yaitu bagaimana cara menampilan kepanjangan dari sebuah singkatan. Maksudnya seperti ini, ketika kalian menyingkat sebuah teks menjadi beberapa huruf dan kalian tidak ingin menampilkan secara langsung maksud dari singkatan tersebut. Agar lebih mudah untuk di pahami, perhatikan contoh berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan HTML</title>
</head>
<body>
  <!-- Singkatan -->
  <p>Situs <abbr title="Web Design Purbalingga">WDP</abbr> merupakan situs belajar design web yang baru saja diluncurkan awal 2018 ini.</p>
</body>
</html>
Tag <abbr> digunakan untuk menampilkan teks yang telah disingkat. Cara kerja dari tag ini adalah saat user mengarahkan kursornya ke atas teks yang disingkat, maka makna dari teks yang disingkat tadi akan tampil.

Hasilnya


Untuk mengetahui lebih dalam tentang materi tag quote (kutipan) kali ini, silahkan buka Kamus HTML dari blog ini.

Sekian materi kali ini tentang membuat kutipan atau Quote pada HTML, semoga mudah dipahami. Sampai jumpa pada materi selanjutnya. Jika ada poin yang belum di mengerti, silahkan tinggalkan pertanyaan kalian di kolom komentar di bawah ini.

Post a Comment for "Tutorial Belajar HTML 10 : Quote pada HTML"