Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML

Author Hilya Zea
25 Dec 2024
Html
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML

Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat website yang menampilkan poin-poin seperti menu atau langkah-langkah, itu biasanya dibuat dengan elemen daftar. Tenang, caranya simpel banget! Yuk, langsung kita mulai.

Jenis-Jenis Daftar di HTML

Ada tiga jenis utama daftar di HTML:

  1. Unordered List (<ul>): Daftar tanpa urutan, biasanya pakai bullet point.
  2. Ordered List (<ol>): Daftar berurutan, pakai angka atau huruf.
  3. Definition List (<dl>): Daftar untuk istilah dan definisinya.

1. Daftar Tanpa Urutan (Unordered List)

Daftar ini biasanya digunakan untuk item yang gak perlu urutan tertentu, seperti menu makanan atau daftar hobi.

Contoh:
<ul>
  <li>Makan</li>
  <li>Tidur</li>
  <li>Koding</li>
</ul>

Hasilnya di browser:

  • Makan
  • Tidur
  • Koding

Keterangan:

  • <ul>: Elemen pembungkus daftar tanpa urutan.
  • <li>: Item di dalam daftar.

2. Daftar Berurutan (Ordered List)

Kalau daftar kamu butuh urutan, misalnya langkah-langkah, gunakan <ol>.

Contoh:
<ol>
  <li>Bangun pagi</li>
  <li>Olahraga</li>
  <li>Ngopi</li>
</ol>

Hasilnya di browser:

  1. Bangun pagi
  2. Olahraga
  3. Ngopi

Keterangan:

  • <ol>: Elemen pembungkus daftar berurutan.
  • <li>: Item di dalam daftar.

3. Daftar Definisi (Definition List)

Jenis ini cocok untuk menampilkan istilah dan penjelasannya, seperti kamus mini.

Contoh:
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, bahasa dasar untuk membuat halaman web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, digunakan untuk mengatur tampilan halaman web.</dd>
</dl>

Hasilnya di browser:

  • HTML
    HyperText Markup Language, bahasa dasar untuk membuat halaman web.
  • CSS
    Cascading Style Sheets, digunakan untuk mengatur tampilan halaman web.

Keterangan:

  • <dl>: Elemen pembungkus daftar definisi.
  • <dt>: Istilah atau nama.
  • <dd>: Penjelasan atau definisi.

Mengubah Tampilan Daftar

Kamu bisa mengatur jenis bullet atau angka dengan atribut.

Contoh untuk <ul>:
<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Hasilnya: Bullet berbentuk kotak.

Contoh untuk <ol>:
<ol type="a">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

Hasilnya: Nomor berubah jadi huruf (a, b, c).

Praktik Langsung

Coba buat file baru dan tambahkan ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Belajar HTML: Daftar</title>
  </head>
  <body>
    <h1>Belajar Membuat Daftar</h1>

    <h2>Daftar Tanpa Urutan</h2>
    <ul>
      <li>Makan</li>
      <li>Tidur</li>
      <li>Koding</li>
    </ul>

    <h2>Daftar Berurutan</h2>
    <ol>
      <li>Bangun pagi</li>
      <li>Olahraga</li>
      <li>Ngopi</li>
    </ol>

    <h2>Daftar Definisi</h2>
    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
    </dl>
  </body>
</html>

Simpan file ini, buka di browser, dan lihat hasilnya.

Tantangan untuk Kamu

  1. Buat daftar belanja mingguan dengan <ul>.
  2. Tulis langkah-langkah memasak makanan favoritmu dengan <ol>.
  3. Buat daftar definisi untuk tiga istilah baru yang kamu pelajari.

Daftar adalah bagian penting dalam HTML. Artikel ini membantu kamu memahami dasar-dasarnya sebelum lanjut ke tutorial berikutnya di www.code80vity.com.

Tutorial Terkait Lainnya

Belajar HTML #1: Pengenalan HTML
Belajar HTML #1: Pengenalan HTML

Hai, gimana kabarnya? Kali ini, kita mulai dari dasar banget, yaitu HTML. Kalau kamu pernah dengar i...

Baca Tutorial
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML

Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar b...

Baca Tutorial
Belajar HTML #6: Membuat Formulir di HTML
Belajar HTML #6: Membuat Formulir di HTML

Halo teman-teman! Semoga kalian semua sehat dan semangat belajar. Kali ini kita akan bahas sesuatu y...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #6: Membuat Formulir di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #1: Pengenalan HTML
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python