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

Author Erick Irwansyah
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 #2: Struktur dasar dan Tag HTML
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebi...

Baca Tutorial
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

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Belajar HTML #1: Pengenalan HTML
Belajar HTML #6: Membuat Formulir di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #2: Struktur dasar dan Tag HTML
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php