HTML for Kids · Pelajaran

Daftar: Berurutan dan Tidak Berurutan

Buat daftar bernomor dan berpoin

Daftar: Berurutan dan Tidak Berurutan adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 2 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 HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.

Daftar Berurutan dan Tidak Berurutan

Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari cara membuat daftar dalam HTML. Daftar membantu mengatur informasi dan membuatnya lebih mudah dibaca.

Apa Itu Daftar?

Daftar adalah cara yang bagus untuk mengelompokkan item yang berkaitan. HTML memiliki dua jenis daftar utama:

Daftar Berurutan: Item diberi nomor (1, 2, 3...).
Daftar Tidak Berurutan: Item ditandai dengan simbol.

Mari pelajari cara membuat kedua jenis daftar tersebut!

Membuat Daftar Berurutan

Daftar berurutan dibuat menggunakan tag <ol>. Setiap item dalam daftar ditambahkan menggunakan tag <li> (item daftar).

Contoh:

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

Membuat Daftar Tidak Berurutan

Daftar tidak berurutan dibuat menggunakan tag <ul>. Setiap item ditambahkan menggunakan tag <li>, sama seperti pada daftar berurutan.

Contoh:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Daftar Bersarang

Anda dapat membuat daftar di dalam daftar lain. Ini disebut daftar bersarang. Anda dapat menyusun daftar berurutan dan tidak berurutan di dalam satu sama lain.

Contoh:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Daftar dengan Deskripsi

HTML juga memungkinkan Anda membuat daftar deskripsi menggunakan tag <dl>, <dt>, dan <dd>:

<dl>: Mendefinisikan daftar.
<dt>: Mendefinisikan istilah (judul).
<dd>: Mendefinisikan deskripsi.

Contoh:

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

Menambahkan Gaya pada Daftar

Anda dapat menggunakan CSS untuk mengubah tampilan daftar. Misalnya, Anda dapat mengubah jenis tanda poin atau angka.

Contoh:

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

Coba Sendiri

Mari kita membuat halaman web sederhana dengan daftar berurutan dan tidak berurutan. Berikut contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

Kerja Bagus!

Selamat! Anda telah mempelajari cara membuat daftar berurutan dan tidak berurutan, daftar bersarang, serta daftar deskripsi. Semua ini merupakan alat yang bagus untuk mengatur informasi di halaman web Anda. Pada pelajaran berikutnya, kita akan mempelajari cara menambahkan tautan untuk menghubungkan berbagai halaman dan situs web. Bersiaplah untuk keseruan lainnya!

Daftar: Berurutan dan Tidak Berurutan — ilustrasi 10

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar: Berurutan dan Tidak Berurutan” gratis?

Ya — teks lengkap “Daftar: Berurutan dan Tidak Berurutan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar: Berurutan dan Tidak Berurutan”?

Buat daftar bernomor dan berpoin Kamu berlatih HTML for Kids 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 HTML for Kids?

Tidak diperlukan pengalaman sebelumnya. HTML for Kids 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 2 dari 4.

Berapa lama pelajaran “Daftar: Berurutan dan Tidak Berurutan” 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 HTML for Kids ini?

Ya. Setiap pelajaran HTML for Kids 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

Judul dan Paragraf
Daftar: Berurutan dan Tidak Berurutan
Tautan: Menghubungkan Web
Gambar: Menambahkan Gambar ke Halaman Anda

← Kembali ke HTML for Kids