Hai Teman-teman pada kesempatan kali ini saya akan melanjutkan Tutorial yang sebelumnya dan saya sekarang akan Membuat Layout Web Sederhana dengan Menu Horizontal.
A. Pengertian
Layout adalah suatu elemen desain yang ditempatkan dalam sebuah 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.
2. Setelah itu tulis script-script di bawah ini dengan nama beranda.html
<!DOCTYPE html>
<html>
<head>
<title>HALAMAN WEB KU DEWE</title>
<style>
#atas{
margin-left: 50px;
width: 72%;
height: 70px;
background: #9A12B3;
border-top-left-radius: 60px;
}
h2{
padding-top: 20px;
padding-left: 300px;
color: #36D7B7;
font-family: Purisa;
}
#nav{
margin-top: -19px;
margin-left: 50px;
width: 72%;
height: 40px;
background: #222;
border-bottom: 7px solid#4183D7;
}
.menu li{
display: inline-block;
padding: 10px;
}
.menu li a{
text-decoration: none;
color: #19B5FE;
}
#content{
margin-left: 50px;
width: 912px;
height: 400px;
background: #D2527F;
padding: 30px;
color: #fff;
}
#bawah{
margin-left: 50px;
width: 72%;
height: 40px;
background: #52B3D9;
color: #fff;
margin-top: -20px;
}
p{
padding-top: 9px;
margin-left: 360px;
}
</style>
</head>
<body>
<div id="atas">
<h2>WEB SMK HASAN KAFRAWI</h2>
</div>
<div id="nav">
<ul class="menu">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
</div>
<div id="content">
KONTEN WEB SMK HASAN KAFRAWI
</div>
<div id="bawah">
<p>Copy Right by @Nikmah_Sya</p>
</div>
</body>
</html>
<html>
<head>
<title>HALAMAN WEB KU DEWE</title>
<style>
#atas{
margin-left: 50px;
width: 72%;
height: 70px;
background: #9A12B3;
border-top-left-radius: 60px;
}
h2{
padding-top: 20px;
padding-left: 300px;
color: #36D7B7;
font-family: Purisa;
}
#nav{
margin-top: -19px;
margin-left: 50px;
width: 72%;
height: 40px;
background: #222;
border-bottom: 7px solid#4183D7;
}
.menu li{
display: inline-block;
padding: 10px;
}
.menu li a{
text-decoration: none;
color: #19B5FE;
}
#content{
margin-left: 50px;
width: 912px;
height: 400px;
background: #D2527F;
padding: 30px;
color: #fff;
}
#bawah{
margin-left: 50px;
width: 72%;
height: 40px;
background: #52B3D9;
color: #fff;
margin-top: -20px;
}
p{
padding-top: 9px;
margin-left: 360px;
}
</style>
</head>
<body>
<div id="atas">
<h2>WEB SMK HASAN KAFRAWI</h2>
</div>
<div id="nav">
<ul class="menu">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
</div>
<div id="content">
KONTEN WEB SMK HASAN KAFRAWI
</div>
<div id="bawah">
<p>Copy Right by @Nikmah_Sya</p>
</div>
</body>
</html>
#Kode di atas saya gabungkan html dan css nya, supaya mudah untuk dicoba.
#Dan di bawah ini adalah hasil dari script-script di atas.
E. Hasil yang di dapatkan
Kita bisa membuat Layout sendiri sesuai keinginan keingnan kita sendiri.
F. Referensi
Sekian dari saya, tentang tutorial Membuat layout web sederhana, semoga bermanfaat dan selamat mencoba.
Wassalamu'alaikum Wr Wb.
0 komentar:
Posting Komentar