Saturday, November 1, 2014

Contoh Tampilan Web Sederhana Menggunakan Div

1:39 AM – by 1
Kali ini saya akan menshare Contoh Tampilan Web Sederhana Menggunakan Div. Sebelumnya kita sudah membahas Cara Membuat Web Statis Sederhana Menggunakan Table, dan sekarang kita akan menggunakan elemen div untuk membuat website. jika kalian belum mengetahui tentang tabel dan div silahkan baca dulu artikel sebelumnya tentang Perbedaan Tabel dan Div di Dalam Html.

Berikut adalah rancangan interfacenya :
rancangan_interface

Berikut contoh tampilan web  nya :

elemen_div

Berikut code Html nya :


<!DOCTYPE html>
<head>
<title>SMA Prestasi Yogyakarta</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
</head>

 <body>
<!-- homewebsitedesign.blogspot.com -->
<div id="kotak">
<div id="logo"></div>
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Akademik</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
  </div>
<div id="headcont"></div>
<div id="content">
<div id="kiri">
<div id="nav">Info Sekolah</div>
<div id="pages">Content 1</div>

<div id="nav">Support Online</div>
<div id="pages">Content 2</div>

<div id="nav">Award</div>
<div id="pages">Content 3</div>
</div>
<div id="tengah">
<div id="pages">
            <div id="navteng">BERITA TERBARU</div>
                    Berita
            </div>
</div>

<div id="kanan">
<div id="nav">Berita IT</div>
<div id="pages">Content 4</div>

<div id="nav">Link</div>
<div id="pages">Content 5</div>

<div id="nav">Alamat</div>
<div id="pages">Content 6</div>
</div>
</div>
    
<div id="footcont"></div>
<div id="batas"></div>
<div id="footer">Copyright &copy; 2013 SMA PRESTASI Yogyakarta. All Right Reserved</div>
<!-- homewebsitedesign.blogspot.com -->
</div>
</body>
</html>

Keterangan :

Untuk tulisan yang berwarna biru itu pemanggilan code css nya.

Berikut code Css nya :

/*homewebsitedesign.blogspot.com*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #380a62;
font-size:14px;
}
#kotak {
width: 920px;
margin:auto;
}
#kotak #logo {
background-image: url(../images/logo.jpg);
height: 60px;
width: 920px;
}
#kotak #header {
background-image: url(../images/header.jpg);
float: left;
height: 252px;
width: 920px;
margin-bottom:18px;
}
#kotak #content {
background-image: url(../images/background.jpg);
float: left;
width: 902px;
padding-right: 10px;
padding-left: 8px;
}

 #kotak #content #kiri {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#kotak #content #tengah {
float: left;
width: 502px;
}
#kotak #content #kanan {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}

 #kotak #batas {
clear: both;
}

 #kotak #footer {
height: 46px;
width: 920px;
margin-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: center;
}
#kotak #content #tengah #pages {
margin-top: -8px;
text-align: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px; 
border: 1px solid #B6B4B4;
}

 #kotak #content #tengah #pages #navteng {
background-color: #FB9B23;
height: 23px;
width:479px;
text-align: left;
color: #FFFFFF;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:20px;
padding-top:10px;
margin-top:-11px;
margin-left:-10px;
border-radius: 0px 0px 0px 0px; 
-moz-border-radius: 0px 0px 0px 0px; 
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #B6B4B4; 
}

 #nav {
background-color: #DEBBFB;
height: 20px;
text-align: center;
color: #780ed0;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:6px 2px 0px 1px;
border: 1px solid #B6B4B4;
border-radius: 7px 7px 0px 0px; 
-moz-border-radius: 7px 7px 0px 0px; 
-webkit-border-radius: 7px 7px 0px 0px;
}
#pages {
border: 1px solid #B6B4B4;
margin-bottom: 5px;
padding-left:8px;
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px;
}

 #kotak #headcont {
background-image: url(../images/headcont.jpg);
float: left;
height: 9px;
width: 920px;
}
#kotak #footcont {
background-image: url(../images/footcont.jpg);
float: left;
height: 7px;
width: 920px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 30px;
width: 901px;
top: 220px;
position: relative;
left: 8px;
}

 #menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li a {
text-decoration: none;
float: left;
display: block;
padding: 8px;
color: #FFFFFF;
}
#menu ul li a:hover {
color:#F9951D;
}
/*homewebsitedesign.blogspot.com*/


 Keterangan : 

 Untuk tulisan yang berwarna biru itu merupakan url gambar, silahkan ganti dengan gambar anda sendiri.


Selamat Mencoba !!!


1 comment:

Subscribe to: Post Comments (Atom)