Ketika sedang
mencari atau mempelajari informasi, kerap kali kita akan menemukan informasi
yang ada disajikan dalam bentuk teks. Sering juga, untuk melengkapi teks yang
ada, terdapat gambar yang berguna dalam membantu kita mengilustrasikan hal-hal
yang sulit dibayangkan. Untuk media digital, kita bahkan dapat menambahkan
suara dan video ke dalam teks untuk menambahkan informasi kepada pengguna.
HTML sendiri
menyediakan fitur untuk memberikan gambar, suara, maupun video untuk digunakan
dalam dunia web. Bagaimana caranya? Mari kita lihat!
Menambahkan Gambar
img. Elemen img sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag penutup. Elemen img juga
harus memiliki atribut src, yang dapat diisikan dengan dua cara, yaitu tempat dari gambar
disimpan relatif terhadap file HTML dan URL dari gambar tersebut.Berikut adalah contoh penggunaan tag
img:<img src="images/sintel.png" alt="Sintel merupakan sebuah film singkat.">
<img src="http://i.imgur.com/cYWveEa.jpg" alt="Contoh Pengunaan URL untuk src.">Atribut
alt, yang bersifat opsional, berguna
untuk memberikan keterangan gambar secara semantik. Keterangan ini juga akan
ditampilkan ketika mouse diletakkan di atas gambar, dan ketika gambar tidak
dapat ditemukan.
Catatan: Dukungan format gambar yang ada
pada HTML diserahkan kepada masing-masing pembuat browser. Begitupun, sangat
disarankan untuk menggunakan format gambar yang didukung oleh hampir semua
perangkat secara umum, seperti
Layaknya elemen-elemen lain pada HTML, kita dapat mengubah
tampilan elemen png,
jpg, atau gif.img dengan menggunakan CSS.Mengubah Ukuran Gambar
width dan height, seperti pada elemen-elemen lainnya. Yang perlu diperhatikan dalam
perubahan ukuran ialah bagaimana sebuah gambar dapat menyesuaikan ukuran yang
tepat ketika kita hanya memberikan salah satu dimensi. Misalnya, sebuah gambar
dengan ukuran asli 800x600 akan secara otomatis berubah menjadi 1024x768 meskipun kita
hanya mengisikan nilai width saja. Browser secara otomatis akan menghitung rasio panjang dan
lebar gambar lalu menyesuaikan ukuran gambar dengan nilai yang kita berikan.Tetapi perlu diingat bahwa pengisian nilai
width dan height
dengan rasio panjang-lebar yang tidak tepat tentunya akan menyebabkan gambar
menjadi “tertarik”. Untuk lebih jelasnya, coba jalankan kode berikut pada
gambar yang diberi nama gambar.jpg:<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perubahan Ukuran Gambar</title>
<style type="text/css">
#set-width {
width: 360px;
}
#set-height {
height: 600px;
}
#set-width-height {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<img src="images/gambar.jpg" id="standar"> <br>
<img src="images/gambar.jpg" id="set-width"> <br>
<img src="images/gambar.jpg" id="set-height"> <br>
<img src="images/gambar.jpg" id="set-width-height">
</body>
</html>
kemudian jalankan dan lihat
hasilnya.Hal lain yang perlu dicatat yaitu bahwa meskipun perubahan ukuran gambar dapat dilakukan secara otomatis oleh browser, sebaiknya perubahan dilakukan dengan sangat hati-hati. Ketika memperkecil sebuah gambar yang berukuran
1024x768 menjadi 320x240 misalnya, meskipun pengguna melihat gambar yang kecil, gambar yang
harus diunduh oleh browser tetaplah berukuran 1024x768. Resolusi
gambar tentunya mempengaruhi ukuran, sehingga pengguna akan mengambil gambar
yang tidak diperlukan, dan menyia-nyiakan bandwidth. Jadi, selalu pastikan
gambar yang diberikan ke pengguna merupakan gambar yang optimal. Perubahan
ukuran gambar umumnya dilakukan untuk memastikan konten yang diisikan oleh
pengguna tidak terlalu besar atau kecil, sehingga mengganggu keseluruhan alur
dokumen.Perubahan Posisi Gambar
img
merupakan inline level element. Menambahkan gambar pada tengah-tengah teks akan
menyebabkan gambar tersebut diselipkan ditengah-tengah teks, mengacaukan alur
teks, seperti pada kode berikut:<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
untuk mendapatkan hasil sebagai berikut:
Note: Sekian dari INFO saya mohon maaf bila ada salah dalam penulisan dan semoga bermanfaat bagi bloggers jangan lupa kasih G+ tunggu lanjutan dari Obyek multimedia ke dalam halaman web II
0 komentar:
Posting Komentar