Tutorial html

Link dan Gambar

Mari belajar cara membuat link dan menampilkan gambar di HTML. Ini akan membuat website Anda lebih menarik!

Tag Link (<a>)

Link digunakan untuk menghubungkan halaman satu dengan yang lain.

Link ke Website Lain

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

Penjelasan:

  • <a> = tag link
  • href = alamat tujuan (URL)
  • Text di antara tag = text yang bisa diklik

Link ke Halaman Lain

<a href="tentang.html">Halaman Tentang</a>
<a href="kontak.html">Halaman Kontak</a>

Link dengan Target Baru

<a href="https://www.youtube.com" target="_blank">Buka YouTube di Tab Baru</a>

target="_blank" membuka link di tab/window baru.

Tag Gambar (<img>)

Untuk menampilkan gambar di halaman web.

Gambar dari Internet

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

Gambar dari File Lokal

<img src="foto.jpg" alt="Foto saya" />

Penjelasan:

  • src = sumber/lokasi gambar
  • alt = text alternatif (penting untuk aksesibilitas!)
  • Tag <img> tidak perlu tag penutup

Mengatur Ukuran Gambar

<img src="foto.jpg" alt="Foto saya" width="300" height="200" />

Contoh Lengkap

<!DOCTYPE html>
<html>
  <head>
    <title>Link dan Gambar</title>
  </head>
  <body>
    <h1>Website Saya</h1>

    <h2>Navigasi</h2>
    <p>
      <a href="index.html">Beranda</a> | <a href="tentang.html">Tentang</a> |
      <a href="kontak.html">Kontak</a>
    </p>

    <hr />

    <h2>Foto Profil</h2>
    <img src="profil.jpg" alt="Foto profil saya" width="200" />

    <h2>Link Favorit</h2>
    <p>
      Kunjungi
      <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> untuk
      belajar.
    </p>

    <p>
      Atau lihat video di
      <a href="https://www.youtube.com" target="_blank">YouTube</a>.
    </p>
  </body>
</html>

Tips Penting

Untuk Link

  1. Selalu gunakan https:// untuk link eksternal
  2. Gunakan target="_blank" untuk link eksternal
  3. Text link harus jelas menjelaskan tujuan

Untuk Gambar

  1. Selalu sertakan alt - penting untuk aksesibilitas
  2. Gunakan format gambar web - JPG, PNG, GIF, WebP
  3. Perhatikan ukuran file - gambar besar membuat website lambat

Format Gambar

  • JPG - untuk foto
  • PNG - untuk gambar dengan background transparan
  • GIF - untuk animasi sederhana
  • WebP - format modern, ukuran kecil

Latihan

Buat halaman dengan:

  1. Judul halaman
  2. Gambar (bisa dari internet atau file lokal)
  3. Link ke 3 website favorit Anda
  4. Link yang membuka di tab baru
  5. Paragraf yang menjelaskan gambar

Bonus: Coba buat 2-3 file HTML dan buat link antar halaman tersebut!