Belajar HTML Part 12 - Gambar

Assalamu'alaikum Warahmatullaahi Wabarakatuh

Sebelumnya kita telah belajar tentang Tautan atau link pada HTML. Kali ini kita akan mempelajari tentang gambar. Syntaks dasar untuk menyisipkan gambar adalah sebagai berikut :

<img src="lokasi gambar" alt="teks alternatif" />

atribut src kita isi dengan lokasi gambar yang akan kita sisipkan sedangkan atribut alt kita isi dengan teks yang akan menjadi alternatif jika gambar yang kita sisipkan tidak bisa ditampilkan.

1. Atribut Width, Height dan Style untuk mengatur ukuran gambar

Pada default-nya sebuah gambar akan ditampilkan dengan ukuran sesuai dengan gambar aslinya. Namun tentu sering kali kita menginginkan ukuran yang tepat untuk menampilkan gambar. Ada dua cara untuk mengatur ukuran gambar. Yang pertama adalah dengan menggunakan atribut width dan height. Berikut syntax dasarnya :

<img src="lokasi gambar" alt="teks alternatif"  width="lebar" height="tinggi" />

atau kita juga bisa menggunakan atribut style. Berikut cara penggunaannya :

<img src="lokasi gambar" alt="teks alternatif" style="width:lebar;height:tinggi;" />

Untuk lebih jelasnya, ikuti langkah berikut :
1. Buat sebuah folder, simpan satu gambar di dalam folder tersebut. Misalnya, saya di sini menyimpan sebuah gambar dengan nama batcomputer93.jpg. Kemudian coba ketik scrypt berikut pada notepad++ Anda :

<img src="batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br> <img src="batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" style="width:100px;height:100px;" />

Simpan file yang berisi scrypt tersebut dalam folder yang sama dengan gambar yang telah disediakan sebelumnya. Berikut tampilan yang dihasilkan :

2. Menampilkan gambar dari folder lain

Selanjutnya, kita bisa mengambil sebuah gambar dari folder lain. Biasanya, dalam membuat sebuah halaman web, konten-konten yang dibutuhkan haruslah tertata secara rapi. Oleh karena itu kita harus menyimpan gambar-gambar pada satu folder terpisah. Untuk mengakses gambar dalam sebuah folder, coba kita akses kembali folder yang telah kita buat tadi, kemudian buat folder baru di dalamnya. Kita beri nama folder baru tersebut, misal dengan nama gambar. Lalu pindahkan gambar yang tadi kita telah siapkan, ke dalam folder baru tersebut.

Kemudian kita buka kembali file yang berisi scrypt tadi. Lalu kita ubah scrypt-nya seperti berikut :

<img src="gambar/batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br />
<img src="gambar/batcomputer93.jpg" alt="gambar tidak bisa dimunculkan" style="width:100px;height:100px;" />

Perlu kita perhatikan, yang kita ubah di sini terletak pada atribut src. Yang pada awalnya src="batcomputer93.jpg" kita ubah menjadi src="gambar/batcomputer93.jpg.

Tambahan kata gambar di sana berarti kita mengakses folder bernama gambar. Selanjutnya kita mengakses isi folder tersebut dengan menambahkan slash(/) dan diikuti nama file yang kita inginkan.

3. Menampilkan gambar dari internet dengan (server yang berbeda)

Jika kita ingin menampilkan sebuah gambar dari internet, kita harus memiliki link atau tautan dari gambar tersebut. Contohnya bisa kita lihat dalam scrypt berikut :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" alt="gambar tidak bisa dimunculkan" width="100px" height="100px" /><br />

Yang berubah di sana adalah pada atribut src. Di mana lokasi gambar kita arahkan pada sebuah tautan yang menuju pada gambar tersebut. Berikut hasil dari scrypt di atas :

4. Floating

Selanjutnya, kita bisa mengatur floating image. Floating image digunakan untuk menyesuaikan posisi gambar dengan teks. Lebih jelasnya, coba ketik scrypt berikut :

<img alt="gambar tidak bisa dimunculkan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" style="float: right; height: 100px; width: 100px;" />Gambar ini berada di sebelah kanan teks<><br /> 
<img alt="gambar tidak bisa dimunculkan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GNP8BO2kyY_I4mC_wPZRbjdZUUANJ5PD4dxoItzkLcIwKa9SDj7iowyYaNXJQJy_rlpjsVLYsC63ApmKwxfP36pTWeTa1fE3qAki7AuxEeLJba9sD_aMS46I4YMTZN5il5NbyhyphenhyphenPqII/s640-Ic42/thebatcomputer93_logo.jpg" style="float: left; height: 100px; width: 100px;" />Gambar ini berada di sebelah kiri teks<br />

Berikut hasilnya :

5. Image Maps

Dengan fungsi image-map, kita bisa membuat pemetaan pada sebuah gambar, sehingga sebuah gambar bisa memiliki tautan pada area-area tertentu. Untuk mempraktekkannya, coba ikuti langkah-langkah berikut :

1. Siapkan sebuah folder, misal kita beri nama folder tersebut image map, lalu kita siapkan sebuah gambar dengan nama batcomputer93.jpg

2. Kita buat sebuah file dengan nama area_satu.html. Ketik scrypt berikut pada file tersebut :

<p>File ini berasal dari area satu gambar</p>

3. Buat file kedua misal dengan nama area_dua.html. Lalu masukkan scrypt berikut pada file tersebut :

<p>File ini berasal dari area dua gambar</p>

4. Terakhir kita buat sebuah file dengan nama gambar_utama.html. Kemudian masukkan scrypt berikut pada file tersebut :

<img alt="Tidak bisa menampilkan gambar" src="batcomputer93.jpg" style="height: 126px; width: 145px;" usemap="#imagemap" /> 
<map name="imagemap">
 <area alt="Sun" coords="0,0,82,126" href="area_satu.html" shape="rect"></area>
 <area alt="Mercury" coords="90,58,3" href="area_dua.html" shape="circle"></area> 
</map>

Simpan dan jalankan file gambar_utama.html

Setelah disimpan, gambar yang terdapat pada file gambar_utama.html akan memiliki dua area yang mengarahkan kita pada file yang berbeda.

Penjelasan :
1. Atribut usemap pada tag <img> menunjukkan nama map yang akan kita gunakan
2. Tag <map> adalah pemetaan gambar yang kita buat. Dalam atribut name kita beri nama map tersebut dengan nama imagemap.
3. Tag area menunjukkan area-area yang kita buat dalam pemetaan tersebut.
4. Atribut shape menunjukkan bentuk area yang dibuat. rect untuk persegi panjang, dan circle untuk bentuk bulat.
5. Coords menunjukkan koordinat area yang kita sisipi link. 
6. href menunjukkan file yang akan menjadi target dari link pada area yang telah kita buat.

Demikian seri belajar HTML Part 12 tentang menyisipkan gambar pada HTML. 
Semoga artikel ini bisa bermanfaat. Terima kasih,
Wassalamu'alaikum Wr Wb