Pada edisi sebelumnya PCplus telah sedikit menyinggung tentang penyisipan gambar ke dalam dokumen HTML5. Namun sebenarnya titik berat pembahasan lebih kepada soal penggunaan atribut pada tag HTML. Nah, kali ini akan dibahas mengenai penyisipan gambar ke dalam dokumen HTML5 secara lebih lengkap.
Gambar disisipkan ke dalam dokumen HTML5 menggunakan tag <img>. Tag ini tidak memiliki tag penutup </img>. Tag <img> ini minimal harus memiliki sebuah atribut, yaitu src yang digunakan untuk menyatakan file gambar yang hendak disisipkan. Jadi sintaks minimal penggunaan tag <img> adalah sebagai berikut:
<img src=”namafile” />
Format gambar yang didukung adalah JPG, PNG, GIF (termasuk yang beranimasi), dan BMP. Perhatikan bahwa penulisan nama file gambar boleh tidak menyertakan path atau URL lengkap sepanjang gambar tersebut diletakkan pada folder/lokasi yang sama dengan file HTML5-nya. Dari pernyataan ini, bisa disimpulkan bahwa gambar juga dapat diambil dari lokasi yang berbeda dengan file HTML5-nya. Tentu saja dalam kasus ini, alamat file gambar tersebut harus ditulis dengan lengkap.
Hanya saja disarankan untuk mengambil gambar dari lokasi yang sama dengan file HTML5 untuk meminimalkan potensi gambar tidak bisa ditampilkan karena tidak berhasil mengontak lokasi gambar.
Bila kegagalan mengambil gambar tersebut toh akhirnya terjadi juga, HTML5 memiliki atribut khusus untuk menampilkan teks pengganti yang ditampilkan pada posisi gambar yang gagal diambil tersebut. Atribut tersebut adalah alt. Sintaks penggunaan tag <img> yang dilengkapi dengan atribut alt adalah sebagai berikut:
<img src=”namafile” alt=”teks” />
Kadangkala, gambar yang hendak disisipkan ke dalam dokumen HTML5 memiliki ukuran yang tidak cocok dengan tata letak dokumen, entah itu terlalu besar atau terlalu kecil. Pada kasus seperti ini, kamu bisa mengatur ukuran gambar secara manual menggunakan atribut width dan height. Dari namanya sudah jelas, atribut width digunakan untuk mengatur lebar gambar dan atribut height digunakan untuk mengatur tinggi gambar.
Satuan yang digunakan untuk menyatakan nilai atribut width dan height tersebut adalah piksel. Ini merupakan hal baru di HTML5 karena di HTML 4.01 kedua atribut tersebut boleh menggunakan satuan persen.
Yang perlu diperhatikan, lebih aman untuk mengecilkan gambar yang berukuran terlalu besar ketimbang membesarkan gambar yang berukuran terlalu kecil. Sebab gambar yang berukuran kecil bila diperbesar akan berpotensi “pecah”, apalagi bila resolusinya rendah.
Untuk kasus gambar yang terlalu kecil, akan lebih baik bila kamu mencari gambar serupa yang ukurannya lebih besar, baru disisipkan ke dalam dokumen HTML5.
Sintaks tag <img> yang diperlengkapi dengan atribut width dan height adalah sebagai berikut:
<img src=”namafile” width=”lebar” height=”tinggi” />
Kedua atribut tersebut tidak harus digunakan secara bersama-sama alias boleh digunakan sendiri-sendiri. Bila hanya ditentukan lebarnya saja, maka tingginya akan disesuaikan sehingga proporsi gambar tidak berubah, demikian pula sebaliknya. Kamu juga boleh mengkombinasikan kedua atribut tersebut dengan atribut alt.
Dibandingkan dengan HTML 4.01, ada beberapa atribut yang tidak lagi didukung oleh HTML5, antara lain align dan border. Atribut align digunakan untuk mengatur posisi gambar dalam dokumen dan atribut border digunakan untuk mengatur bingkai gambar. Dengan HTML5, pengaturan hal-hal tersebut dilakukan menggunakan CSS. Pembahasan CSS tentu saja tak akan luput kami berikan, hanya saja belum sekarang.
Nah, mari sekarang kita perhatikan contoh-contoh penggunaan tag <img> ini. Contoh paling sederhana diberikan pada Listing 1 yang disimpan dengan nama gambar1.html. Hasilnya ditampilkan seperti ini (Lihat gambar1).
Seandainya terjadi masalah dalam pengambilan gambar, teks alternatif “Gambar bebek atau kelinci” akan ditampilkan. Hanya saja tidak setiap browser memiliki cara yang sama dalam menampilkan teks alternatif tersebut. Google Chrome malahan tidak menampilkan teks alternatif tersebut. Gambar berikut ini menunjukkan cara browser Internet Explorer dalam menampilkan teks alternatif tersebut (Lihat gambar2).
Berikutnya, Listing 2 memberikan contoh penggunaan atribut width dan height dalam mengatur ukuran gambar secara manual.
Perhatikan bahwa dalam Listing 2 tersebut diberikan contoh penggunaan atribut width dan height yang digunakan baik secara terpisah maupun bersama-sama. Dari hasil eksekusinya, terlihat bahwa bila hanya digunakan salah satu atribut saja, maka atribut yang lain akan disesuaikan nilainya hingga proporsi gambar tidak berubah (Lihat gambar 3).
0 komentar:
Posting Komentar