Belajar HTML #08: Cara Menampilkan Gambar di HTML

 Menambahkan Gambar di HTML

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki atribut wajib, yakni src.

Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan 

Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.  

Format File Gambar untuk HTML

Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki tujuan masing-masing.

Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas ini tidak akan bisa ditampilkan di HTML.

Lalu, format apa saja yang didunkung oleh HTML?

Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:

Nama Format Nama Panjang Ekstensi

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

WebP Web Picture .webp

Format file ini juga akan bergantung pada versi browser yang digunakan.

Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan.

Atribut untuk Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:

alt untuk teks alternatif untuk gambar;

width untuk menentukan lebar gambar;

height untuk menentukan tinggi gambar;

style untuk menentukan style CSS untuk gambar.

Mari kita coba satu per satu..

Atribut alt

Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan. 

Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

Apakah kita wajib menggunakan atribut alt?

Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks alternatif akan dibaca oleh screen reader.

Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer.

Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO.

Atribut width dan height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.  

Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya.. kita memberikan nilai 200px.

Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar konsisten.

Atribut style

Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu  

Membuat Gambar Background

Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di sini.

Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut background-image lalu diisi dengan URL dari gambar.

Membuat Link dengan Gambar

Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa.. kita akan bahas lagi biar semakin paham.

Baiklah…

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>. 

Membuat Link dengan Gambar

Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak apa-apa.. kita akan bahas lagi biar semakin paham.

Baiklah…

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>. 

Membuat Link pada Bagian Gambar

Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag <map> dan <area>.

Tag Tambahan untuk Gambar di HTML

Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag <img>.

Diantaranya:

<figure> untuk membungkus gambar dan teks caption-nya;

<picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda.

Mari kita coba:

Tag <figure>

Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag