Menambahkan Gambar di HTML (Untuk Membuat Website Jadi Lebih Menarik)

Home » Tutorial Web
Gambar di HTML

Halo teman-teman!

Kalian pasti setuju, website tanpa gambar akan terasa membosankan. Kali ini, kita akan belajar menggunakan image element (<img>) untuk menambahkan gambar ke website kalian. Yuk, langsung kita bahas!

Apa Itu Image Element?

Image element digunakan untuk menampilkan gambar di website. Bentuknya seperti ini:

<img src="URL" />

Komponen pentingnya:

  1. src: Attribute untuk menentukan sumber gambar.
  2. Self-closing tag: Tidak memerlukan tag penutup karena tidak memiliki konten teks di dalamnya.

Contoh Penggunaan Image Element

1. Menampilkan Gambar

Berikut cara menambahkan gambar ke website:

<img src="https://via.placeholder.com/150" />

Hasil di browser: Gambar placeholder dengan ukuran 150x150 piksel akan tampil.

2. Menambahkan Alt Text

Tambahkan attribute alt untuk memberikan deskripsi gambar:

<img src="https://via.placeholder.com/150" alt="Contoh gambar placeholder" />

Alt text ini penting untuk:

  • Membantu pengguna dengan gangguan penglihatan melalui screen reader.
  • Menjelaskan konten gambar jika gambar gagal dimuat.

Tips Menemukan Gambar Placeholder

Kalian bisa menggunakan layanan seperti picsum.photos untuk mendapatkan gambar placeholder:

  • URL: https://picsum.photos/200
  • Hasil: Gambar acak dengan ukuran 200x200 piksel.

Contoh penggunaan di HTML:

<img src="https://picsum.photos/200" alt="Gambar acak 200x200 piksel" />

Proyek: Cat Person atau Dog Person?

Kita akan membuat halaman sederhana untuk menunjukkan apakah kalian tim anjing atau kucing.

Langkah 1: Struktur Dasar

Buat file index.html dan tambahkan struktur berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Tim Kucing atau Anjing?</title>
</head>
<body>
</body>
</html>

Langkah 2: Tambahkan Heading

Tambahkan judul menggunakan <h1>:

<h1>Aku Tim Anjing</h1>

Langkah 3: Tambahkan Gambar

Tambahkan gambar anjing dengan tag <img>:

<img src="https://via.placeholder.com/300" alt="Anjing lucu sedang bermain" />

Jika kalian tim kucing, gunakan URL gambar kucing:

<img src="https://via.placeholder.com/300/0000FF" alt="Kucing sedang duduk" />

Hasil Akhir Kode

Berikut kode lengkapnya untuk tim anjing:

<!DOCTYPE html>
<html>
<head>
    <title>Tim Kucing atau Anjing?</title>
</head>
<body>
    <h1>Aku Tim Anjing</h1>
    <img src="https://via.placeholder.com/300" alt="Anjing lucu sedang bermain" />
</body>
</html>

Jika kalian tim kucing, cukup ganti heading dan URL gambar.

Kelebihan Menggunakan Alt Text

  1. Aksesibilitas: Membantu pengguna dengan gangguan penglihatan memahami isi gambar melalui screen reader.
  2. SEO: Search engine seperti Google menggunakan alt text untuk memahami isi gambar di website kalian.

Kesimpulan
Dengan image element, kalian bisa menambahkan gambar untuk membuat website lebih menarik. Jangan lupa gunakan alt text untuk memastikan website kalian tetap ramah bagi semua pengguna.

Di pelajaran berikutnya, kita akan menggabungkan semua yang sudah dipelajari untuk membuat Birthday Invite Website. Sampai jumpa di pelajaran berikutnya! 😊

Komentar

Posting Komentar

Postingan Populer

Gambar