Pada website, gambar sering digunakan untuk membuat tampilan website jadi lebih menarik.

Gambar bisa dipakai buat ilustrasi, ikon, latar belakang, atau elemen lain yang bikin desain website lebih hidup.

Nah, supaya lebih paham, ikuti tutorial ini sampai selesai.

1. Menambahkan Gambar Menggunakan Tag <img>

Tag <img> adalah cara utama buat menampilkan gambar di halaman web. Tag ini bersifat self-closing, yang artinya nggak butuh tag penutup.

Contoh Dasar:

<!DOCTYPE html>
<html>
<head>
    <title>Menampilkan Gambar</title>
</head>
<body>
    <h1>Contoh Gambar di HTML</h1>
    <img src="gambar.jpg" alt="Deskripsi Gambar">
</body>
</html>

Maka hasilnya seperti berikut

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

Penjelasan dari script diatas:

Bila kita perhatikan, terdapat 2 atribut pada elemen tag <img> yaitu atribut src dan atribut alt.

Atribut src

Berfungsi untuk menentukan lokasi gambar. Pada contoh tersebut nilai dari atribut src adalah “gambar.jpg”, dimana “gambar.jpg” merupakan lokasi dan nama file gambar yang akan ditambahkan ke dalam HTML.

Atribut alt

alt adalah atribut yang digunakan untuk memberikan alternatif teks jika gambar gagal dimuat. Pada contoh diatas nilai atribut alt adalah "Deskripsi Gambar" yang artinya kita menampilkan teks berupa kalimat “Deskripsi Gambar” jika gambar gagal dimuat oleh browser.

2. Menentukan Lokasi Gambar

Gambar bisa berasal dari berbagai sumber:

Gambar di Folder Lokal

Pastikan gambar ada di lokasi yang benar dalam proyek kamu, atau satu directory dengan file HTML kamu.

Contoh:

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

Jika gambar berada dalam folder lokal, maka kamu harus memastikan gambar sesuai dengan foldernya.

Untuk contoh script diatas, itu berarti file “gambar.jpg” berada dalam satu folder dengan file HTML yang digunakan untuk menampilkan gambar.

Tetapi, jika kamu menyimpan gambar tersebut dalam folder khusus, maka kamu harus memasukkan nama foldernya dalam atribut src.

Misal, pada contoh dibawah ini file gambar yang akan ditampilkan berada pada folder “img” (berbeda folder dengan file HTML-nya),

maka menuliskan scriptnya seperti berikut:

<img src="img/gambar.jpg" alt="Deskripsi Gambar">

Gambar dari URL (Internet)

Bisa pakai tautan gambar dari internet.

Contoh Menggunakan URL:

<img src="https://www.example.com/gambar.jpg" alt="Gambar dari Internet">

3. Mengatur Ukuran Gambar

Kadang gambar yang kita tambahkan terlalu besar atau kecil, jadi kita bisa atur ukurannya.

Contoh Penggunaan:

<img src="gambar.jpg" width="300" height="200" alt="Gambar dengan ukuran khusus">

Atau menggunakan CSS:

<style>
    img {
        width: 50%;
        height: auto;
    }
</style>

4. Menggunakan Gambar Sebagai Latar Belakang

Selain ditampilkan langsung, gambar juga bisa dijadikan sebagai background dengan CSS.

Contoh Penggunaan Background Image:

<!DOCTYPE html>
<html>
<head>
    <title>Background Image</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <h1>Ini adalah contoh penggunaan gambar sebagai latar belakang</h1>
</body>
</html>

Penjelasan:

  • background-image: url('background.jpg'); → Menentukan gambar latar belakang.
  • background-size: cover; → Memastikan gambar menutupi seluruh area.
  • background-position: center; → Memposisikan gambar di tengah.

5. Menjadikan Gambar Sebagai Tautan

Gambar juga bisa dijadikan sebagai tautan supaya bisa diklik dan mengarah ke halaman lain.

Contoh Penggunaan:

<!DOCTYPE html>
<html>
<head>
    <title>Gambar Sebagai Link</title>
</head>
<body>
    <a href="https://www.example.com">
        <img src="gambar.jpg" alt="Klik untuk pergi ke website" width="150">
    </a>
</body>
</html>

Penjelasan:

  • a href="https://www.example.com" → Menentukan tujuan tautan.
  • img src="gambar.jpg" → Menampilkan gambar yang bisa diklik.

6. Membuat Gambar Responsif

Supaya gambar bisa menyesuaikan dengan ukuran layar perangkat, kita bisa pakai properti CSS max-width.

Contoh Gambar Responsif:

<!DOCTYPE html>
<html>
<head>
    <title>Gambar Responsif</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Gambar Responsif</h1>
    <img src="gambar.jpg" alt="Gambar yang menyesuaikan layar">
</body>
</html>

Penjelasan:

  • max-width: 100%; → Membuat gambar nggak lebih besar dari elemen induknya.
  • height: auto; → Menjaga aspek rasio gambar agar tidak terdistorsi.

Kesimpulan

Menambahkan gambar di HTML itu simpel banget. Cukup pakai <img> buat menampilkan gambar, <a> buat bikin gambar jadi link, atau CSS buat ngatur ukuran dan latar belakang. Dengan memahami konsep ini, kamu bisa membuat tampilan web lebih menarik dan fungsional. Yuk, coba praktikkan! 🚀