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 . Yaps, tag ini adalah bahan dasar yang
diperlukan untuk meletakkan gambar pada halaman html.
Cara pengunaannya seperti ini, lihat kode dibawah ini
Tag 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).
- <img src="gambar_mobil.jpg" alt="gambar mobil" />
Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut
align. Silahkan kalian coba kode berikut di papan tulis di bawah.
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".
- Teks sejajar
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" align="bottom" />
- dengan gambar<br />
- Teks ditengah-tengah
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" align="middle" />gambar<br />
- Teks diatas
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" align="top" />
- gambar
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
dan . Lihat
kode dibawah untuk lebih jelasnya.
Kalian juga bisa membuat suatu gambar sebagai background dari halaman
html kalian. Caranya cukup mudah yaitu pada tag kalian
tambahkan atribut background. Lalu isi dengan nama file gambarnya.
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
- kiri
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" align="left" /><br /><br />
- kanan
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" align="right" /><br /><br />
- tengah
- <center>
- <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" />
- center>
- <body background="namafilegambarkalian.gif">
No comments:
Post a Comment