Tutorial HTML/CSS 7 : Gambar HTML, Cara Memasukkan dan Memodifikasi

Last Updated on December 9, 2021 by

Gambar menjadi salah satu komponen penting dalam suatu website atau konten online tertentu untuk membuat website maupun konten tersebut menarik.

Pada artikel kali ini kami akan membahas tentang cara memasukkan atau memodifikasi gambar khususnya di HTML. Ada beberapa cara untuk menyematkan gambar HTML yang akan kami bahas pada tutorial berikut ini.

Menggunakan Tag Gambar HTML

Untuk mendefinisikan gambar HTML Anda perlu menggunakan <img> tag:

<img src="gambar-kucing1.jpg" alt="Kucing" width="150" height="150">

Anda juga dapat menggunakan tag image HTML untuk menganimasikan gambar dengan ekstensi .gif:

<img src="cutecat1.gif" alt="GIF Kucing" style="width: 100px; height: 100px;">

Perlu Anda ingat bahwa image HTML hanya dapat mengatribusikan dan tidak ada konten yang pasti. Hal ini berarti, ia mendefinisikan sebuah elemen kosong dan tidak membutuhkan tag penutup.

Gambar HTML Interaktif

Sebuah gambar juga dapat bertindak sebagai link jika Anda menempatkan tag gambar HTML di dalam sepasang tag anchor.

<a href="index.html">
<img src="space-view1.jpg" alt="Index Image Link" style="width: 105px; height: 105px;">
</a>

Perlu Anda pehatikan bahwa dalam kasus ini Anda perlu memasukan dua alamat URL yang merupakan sumber dari gambar dan URL yang baru untuk terhubung dengan user.

Gambar Peta di HTML

Satu gambar dapat berisikan banyak area yang dapat diklik dengan link berbeda-beda. Hal ini disebut dengan HTML image map atau gambar peta HTML. Untuk mendefinsikan salah satunya, Anda perlu menggunakan tag <map>:

<img src="homepage.jpg" width="500" height="500" alt="Image" usemap="#newmap">

<map name="newmap">
  <area shape="circle" coords="200, 100, 50" alt="Google" href="https://www.google.com">
  <area shape="rect" coords="145, 88, 213, 200" alt="Facebook" href="http://www.facebook.com">
  <area shape="circle" coords="300, 150, 22" alt="Instagram" href="http://www.instagram.com">
</map>

Sebuah gambar HTML membuat area yang dapat diklik pada gambar HTML secara spesifik.  Untuk mengkoneksikan gambar peta ke gambar yang tepat, Anda harus terlebih dahulu menentukan nama untuk peta tersebut, lalu memasukkannya sebagai nilai untuk atribut peta pengguna dalam tag gambar HTML.

Untuk menentukan area yang dapat diklik dalam peta gambar, Anda perlu menggunakan elemen <area> sebagai anak dari elemen <map>:

<img src="home.jpg" alt="Home image" usemap="#indexmap" style="width: 200px; height: 200;">

<map name="indexmap">
  <area shape="circle" coords="100, 50, 82" alt="test" href="home.html">
  <area shape="circle" coords="95, 80, 30" alt="test-2" href="home.html">
</map>

Dimensi dan Penempatan Gambar

Untuk mengubah lebar dan tinggi image HTML Anda, Anda memerlukan beberapa gaya CSS dasar. Gunakan atribut style dan tentukan properti lebar dan tinggi dalam piksel:

<img src="home.jpg" alt="Home image" style="width: 500px; height: 500px;">

HTML5 memperkenalkan atribut width dan height yang terpisah. Artinya, Anda dapat memodifikasi dimensi tanpa menggunakan atribut style. Namun, kami sarankan untuk tetap menggunakan style, karena menggunakan inline styling menyelamatkan Anda dari lembar gaya lain yang memengaruhi gambar Anda dalam HTML. Sebagai contoh:

<img src="Banner1.jpg" alt="Banner 1 Image" style="width: 250px; height: 250px;">
<img src="Banner2.jpg" alt="Banner 2 Image" width="250" height="250">

Menggunakan atribut style membuat Anda dapat juga mengatur gambar agar muncul dari kanan ke kiri. Hal ini berarti gambar tersebut akan menempel pada salah satu sisi dan akan tetap berada di sana.

<img src="cutecat2.jpg" alt="Cat image on right" style="float: right; width: 100px; height: 100px;">
 Image float set: right

<img src="cutecat3.jpg" alt="Cat image on left" style="float: left; width: 100px; height: 100px;">
 Image float set: left

Berbagai Atribut HTML yang Sering Digunakan

Alt

Atribut Alt berguna untuk mengatur teks alternatif untuk ditampilkan jika gambar tidak dapat ditampilkan. Anda dapat memberi nama atau mendeskripsikan gambar HTML untuk memberikan gambaran kepada pengguna tentang seperti apa gambar yang akan Anda tampilkan:

<img src="home.jpg" alt="Home image" style="width: 100px; height: 100px;">

Src

Atribut src mendefinisikan sumber tempat gambar tersebut diambil. Gambar HTML bisa ditempatkan di berbagai folder dari website Anda. Tag <img> harus memiliki atribut src dengan jalur yang benar ke folder tertentu agar gambar Anda ditampilkan:

Sebagian besar file image HTML juga dapat diakses melalui alamat URL langsung. Untuk mengunggah gambar dari server lain, Anda perlu memasukkan alamat URL di atribut src:

Usemap

Dengan menggunakan usemap, Anda dapat mengkoneksikan gambar Anda dengan elemen <map> untuk mendefinsikan gambar map:

<img src="home.jpg" alt="Home image" usemap="#homemap" style="width: 150px; height: 150px;">

<map name="homemap">
  <area shape="rect" coords="30, 50, 74, 106" alt="about" href="about.html">
  <area shape="rect" coords="90, 55, 110, 110" alt="profile" href="profile.html">
</map>

Height

Atribut height ini berguna untuk mengatur ketinggian gambar Anda pada HTML:

Width

Atribut width mendefinisikan width dari gambar Anda di HTML:

<img src="Homepage.png" alt="Homepage" width="100" >

Style

Atribut style ini memudahkan Anda untuk mengaplikasikan inline stye untuk gambar di HTML:

<img src="homepage.png" alt="Homepage" style="height: 100px; width: 100px;">

Beberapa yang harus dilakukan ketika menerapkan gambar HTML:

1. Ketika memodifikasi dimensi dari gambar ingatlah simbol px harus dimasukan dalam atribut style tapi bisa dihilangkan dalam height dan width.
2. Pilih nama untuk gambar HTML Anda dengan bijak. Mesin pencari yang akan mempertimbangkannya, jadi nama yang lebih jelas dapat membantu meningkatkan kemudahan situs Anda untuk ditemukan.

Demikianlah penjelasan tentang cara memasukan dan memodifikasi gambar menggunakan HTML. Jika Anda tertarik untuk belajar lebih banyak tentang HTML maupun bahasa pemrograman yang lain, simak terus artikel-artikel Codekey selanjutnya.