Halo kawan semua.... kembali saya ingin menulis artikel tentang bagaimana caranya mengatur gambar menggunakan CSS. Ok, kita langsung saja kepada topik pembahasannya. Buatlah Folder latihan dan buatlah folder gambar di dalam folder latihan.
loading...
1. Buat file index.html didalam folder Latihan
<html>
<head>
<meta charset="UTF-8">
<title>Mengatur Gambar Dengan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src=",,,/Latihan/Gambar/HTML-CSS.png" style="display: block; margin: auto;">
</body>
</html>
2. Buat File style.css didalam folder Gambar
img {
width: 300px;
height: 200px;
}
width: 300px;
height: 200px;
}
* Perhatikan pada img src karena saya menyimpannya pada drive E didalam folder Bowie blog maka penulisannya sbb:
<img src="e://Bowie blog/Latihan/Gambar/HTML-CSS.png">
Karena ini hanya sebagai contoh kalian bisa sesuaikan sendiri drive dan foldernya.
Sekarang coba klik dua kali file index.html dan lihat hasilnya pada browser kalian.
Jika hasilnya seperti pada gambar dibawah ini, berarti kalian sudah berhasil.
Selanjutnya bila ingin gambar berada diposisi kira atau kanan pada index.html, di baris delapan, dibelakang tag img src pada "style =" didepan display tambahkan perintah "float: left;" jika ingin posisi gambar ada pada sebelah kiri, dan gantilah left menjadi right jika ingin gambar ada pada posisi kanan. Selamat mencoba dan semoga bermanfaat.
Jika hasilnya seperti pada gambar dibawah ini, berarti kalian sudah berhasil.
Selanjutnya bila ingin gambar berada diposisi kira atau kanan pada index.html, di baris delapan, dibelakang tag img src pada "style =" didepan display tambahkan perintah "float: left;" jika ingin posisi gambar ada pada sebelah kiri, dan gantilah left menjadi right jika ingin gambar ada pada posisi kanan. Selamat mencoba dan semoga bermanfaat.
0 komentar:
Posting Komentar