Popular Post

Belajar HTML Dasar Part 3: Link, Gambar, List, dan Table

Posted by on

Kalau di Part 2 kamu sudah paham tag & atribut, sekarang saatnya bikin halaman web kamu lebih hidup.

Di part ini kamu akan belajar:

  • Membuat link (navigasi)
  • Menampilkan gambar
  • Membuat list (daftar)
  • Membuat table (tabel)

Ini adalah fondasi yang sering dipakai di hampir semua website.

🔗 1. Membuat Link (Anchor Tag)

Untuk membuat link, kita pakai tag <a>.

✨ Contoh:

<a href="https://google.com">Buka Google</a>

🧾 Penjelasan:

  • href = tujuan link
  • Isi tag = teks yang diklik

🔥 Buka di Tab Baru

<a href="https://google.com" target="_blank">Buka Google</a>

👉 target="_blank" = buka di tab baru

🖼️ 2. Menampilkan Gambar

Gunakan tag <img>.

✨ Contoh:

<img src="gambar.jpg" alt="Contoh Gambar">

🧾 Penjelasan:

  • src = lokasi gambar
  • alt = teks jika gambar gagal tampil

💡 Tambah Ukuran:

<img src="gambar.jpg" width="300">

📋 3. Membuat List (Daftar)

🔹 a. Unordered List (bullet)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

🔹 b. Ordered List (angka)

<ol>
  <li>Bangun pagi</li>
  <li>Belajar HTML</li>
  <li>Ngoding</li>
</ol>

📊 4. Membuat Table (Tabel)

✨ Contoh:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fabio</td>
    <td>30</td>
  </tr>
</table>

🧾 Penjelasan:

  • <table> = tabel
  • <tr> = baris
  • <th> = header
  • <td> = isi data

🛠️ Contoh Gabungan (Mini Project)

<!DOCTYPE html>
<html>
<head>
  <title>Belajar HTML Part 3</title>
</head>

<body>

<h1>Belajar HTML</h1>

<p>Kunjungi website favorit:</p>
<a href="https://google.com" target="_blank">Google</a>

<h2>Gambar</h2>
<img src="https://via.placeholder.com/150" alt="contoh">

<h2>List Belajar</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Data Siswa</h2>
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fabio</td>
    <td>30</td>
  </tr>
</table>

</body>
</html>

🎯 Kesimpulan

Dengan materi ini, kamu sudah bisa:

  • Membuat navigasi (link)
  • Menampilkan gambar
  • Menyusun daftar
  • Menampilkan data dalam tabel

👉 Ini sudah cukup untuk membuat halaman web sederhana

Comments

Post a Comment