Membuat Personal Web

Membuat personal web

buat folder untuk menyimpan semua perangkat yang di butuhkan untuk website kita seperti gambar,flash content,halaman html.

semua perangkat harus dijadikan 1 pada 1 folder agar jika di pindah tempat halaman web tidak rusak.
berikut gambar-gambar yang kita butuhkan

pertama kita buat cssnya dulu

*CSS untuk layoutnya simpan dengan nama style.css

berikut scriptnya

#menuwrapperpic
   {
       border-bottom:2px solid #FF8000;
       background: url(gbr/Stars_Wallpaper_by_Colliemom.jpg);
       width:100%;
       margin:0 auto;
       padding:0 auto;
       -webkit-border-radius:3px;
       -opera-border-radius:3px;
       -moz-border-radius:3px;
   }
#menuwrapper
   {
       width:960px;
       height:30px;
       margin:0 auto;
       -webkit-border-radius:3px;
       -opera-border-radius:3px;
       -moz-border-radius:3px;
   }
.menusearch
   {
       width:300px;
       float:right;
       margin:0 auto;
       padding:0 auto;
    }
.clearit
   {
       clear:both;
       height:0;
       line-height:0.0;
       font-size:0;
   }
#menubar
   {
       width:100%;
   }
#menubar,
#menubar ul
   {
       list-style:none;
       font-family:Arial, serif;
       margin:0;
       padding:0;
    }
#menubar a
    {
        display:block;
        text-decoration:none;
        font-size:12px;
        font-weight:700;
        text-transform:uppercase;
        text-shadow: 0px 1px 1px #000;
        color:#f2f1f1;
        border-right:1px solid #666;
        padding:9px 10px 8px;
    }
#menubar a.trigger
    {
        background-image: url(gbr/arrow_white.gif);
        background-repeat:no-repeat;
        background-position:right center;
        padding:9px 24px 8px 10px;
    }
#menubar li
   {
       float:left;
       position:static;
       width:10%;
    }
#menubar li ul,#menubar ul li
{
    width:170px;
   }
#menubar ul li a
   {
       text-align:left;
       color:#fff;font-size:12px;
       font-weight:400;text-transform:none;
       font-family:Arial;
       border:none;
       padding:2px 10px;
    }
#menubar li ul
   {
       z-index:100;
       position:absolute;
       display:none;
       background:#071910;
       padding-bottom:5px;
       -moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
       -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);
       filter:alpha(opacity=87);
       -moz-opacity:.87;
       opacity:.87;
    }
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a
   {
       background-color:#071910;
       color:#E98C0A;
    }
#menubar li:hover ul,#menubar li.hvr ul
   {
       display:block;
   }
#menubar li:hover ul a,#menubar li.hvr ul a
   {
       color:#fff;
       background-color:transparent;
       text-decoration:none;
   }
#menubar li ul li.hr
   {
       border-bottom:1px solid #444;
       border-top:1px solid #000;
       display:block;
       font-size:1px;
       height:0;
       line-height:0;
       margin:4px 0;
    }
#menubar ul a:hover
    {
        background-color:none!important;
        color:#FF8000!important;
        text-decoration:none;
    }
.selected
   {
       background:#FF8000;
    }
.selected2
   {
       background:#045FB4;
    }
.selected:hover,.selected2:hover
   {
       -webkit-transform:rotate(0deg);
       -moz-transform:rotate(0deg);
       -ms-transform:rotate(0deg);
       -o-transform:rotate(0deg);
       transform:rotate(0deg);
    }
.aing
    {
        width:430px;
        height:4px;
        margin-top:-5px;
        background-color:#1354f7;
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#1354f7');
        background-image:-webkit-linear-gradient(155deg, #ffffff 35%, #ffa200 100%, #1354f7 100%);
        background-image:-moz-linear-gradient(155deg, #ffffff 35%, #ffa200 100%, #1354f7 100%);
        background-image:-ms-linear-gradient(155deg, #ffffff 35%, #ffa200 100%, #1354f7 100%);
        background-image:-o-linear-gradient(155deg, #ffffff 35%, #ffa200 100%, #1354f7 100%);
        background-image:linear-gradient(155deg, #ffffff 35%, #ffa200 100%, #1354f7 100%);margin:0px;padding: 5px 5px 15px 5px;font:14px Franklin
             Gothic Heavy;
        color:#000;
        border-bottom:1px solid #ccc;
        text-transform:uppercase;
        text-shadow:0px 0px 0px #fff;
    }

*CSS untuk menu tambahan simpan dengan nama menu.css
berikut scriptnya

#menu {

    padding: 2px;
    width: 200px;
}
#Menu {

    padding: 2px;
    width: 200px;
}
#Menu ul {

    margin: 4px;
    padding: 4px;
    list-style-type: none;
}
#Menu {
    padding: 2px;
    width: 200px;
}
#Menu ul li {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #00F;
    display: block;
    margin: 4px;
    padding: 4px;
    list-style-type: none;
}
#Menu ul li {
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    background-color: #00F;
    display: block;
    margin: 4px;
    padding: 4px;
}
#Menu ul li a {
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    background-color: #00F;
    display: block;
    margin: 4px;
    padding: 4px;
}
#Menu {
    text-decoration: none;
    width: 200px;
}

sekarang kita buat halaman htmlnya

Kita buat dulu untuk halaman utama
simpan file ini dengan nama index.html
berikut scriptnya

<html>
<head>
<title>Joko Susilo</title>
<link rel="shortcut icon" href="gbr/2012-06-16 09.17.17.jpg">
<link href="menu1.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="gbr/microcrack.jpg" class="twoColHybLtHdr">

<div id="container">
<div id="header"><img src="gbr/head.jpg" width="100%" height="170"/>
<div id='menuwrapperpic'>

<div id='menuwrapper'>
<ul id='menubar'>
<li><a href="index.html">Home</a></li>
<li><a class='trigger' href='#'>Profil</a>
<ul>
<li><a href='profil-general.html'>General</a></li>
<li class='hr'/>
<li><a href='profil-academic.html'>Academic</a></li>
<li class='hr'/>
<li><a href='profil-image.html'>Image</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Image</a>
<ul>
<li><a href='#'>Love</a></li>
<li class='hr'/>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Nature</a></li>
<li class='hr'/>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li class='selected2'><a href='#'>Music</a></li>
<li class='selected'><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

<div id="sidebar1">
<div id="Menu">
<ul>
    <li><a href="https://www.facebook.com/jhojo.sampaimati" target="_blank"><img src="gbr/facebook.jpg" width="165" height="40"></a></li>
    <li><a href="https://twitter.com/JhojoUnyu" target="_blank"><img src="gbr/twitter.jpg" width="165" height="40"></a></li>
    <li><a href="http://skyseven7.blogspot.com" target="_blank"><img src="gbr/Blogger-Logo.JPG" width="165" height="40"></a></li>
</ul>
</div>

</div>
<div id="mainContent">
    <h1><font color="#0000CC">Selamat datang di Web Site Joko Susilo</font></h1>
    <p>Ketahui info tentang saya di web site ini. Web site ini membahas lengkap tentang Riwayat Hidup dan Kehidupan saya, hobi saya, minat dan kesukaan saya, perjalanan karir saya.</p>
    <p>Anda dapat melihat informasi lebih lanjut tentang saya dengan memilih menu profil. Pilih menu PROFIL-General : untuk mengetahui informasi tentang identitas saya, PROFIL-Academic : untuk mengetahui informasi akademik saya.</p>
    <table width="61%">
      <tr>
          <td width="26%" rowspan="8"><img src="gbr/joko + jaz copy.jpg" width="117" height="140"></td><td> </td><td></td>
       </tr>


       <tr>
          <td></td><td> </td>
       </tr>
       <tr >
         <td width="13%">Nama</td><td width="61%">: Joko Susilo</td>
       </tr>
       <tr>
          <td>NIM </td><td>: 12.1.03.03.0130</td>
       </tr>
       <tr>
         <td>Jurusan</td><td> : Sistem Informasi</td>
       </tr>
       <tr>
         <td height="21">Kelas</td><td>: 1-G</td>
       </tr>
    </table>
    </p>
    </div>

    <br class="clearfloat" />
    <div id="footer">
    <p>Di buat oleh Joko Susilo</p>

</div>
</div>
</body>
</html>

buat halaman baru dan simpan dengan nama profil-general.html
berikut scriptnya

<html>
<head>
<title>Profil General</title>
<link rel="shortcut icon" href="gbr/2012-06-16 09.17.17.jpg">
<link href="menu1.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="gbr/microcrack.jpg" class="twoColHybLtHdr">

<div id="container">
<div id="header"><img src="gbr/head.jpg" width="100%" height="170"/>
<div id='menuwrapperpic'>

<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='index.html'>Home</a></li>
<li><a class='trigger' href='#'>Profil</a>
<ul>
<li><a href='profil-general.html'>General</a></li>
<li class='hr'/>
<li><a href='profil-academic.html'>Academic</a></li>
<li class='hr'/>
<li><a href='profil-image.html'>Image</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Image</a>
<ul>
<li><a href='#'>Love</a></li>
<li class='hr'/>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Nature</a></li>
<li class='hr'/>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li class='selected2'><a href='#'>Music</a></li>
<li class='selected'><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

<div id="sidebar1">
<div id="Menu">
<ul>
    <li><a href="https://www.facebook.com/jhojo.sampaimati" target="_blank"><img src="gbr/facebook.jpg" width="165" height="40"></a></li>
    <li><a href="https://twitter.com/JhojoUnyu" target="_blank"><img src="gbr/twitter.jpg" width="165" height="40"></a></li>
    <li><a href="http://skyseven7.blogspot.com" target="_blank"><img src="gbr/Blogger-Logo.JPG" width="165" height="40"></a></li>
</ul>
</div>

</div>
<div id="mainContent">
    <h1><font color="#0000CC">General Profil</font></h1>
    <br/>
    <p align="center"><font face="Palatino Linotype, Book Antiqua, Palatino, serif" size="+3">Personal Profil</font></p>

</div>

    <br class="clearfloat" />
    <div id="footer">
    <p>Di buat oleh Joko Susilo</p>

</div>
</div>
</body>
</html>

buat halaman baru dan simpan dengan nama profil-academic.html
berikut scriptnya
<html>
<head>
<title>Joko Susilo</title>
<link rel="shortcut icon" href="gbr/2012-06-16 09.17.17.jpg">
<link href="menu1.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="gbr/microcrack.jpg" class="twoColHybLtHdr">

<div id="container">
<div id="header"><img src="gbr/head.jpg" width="100%" height="170"/>
<div id='menuwrapperpic'>

<div id='menuwrapper'>
<ul id='menubar'>
<li><a href="index.html">Home</a></li>
<li><a class='trigger' href='#'>Profil</a>
<ul>
<li><a href='profil-general.html'>General</a></li>
<li class='hr'/>
<li><a href='profil-academic.html'>Academic</a></li>
<li class='hr'/>
<li><a href='profil-image.html'>Image</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Image</a>
<ul>
<li><a href='#'>Love</a></li>
<li class='hr'/>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Nature</a></li>
<li class='hr'/>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li class='selected2'><a href='#'>Music</a></li>
<li class='selected'><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

<div id="sidebar1">
<div id="Menu">
<ul>
    <li><a href="https://www.facebook.com/jhojo.sampaimati" target="_blank"><img src="gbr/facebook.jpg" width="165" height="40"></a></li>
    <li><a href="https://twitter.com/JhojoUnyu" target="_blank"><img src="gbr/twitter.jpg" width="165" height="40"></a></li>
    <li><a href="http://skyseven7.blogspot.com" target="_blank"><img src="gbr/Blogger-Logo.JPG" width="165" height="40"></a></li>
</ul>
</div>

</div>
<div id="mainContent">
    <h1><font color="#0000CC">Profil Academic</font></h1>

</div>

    <br class="clearfloat" />
    <div id="footer">
    <p>Di buat oleh Joko Susilo</p>

</div>
</div>
</body>
</html>

silahkan anda edit sendiri dan kembangkan lagi.

Gudang Ilmu sky seven