Kamis, 31 Maret 2011

Seript Membuat Website Sederhana dengan Metode CSS

Untuk membuat website sederhana dengan mitode CSS anda bisa menuliskan script di bawah ini..sedangkan untuk warna dan marginnya anda bisa mengedit sendiri dengan menggunakan dreamwever, yang perlu anda lakukan adalah dengan mengopy script di bawah ini dan disimpan di notepad trus simpan dengan nama index.html..untuk mengeditnya and tinggal openwith index.html tersebut dengan dreamwiver.trus anda bisa mengiditnya sesuka hati anda..untuk mengidit warna pilih bagian color, margin untuk lebar kanan, kiri, atas, bawah sesuai kebutuhan.

<html>

<title>webdesign</title>
<style type="text/css">
<!--
.style7 {color: #FFFF00}
.style10 {color: #0000FF}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
   <style type:"text/css">
    body    {
    background-color:#000000;
    padding:10px;
    margin-left:50px;
    margin-right:1000;
    }

    #box    {
    border:0px solid black;
    width:900px;
    height:1000px;
    background-color:#000000;
    margin-left:130px;
    margin-right:150px;
            }
    #logo    {
            background-image:url(logo1.png);
            width:auto;
            height:100px;
             }
    #mainmenu{
            background-color:#FF6600;
            font:bold 18px cabiri;
            padding:5px;
            border:5px;
             }
    #yahoo{
    float:left;
    width:150px;
    height:134px;
    background-color:#FF9900;
          }
    #header    {
    float:right;
    width:750px;
    height:135px;
    margin-left:0px;
    margin-right:0px;
    background-image:url(header.png);
              }
    #kotak{
    float:left;
    width:700px;
    height:650px;
    background-color:#CCCC00;
          }
    #panel_kanan{
    float:right;
    width:200px;
    height:auto;
    background-color:#FFFF00;
              }
    #banner{
    float:right;
    width:200px;
    height:500px;
    background-color:#99FF00;
            }
    #art{
    float:right;
    width:200px;
    height:100px;
    background-color:#006633;
        }
    #art a {
    text-decoration:none;
    padding:0px;
    color: #99FF00;
            }
    #art a: hover{
    color: #99CC00;
        }
    #clear{
           float:none;
           clear:both;
           }
    #footer{
    float: right;
    width:900px;
    height:100px;
    background-color:#FF6600;
            }
.style6 {
    font-size: medium
}
   .style9 {font-size: x-large; color: #0000FF; }
   .style11 {color: #F0F0F0}
   </style>
</head>

<body>
<p>&nbsp;</p>
<div id="box">
<div id="logo"></div>
<div id="mainmenu">  <span class="style10"><a href="index.html">Home</a> <a href="tutorial.html">Tutorial</a> <a href="video.html">Video</a> <a href="mailto:darwis.khatim@gmail.com">Contact</a></span> </div>
<div id="yahoo">
  <div align="center"><a href="ymsgr:sendIM? cs.awiexz_87@yahoo.com"><img src="http://opi.yahoo.com/online?u=cs.awiexz_87@yahoo.com&amp;m=g&amp;t=10" width="130" height="129" border="0"></a>  </div>
</div>
<div id="header"></div>
<div id="kotak">
  <div align="justify" id="clear">
    <blockquote>
      <p>&nbsp;</p>
      <p><br>
      </p>
      </blockquote>
  </div>
  <div align="justify" id="clear">
    <blockquote>
      <p class="style9">&nbsp;</p>
      </blockquote>
    </div>
</div>
<div id="panel_kanan">
  <div align="center">
    <div align="center" class="style6">
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="banner"></div>
   <div id="art">
     <div align="center">
     <p align="center"></div>
   </div>
</div>
 <div id="footer">
   <p align="center" class="style7">&nbsp;</p>
  </div>
</div>
</body>
</html>

                                                                             <<<Good Luck>>>

2 komentar:

  1. thanks gan ilmunya... hheheheh

    mampir http://amazing-photographer.blogspot.com

    BalasHapus
  2. mohon kritik dan saranya mas...!!:-P

    BalasHapus