Menyisipkan Gambar ke Dalam Dokumen HTML5 adalah sebagai berikut :
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).
Listing 1
<!DOCTYPE html>
<html>
<head>
<title>Gambar</title>
</head>
<body>
Coba tebak, ini gambar bebek atau kelinci? <br /><br />
<img src=”duck or rabbit.jpg” alt=”Gambar bebek atau
kelinci” />
</body>
</html>
Listing 2
<!DOCTYPE html>
<html>
<head>
<title>Gambar</title>
</head>
<body>
Gambar dalam ukuran aslinya. <br /> <br />
<img src=”duck or rabbit.jpg” alt=”Gambar bebek atau
kelinci” /><br /><br />
Gambar dalam ukuran lebar 150 px. <br /> <br />
<img src=”duck or rabbit.jpg” width=”150” /><br /><br />
Gambar dalam ukuran tinggi 100 px. <br /> <br />
<img src=”duck or rabbit.jpg” height=”100” /><br /><br />
Gambar dalam ukuran lebar 300 px dan tinggi 100 px. <br />
<br />
<img src=”duck or rabbit.jpg” width=”300” height=”100”
/><br /><br />
</body>
</html>
Namun bila kedua atribut digunakan, kamu harus berhati-hati dalam menentukan ukurannya. Pada Listing 2 tersebut diberikan sebuah contoh ekstrem yang membuat gambar menjadi tidak proporsional sebagai akibat penggunaan nilai atribut width dan height yang tidak pas.
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” />
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).
<!DOCTYPE html>
<html>
<head>
<title>Gambar</title>
</head>
<body>
Coba tebak, ini gambar bebek atau kelinci? <br /><br />
<img src=”duck or rabbit.jpg” alt=”Gambar bebek atau
kelinci” />
</body>
</html>
Listing 2
<!DOCTYPE html>
<html>
<head>
<title>Gambar</title>
</head>
<body>
Gambar dalam ukuran aslinya. <br /> <br />
<img src=”duck or rabbit.jpg” alt=”Gambar bebek atau
kelinci” /><br /><br />
Gambar dalam ukuran lebar 150 px. <br /> <br />
<img src=”duck or rabbit.jpg” width=”150” /><br /><br />
Gambar dalam ukuran tinggi 100 px. <br /> <br />
<img src=”duck or rabbit.jpg” height=”100” /><br /><br />
Gambar dalam ukuran lebar 300 px dan tinggi 100 px. <br />
<br />
<img src=”duck or rabbit.jpg” width=”300” height=”100”
/><br /><br />
</body>
</html>
Namun bila kedua atribut digunakan, kamu harus berhati-hati dalam menentukan ukurannya. Pada Listing 2 tersebut diberikan sebuah contoh ekstrem yang membuat gambar menjadi tidak proporsional sebagai akibat penggunaan nilai atribut width dan height yang tidak pas.
