HTML: Membuat Kutipan (Quotation)

Sunday, 10 October 2021

HTML: Membuat Kutipan (Quotation)

Halo apa kabarnya nih? Semoga sehat sentosa semuanya. Ingat, selalu jaga imun tubuh. OK?

Di postingan ini, kita akan coba belajar membuat kutipan atau biasa kita kenal dengan istilah “Quote”.

Ada beberapa tag yang akan kita coba yaitu:

  • <blockquote>
  • <q>
  • <abbr>
  • <address>

Siap? Mari kita coba!

Buat file baru dengan nama πŸ“„latihan-kuotes.html kemudian buat struktur dasar HTML-nya. Udah bisa kan? kalo lupa, silahkan lihat disini HTML: Hello World.

Tag <blockquote> untuk membuat Kutipan (Penjelasan)

Kita biasanya mengambil sebuah keterangan/penjelasan dari beberapa sumber untuk nanti dipakai lagi di dalam tulisan kita. Baik itu makalah, atau tulisan ilmiah lainnya.

Misal kita mengutip penjelasan mengenai pengertian internet.

<p>Pengertian Internet menurut Wikipedia:</p>

<blockquote cite="https://id.wikipedia.org/wiki/Internet">
Internet (lakuran bahasa Inggris dari interconnected network;
arti harfiah: "jaringan yang saling berhubungan") adalah sistem jaringan komputer yang saling terhubung secara global
dengan menggunakan paket protokol internet (TCP/IP) untuk menghubungkan perangkat di seluruh dunia.
Ini adalah jaringan dari jaringan yang terdiri dari jaringan privat, publik, akademik, bisnis, dan pemerintah lokal ke lingkup global,
dihubungkan oleh beragam teknologi elektronik, nirkabel, dan jaringan optik.
Internet membawa beragam sumber daya dan layanan informasi,
seperti dokumen hiperteks yang saling terkait dan aplikasi World Wide Web (WWW), surat elektronik, telepon, dan berbagi berkas.
</blockquote>

Attribute cite pada tag <blockquote> menandakan sumber yang dikutip.

Coba simpan dan jalankan..

🦁 : “Muncul? Selamat! Anda menjadi Shinobi hari ini.”

Tag <q> untuk membuat Kutipan Pendek

Sering buat kata bijak? atau comot perkataan orang lain, trus dibuat ulang jadi sebuah kutipan motivasi? Nah, itu adalah “Kutipan Pendek”.

Kita akan pake kata bijak dari serial anime Naruto.

— btw kurama dah pergi :)

<p>Naruto pernah berkata: <q>Banyak orang yang bilang aku akan gagal,
tapi aku akan membuktikan bahwa perkataan mereka salah</q>.</p>

Monggo dicoba..

🦁 : “Keren kan?”

Tag <abbr> untuk menjelaskan sebuah Singkatan

Banyak kalimat-kalimat panjang di dunia ini, kemudian disingkat agar mudah diingat, contohnya: HyperText Markup Language menjadi “HTML”.

Nah, biar lebih keren, kita pake tag <abbr> di singkatannya.

Contoh tag abbr di HTML

<p>Saya cinta <abbr title="Negara Kesatuan Republik Indonesia">NKRI</abbr>.</p>

Attribute title pada tag <abbr> berguna untuk menampilkan keterangan, ketika pointer mouse berada diatas singkatan.

Tag <address> untuk menampilkan Alamat

Kali ini agak berbeda dengan sebelumnya. Tag ini bertujuan untuk menampung alamat lengkap seperti dalam sebuah surat.

<address>
Ditulis oleh: Pak Ladangser<br> 
Kunjungi website kami:<br>
www.ladangser.my.id<br>
Ambon, Maluku<br>
Indonesia
</address>

Jika diperhatikan, ada beberapa tag lain memiliki hasil serupa mirip seperti hasil dari tag-tag diatas. Bener ga? Bisa aja kita pake tag <i> biar miring ketimbang pake tag <address> misalnya.

πŸ‘ : “Terus, kenapa harus ribet menggunakan tag-tag diatas? Kalau kita bisa pake tag lain?”

🦁 : “Pertanyaan bagus.. Jika kita balik ke pengertian dan tujuan HTML, adanya bahasa ini untuk memberi tanda. Karena itu, walau ada tag yang punya hasil sama dengan tag lain, namun secara konteks itu berbeda.”

πŸ‘ : “Tapi-kan ribet..”

🦁 : “Ya, balik lagi ke prefensi masing-masing orang. Namun, untuk menjaga struktur yang harmonis agar mudah dimengerti dan spesifik, gunakanlah tag sesuai dengan tujuannya.”

Sampe sini paham? Silahkan dicoba-coba dan modifikasi. Beri komentar jika ada yang tidak jelas atau ada pertanyaan lain.