Penggunaan Gambar Pada HTML dan Contoh Cara Menampilkannya

Oleh Nikita Dini 11 Mei, 2017

Pengunaan gambar pada halaman HTML seringkali tidak dapat dihindari. Gambar pada halaman web dapat berfungsi untuk memperindah tampilan halaman website. Selain itu gambar juga dapat berisi informasi yang dapat melengkapi data yang kita sampaikan pada halaman website.

Penggunaan Gambar Pada HTML dan Contoh Cara Menampilkannya - Pada artikel ini kita akan mempelajari cara penggunaan gambar pada halaman HTML.

image source: blog.edx.org

baca juga: Membuat Link Internal dan Link Eksternal (HyperLink) di HTML

Gambar pada halaman HTML Web

Tidak semua extension gambar/image yang dapat digunakan pada halaman HTML. Dan berikut ini adalah jenis-jenis ekstensi gambar yang biasanya digunakan pada halaman web:

GIF
JPEG
PNG

GIF

Gif merupakan sebuah singkatan dari format gambar, kepanjangan dari gif adalah Graphics Interchange Format

Versi pertama dirilis tahun 1987 (GIF87a)
Gambar 8 bit yang mendukung hanya 256 warna
Format ini mendukung penggunaan multiple bitmap dalam satu file sehingga bisa digunakan untuk membuat gambar animasi
Mendukung Transparency dan Interlacing
Biasanya digunakan untuk background, banner iklan, logo atau icon yang umumnya menggunakan warna yang solid pada website.
Tahun 1995 Unisys memutuskan menarik royalti pada vendor pengguna GIF

JPEG

JPEG merupakan sebuah singkatan dari format gambar, kepanjangan dari JPEG adalah Joint Photographic Experts Group

Dikembangkan pada awal 1980 oleh JPEG
Format ini umumnya digunakan untuk membuat image hasil fotografi, terutama untuk image dengan lebih dari 256 kombinasi warna (sekitar 16 juta warna).
Proses kompresi bersifat lossy maka sangat tidak dianjurkan jika kita mengeditnya berulang-ulang
Cocok untuk desain image yang memiliki gradien, misalnya perubahan warna yang perlahan-lahan dari merah ke biru dan seterusnya.
Tidak memiliki fitur transparan seperti pada GIF dan PNG.
Sebuah perusahaan bernama Forgent pada tahun 2002 mempatenkan format ini

PNG

PNG merupakan sebuah singkatan dari format gambar, kepanjangan dari PNG adalah Portable Network Graphics

Menggunakan metode Lossless Compression, yaitu suatu metode kompress gambar dengan tidak terlalu banyak mengurangi kualitasnya.
Memiliki konsep Alpha Transparency yang menggunakan 8 bit kanal transparansi sehingga image-image dapat saling ditumpuk dengan kesan transparan yang lebih baik dibanding pada GIF
Menerapkan kompresi data lossless dengan algoritma kompresi yang jauh lebih efisien dibanding GIF
Algoritma kompresi pada PNG ini mampu menyimpan data format image lebih banyak dan dilengkapi fitur error-checking untuk mengontrol ketajaman (brightness) gambar dan koreksi warna
Segala proses yang dilakukan terhadap format gambar PNG ini tidak menurunkan kualitas dari gambar tersebut.
Format terbuka atau open, efisien, gratis, dan kompresi jenis lossless.

Pertimbangan-Pertimbangan dalam Penggunaan Gambar

Untuk menampilkan gambar di web yang perlu diperhatikan adalah untuk kebutuhan apa kita menyertakan file gambar pada web kita.
Pilih format gambar yang sesuai kebutuhan yang telah kita tentukan.
Upload file gambar pada path root dari halaman web kita.
Nama file gambar pada script HTML dipastikan sesuai dengan file gambarnya, perhatikan huruf besar atau huruf kecilnya, dan sebisa mungkin hindari penamaan gambar dengan menggunakan spasi.
Pastikan bahwa gambar yang kita gunakan bersifat open

Menampilkan Gambar di HTML Website

Untuk menampilkan gambar di web tag yang digunakan adalah <img>
Tag <img> adalah tag tunggal yang tidak memerlukan tag penutup
Untuk mengarahkan sumber file gambarnya tag <img> di kombinasikan dengan atribut “src” sehingga format lengkapnya adalah <img src=“file_gambar.ext_gambar”>

Contoh 1:

<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>

Atribut Tag img

Align dengan value left, right, middle, top, button, fungsinya untuk menentukan posisi gambar.
Alt value text, fungsinya memberikan keterangan dari gambar, yang akan ditampilkan ketika kursor menyentuh gambar.
Border value nilai angka dalam pixels, fungsinya memberikan bingkai garis pada gambar.
Height value nilai angka dalam pixels, fungsinya menentukan tinggi dari gambar.
Width value nilai angka dalam pixels, fungsinya menentukan lebar dari gambar.
Vspace value nilai angka dalam pixels, fungsinya memberikan jarak vertikal antara text dan gambar.
Hspace value nilai angka dalam pixel, fungsinya memberikan jarak horizontal antara text dan gambar.
Src value lokasi file gambar (path/url), funsinya memberikan alamat sumber dari gambar berdasarkan letak file gambar didalam path atau url.

Memberikan Border dan Komen pada gambar

Untuk memberikan bingkai pada gambar dapat digunakan atribut border dengan value dalam pixel
Dan untuk memberikan komen pada gambar gunakan atribut alt
Buatlah script HTML yang menampilkan gambar dengan dan tanpa border disertai keterangan pada komen

Gambar eksternal

Untuk menampilkan gambar yang berasal dari halaman website lain caranya adalah, dengan mengarahkan isi atribut src dengan url letak gambar itu berada.
Buatlah halaman html yang menampilkan gambar dari direktori lokal dan dari luar

Contoh 2:

<html>
<body>
<img src="https://media.tenor.co/images/bf30e6008871f85333f8e9eaaa58f27b/tenor.gif" alt="Modul Makalah" width="42" height="42">
</body>
</html>

Menentukan spasi pada gambar

Untuk menentukan spasi di sisi kiri dan kanan gambar digunakan atribut hspace
Dan untuk menentukan spasi di sisi atas dan bawah gambar digunakan atribut vspace
Buat halaman HTML yang terdiri dari texts yang mengandung gambar yang memiliki sisi atas, bawah kiri dan kanan terhadap texts yang dikombinasikan degan atribut align dengan semua posisi

Contoh 3:

<html>
<body>
<h4>Gambar tanpa hspace:</h4>
<p><img src="https://media.tenor.co/images/bf30e6008871f85333f8e9eaaa58f27b/tenor.gif" alt="Minion" width="42" height="42" align="middle">Ini adalah beberapa teks. Ini adalah beberapa teks. Ini adalah beberapa teks.</p>
<h4>Gambar dengan hspace dan vspace:</h4>
<p><img src="https://media.tenor.co/images/bf30e6008871f85333f8e9eaaa58f27b/tenor.gif" alt="Minion" width="42" height="42" align="middle" hspace="20" vspace="20">Ini adalah beberapa teks. Ini adalah beberapa teks. Ini adalah beberapa teks.</p>
<p>Atribut hspace tidak didukung di HTML5. Gunakan CSS sebagai gantinya.</p>
</body>
</html>

Hasil 3:

Gambar tanpa hspace:

MinionPenggunaan Gambar Pada HTML dan Contoh Cara Menampilkannya_

Ini adalah beberapa teks. Ini adalah beberapa teks. Ini adalah beberapa teks.

Gambar dengan hspace dan vspace:

Ini adalah beberapa teks. Ini adalah beberapa teks. Ini adalah beberapa teks.

Atribut hspace tidak didukung di HTML5. Gunakan CSS sebagai gantinya.

Koordinat pada Gambar

Untuk menentukan gambar sebagai server-side image-map digunankan atribut ismap
Atribut ismap adalah atibut yang tidak memiliki value
Atribut ini digunakan untuk interaksi gambar dengan CGI yang digunakan sebagai link
Isi yang didapat adalah kordinat titik image diklik

Membuat sebagian gambar sebagai link

Bagian gambar dapat digunakan sebagai link dengan menggunakan atribut usemap
Value usemap adalah name dari atribut map yang ditambahkan tanda pagar
Untuk tag map memiliki atribut name
Tag map mengapit tag area yang memiliki atribut shape, coords, href dan alt.
Atribut shape memiliki value:rect, circle dan poly
Value dari atribut coords adalah koordinat dari bentuk yang didefinisikan dalam atrubut shape
Untuk bentuk rect value dari coords-nya adalah x1,y1,x2,y2 dimana utk menunjukan left, top, right, bottom
Untuk bentuk poly value dari coords-nya adalah x,y, radius
Untuk bentuk circle value dari coods-nya adalah x1,y1,x2,y2,..,xn,yn

Contoh 4:

<html>
<body>
<img src="http://3.bp.blogspot.com/-4oblgd7syv8/Ud6-yAc3WuI/AAAAAAAABRA/6lywmATLKK8/s1600/bali+map.gif" width="250" height="200" alt="Bali" usemap="#peta_menu">
<map name="peta_menu">
<area shape="rect" coords="0,0,82,126" alt="kotak" href="halaman1.htm">
<area shape="circle" coords="90,58,3" alt="lingkaran" href="halaman2.htm">
<area shape="circle" coords="124,58,8" alt="lingkaran2" href="halaman3.htm">
</map>
</body>
</html>

Sekian artikel tentang Penggunaan Gambar Pada HTML dan Contoh Cara Menampilkannya. Semoga bermanfaat bagi kita semua.

Nikita Dini Blogger, Internet Marketer, Web Designer