Nah, pada pembahasan kali ini, saya akan menjelaskan bagaimana cara untuk memasang/menampilkan sebuah gambar dalam halaman web. Untuk menampilkan gambar, dalam sebuah dokumen HTML kita membutuhkan tag img.
Berikut adalah cara penulisan tag img beserta atributnya (gambar saya ambil dari Google.com):
<img src="http://www.google.com/images/srpr/logo11w.png" width="538" height="190" alt="Google Logo">
Atribut src digunakan untuk memberitahu browser dimana dia bisa menemukan gambar yang kita maksud. Apabila kita memiliki sebuah file gambar yang berada dalam satu direktori yang sama dengan file HTML/halaman web, maka kita bisa langsung memasukkannya dalam atribut src.
Sebagai contoh apa bila kita punya file gambar bernama "fotoprofil.jpg" yang ada dalam satu direktori dengan file "webpertama.html" misalnya. Kita cukup menuliskan <img src="fotoprofil.jpg">.
width adalah atribut yang digunakan untuk mendefinisikan lebar dari gambar sedangkan height adalah atribut yang mendefinisikan tinggi dari gambar. Kedua atribut tersebut sangat dianjurkan untuk dilibatkan/digunakan dalam tag img. Atribut width dan height bagaikan tiket bagi si gambar dalam memesan sebuah ruangan dalam halaman web. Ketika halaman web tersebut terbuka, maka otomatis akan tersedia ruangan dengan lebar dan tinggi bagi si gambar sesuai dengan yang tertulis dalam atribut width dan height.
Apabila kita tidak mencantumkan atribut width dan height maka si browser tidak mengetahui lebar dan tinggi yang akan digunakan oleh si gambar sehingga akan berdampak dengan berubahnya layout atau tampilan dari halaman web apalagi kalau ukuran gambar tersebut tergolong besar.
Atribut alt adalah "alternative description" yaitu berfungsi untuk memberikan informasi tambahan mengenai gambar. Apabila pengunjung web tidak dapat melihat gambar yang kita pasang entah itu karena gagal termuat atau karena file gambar tersebut hilang maka tugas atribut alt untuk memberitahukan kepada user/pengunjung kalau gambar yang tidak dapat terbuka tersebut adalah gambar fotoprofil atau logo google misalnya.
Catatan:
Sama seperti tag br, karena elemen img tidak menyertakan konten apapun maka tidak memerlukan tag penutup.
Gambar yang umum digunakan dalam website adalah gambar dengan format *.jpg/*.jpeg, *.gif dan *.png. Gambar dengan format jpg biasa kita temui karena sering digunakan dalam foto, poster dan sebagainya.
Dalam memasang sebuah gambar dalam halaman web, sebaiknya kita menghindari memasang gambar yang terlalu besar. Mengecilkan ukuran gambar yang besar melalui properti width dan height pun tak cukup karena browser akan mengunduh gambar dengan ukuran asli meskipun kita sudah mengatur ukuran lebar misalnya 300 pixel dan tinggi 200 pixel. Hal tersebut berdampak pada saat browser akan membuka halaman web dimana akan terasa lebih berat/lelet ketimbang halaman web dengan ukuran gambar kecil/tanpa gambar.
Selain itu, dengan memasang gambar ukuran besar menyebabkan boros bandwidth dan juga boros kesabaran bagi pengunjung web dengan kecepatan internet yang lambat. Solusinya adalah kita bisa me-resize gambar yang besar tersebut menggunakan software/program pengolah gambar.
***
Daftar Tutorial HTML:
Tidak ada komentar:
Posting Komentar