Senin, 26 September 2016

Membuat Layout Web Sederhana Menggunakan HTML dan CSS dengan Menu Vertikal

By  at 14.00    No comments
Assalamu'alaikum Wr Wb.

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
D. Tahap Pelaksanaan

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>
<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>

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>

Dan berikut adalah hasil dari membuat Layout Web sederhana tadi yang sudah saya buat.

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