Letak Image
Mengatur Letak Image Dalam Kolom
Letak Image
Letak Image dalam kolom dapat diatur sesuai dengan tempat yang kita inginkan.
Secara default image akan berada dibagian kiri-tengah pada bidang gambar atau kolom.
Pada posting yang lalu, yaitu Memasang Image, ukuran kolom sudah sengaja dibuat sama dengan ukuran image. Jadi otomatis image akan berada tepat pada kolom yang disediakan.
Tapi apabila ukuran kolom lebih besar daripada ukuran image, maka image akan berada pada bagian kiri-tengah kolom.
Sekarang kita sediakan image yang akan dipasang. Misalnya image peragawati disamping kiri ini yang ukurannya lebar = 100px dan tinggi = 215px.
Kemudian sebagai contoh saya akan membuat sebuah table sederhana dengan satu kolom yang ukurannya lebar = 450px dan tinggi = 450px.
Kode HTML nya adalah sbb:
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Tampilannya adalah seperti ini:
 Mengatur Letak Image |
Karena posisi image tidak ditentukan, maka image akan berada dibagian kiri-tengah kolom.
Untuk mengubah letak image dipakai kode tambahan align dan/atau valign.
Align untuk menentukan posisi image disebelah kiri, tengah atau kanan pada kolom. Kodenya seperti ini: align=”center” untuk meletakkan image ketengah dan align=”right” untuk meletakkan image kesebelah kanan.
Sedangkan untuk meletakkan image dibagian kiri kolom tidak perlu ditulis. Tapi kalau mau ditulis align=”left” juga boleh meskipun sebetulnya secara default image akan terletak dibagian kiri-tengah dalam kolom.
Valign adalah untuk menentukan letak image disebelah atas, tengah atau bawah pada kolom. Kode yang bisa ditulis untuk valign adalah valign=”top” untuk meletakkan image di bagian sebelah atas kolom, valign=”middle” untuk meletakkan image dibagian tengah kolom dan valign=”bottom” supaya image berada dibagian bawah kolom.
Align dan valign juga bisa digabungkan dalam mengatur letak image. Misalnya align=”right” valign=”bottom” maka image akan berada disudut kanan-bawah pada kolom.
Mari kita buat sebuah kolom html table dengan image yang kita letakkan dibeberapa tempat didalam kolom.
Image A: ditengah kolom; kodenya: align=”center”
Image B: di kiri-atas kolom; kodenya: valign=”top”
Image C: di kanan-bawah kolom; kodenya: align=”right” valign=”bottom”
Image A
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”center”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Letaknya seperti ini:
 Meletakkan Image di Tengah Kolom Belajar HTML Table |
Image B
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td valign=”top”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Tampilannya:
 Meletakkan Image di bagian Atas Kolom Belajar HTML Table |
Image C
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”right” valign=”bottom”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Letak image nya seperti dibawah ini:
 Meletakkan image di bagian kanan-bawah kolom HTML Table |
Sekarang Anda sudah tahu cara mengatur Letak Image dalam Belajar HTML Table.
Silahkan mencoba sendiri dengan berbagai kombinasi align dan valign.
Selamat ber experiment!
Yang Surya
6 Responses to Letak Image
Leave a Reply
   |
Itu tergantung pada theme yang dipakai.
Mau tanya, kalau kita pakai readmore kan biasanya image di homepage jadi lebih kecil daripada di halaman artikelnya dan biasanya jadi ga bisa diklik pas di homepagenya, gimana ya caranya supaya bisa diklik kayak yang di homepagenya website mas ini
Makasi sebelumnya
Cara hosting web ke internet.
1. Redirect nama domain ke hostingnya.
2. Login FileZila
Host: nama-domain
Username: username cPanel
Password: password cpanel
Klik Connect
3. Upload file Anda ke sebelah kanan FileZilla.
bro bsa ga kasi tau aku cara hosting web kta ke internet…..
klo boleh kirim ke mail ku yah bro……
trnyata lumayan mudah difahami infonya,
trmksh ya…
makasih ilmu html nya,,sangat membantu sy dalam pembuatan blog.terimakasih