Daftar dan tautan

Coba bayangkan kamu menulis daftar belanja di satu paragraf panjang: “telur gula susu roti selai”. Susah dibaca, kan? Di HTML, hal itu ada solusinya: daftar.

Dan satu hal lagi yang bikin web disebut web (jaring): halaman-halamannya saling tersambung lewat tautan. Dua-duanya kita bahas di sini.

Daftar berpoin: ul dan li

Daftar berpoin (yang berbentuk titik-titik) dibuat dengan dua tag yang bekerja bareng:

• ul : pembungkus seluruh daftar. Singkatan unordered list, artinya daftar yang urutannya tidak penting.
• li : satu butir di dalam daftar. Singkatan list item.

<ul>
  <li>Telur</li>
  <li>Gula</li>
  <li>Susu</li>
</ul>

Hasilnya tiga baris dengan titik di depannya.

Daftar berangka: ol dan li

Kalau urutan penting (misalnya langkah-langkah), ganti ul dengan ol (ordered list). Butirnya tetap li.

<ol>
  <li>Rebus air</li>
  <li>Masukkan mi</li>
  <li>Tunggu tiga menit</li>
</ol>

Browser otomatis memberi nomor 1, 2, 3. Kamu nggak perlu mengetik angkanya.

Satu aturan penting: li hanya boleh hidup di dalam ul atau ol. Jangan menaruh li sendirian.

Tautan: tag a dan href

Sekarang bagian serunya. Tautan (sering disebut link) dibuat dengan tag a. Singkatan dari anchor, artinya “jangkar” (titik kait).

<a href="https://id.wikipedia.org">Buka Wikipedia</a>

Ada dua bagian:

1. Tulisan di tengah (Buka Wikipedia): inilah yang tampil dan bisa diklik.
2. href: keterangan tambahan di dalam tag pembuka. Isinya tujuan tautan: ke mana pengunjung dibawa saat mengklik.

href singkatan dari hypertext reference. Gampangnya, ingat saja: href = tujuan.

Alamat web lengkap

Untuk menuju situs lain, href diisi alamat web lengkapURLAlamat lengkap sebuah halaman web, misalnya https://namamu.netlify.app.Penjelasan lengkap →, termasuk bagian awalnya https://. Kalau cuma menulis id.wikipedia.org tanpa https://, browser mengira itu berkas di folder sendiri, dan tautannya malah nyasar.

<p>Aku sering belajar di <a href="https://developer.mozilla.org">MDN</a>.</p>

Perhatikan bahwa a bisa ditaruh di dalam paragraf, sama seperti strong dan em. Tautan menyatu dengan kalimatnya.

Tautan ke halaman milikmu sendiri

Selain ke situs lain, href juga bisa menuju berkas HTML lain di folder yang sama. Misalnya:

<a href="tentang.html">Tentang aku</a>

Cara menulis alamat berkas ini punya aturan sendiri (folder, naik turun folder, dan lain-lain). Kita bahas tuntas di pelajaran 5. Untuk sekarang, kamu cukup tahu bahwa ini mungkin.

Coba sendiri: daftar hobi dan link favorit

Di kotak berikut ada halaman “Hobiku” yang masih kosong. Tugasmu ada dua:

1. Bikin daftar berpoin (ul dengan li) berisi minimal tiga hobimu.
2. Bikin satu link ke situs favoritmu dengan a dan href. Ingat https:// di depan.

Setelah jadi, coba klik link-nya di kotak hasil.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Hobiku</title>
</head>
<body>
  <h1>Hobiku</h1>

  <!-- Tantangan 1: bikin daftar hobi dengan ul dan li (minimal 3) -->

  <h2>Situs favoritku</h2>

  <!-- Tantangan 2: bikin satu link ke situs favoritmu dengan a href -->

</body>
</html>

Satu eksperimen tambahan: ganti ul jadi ol di tag pembuka dan penutupnya. Lihat bagaimana titik berubah jadi angka.

Kesalahan umum

• Lupa https:// di depan alamat situs lain. Tautan dianggap menuju berkas di foldermu sendiri.
• Mengganti ul jadi ol hanya di satu sisi. Tag pembuka dan penutup harus sama jenis.
• Menulis tulisan butir tanpa li, langsung di dalam ul. Setiap butir harus dibungkus li.
• Tautan tanpa tulisan di tengahnya, misalnya <a href="..."></a>. Tidak ada yang bisa diklik karena tidak ada yang tampil.
• Lupa tanda kutip di sekitar alamat href.

Tadi kamu menulis href="...": sebuah keterangan di dalam tag pembuka. Keterangan semacam itu punya nama resmi dan aturan mainnya sendiri. Itu topik pelajaran berikutnya: atribut.