Gambar Dalam Dokumen HTML

Halaman web tanpa gambar bagai sayur tanpa garam. Kurang enak, kurak sedap, kurang lezat. Mungkin akan membuat pengunjung merasa bosan melihatnya, walaupun topiknya menarik.

Dalam, sebuah halaman web, gambar dimaksudkan untuk memperindah tampilan dan membuatnya tampak hidup. Karena gambar bisa memperjelas suatu topik  dengan ilustrasi gambar misalnya. Jadi, gambar mutlak ada dalam sebuah website.

Dalam dokumen HTML kita tidak bisa memasukan gambar langsung seperti pada dokumen lainnya. Tapi harus melalui tag khusus. Untuk memasukkan gambar kita bisa menggunakan tag <img> dengan atribut src sebagai detil url atau letak file gambarnya. Misalnya anda akan memasukkan gambar JPEG bernama blogger ke dalam dokumen html, maka tagnya adalah:
<img src="blogger.jpg">
yang harus diperhatikan adalah letak gambar harus satu directory dengan file htmlnya.
Atau bisa juga jika anda mengambil gambar tersebut dari photo di photobucket misalnya. Maka linknya pun harus disesuaikan. contohnya:
<img src="http://i1105.photobucket.com/albums/h358/teddpermana/tedd.jpg">


Selain itu, kita pun dapat mengatur ukuran gambar pada sebuah halaman dengan mengatur ukuran pixel pada atribut height dan width. Height untuk menyatakan tinggi gambar, sedangkan width digunakan untuk mengatur lebarnya. Contohnya, gambar dibawah adalah standar, dengan skrip:
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" />



Dengan mengatur width dan heightnya, maka anda bisa mengatur ukurannya.


<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" width="125px" height="90px" />


<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" width="250px" height="150px" />

Untuk mengatur letak atau posisi gambar, anda bisa mengaturnya dengan merubah align dengan atribut yang diinginkan. untuk lebih jelasnya bisa anda lihat disini