HTML Images

Pelajari cara menambahkan gambar ke halaman web menggunakan elemen HTML `<img>`.

HTML Gambar (HTML Images)

HTML menggunakan elemen <img> untuk menampilkan gambar di halaman web. Elemen ini adalah elemen mandiri (self-closing) dan membutuhkan setidaknya atribut src dan alt.

Contoh Dasar Penggunaan `<img>`

<img src="gambar.jpg" alt="Deskripsi Gambar" width="500" height="300">

Atribut Penting

src: Jalur atau URL gambar yang akan ditampilkan.
alt: Deskripsi alternatif jika gambar gagal dimuat (penting untuk aksesibilitas).
width dan height: Ukuran gambar dalam piksel.
title: Tooltip yang muncul saat kursor diarahkan ke gambar.

<img src="gambar.jpg" alt="Deskripsi" title="Ini adalah gambar rumah" width="400">

Gambar sebagai Tautan

Kamu juga bisa membuat gambar menjadi tautan dengan membungkus elemen <img> di dalam elemen <a>.

<a href="https://mulaicode.com">
  <img src="logo.png" alt="Logo">
</a>

Menggunakan gambar di HTML membantu membuat tampilan website lebih menarik dan informatif. Pastikan selalu menyertakan atribut alt untuk SEO dan aksesibilitas.

Gambar Latar Belakang (HTML Background Images)

Gambar latar belakang digunakan untuk menambahkan gambar di belakang konten halaman web. HTML sendiri tidak memiliki tag khusus untuk ini, tetapi kamu bisa menggunakan CSS untuk menambahkannya.

Contoh Dasar: Background Gambar untuk Seluruh Halaman

<style>
  body {
    background-image: url('background.jpg');
  }
</style>

Opsi Styling Gambar Latar

Kamu bisa menggunakan beberapa properti CSS untuk mengontrol tampilan gambar:

background-repeat: Untuk mengulang gambar (repeat, no-repeat, repeat-x, repeat-y).
background-size: Mengatur ukuran gambar (auto, cover, contain).
background-position: Posisi gambar (center, top, bottom, left, right).
background-attachment: Mengatur apakah gambar bergulir dengan konten (scroll) atau tetap (fixed).

Contoh: Gambar Tetap di Background

<style>
  body {
    background-image: url("background.jpg");
    background-attachment: fixed;
    background-size: cover;
  }
</style>

Dengan menggunakan background image secara tepat, kamu bisa memperindah tampilan halaman web tanpa mengganggu konten utama.