Hai Teman-teman pada kesempatan kali ini saya akan shering tentang Membuat Layout Web Sederhana dengan Menu Vertikal menggunakan html dan css.
A. Pengertian
Layout adalah tata letak dari suatu elemen desain yang ditempatkan dalam suatu bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
B. Jangka Waktu
Saya membutuhkan waktu sekitar 60 Menit.
C. Alat dan Bahan
- Laptop/PC
- Text Editor
1. Pertama-tama buka text Editor, disini saya menggunakan sublime text, lalu tulis kerangka html berikut ini. Lalu simpan dengan nama home.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Webku dewe</title>
</head><html>
<head>
<title>Halaman Webku dewe</title>
<body>
<div id="atas">
<h2>HALAMAN GAWEANKU DEWE</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 @Nikmah_Sya</p>
</div>
</body>
</html>
2. Tulis kode CSS berikut ini dibawah </title>, dan jangan lupa kode css ini harus berada di antara <style> dan </style>. Lalu simpan dengan nama.css
style>
#atas{
margin-left: 150px;
width: 1009px;
height: 80px;
background-color: pink;
padding: 10px;
}
h2{
color: #fff;
margin-left: 40px;
}
#kiri{
margin-left: 150px;
width: 200px;
height: 550px;
background: #89C4F4;
margin-top: -18px;
}
.menu li{
list-style-type: none;
width: 200px;
height: 20px;
padding: 12px;
}
.menu li a{
text-decoration: none;
color: #Purple;
}
#tengah{
margin-left: 348px;
margin-top: -550px;
width: 831px;
height: 550px;
background: #D2527F;
}
#bawah{
margin-left: 150px;
height: 50px;
width: 61%;
background: #F62459;
padding: 1px;
}
p{
color: #fff;
font-size: 14px;
margin-left: 440px;
}
</style>
#atas{
margin-left: 150px;
width: 1009px;
height: 80px;
background-color: pink;
padding: 10px;
}
h2{
color: #fff;
margin-left: 40px;
}
#kiri{
margin-left: 150px;
width: 200px;
height: 550px;
background: #89C4F4;
margin-top: -18px;
}
.menu li{
list-style-type: none;
width: 200px;
height: 20px;
padding: 12px;
}
.menu li a{
text-decoration: none;
color: #Purple;
}
#tengah{
margin-left: 348px;
margin-top: -550px;
width: 831px;
height: 550px;
background: #D2527F;
}
#bawah{
margin-left: 150px;
height: 50px;
width: 61%;
background: #F62459;
padding: 1px;
}
p{
color: #fff;
font-size: 14px;
margin-left: 440px;
}
</style>
3. dan ini jika sudah di gabungkan menjadi satu, antara html dan css, kemudian save lalu lihat hasilnya.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Webku dewe</title>
<style>
#atas{
margin-left: 150px;
width: 1009px;
height: 80px;
background-color: pink;
padding: 10px;
}
h2{
color: #fff;
margin-left: 40px;
}
#kiri{
margin-left: 150px;
width: 200px;
height: 550px;
background: #89C4F4;
margin-top: -18px;
}
.menu li{
list-style-type: none;
width: 200px;
height: 20px;
padding: 12px;
}
.menu li a{
text-decoration: none;
color: #Purple;
}
#tengah{
margin-left: 348px;
margin-top: -550px;
width: 831px;
height: 550px;
background: #D2527F;
}
#bawah{
margin-left: 150px;
height: 40px;
width: 1027px;
background: #F62459;
padding: 1px;
}
p{
color: #fff;
font-size: 14px;
margin-left: 440px;
}
</style>
</head>
<body>
<div id="atas">
<h2>HALAMAN GAWEANKU DEWE</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 @Nikmah_Sya</p>
</div>
</body>
</html>
<html>
<head>
<title>Halaman Webku dewe</title>
<style>
#atas{
margin-left: 150px;
width: 1009px;
height: 80px;
background-color: pink;
padding: 10px;
}
h2{
color: #fff;
margin-left: 40px;
}
#kiri{
margin-left: 150px;
width: 200px;
height: 550px;
background: #89C4F4;
margin-top: -18px;
}
.menu li{
list-style-type: none;
width: 200px;
height: 20px;
padding: 12px;
}
.menu li a{
text-decoration: none;
color: #Purple;
}
#tengah{
margin-left: 348px;
margin-top: -550px;
width: 831px;
height: 550px;
background: #D2527F;
}
#bawah{
margin-left: 150px;
height: 40px;
width: 1027px;
background: #F62459;
padding: 1px;
}
p{
color: #fff;
font-size: 14px;
margin-left: 440px;
}
</style>
</head>
<body>
<div id="atas">
<h2>HALAMAN GAWEANKU DEWE</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 @Nikmah_Sya</p>
</div>
</body>
</html>
E. Hasil yang di dapat
Kita bisa membuat Layout sendiri sesuai selera kita.
F. Referensi
Sekian dari saya tentang membuat layout web sederhana semoga bermanfaat, dan selamat mencoba.
Wassalamau'alaikum Wr Wb.
0 komentar:
Posting Komentar