Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa suatu situs
disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari
suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk meletakkan gambar ke suatu
halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file
htmlnya kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar yang diperlukan untuk
meletakkan gambar pada halaman html.
Cara pengunaannya seperti ini, lihat kode dibawah ini
view plaincopy to clipboardprint?
1. <img src="gambar_mobil.jpg" alt="gambar mobil" />
Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan,
melainkan menutup dirinya sendiri. Coba kalian perhatikan di akhir tag ia menutupnya sendiri dengan />
bukan? Lalu apa artinya atribut src dan alt? Atribut src adalah atribut yang berisi info dimana lokasi
gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang keluar apabila browser
yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah kependekan dari Source (sumber)
dan Alt adalah kependekan dari Alternative (alternatif teks).
Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian coba
kode berikut di papan tulis di bawah.
view plaincopy to clipboardprint?
1. Teks sejajar
2. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
3. align="bottom" />
4. dengan gambar<br />
5. Teks ditengah-tengah
6. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
7. align="middle" />
8. gambar<br />
9. Teks diatas
10. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
11. align="top" />
12. gambar
Gunakan align="bottom untuk membuat bagian bawah dari gambar rata dengan bagian bawah tulisan, dan
gunakan align="middle" untuk membuat gambar berada di tengah-tengah tulisan, namun apabila kalian
menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata atas) maka kalian dapat
menggunakan align="top".
Pasti kalian juga akan bertanya apabila gambar tersebut tidak diantara tulisan melainkan pada bagian
tersendiri dan tidak diapit oleh teks bagaimana cara membuatnya menjadi disebelah kiri atau kanan
halaman? Gunakan align="left" dan align="right" untuk membuatnya rata kiri dan rata kanan. Namun
apabila kalian ingin membuat gambar yang ditengahkan kalian harus menambahkan tag <center> dan
</center>. Lihat kode dibawah untuk lebih jelasnya.
view plaincopy to clipboardprint?
1. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
2. align="left" /><br /><br />
3.
4. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
5. align="right" /><br /><br />
6.
7. <center>
8. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" />
9. </center>
Kalian juga bisa membuat suatu gambar sebagai background dari halaman html kalian. Caranya cukup
mudah yaitu pada tag <body> kalian tambahkan atribut background. Lalu isi dengan nama file gambarnya.
1. <body background="namafilegambarkalian.gif">
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Tidak ada komentar:
Posting Komentar