Kembali ke Perpustakaan
Region: Switch to EN
Pemula The Odin Project • foundations

Bekerja dengan Teks

Ringkasan Pelajaran

Sebagian besar konten di web berbasis teks, jadi Anda akan sering bekerja dengan elemen teks HTML.

Pendahuluan

Sebagian besar konten di web berbasis teks, jadi Anda akan sering bekerja dengan elemen teks HTML.

Dalam pelajaran ini, kita akan mempelajari tentang elemen berbasis teks yang paling sering Anda gunakan.

Ringkasan pelajaran

Bagian ini berisi ringkasan umum tentang topik yang akan Anda pelajari dalam pelajaran ini.

  • Cara membuat paragraf.
  • Cara membuat judul (headings).
  • Cara membuat teks tebal.
  • Cara membuat teks miring.
  • Hubungan antar elemen yang bersarang (nested elements).
  • Cara membuat komentar HTML.

Paragraf

Apa yang Anda harapkan dari teks berikut jika ditampilkan pada halaman HTML?

<body>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</body>

Teks tersebut terlihat seperti dua paragraf, jadi Anda mungkin berharap teksnya ditampilkan seperti itu. Namun, kenyataannya tidak demikian, seperti yang bisa Anda lihat pada output di bawah ini:

See the Pen no-paragraphs-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Ketika browser menemui baris baru seperti ini di HTML Anda, ia akan menekannya menjadi satu spasi saja. Hasil dari penekanan ini adalah semua teks akan berkumpul menjadi satu baris panjang.

Jika kita ingin membuat paragraf di HTML, kita perlu menggunakan elemen paragraf, yang akan menambahkan baris baru setelah setiap paragraf kita. Elemen paragraf ditentukan dengan membungkus konten teks dengan tag <p>.

Mengubah contoh kita sebelumnya dengan menggunakan elemen paragraf akan memperbaiki masalah tersebut:

See the Pen pargraph-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Judul (Headings)

Judul berbeda dari elemen teks HTML lainnya: judul ditampilkan lebih besar dan lebih tebal daripada teks lainnya untuk menandakan bahwa itu adalah judul.

Ada 6 level judul yang berbeda mulai dari <h1> hingga <h6>. Angka di dalam tag judul mewakili level judul tersebut. Judul yang paling besar dan paling penting adalah h1, sedangkan h6 adalah judul terkecil di level terendah.

Judul didefinisikan hampir sama seperti paragraf. Misalnya, untuk membuat judul h1, kita membungkus teks judul kita dalam tag <h1>.

See the Pen HTML-headings-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Menggunakan level judul yang benar sangat penting karena level memberikan hierarki pada konten. Judul h1 harus selalu digunakan untuk judul keseluruhan halaman, dan judul level yang lebih rendah harus digunakan sebagai judul untuk konten di bagian halaman yang lebih kecil.

Elemen Strong

Elemen <strong> membuat teks menjadi tebal. Secara semantik, elemen ini juga menandai teks sebagai hal yang penting; hal ini memengaruhi alat bantu, seperti pembaca layar (screen readers), yang diandalkan oleh pengguna dengan gangguan penglihatan untuk menggunakan situs web Anda. Nada suara pada beberapa pembaca layar akan berubah untuk menyampaikan pentingnya teks di dalam elemen strong. Untuk mendefinisikan elemen strong, kita membungkus konten teks dalam tag <strong>.

Anda dapat menggunakan strong sendirian:

See the Pen HTML-single-strong-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Tetapi Anda mungkin akan lebih sering menggunakan elemen strong bersama dengan elemen teks lainnya, seperti ini:

See the Pen HTML-strong-with-paragraph-exmample by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Terkadang Anda ingin membuat teks menjadi tebal tanpa memberikan makna penting. Anda akan mempelajari cara melakukannya di pelajaran CSS nanti di kurikulum ini.

Elemen Em

Elemen <em> membuat teks menjadi miring. Secara semantik, elemen ini juga memberikan penekanan (emphasis) pada teks, yang sekali lagi dapat memengaruhi hal-hal seperti pembaca layar. Untuk mendefinisikan elemen yang ditekankan, bungkus konten teks dalam tag <em>.

Untuk menggunakan <em> sendirian:

See the Pen HTML-single-em-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Sekali lagi, seperti elemen strong, Anda akan menemukan diri Anda lebih sering menggunakan elemen <em> dengan elemen teks lainnya:

See the Pen HTML-em-with-paragraph-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Bersarang dan Indentasi (Nesting and Indentation)

Anda mungkin telah memperhatikan bahwa dalam semua contoh dalam pelajaran ini kita menjorokkan (indent) elemen apa pun yang berada di dalam elemen lain. Ini dikenal sebagai elemen bersarang (nesting elements).

Ketika kita menyarangkan elemen di dalam elemen lain, kita membuat hubungan orang tua (parent) dan anak (child) di antara mereka. Elemen yang bersarang adalah anak dan elemen tempat mereka bersarang adalah orang tua.

Dalam contoh berikut, elemen body adalah orang tua dan paragraf adalah anaknya:

See the Pen HTML-nesting-parent-child by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Sama seperti dalam hubungan manusia, elemen orang tua HTML dapat memiliki banyak anak. Elemen pada level sarang yang sama dianggap sebagai saudara (siblings).

Misalnya, kedua paragraf dalam kode berikut adalah saudara, karena keduanya adalah anak dari elemen body dan berada pada level sarang yang sama satu sama lain:

See the Pen HTML-nesting-siblings by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Kita menggunakan indentasi untuk membuat level sarang menjadi jelas dan mudah dibaca bagi diri kita sendiri dan pengembang lain yang akan bekerja dengan HTML kita di masa depan. Dalam contoh kita, kita telah menjorokkan elemen anak sebanyak dua spasi per level sarang.

Hubungan orang tua, anak, dan saudara antar elemen akan menjadi jauh lebih penting nanti ketika kita mulai menata HTML kita dengan CSS dan menambahkan perilaku dengan JavaScript. Namun, untuk saat ini, yang penting adalah mengetahui perbedaan tentang bagaimana elemen-elemen tersebut berhubungan dan terminologi yang digunakan untuk menggambarkan hubungan mereka.

Komentar HTML

Komentar HTML tidak terlihat di browser; mereka memungkinkan kita untuk mengomentari kode kita sehingga pengembang lain atau diri kita di masa depan dapat membacanya dan mendapatkan beberapa konteks tentang sesuatu yang mungkin tidak jelas dalam kode.

Untuk menulis komentar HTML, kita cukup membungkus komentar dengan tag <!-- dan -->. Contohnya:

See the Pen HTML-comments-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Pintasan keyboard VSCode

Jika Anda merasa mengetik sintaks komentar itu melelahkan, pintasan berikut akan membantu Anda membuat komentar baru dengan cepat, mengubah baris apa pun menjadi komentar, atau membatalkan komentar (uncomment) pada baris apa pun:

  • Pengguna Mac: Cmd + /
  • Pengguna Windows dan Linux: Ctrl + /

Penting untuk diketahui bahwa pintasan ini adalah untuk tata letak keyboard bahasa Inggris dan tidak selalu berfungsi dengan tata letak non-Inggris lainnya. Kami yakin Anda akan dapat menemukan padanan dari pintasan ini untuk tata letak keyboard Anda.

Tugas

  1. Tonton video Kevin Powell tentang Paragraf dan Judul HTML.
  2. Tonton video Kevin Powell tentang Teks Tebal dan Miring HTML.
  3. Untuk berlatih bekerja dengan teks di HTML, buatlah halaman artikel blog sederhana yang menggunakan berbagai judul, menggunakan paragraf, dan memiliki beberapa teks dalam paragraf yang ditebalkan dan dimiringkan. Anda dapat menggunakan Lorem Ipsum untuk menghasilkan teks tiruan, sebagai pengganti teks asli saat Anda membangun situs Anda. VS Code menyertakan pintasan untuk menghasilkan lorem ipsum untuk Anda. Untuk memicu pintasan tersebut, ketik lorem pada baris tempat Anda menginginkan teks tiruan, lalu tekan tombol Enter, dan voila, Anda telah menghasilkan teks tiruan tanpa hambatan.

Pemeriksaan pengetahuan

Pertanyaan-pertanyaan berikut adalah kesempatan untuk merenungkan topik-topik utama dalam pelajaran ini. Jika Anda tidak dapat menjawab pertanyaan, klik untuk meninjau materi, tetapi ingatlah bahwa Anda tidak diharapkan untuk menghafal atau menguasai pengetahuan ini.