Menampilkan Gambar di HTML

Posted by Yogo Prestiyanto on Sunday, November 18, 2012

Gambar merupakan elemen yang sangat penting dalam halaman web. Tanpa gambar kita mungkin akan kembali pada jaman web 1.0 dimana halaman web hanya berupa text atau tulisan saja.
Kali ini saya akan memberikan tutorial menampilkan gambar pada halaman web.

  1. Pertama yang harus disiapkan adalah tentu saja file gambar, bisa berupa .jpg, .gif, dll. Gambar yang akan saya gunakan kali ini berformat .jpg dengan nama gambar yaitu gambar1.jpg. Supaya lebih semangat dalam berlatihnya saya menggunakan contoh gambar yang bikin tambah fresh dalam coding :D. 
  2. Buatlah satu folder bernama image, atau terserah anda.
  3. Siapkan Text Editor HTML, disini saya memakai Notepad++
  4. Tag HTML yang harus anda mengerti kali ini adalah tag <img>
Source Code :


Kemudian silahkan simpan dengan nama index.html kedalam folder image

Keterangan :
  • <img src="gambar1.jpg" = Pemanggilan gambar. Jika file index.html disimpan di luar folder images, maka pemanggilannya menjadi <image src="images/gambar1.jpg"
  • align="left"> = posisi gambar
Berikut untuk priviewnya dengan menggunakan browser Mozilla Firefox:






















Jika kita sudah mendapat ilmu tentang menampilkan gambar dengan HTML, berikutnya kita akan mengatur ukuran gambar yang akan kita tampilkan.
Kita bisa mengaturnya melalui atribut pada tag <img> yang bernama height dan width.

  • Height = Untuk mengatur tinggi gambar
  • Width = Untuk mengatur lebar gambar
Berikut source code setelah dirubah untuk mengatur ukuran gambar :



Dalam hal ini yang sering digunakan satuannya adalah pixel yang disingkat menjadi px.
Berikut priview dari index.html yang telah ditambahkan pengaturan ukurannya. 





















Akan terlihat gambar yang sebelah kanan adalah gambar yang belum disetting ukurannya sehingga tampak memenuhi tampilan di browser.Sedangkan gambar yang sebelah kiri adalah gambar yang sudah disetting ukurannya. Gambar yang kecil adalah gambar yang telah dirubah ukurannya menjadi height="500px" dan width="400px".

Selamat mencoba !!!









   

8 comments: