Nih Bagaimana Cara Membuat Personal Web

Langkah-Langkah membuat persolan web

1.       Kita membuat suatu folder di dalam local disk C/D/E  maupun di desktop

[next] 2.       Karena saya membuat dengan judul “Latihan Membuat Web” kemudian buatlah folder lagi dengan Name “Image”

3.       Langsung saja kita mulai, buka aplikasi. Saya menggunakan Adobe Dreamwever Cs6

Kita buat dulu htmlnya :

1.       Ini adalah Html untuk membuat suatu menu

<div class="menu">

    <ul>

      <li><a href="#">Pesan</a></li>

      <li><a href="#">Beranda</a></li>

      <li><a href="#">Profil</a></li>

      <li><a href="#">Home</a></li>

    </ul>

      </div>

       </div>

2.       Script Css dari html diatas

.menu{

                background-color:#666;

                width:100%;

                height:60px;

}

.menu il{

                list-style:none;

                margin:0;

                padding:0;

}

.menu ul li{

                background-color:#900;

                display:block;

                float:right;

}

.menu ul li a{

                padding:15px 25px;

                color:#C60;

                line-height:60px;

                text-decoration:none;

                font-size:18px;

}

1.     Kemudian saya akan membuat Tag Table, berikut adalah Htmlnya

<div class="tabel">

<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">

    <tr bgcolor="#428ef6">

      <td height="37" colspan="2"><div align="center"><strong>Silahkan LOGIN</strong></div></td>

    </tr>

    <tr>

      <td width="95" height="32">Email</td>

      <td width="304"><label>:

          <input name="username" type="text" id="username" />

      </label></td>

    </tr>

    <tr>

      <td height="26">Password</td>

      <td><label>:

          <input name="password" type="password" id="password" />

      </label></td>

    </tr>

    <tr>

      <td height="48"> </td>

      <td><input name="Daftar" type="submit" id="Daftar" value="Login" />

          <input name="Batal" type="submit" id="Batal" value="Batal" /></td>

    </tr>

    <tr bgcolor="#428ef6">

      <td height="26" colspan="2"><div align="center"><strong>Silahkan Mendaftar</strong></div></td>

    </tr>

      <td><i><font color="#CC0000">Isikan Dengan Benar !</font></i></td>

   </tr>

   <tr>

      <td>Nama Depan</td>

      <td>Nama Belakang</td>

   </tr> 

    <tr>

       <td><input type="text"></td>

       <td><input type="text"></td>   

   </tr>

   <tr>

       <td>Email Anda</td>

   </tr>

   <tr>

       <td><input type="text"></td>

   </tr>

   <tr>

       <td>Password</td>

   </tr>

   <tr>

       <td><input type="password"></td>

   </tr> 

   <tr>

       <td>Ulangi Password</td>

   </tr>

   <tr>

       <td><input type="password"></td>

       </tr>

   <tr>

       <td><input type="checkbox">Sudah benar</td>

    </tr>

    <tr>

       <td><input type="submit" value="Daftar"></td>

   </tr>

</table>

    </div>

2.     Dan ditambah Script Css

.tabel{

    float: left;

    padding-top: 3px;

    padding-right: 100px;

    background-color:#03C;

    color:#009;

    border-radius:30px;

}

1.       Setelah itu saya akan menambahkan Slider

Berikut adalah htmlnya :

<div class="outer">

  <div class="item">

<img src="../Image/kripik_pisang.jpg.jpg" width="100%"/>

   <div class="tulisan">

   <h2> Kripik Pisang </h2>

   <p>

Keripik pisang adalah makanan yang terbuat dari pisang yang diiris tipis kemudian digoreng dengan menggunakan tepung yang telah dibumbui. Biasanya rasanya adalah asin dengan aroma bawang yang gurih. Makanan ini tersebar hampir merata di seluruh Pulau Jawa.

   </p>

    <a haref="#"> Selengkapnya</a>

     </div>

   </div>

 <div class="item">

  <img src="../Image/gethuk.jpg.jpg" width="100%"/>

  <div class="tulisan">

  <h2>Gethuk</h2>

  <p>

  Sebagai salah satu kota yang memegang peranan penting sebagai salah satu yang menjadi medan pertempuran melawan penjajah baik di jaman kolonial, kemerdekaan dan pasca kemerdekaan, Magelang tentu masih menyimpan banyak sekali benda-benda peninggalan sejarah perjuangan bangsa Indonesia.

  </p>

 <a haref="#"> Selengkapnya</a>

         </div>

       </div>

<div class="item">

<img src="../Image/pisang_molen.jpg.jpg" width="100%"/>

   <div class="tulisan">

   <h2> Pisang Molen </h2>

   <p>

   Pisang molen adalah suatu hidangan ringan berbahan baku pisang yang dilapisi lembar-lembar adonan dan kemudian digoreng. Hidangan ini merupakan variasi dalam pengolahan dari pisang goreng. Untuk bahan biasanya menggunakan tepung terigu protein tinggi, gram gula halus, baking powder, butir telur ayam, margarin, air es, minyak menggoreng dan pisang.

   </p>

  <a haref="#">Selengkapnya</a>

    </div>

  </div>

2.       Style Css dari HTML diatas

.item{

                width:270px;

                height:315px;

                margin:0 5px;

                background-color:#9C9;

                color:#093;

                text-align:center;

                float:left;

}

.item a{

                padding:8px 15px;

                background-color:#C09;

                text-decoration:none;

                border-radius:30px;

                border-style:dashed;

}