Teks, Gambar, Tautan, dan Daftar
Format teks dengan judul dan paragraf, sematkan gambar dengan teks alt, buat hyperlink, serta susun daftar berurutan dan tidak berurutan.
Teks, Gambar, Tautan, dan Daftar adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Judul: h1 hingga h6
HTML menyediakan enam tingkat judul. Gunakan judul tersebut untuk membuat kerangka dokumen, bukan untuk mengubah ukuran teks. <h1> adalah judul halaman (satu kali per halaman), <h2> untuk bagian utama, <h3> untuk subbagian, dan seterusnya.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Paragraf dan <br>
Elemen <p> membungkus paragraf teks. Peramban otomatis menambahkan jarak di atas dan bawah. Gunakan <br> seperlunya — hanya untuk pemisah baris yang bermakna, seperti dalam alamat atau puisi, bukan untuk memberi jarak antarparagraf.
Elemen Teks Sebaris
Gunakan elemen sebaris untuk memberikan makna pada teks: <strong> untuk teks penting (tebal), <em> untuk penekanan (miring), <code> untuk cuplikan kode, <mark> untuk teks yang disorot, dan <small> untuk cetakan kecil.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Gambar: Elemen <img>
Elemen <img> menyematkan gambar. Atribut src memberikan URL, sedangkan alt menyediakan teks alternatif untuk pembaca layar dan saat gambar gagal dimuat. Selalu sertakan nilai alt yang bermakna.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">Menulis Teks Alt yang Baik
Teks alt harus menyampaikan isi dan tujuan gambar. Gambar dekoratif (pemisah, ikon yang hanya digunakan untuk hiasan) menggunakan alt="" (string kosong) agar dilewati oleh pembaca layar. Jangan pernah menulis alt="image of" — cukup jelaskan apa yang ditampilkan.
Tautan: Elemen <a>
Elemen <a> (jangkar) membuat tautan. Atribut href menetapkan URL tujuan. Teks tautan harus menjelaskan tujuannya — jangan pernah menulis "klik di sini".
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>Catatan Keamanan target=_blank
Saat membuka tautan di tab baru dengan target="_blank", selalu tambahkan rel="noopener noreferrer". Tanpanya, halaman yang dibuka dapat mengakses objek jendela pembuka — kerentanan keamanan yang disebut pembajakan tab terbalik.
Daftar Tak Berurutan: <ul>
Gunakan <ul> (daftar tak berurutan) saat urutan item tidak penting — fitur, bahan, atau tautan navigasi. Setiap item adalah <li>. Peramban merender poin secara bawaan, tetapi Anda hampir selalu menatanya dengan CSS.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Daftar Berurutan: <ol>
Gunakan <ol> (daftar berurutan) saat urutan penting — langkah-langkah dalam tutorial, peringkat, atau instruksi. Item otomatis diberi nomor. Gunakan atribut start dan reversed untuk mengatur penomoran.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Daftar Deskripsi: <dl>
<dl> (daftar deskripsi) mengelompokkan istilah beserta definisi atau deskripsinya. Gunakan untuk glosarium, metadata (penulis/tanggal), dan pasangan kunci-nilai. <dt> adalah istilahnya, sedangkan <dd> adalah deskripsinya.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>Daftar Bersarang
Daftar dapat dibuat bersarang untuk merepresentasikan hierarki. Tempatkan <ul> atau <ol> anak di dalam elemen <li> induknya. Jangan membuat sarang hanya untuk menambahkan indentasi — gunakan CSS sebagai gantinya.
Pemeriksaan Singkat
Atribut mana yang menyediakan deskripsi teks suatu gambar untuk pembaca layar?
Rangkuman: Teks, Gambar, Tautan, dan Daftar
Gunakan elemen judul untuk struktur dokumen, p untuk paragraf, img dengan teks alt yang bermakna untuk gambar, a dengan teks tautan deskriptif untuk navigasi, dan ul/ol/dl untuk konten daftar. Semantik membuat HTML aksesibel dan dapat dibaca mesin.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Teks, Gambar, Tautan, dan Daftar” gratis?
Ya — teks lengkap “Teks, Gambar, Tautan, dan Daftar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Teks, Gambar, Tautan, dan Daftar”?
Format teks dengan judul dan paragraf, sematkan gambar dengan teks alt, buat hyperlink, serta susun daftar berurutan dan tidak berurutan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Teks, Gambar, Tautan, dan Daftar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur Dokumen: DOCTYPE html head body
- Tag Semantik: header nav main article footer
- Teks, Gambar, Tautan, dan Daftar
- Formulir: input label button