Belajar Kode HTML Catatan Kaki dan Blockquote

Kode HTML catatan kaki (footnote)

Konon kabarnya menulis yang baik itu bila kita mengutip atau mencuplik sesuatu seyogyanya disertai keterangan sumbernya apalagi bila tulisan itu tulisan ilmiah. Menyertakan sumber bacaan yang dipakai, salah satunya dengan menggunakan catatan kaki yang ditempatkan pada kaki halaman kutipan atau cuplikan.

Richard Jugge umumnya dianggap sebagai penemu catatan kaki, pertama kali digunakan dalam Bishops' Bible tahun 1568. Meski demikian, kebiasaan menyampaikan sumber bacaan ini mungkin diawali dari kebiasaan secara lisan para pemuka agama ketika menyampaikan khutbah atau ceramah saat memberikan tuntunan kepada umat. Mereka terbiasa mencupik ayat-ayat di dalam kitab mereka. Bahkan para ulama dan santri sekarang dalam menyampaikan khutbah atau ceramah senantiasa menyebutkan sumbernya, (bukan hanya yang berasal) baik itu dari Al-Qur'an dengan menyebut surat, ayat, dan bunyi ayatnya, tetapi juga ketika menyampaikan Hadis bukan lagi hanya sekedar menyebutkan bunyi dan sumbernya saja tapi juga ada yang menyebutkan hingga ke buku dan halamannya dari mana hadis itu diambil. wOw

Keterangan akan sumber cuplikan ini ada yang disebut dengan catatan kaki, catatan akhir, daftar pustaka (bibliography), referensi, atau mungkin istilah lainnya. Perbedaanya lebih pada cara penulisan saja, isinya tentang Siapa, Kapan, Apa, di Mana, yang di dalam bahasa Inggris dikenal dengan istilah 4W: Who, When, What, Where.

Kali ini yang akan dipelajari adalah mengenai cara menulis catatan kaki. Tidak seperti aplikasi office word atau writer, di web atau blogger, kita harus memasukkannya secara manual, yakni melalui kode HTML (Hypertext Markup Language). Untuk itu kita perlu mengubah tampilan menulis kita dahulu, dari tampilan menulis ke tampilan HTML.

PERINGATAN: JANGAN PERNAH kembali ke mode tampilan menulis (compose) sewaktu kamu sedang masukkan kode di tampilan HTML

Kode HTML untukmu

Kamu harus masukkan skrip kode ini di tampilan (view) "Edit HTML" di Blogger.

Narasi atau kata yang diberi catatan kaki ditambatkan penanda di akhir kata atau kalimat, biasanya menggunakan angka.<sup><a href="#ck1" id="ref1">1</a></sup><br />

Narasi lain yang akan diberi catatan kaki.<sup><a href="#ck2" id="ref2">2</a></sup>

<hr>

<a href="#ref1" title="kembali ke catatan kaki 1 dalam teks."><li id="ck1">Teks (sumber) yang menjadi isi catatan kaki pertama (footnote bukan endnote). Perbedaanya, footnote diletakan persis di bagian bawah halaman di mana kutipan dibuat, sementara endnote ada di halaman paling akhir, sebelum daftar pustaka</li></a>

<a href="#ref2"><li id="ck2">Teks untuk catatan kaki kedua. ↩</li></a>

</ol>

</div>

ALTERNATIF

Bila penomoran pada isi (sumber) catatan kaki dibuat secara manual (tanpa kode 'div', 'ol', dan 'li') bisa menggunakan cara di bawah ini.

Some more text with a footnote.<sup><a href="#fn1" id="ref1">1</a></sup>

<a href="#ref1" title="kembali ke footnote 1 dalam teks."><sup id="fn1">1</sup></a> [Text of footnote 1]

Agar tahu bedanya, perhatikan di gambar, tulisan atau angka yang berwarna jingga pada kedua contoh di atas.

Selanjutnya, untuk meningkatkan daya tarik visual catatan kaki gunakan CSS pada TEMPLATE, cari dan letakkan di atas (sebelum) teks ini ]]></b:skin> tetapi jangan lupa salin skrip kode berikut dahulu.

/* catatankaki CSS Code */

<style>

sup a {

text-decoration: none;

}

#catatankaki {

font-size: small;

}

#catatankaki ol {

list-style-type: lower-roman;

}

#catatankaki a {

text-decoration: none;

}

</style>

Contoh CSS itu MENGHAPUS GARIS BAWAH dari penanda catatan kaki dan menetapkan UKURAN HURUF yang lebih kecil untuk teks catatan kaki.

catatan

font-size: small; x-small; 0.8em; atau lainnya
list-style-type: BISA PAKAI lower-roman; decimal; square; none; atau lainnya

JavaScript untuk memperhalus guliran

Bila diinginkan dapat menambahkan JavaScript untuk mengaktifkan pengguliran yang halus saat catatan kaki diklik. Skrip ini memastikan bahwa ketika tautan catatan kaki diklik, halaman dengan lancar menggulir ke catatan kaki yang sesuai.

Salin dan tempel kode JavaScript berikut dan letakkan sebelum </body>

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

</script>

Membuat catatan kaki dalam HTML melibatkan penggunaan tag jangkar (<a>), atribut ID, dan taut yang tepat antara teks utama dan catatan kaki.

----

blockquote

Istilah blockquote bisa berubah dari waktu ke waktu seperti pada html 4.01 blockquote didefinisikan sebuah kutipan panjang, sedangkan pada html5 blockquote didefinisikan bagian yang dikutip dari sumber lain.

Akibat apa yang didefinisikan, dengan keperluan menulis sering berbeda, memunculkan istilah lain yakni pullquote yang menyoroti informasi paling penting yang diambil langsung dari konten di halaman sendiri.

Tetapi secara umum bisa pula didefinisikan sebagai "Penekanan pada kata atau kalimat tertentu dalam sebuah tulisan, yang ditampilkan secara berbeda untuk menyita perhatian pembaca. Fungsinya, untuk memberitahu pada pembaca bahwa teks yang ditampilkan berbeda itu adalah sebuah pesan penting. Bentuknya bisa berupa satu paragraf, sebaris kata, atau bisa sebuah kutipan, bisa sebuah penggalan lagu, dan sebagainya. Yang jelas, ada penekanan khusus dibanding tampilan tulisan secara keseluruhan."

Mau pullquote atau blockquote sama saja tergantung keperluan, tinggal diganti tulisannya saja, mari kita coba keduanya.

pullquote

<pullquote><div style="background-color: #F4F4F4; margin:0 0 24px 24px; padding:24px; font-size: medium;"><i>“kalimat pullquote di sini,”</i> kata gue.</div></pullquote>

atau bisa menuliskan skrip blockquote berikut di html template

blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
}

Kemudian sorot mulai dari tulisan 'blockquote' sampai tanda '}' lalu pilih dan klik dari panel ikon blockquote (tanda koma dua).

Silakan lihat perbedaan hasil keduanya di gambar.

catatan

bila ingin dengan garis penuh ganti 'dotted' dengan 'solid' (tanpa tika atas) atau 'dashed' bila ingin hasilnya setrip-setrip
bila ingin buat boks, hapus 'border-width:1px 0;'
bisa ditambahkan warna latar 'background: #b1d2a3;'

Demikian apa yang bisa kami pelajari di tingkat (sekolah) dasar, jadi kalau banyak bingung, jangan khawatir, telah kami sertakan daftar pustaka yang bisa meringankan kebingungan 😉 ... selamat mencoba.

7 Maret 2025 | samidirijono | arsitek |

daftar pustaka

---. Correct HTML Blockquote. stack overflow. Diakses 27 Februari 2025, dari https://stackoverflow.com/questions/6388138/correct-html-blockquote

---. How do I create a link to a footnote in HTML? stack overflow. Diakses 27 Februari 2025, dari https://stackoverflow.com/questions/66964/how-do-i-create-a-link-to-a-footnote-in-html

---. (2023, November). Reference Examples. APA STYLE. Diakses 3 Maret 2025, dari https://apastyle.apa.org/style-grammar-guidelines/references/examples

---. (2024, 14 Desember). Note (typography). Wikipedia. Diakses 4 Maret 2025, dari https://en.wikipedia.org/wiki/Note_(typography)

Amirotu N, Isnaini. (2023, 1 November). Penulisan Daftar Pustaka dari Buku, Artikel Jurnal, Makalah, Media Online, hingga Video YouTube. Telkom University. Diakses 3 Maret 2025, dari https://telkomuniversity.ac.id/penulisan-daftar-pustaka-dari-buku-artikel-jurnal-makalah-media-online-hingga-video-youtube

Cope, Sara. (2021, 23 April). list-style. Diakses 3 Maret 2025, dari https://css-tricks.com/almanac/properties/l/list-style

Knapp, Jessica. How do I customize my blockquotes in Blogger? Blogging Basics 101. Diakses 3 Maret 2025, dari https://www.bloggingbasics101.com/how-do-i-customize-my-blockquotes-in-blogger

Shah, Sanket. (2024, 30 Juli). A Step-by-Step Guide to Adding HTML Footnotes. DhiWise. Diakses 27 Februari 2025, dari https://www.dhiwise.com/post/a-step-by-step-guide-to-adding-html-footnotes