Cara Mengatur Ukuran Gambar pada HTML

Tags

Cara Mengatur Ukuran Gambar pada HTML

Harus kita ketahui bahwa gambar yang ditampilkan pada dokumen HTML kadang-kadang tidak mempunyai ukuran gambar yang sama dengan ukuran sebenarnya. Maka dari itu untuk menghasilkan gambar dengan kualitas yang mirip dengan aslinya, maka penentuan ukuran juga menjadi hal yang sangat penting untuk diperhatikan. Oleh karena itu perbandinganya harus sesuai dengan ukuran asli dari gambar yang bersangkutan tersebut. Untuk dapat menentukan atau mengatur ukuran gambar pada HTML, kita hanya perlu mengisi atribut HEIGHT yang berfungsi untuk menetukan tinggi gambar dan atribut WIDTH yang berfungsi untuk menetukan lebar gambar. Perhatikanlah contoh berikut:

<img src=”images/komputer.jpg” />

Kode diatas berarti akan menampilkan gambar dari file komputer.jpg yang ada di dalam direktori images sesuai dengan ukuran aslinya (misal 500X375 pixel). Untuk dapat memperkecil gambar tersebut, maka kita tinggal memperkecil ukuran/nilai-nilai angka tersebut, seperti misalnya menjadi seperti ini:

<img src=images/komputer.jpg” width=320” height=”230” />

Namun sebelum kita mengatur ukuran gambar, tentu saja kita juga harus mengetahui bagaimana cara menambahkan gambar pada HTML.

Cara Menambahkan Gambar pada HTML

Sebuah halaman web akan terlihat kaku, terkesan formal, kurang menarik dan sedikit menjemukan apabila tidak disertai dengan gambar. Sekarang ini hampir semua halaman web yang ada di internet, memasukkan unsur gambar, animasi, bahkan juga audio dan video untuk menarik dan membuat para pengunjungnya tertarik. Jika kita ingin membuat sebuah halaman web yang berisi misalnya koleksi foto, ataupun barang-barang yang sesuai dengan hobi, tentu kita harus memahami teknik untuk menampilkan foto atau gambar tersebut ke dalam halaman web sehingga nantinya akan tampil rapi dan sangat menarik.

Cara yang dibutuhkan untuk menambahkan atau memasukkan gambar ke dalam suatu halaman web sangat mudah. HTML sudah menyediakan tag khusus untuk kebutuhan ini, yaitu tag <img>. Tag ini adalah tag tunggal atau tidak mempunyai pasangan. Atribut terpenting dari tag <img> ini ialah SRC (source atau sumber), yang berisikan file gambar yang nantinya akan ditampilkan ke dalam halaman web yang bersangkutan. Secara umum bentuk penggunaan tag <img> yaitu:

<img src=”namafile”>

Apabila file yang akan ditampilkan berada didalam direktori lain, ataupun bahkan berada di situs web lain, maka kita perlu untuk menyebutkan juga lokasi dari file tersebut. Contohnya seperti ini:

<img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>

Contoh dari hasil dokumen HTML dalam Web Browser seperti gambar berikut ini:

Cara Mengatur Ukuran Gambar pada HTML

Format gambar yang sering kali dipakai dalam halaman web diantaranya ialah GIF (.gif ) dan JPEG (.jpg atau .jpeg). GIF ialah singkatan dari Graphics Interface Format sementara JPEG ialah singkatan dari Joint Photographic Expert Group. Selain dua format gambar tersebut, saat ini juga sudah mulai banyak dipakai gambar dengan format PNG (.png), PNG adalah singkatan dari Portable Network graphics.

Berkomentarlah sesuai dengan topik artikel
EmoticonEmoticon