Belajar HTML Part 14 - Memasukan Gambar di HTML

Image (Gambar)
Gambar dapat meningkatkan desain dan memperindah tampilan suatu halaman web. Oleh karena itu, gambar sangat dibutuhkan dalam pembuatan halaman web.

Sintax memasukkan Gambar dalam HTML

Dalam HTML, untuk menyisipkan gambar dalam halaman web gunakan tag <img>. Tag <img> ini merupakan tag kosong, hanya berisi atribut saja, dan tidak memiliki tag penutup.

Atribut src menentukan URL (alamat web) dari gambar:

<img src="url">

Atribut Alt

Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna tidak bisa melihat gambar karena beberapa alasan, seperti koneksi yang lambat atau juga kesalahan dalam atribut src, atau masalah-masalah lain.

Nilai atribut alt harus menjelaskan tentang gambar:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

      <img src="allah.jpg" alt="Caligrafi" width="460" height="345">

</body>
</html>

Catatan: Ganti nama gambar anda pada img src="" dan juga nama alternatif gambar pada alt="".

Hasilnya:

Apabila kita salan dalam penulisan nama gambar, format gambar, ataupun tidak menuliskan nama gambar pada atribut src, maka browser tidak dapat menampilkan gambar, itu akan menampilkan nilai dari atribut alt.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

      <img src="" alt="Caligrafi">

</body>
</html>

Hasilnya:

Catatan: Pada contoh diatas, browser hanya akan menampilkan nama alternatif gambar, karena mungkin saja kita salah menuliskan nama, format, atau lupa menuliskan nama pada gambar.

Catatan: Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa atribut alt.

Ukuran Gambar – Width dan Height

Kita bisa menggunakan atribut style untuk menentukan lebar dan tinggi dari suatu gambar.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

 <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:300px; height:200px;">

</body>
</html>

Atau, kita juga bisa menggunakan atribut width dan height:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="nama_gambar.jpg" alt="nama_alternatif" width="300" height="200">

</body>
</html>

Pada gambar di bawah ini merupakan hasil dari kedua contoh diatas, yaitu menentukan lebar dan tinggi gambar:

Menggunakan atribut style
Menggunakan atribut width dan height

Hasilnya akan terlihat sama karena karena nilai width dan height yang ditentukan adalah sama.

Atribut Width dan height selalu menentukan ukuran lebar dan tinggi gambar dalam piksel.

Catatan: Harus selalu menentukan lebar dan tinggi gambar. Jika lebar dan tinggi gambar tidak ditentukan, maka gambar akan tampil dengan ukuran yang tidak diinginkan.

Width dan Height, atau Style?

Atribut width, height, dan atribut style berlaku di HTML5. Namun, disarankan menggunakan atribut style. Karena ini mencegah style sheet (CSS) mengubah ukuran gambar.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="allah.jpg" alt="Caligrafi" style="width:128px;height:128px;">
<img src="allah.jpg" alt="Caligrafi" width="128" height="128">

</body>
</html>

Hasilnya:

Gambar kedua pada contoh diatas terlihat berbeda dengan gambar pertama. Karena gambar kedua tidak diberi atribut style, sehingga dipengaruhi oleh kode CSS yang berisi nilai width 100% (lebar 100%).

Mengapa ukuran width dan height pada gambar pertama tetap sama? Karena gambar pertama memiliki atribut style yang mengatur lebar dan tinggi gambar secara terpisah daripada gambar kedua.

Gambar di Folder lain

Browser mencari gambar dalam folder yang sama dengan tempat penyimpanan halaman web. Ketika browser tidak menemukan gambar dalam folder yang sama, maka tidak ada gambar yang akan ditampilkan.

Apabila kita menyimpan gambar di dalam folder harus menyertakan nama folder dalam atribut src:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

 <img src="nama_folder/nama_gambar.jpg" alt="nama_alternatif_gambar" style= "width:128px; height:128px;">

</body>
</html>

Panjelasan contoh diatas:

Contoh diatas berlaku untuk folder yang tempat penyimpanannya sama dengan gambar.
Apabila folder yang berisi gambar tersebut berada diluar folder penyimpanan gambar, maka kita perlu menambahkan tanda / (garis miring satu) sebelum nama folder pada img="/nama_folder/nama_gambar.jpg". Tanda / artinya naik satu tingkat.

Gambar di Server lain

Sebenarnya, kita juga bisa mengakses gambar yang akan kita gunakan dari alamat web lain:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="http://r77.cooltext.com/rendered/cooltext295921786733366.png" alt= "logo king-octahasan">

</body>
</html>

Mengambil gambar dari server lain hanya bisa working saat ONLINE.

Gambar Animasi

HTML mendukung format gambar animasi GIF.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="nama_gambar.gif" alt="nama_alternatif" style="width:48px; height:48px;">

</body>
</html>

Gunakan format .gif untuk gambar animasi.

Gambar sebagai sebuah Link

Untuk menggunakan gambar sebagai link, caranya dengan menempatkan tag <img> di dalam tag <a>:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<a href="#">
<img src="nama_gambar.gif" alt="nama_alternatif" style="width:42px;height:42px;border:0;">
</a>

</body>
</html>

Catatan: border: 0; ditambahkan untuk mencegah IE9 (dan versi sebelumnya) dari menampilkan border di sekitar gambar (ketika gambar adalah link).

Gambar Mengapung (Floating)

Gunakan properti CSS floating untuk penerapan gambar agar float (mengambang / mengapung) ke kanan atau ke kiri.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p>
<img src="nama_gambar.gif" alt="nama_alternatif" style="float:right;width:80px;height:80px;">

Gambar ini akan di float ke kanan.
</p>

<p>
<img src="nama_gambar.gif" alt="nama_alternatif" style="float:left;width:80px;height:80px;">

Gambar ini akan di float ke kiri.
</p>

</body>
</html>

Hasilnya:

Background Image

Untuk menambahkan gambar pada latar belakang elemen HTML, caranya dengan menggunakan properti CSS background-image.

Untuk menambahkan gambar latar belakang pada halaman web, dengan cara menempatkan properti background-image pada elemen BODY.\
Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>

<body style="background-image:url('nama_gambar.jpg')">
<h2>Background Image</h2>

</body>
</html>

Hasilnya:

Untuk menambahkan gambar pada latar belakang paragraf, dengan cara menempatkan properti background-image pada elemen P.
Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p style="background-image:url('nama_gambar.jpg')">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</body>
</html>

Hasilnya:

Untuk mempelajari lebih lanjut tentang background-image, kunjungi Tutorial CSS backgriund-image.

Kesimpulan

Gunakan elemen <img> untuk mendefinisikan gambar
Gunakan atribut src untuk menentukan url gambar
Gunakan atribut alt untuk menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan
Gunakan atribut width dan height untuk menentukan ukuran gambar
Gunakan properti CSS floating untuk menentukan float image (mengambang ke kiri atau kanan).