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.