Tambah Gambar ke Website dengan Gambar Self-Closing

Tambah Gambar ke Website dengan Gambar Self-Closing
Photo by Arnel Hasanovic / Unsplash

Menambahkan gambar ke website itu gampang banget, lho! Kamu bisa pakai tag <img>, yang merupakan tag self-closing dalam HTML. Artinya, tag ini nggak perlu penutup seperti tag lainnya.

Cara Menambahkan Gambar dengan Tag <img>

Berikut langkah-langkahnya:

  1. Atribut Penting:
    • src: Menentukan sumber atau lokasi gambar. Kamu bisa menggunakan URL absolut (misalnya, https://contoh.com/gambar.jpg) atau URL relatif jika gambar ada di direktori yang sama dengan file HTML kamu (misalnya, gambar.jpg).
    • alt: Memberikan teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Ini juga membantu aksesibilitas bagi pengguna dengan keterbatasan penglihatan.

Menyesuaikan Ukuran Gambar: Kamu bisa mengatur lebar dan tinggi gambar dengan atribut width dan height. Nilainya dalam piksel.

<img src="images/logo.png" alt="Logo Perusahaan" width="200" height="100">

Atau, kamu bisa menggunakan CSS untuk kontrol yang lebih fleksibel:

<img src="images/logo.png" alt="Logo Perusahaan" style="width:200px; height:100px;">

Contoh Penggunaan:

<img src="https://contoh.com/logo.png" alt="Logo Perusahaan">

Jika gambar logo.png ada di folder images yang berada di direktori yang sama dengan file HTML, kamu bisa menuliskannya seperti ini:

<img src="images/logo.png" alt="Logo Perusahaan">

Gunakan Tag <img>: Tag ini digunakan untuk menampilkan gambar di halaman web. Karena sifatnya self-closing, kamu cukup menuliskannya seperti ini:

<img src="URL_gambar" alt="Deskripsi gambar">

Tips Tambahan:

  • Pastikan Path Benar: Pastikan path yang kamu tulis di atribut src sesuai dengan lokasi gambar sebenarnya, agar gambar bisa ditampilkan dengan benar.
  • Gunakan Teks Alternatif yang Deskriptif: Teks di atribut alt sebaiknya mendeskripsikan gambar dengan jelas, untuk meningkatkan aksesibilitas dan SEO.
  • Optimalkan Ukuran File Gambar: Agar halaman web kamu lebih cepat dimuat, gunakan gambar dengan ukuran file yang optimal tanpa mengorbankan kualitas.

Dengan memahami cara kerja tag <img> yang bersifat self-closing, kamu bisa menambahkan gambar ke website dengan mudah dan efisien. Selamat mencoba!