Best Author
sangdedi

743,613
octa

486,285
fitrotinnikm

456,615
idjah

445,167
dwi

313,549
adit

310,096
resta-andara

275,133
benedict

261,583
rahadian

240,910
bara

228,942
nabilalalala

216,884
kurnitap_

154,132
kuswanto

140,191
suranto

100,765
admin

99,000
iwan

80,055
kupukupu

78,106

Meletakkan Gambar pada HTML

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

<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
alt="gambar mobil"/>

contoh :

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.
Teks sejajar dengan gambar

<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
align="bottom"/>

Teks ditengah-tengah gambar

<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
align="middle"/>

Teks diatas gambar

<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
align="top"/>

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.

<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
align="left" />
<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"
align="right"/>
<center>
<img src="http://klikbelajar.com/konten/gambar/gambarmobil.gif"/>
</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.

<body background="http://klikbelajar.com/konten/gambar/gambarmobil.gif">

Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.

Setelah membaca, kalian juga mencoba ya agar kalian tambah mengerti ingat Practice Makes Perfect!
Juga jangan lupa untuk mengirimi kami hasil screenshot image gallery yang telah berhasil kalian buat :)