Menampilkan gambar pada halaman website diperlukan untuk meningkatkan kualitas halaman web, Ada berbagai upaya dalam menampilkan gambar, Namun yang akan kita bahas disini yaitu tentang cara menampilkan suatu gambar dengan kode HTML. Sebelumnya kita pernah membahas tentang cara membuat form upload gambar dengan HTML. untuk membaca artikel tersebut silahkan klik link berikut ini.
Cara Menampilkan gambar dengan HTML
Dari sekian banyak blog atau situs website didunia, Sudah sangat jarang sekali website yang tidak menampilkan gambar, bahkan dapat dibilang 99,9% web di dunia sudah menampilkan gambar. Hal ini menunjukan bahwa gambar sangat berperan penting dalam performa website.
Untuk menampilkan gambar dengan kode HTML, Kita hanya perlu menggunakan kode tag <img src=”alamat gambar(nama gambar) beserta ekstensinya”/>, kurang lebih penulisan kodenya seperti berikut ini :
<img src=”ini_gambar.jpg”/>
Untuk mengubah ukuran gambar yang ditampilkan, Kita perlu menambahkan atribut width=”nilai” dan height=”nilai”, misalnya seperti :
<img src=”ini_gambar.jpg” width=”40″ height=”40″/>
Agar penjelasan lebih mudah dipahami, mari kita aplikasikan. Namun pertama kamu perlu menyiapkan peralatan yang dibutuhkan yaitu komputer, laptop, handphone, dan sejenisnya. yang terpenting perangkat keras tersebut dapat membuka aplikasi seperti edit txt (notepad atau notepad++) dan juga mempunyai aplikasi browser (seperti google chrome, opera mini, dan lain-lain).
Selanjutnya, Buat folder untuk menyimpan file html dan gambar, Silahkan namai foldernya dengan nama “latihan” (tanpa tanda petik). Lalu masukan satu buah gambar kedalam folder latihan dan ubah nama gambar tersebut menjadi “aku.jpg” (tanpa tanda petik).
Buka Aplikasi Text Editor dan ketikan kode berikut ini :
<html> <head><title>ini digunakan untuk judul halaman</title></head> <body> <h4>LIHAT GAMBAR DIRIKU</h4><br/> <img src="aku.jpg" width="230" height="150"/> </body> </html>
Setelah itu simpan dengan nama “tampil_gambar.html” (tanpa tanda petik). Hasilnya akan tampak seperti pada Gambar berikut ini :
Penjelasan:
Tag <img /> merupakan tag untuk menampilkan gambar, tag ini mempunyai beberapa atribut yaitu:
- “src” atribut ini berfungsi untuk menentukan file mana yang akan ditampilkan. value dari src ini adalah alamat atau lokasi gambar disimpan. jika gambar disimpan dalam folder lain, maka kamu hanya perlu menambahkan nama folder tersebut disertai dengan nama gambar dan ekstensinya. contoh p seperti ini <img src=”Folderku/gambar_ku.jpg”/>
- Atribut “height” digunakan untuk menyatakan seberapa panjang gambar yang akan ditampilkan. value dari height ini, ditulis dengan angka dan tambahan jenis angka misanya pixel (px) atau persent (%). Misalnya seperti height=”50%”.
- Atribut Width digunakan untuk menyatakan lebar dari suatu gambar yang akan ditampilkan. sama halnya dengan height, value width juga diisi dengan angka pixel atau percent.
Itulah dia, pembahasan tentang cara menampilkan gambar pada kode HTML. Sebelumnya kita pernah membahas tentang :