setelah membuat kerangka web, maka kita bisa membuat web sederhana dengan menggunakan script html..... adapun contohnya adalah sebagai berikut:
untuk membuat ini kita bisa mencoba dengan mempelajari source code nya:
source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>aditya_WEB</title>
</head>
<style type="text/css">
<!--
#wrapper {
margin: auto;
width: 950px;
border: 0;}
#header {height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('Head1.jpg');}
#logoum {
float: left;
height: 85px;
width:85px;
margin-top:20px;
margin-left:30px;
border: 0;
background:red url('um.PNG');}
#judul {
float: left;
height: 35px;
width:300px;
margin-top:15px;
margin-left:10px;}
#head_right {
float: left;
height: 70px;
width:350px;
margin-left:20px;
margin-top:2px;
border: 0;}
#searcharea {
clear:both;
float: right;
height: 20px;
width:200px;
margin-top:0px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:50px;
margin-left:10px;
margin-top:1px;
border: 0;}
#search2 {
float: right;
height: 20px;
width:120px;
margin-right:2px;
margin-top:0px;
border: 1px solid black;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 230px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar1.jpg');
}
#Inner2 {
float: left;
width: 718px;
height: 400px;
border: 0;
}
#top{
height: 90px;
border: 0;
background:blue url('inneratas.jpg');
margin-left:5px;
border: 1px solid black;
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#footer {
clear: both;
height: 80px;
border: 1px solid white;
background:blue url('sidebar1.jpg');
}
#right {
float: left;
width: 205px;
height: 200px;
margin-left:18px;
margin-top:10px;
border: 1px solid green;
background:blue url('hati.jpg.jpg');
}
#leftmenu ul {
width: 230px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: blue url('tombol.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}
.style1{
font-size: 24px;
font-weight: bold;
color: #000099;}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
color: "black";
font-weight: bold;}
.style3 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;}
.style4 {color: "black"}
.style5 {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: "black";
font-weight: bold;}
-->
</style>
<body>
<div id="wrapper">
<!--header-->
<div id="header">
<div id="logoum"></div>
<div id="judul" class="style2" >TEKNIK ELEKTRO</div>
<div id="head_right">
<div class="style3" id="head_right">
<div align="right"><a href="http://google.co.id" target="_blank" class="style4">Home</a> | <a href="http://google.co.id" target="_blank" class="style4">Sitemap</a> | <a href="http://google.co.id" target="_blank" class="style4">RSS</a> | <a href="http://google.co.id" target="_blank" class="style4">Contact</a> | <a href="http://google.co.id" target="_blank" class="style4">About Us</a> </div>
</div>
<div id="searcharea">
<div class="style4" id="search1">
<strong>Search</strong></div>
<div id="search2"></div>
</div>
</div>
</div>
<!-- TENGAH -->
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<div align="center"><a href="http://google.co.id">Home</a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">News & Media </a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">Tutorial</a></div>
</li>
<li>
<div align="center"><a href="http://google.co.id">Tips and Trik</a></div>
</li>
<li>
<div align="center"><a href="#">Download</a></div>
</li>
</ul>
</div>
</div>
<div id="Inner2">
<div id="top">
</div>
<div id="content">
<p class="style1"><u>Desain Grafis</u></p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat.</p>
<p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div id="right">
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer">
<p align="center" class="style5">2010 © aditya imam pratama</p>
</div>
</div>
</body>
</html>
semoga bisa bermanfaat....
Do you like this article? Share It!
0 komentar to "WEB sederhana (pengembangan dari kerangka)"
time
about ayas
- ADITYAAREMA
- nama ayas sebetulnya bukan ADITYAAREMA, tapi Aditya Imam Pratama, ADITYAREMA merupakan sebuah nama yang menggambarkan bahwa ayas sangat bangga menjadi AREMA. ayas biasa dipanggil imam - pon - dita - adit. Anda bisa panggil saya terserah yang penting bukan Mince atau nama2 bencis sebangsanya, serta jangan menyinggung rasisme :D... saya lahir di Kota Malang, I Love this city, tanggal 7 Agustus 1989, tepatnya di RSSA bukan dukun beranak... jadi secara otomatis sejak saya lahir, saya adalah AREMA cukup sekian perkenalannya ya... kalo mau lebih intim lagi add aja di FB - aditya_tothemax@yahoo.co.id -
Posting Komentar