FAJAR SURYANI PEMROGRAMAN WEB I

FORMAT IMAGE

POKOK BAHASAN:

✓ Format Image
✓ Attribut Image
✓ Width Height Image
✓ Border Image
✓ Alternatif Image
✓ Title Image
✓ Image Link

TUJUAN BELAJAR:

✓ Menjelaskan konsep format image

✓ Menjelaskan attribut image
✓ Menjelaskan dan menerapkan load image
✓ Menjelaskan dan menerapkan width height image, border image, alternatif image dan
title image
✓ Menjelaskan dan menerapkan image link

Salah satu kelebihan dari web adalah kemampuannya untuk menampilkan gambar.
Dengan gambar tampilan menjadi lebih menarik dan otak kita lebih mudah menyerap informasi
dengan visual dibandingkan hanya teks saja. Karena itu, gambar sangat memiliki peran penting
dalam sebuah tampilan website.

5.1 Format Image

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. Berikut ini daftar
beberapa format gambar yang sering digunakan dalam web:
FAJAR SURYANI PEMROGRAMAN WEB I

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 diatas juga akan bergantung pada versi browser yang digunakan. Web
biasanya menggunakan jenis file gambar jpg, gif, dan png. Jenis jpg biasanya digunakan untuk
membuat gambar foto, jenis gif untuk gambar yang dapat dianimasikan, sedangkan png
memiliki dua kelebihan tersebut. File gambar yang digunakan sebaiknya dipilih yang
berukuran kecil sehingga tidak akan memberatkan halaman web ketika dimuat ke browser,
tetapi harus tetap mempertahankan kejernihan dan kejelasan gambar agar tetap tampil bagus di
browser.

5.2 Atribut Image Tag <img>

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. Berikut contoh penggunaan tag <img>:
FAJAR SURYANI PEMROGRAMAN WEB I

Contoh implemnetasi program:

Hasil tampilan pada browser:

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

1. width untuk menentukan lebar gambar;
2. height untuk menentukan tinggi gambar;
3. alt untuk teks alternatif untuk gambar;
4. border untuk tebal bingkai gambar;
5. style untuk menentukan style CSS untuk gambar.

5.2.1 Atribut Width dan Height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan
tinggi dari gambar. Contoh:
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

5.2.2 Atribut Alt

Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar
gagal ditampilkan. Contoh:
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

5.2.3 Atribut border

Atribut border adalah atribut untuk memberikan bingkai/garis tepi pada gambar saat
ditampilkan. Contoh:
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

5.2.4 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. Berikut
contong penggunaan atribut style:
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

5.3 Tittle Image

Untuk memberikan judul gambar/ text caption kit dapat menggunakan tag tambahan
untuk membantu tag <img> yaitu dengan menggunakan tag <figure>. Tag <figure> ini
berfungsi untuk membungkus tag <img> dan text caption. Text caption sendiri merupakan teks
yang menjelaskan tentang gambar yang ditampilkan. Text caption dibuat dengan menggunakan
tag <figcaption>. Berikut penjelasan dan contoh penggunaannya:
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

5.4 Image Link

Membuat gambar sebagai link pernah kita bahas modul sebelumnya link di HTML,
namun kali ini kita akan membuat link menggunakan gambar. Cara membuat link dengan
gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag
<img>.
FAJAR SURYANI PEMROGRAMAN WEB I

Hasil tampilan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

5.5 Langkah Praktikum

1. Buatlah file html sesuai pada contoh program pada sub bab sebelumnya!
2. Jalankan pada browser kemudian amati dan pelajari! Implementasikan pada kasus yang
berbeda!
3. Buatlah link pada bagian gambar tertentu yang dapat menunjukkan bagian gambar gadget
(image1.jpg), seperti PC, Laptop, Smartphone dan Tanaman Hias. Gunakan tag <map> dan
<area> untuk membuat link pada bagian gambar!