Link, Gambar, dan List

Link (<a>)

Tag <a> (anchor) digunakan untuk membuat tautan, baik ke halaman lain, bagian lain dari halaman, maupun ke luar situs.

Atribut penting:

• href: alamat tujuan.
• target: cara membuka link (_self, _blank, dll).

Contoh link ke halaman lain:

<a href="index.html">Home</a>
<a href="projek.html">Projek</a>
<a href="kontak.html">Kontak</a>

Contoh link ke website lain:

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

Contoh link email dan telepon:

<a href="mailto:info@example.com">Kirim Email</a>
<a href="tel:+6281234567890">Hubungi Kami</a>

Gambar (<img>)

Tag <img> digunakan untuk menampilkan gambar. Tag ini adalah tag kosong (tidak memiliki penutup) dan menggunakan atribut untuk mengatur tampilannya.

Atribut umum:

• src: jalur (path) gambar.
• alt: teks alternatif jika gambar gagal dimuat, juga penting untuk aksesibilitas.
• title: teks yang muncul saat kursor berada di atas gambar.
• width dan height: ukuran gambar (biasanya dalam piksel).

Contoh:

<img
  src="dn.jpg"
  alt="Foto Dhimas"
  title="Dhimas Nurhidayat"
  width="200"
  height="200"
/>

Penjelasan:

• Jika width dan height diatur, browser akan menyesuaikan ukuran gambar sesuai nilai tersebut.
• alt membantu pengguna yang tidak dapat melihat gambar (misalnya menggunakan screen reader).

List (<ul>, <ol>, <li>)

HTML menyediakan dua jenis daftar:

1. Unordered List (<ul>): daftar dengan bullet.
2. Ordered List (<ol>): daftar bernomor.

Setiap item dalam daftar harus dibungkus dengan <li>.

Unordered List

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

Ordered List

<ol>
  <li>Projek 1</li>
  <li>Projek 2</li>
  <li>Projek 3</li>
</ol>

Ordered list juga bisa menggunakan tipe lain:

<ol type="A">
  <li>Langkah Pertama</li>
  <li>Langkah Kedua</li>
</ol>

Contoh penggunaan list untuk halaman projek:

<h2>Projek Saya</h2>
<ol>
  <li>
    <h4>Projek 1</h4>
    <p>Deskripsi singkat projek pertama.</p>
  </li>
  <li>
    <h4>Projek 2</h4>
    <p>Deskripsi singkat projek kedua.</p>
  </li>
</ol>