Tutorial HTML: Menambahkan Gambar

Keberadaan gambar pada website sangat berpengaruh. Selain untuk memperjelas tujuan dari isi website, keberadaannya juga memberi efek tersendiri bagi mata pengunjung website.

Menambahkan Gambar

Untuk menambahkan gambar pada HTML kita menggunakan tag <img>. Tag <img> berdiri sendiri tanpa penutup tag. Tag ini selalu diikuti oleh attribut src, yang berfungsi sebagai penunjuk untuk alamat atau URL gambar.

<img src="url_gambar">

Pendefenisian nama gambar harus sesuai dengan nama gambar yang dimaksud. Karena jika beda maka gambar tidak akan tampil alias not found. Hal ini sering disebut Case Sensitive. Begitu juga dengan tipe filenya, ada beberapa file type yang umum untuk tipe gambar, seperti JPG/JPEG, PNG, atau GIF.

Contoh,

<!DOCTYPE html>
<html>
<head>
 <title>Menambahkan Gambar</title>
</head>
<body>
 <img src="./rinjani.jpg">
</body>
</html>

HTML Dasar : Image

Diatas kita menambahkan sebuah gambar dengan alamat “./rinjani.jpg”. rinjani adalah nama gambar, sedangkan .jpg merupakan tipe file dari gambar.
Pastikan anda punya gambar yang dimaksud agar tidak terjadi kesalahaan saat load gambar.

Atribut Alt

Banyak orang yang sering luput dengan atribut ini, mereka sering kali hanya menambahkan atribut src nya saja. Padahal, hal ini termasuk hal yang cukup diperhitungkan ketika menambahkan gambar.
Alt berfungsi untuk mendefenisikan alternatif teks untuk gambar. Keberadaanya akan terasa jika gambar yang dimaksud tidak bisa diload, mungkin karena koneksi yang lambat, penulisan alamat yang salah, atua bahkan file gambarnya memang tidak ada. Maka, apapun isian dari atribut alt ini akan ditampilkan sebagai pengganti dari gambar yang gagal diload.

<img src="./rinjani.jpg" alt="Sunset di Rinjani">

HTML Dasar : Image

Masih samar ? Okeh, sekarang coba nilai atribut src ganti menjadi rinjani1.jpg, dan lihat perbedaannya.

Mengatur Ukuran Gambar

Jika kita lihat pada contoh sebelumnya, gambar yang ditampilkan mungkin kurang sesuai keinginan. Kita tau, jaman sekarang resolusi kamera semakin tinggi, hal ini juga mempengaruhi untuk tampilan gambar dibrowser. Semakin bersar resolusi atau ukuran, maka gambar akan semakin besar pula.
Nah, untuk mengaturnya kita bisa menggunakan dua cara, dengan atribut style atau dengan atibut width dan height. Width untuk lebar dan height untuk tinggi. Nilai dari keduanya bisa nilai real dalam ukuran tertentu (cth. pixel) atau dalam persen (%). Tapi, sebagai saran anda sebaiknya menggunakan atribut style, atau dengan metode css.

<img src="./rinjani.jpg" alt="Sunset di Rinjani" style="width:600px;height: 350px;">

HTML Dasar : Image width height

Atau,

<img src="./rinjani.jpg" alt="Sunset di Rinjani" width="600px" height="350px">

Sementara dalam persen kita cukup menggantikan nilainya, misal untuk width adalah 50%.
Saekarang silahkan lakukan eksperimen dengan gambar beresolusi tinggi, menengah dan rendah.

Kesimpulan

Gambar merupakan penunjang yang baik, baik dari segi memperjelas maupun segi tampilan. Untuk menampilkannya kita menggukanan <img> tentu dengan diikuti beberapa atribut, yakni src dan alt. Ingat, jangan pernah melupakan alt karena sangat penting untuk kondisi tertentu.

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com