Hallo...
Semangat Pagi !
Hari ini cerah
dengan kehadiran kalian *eaaaa....
Trimakasih telah
berkunjung di web saya :)
Kali ini saya akan
membahas tentang layout suatu web, nah di postingan ini, saya share
bagaimana cara membuat layout web dengan menu vertikal menggunakan
html dengan css.
Pengertian
:
Layout merupakan
kerangka suatu website, pada umumnya layout website menggunakan html
dan css.
Alat dan Bahan :
1. Komputer / laptop.
2. Sublime Text / text editor yang lain.
Tahap Pelaksanaan
:
1. Buka sublime text dan tulis kerangka html berikut ini –
<!DOCTYPE html>
<html>
<head>
<title>Halaman Webku</title>
</head>
<body>
<div id="atas">
<h2>Nama Halaman</h2>
</div>
<div id="kiri">
<ul class="menu">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
</div>
<div id="tengah">
</div>
<div id="bawah">
<p>Copy Right by @SA-lee</p>
</div>
</body>
</html>
Simpan dengan nama
home.html
2. Tulis kode css berikut ini di bawah </title>, dan jangan
lupa kode css ini harus berada di antara <style> dan </style>.
Jika anda ingin menyimpannya di file lain, silahkan saja.
<style>
#atas{
margin-left: 150px;
width: 1009px;
height: 80px;
background-color: #444;
padding: 10px;
}
h2{
color: #fff;
margin-left: 40px;
}
#kiri{
margin-left: 150px;
width: 200px;
height: 550px;
background: #777;
margin-top: -18px;
}
.menu li{
list-style-type: none;
width: 200px;
height: 20px;
padding: 12px;
}
.menu li a{
text-decoration: none;
color: #fff;
}
#tengah{
margin-left: 348px;
margin-top: -550px;
width: 831px;
height: 550px;
background: #3FC380;
}
#bawah{
margin-left: 150px;
height: 50px;
width: 80%;
background: #222;
padding: 1px;
}
p{
color: #fff;
font-size: 14px;
margin-left: 440px;
}
</style>
Lalu simpan dengan format css (namafile.css
3. Jika anda menyimpan kode css di file lain, silahkan sertakan kode
berikut ini untuk menghubungkan css dengan tampilan home –
<link rel="stylesheet" type="text/css"
href="nama_file.css">
4. Silahkan lihat hasilnya.
Referensi :
-
Penutup :
Trimakasih telah menyimak postingan saya hari ini, silahkan share
apabila postingan ini membantu anda. Dan join blog saya, saya doakan
anda mendapat rizky yang lancar dan barokah.
Apabila ada kritik dan saran, atau pertanyaan seputar blog dan
postingan saya, silahkan kirim melalui email ke kulosyafa@gmail.com
