HTML Link dan Lists

2025-03-21 00:00:00 +0000 -

Penjelasan tentang Link dan Lists pada HTML.

HTML: Link dan List

Link (Tautan) di HTML

Link di HTML digunakan untuk menghubungkan ke halaman lain atau situs lain. Tag yang digunakan adalah <a>.

<a href="https://www.google.com">Buka Google</a>
- `href` → Menentukan URL tujuan.
- Bisa berupa **absolute URL** (misalnya `https://`) atau **relative URL** (`/halaman.html`).

 **Contoh:**
```html
<a href="https://google.com" target="_blank">Buka Google di tab baru</a>
<a href="halaman.html">Link ke halaman lokal</a>
<a href="mailto:email@example.com">Kirim Email</a>

Atribut Penting

• href untuk menentukan tujuan link
• target="_blank" →agar link terbuka di tab baru.
• mailto: → Membuka aplikasi email dengan alamat tertentu.

HTML List

HTML punya dua jenis list utama:

1️ Ordered List (Daftar Berurutan)

Menggunakan <ol> dengan item <li>, secara default diberi nomor.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Bentuk lain (angka romawi, alfabet, dsb.):

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

• type="1" → Angka (default).
• type="A" → Huruf kapital.
• type="a" → Huruf kecil.
• type="I" → Angka Romawi besar.
• type="i" → Angka Romawi kecil.

2️ Unordered List (Daftar Tidak Berurutan)

Menggunakan <ul> dengan item <li>, ditandai dengan bullet (•).

<ul>
  <li>Jeruk</li>
  <li>Apel</li>
  <li>Semangka</li>
</ul>

Custom Bullet List dengan CSS:

<ul style="list-style-type: square;">
  <li>Python</li>
  <li>Java</li>
</ul>

• list-style-type: disc; → Default (bulat).
• list-style-type: square; → Kotak.
• list-style-type: circle; → Lingkaran kosong.
• list-style-type: none; → Tanpa bullet.

Link di dalam List

Bisa menggabungkan <a> ke dalam <li>:

<ul>
  <li><a href="https://github.com">GitHub</a></li>
  <li><a href="https://stackoverflow.com">Stack Overflow</a></li>
</ul>

Kesimpulan

• Link (<a>) digunakan untuk membuat tautan ke halaman lain.
• Ordered List (<ol>) digunakan untuk daftar bernomor.
• Unordered List (<ul>) digunakan untuk daftar dengan bullet.
• Bisa dikombinasikan dengan CSS untuk tampilan lebih menarik.