Halo gaes, pada tutorial sebelumnya saya membahas bagaimana membuat design layout website dengan tabel. Nah, kali ini masih dalam pembahasan yang sama yakni membuat layout website. Cuma bedanya disini kita akan mendesain layout website menggunakan tag div. Sebelum melangkah lebih lanjut ada baiknya agan membaca dulu postingan saya sebelumnya tentang bagaimana membuat design layout website dengan tabel. Jika sudah maka mari kita bahas lebih lanjut disini. Penggunaan tag div lebih efisien dibandingkan dengan tag tabel, karena tidak menggunakan banyak tag di dalamnya. Layout dapat kita sesuaikan keinginan kita dengan menambahkan css di dalamnya.
Simak codingnya berikut ini :
Buat file dengan nama index.html
<html>
<head>
<title>Desain Dengan CSS Bagian 2</title>
<style>
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<div id="badan_utama">
<div id="header"><h2>Selamat Datang Di Web Kami</h2></div>
<div id="menu">
<ul class="list_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<h3>Teknis Publish Website</h3>
<p align="justify">Publish web adalah cara untuk mempublikasikan web statis ataupun dinamis yang sudah kita buat agar dapat dilihat oleh user melalui browser. Agar dapat diakses oleh user untuk sebuah website, kita memerlukan domain dan hosting.</p>
<p align="center">Bagi anda yang belum mengetahui apa itu domain, singkat cerita domain adalah sebuah nama alamat yang nantinya akan digunakan user untuk mengakses, melihat atau menampilkan halaman web kita.</p>
<p align="left">Domain diatur sedemikian rupa sehingga memudahkan kita dalam mengakses sebuah webserver, karena kita tidak perlu lagi menuliskan alamat sebuah webserver dalam bentuk IP address.</p>
<strong>Berikut cara mempublish website anda:</strong><br>
<ol>
<li>Mendapatkan domain</li>
<li>Setting nama server di domain</li>
<li>Mendapatkan hosting</li>
<li>Upload website</li>
<li>Instal database</li>
<li>Tes hasil</li>
</ol>
</div>
<div id="sidebar">
<h3>Ini bagian sidebar</h3>
</div>
</div>
<div id="footer">Copyright By Wim Sonevel</div>
</div>
</body>
</html>
Kemudian buat file css dan namai style.css
#badan_utama{
height:auto;
width:800px;
vertical-align:middle;
box-shadow:0px 0px 5px #000;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
}
#header{
background-color:#FF9900;
text-align:left;
padding-left:10px;
height:100px;
z-index:3;
overflow:hidden;
}
#menu{
background-color:#999999;
height:40px;
width:100%;
margin-top:5px;
margin-bottom:5px;
}
#wrapper{
width:100%;
z-index:3;
background-color:#FFFFFF;
height:auto;
}
#content{
float:left;
height:auto;
width:580px;
padding:5px;
margin-right:6px;
z-index:4;
font-size:12px;
}
#sidebar{
height:auto;
background-color:#FFFFFF;
text-align:left;
width:200px;
z-index:5;
float:left;
overflow:hidden;
}
#footer{
clear:both;
height:20px;
width:100%;
z-index:7;
background-color:#0099FF;
font-size:11px;
text-align:center;
font-weight:bolder;
}
#header h2{
text-shadow:0px 0px 2px #000;
}
.list_menu{
float:left;
margin:0px;
padding:0px;
width:100%;
}
.list_menu li{
padding:10px;
height:auto;
list-style-type:none;
float:left;
border-right-width:1px;
border-right-style:solid;
border-right-color:#FFFFFF;
width:auto;
text-align:center;
}
.list_menu li a{
text-decoration:none;
}
.list_menu li a:hover{
font-weight:bold;
color:#h1h1h1;
text-shadow:0px 0px 2px #000;
}
.list_menu li:hover{
background-color:#FFFFFF;
}
h3,h4,h5{
color:#FF9900;
font-family:Georgia,"Times New Roman",Serif;
font-size:14px;
margin-bottom:5px;
margin-left:5px;
margin-top:5px;
}
Jalankan file index.html di browser kemudian hasilnya akan tampak sebagai berikut :
Sekian tutorial dari saya selamat mencoba dan semoga bermanfaat.
Happy Coding :)
Tags:
HTML & CSS