Tuesday 27 May 2014

Desain Web Toko Online

Untuk final project Pengenalan Perancangan Web (PPW) saya mengambil tema tentang toko online. Ya walaupun desain web yang saya buat tidak sebagus teman-teman yang lain, tapi saya membuatnya dengan hasil tangan saya sendiri. Disini saya menggunakan bahasa pemrograman HTML dan CSS. Sesuai dengan ketentuannya 10 halaman, tapi karena menyesuaikan dengan keadaan desain akhirnya saya membuat 12 halaman. Yaitu, index.html, buy.html, latest/html, hot.html, new.html, info.html, informasi.html, produk.html, about.html, contact.html, profil.html, home.html. Berikut salah satu scriptnya :

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

<body background="images/back.gif">

<div id="kotak">
<div id="logo"></div>
    <div id="header">
    <div id="menu">
        <ul>
            <br><br><table bgcolor=#009F00" border="2" width="900" align="center">
                <th><a href="home.html">Home</a></th>
                <th><a href="profil.html">Profil</a></th>
                <th><a href="buy.html">How To Buy</a></th>
                <th><a href="about.html">About Us</a></th>
                <th><a href="contact.html">Contact Us</a></th>
                <th><a href="http://www.amikom.ac.id">Amikom Yk</a></th>
                </table>
            </ul>
         </div>
  </div>
    <div id="headcont"></div>
        <div id="content">
        <div id="kiri">
            <div id="nav"><a href="produk.html">Product Category</a></div>
                <div id="pages">Beauty Product</div>
                <div id="pages">Food and Beverages</div>
                <div id="pages">for Baby and Kids</div>
                <div id="pages">for MOM</div>
                <div id="pages">Others</div>
             
                <div id="nav"><a href="new.html">New Products</a></div>
                <div id="pages">Dress Korean Kids</div>
                <div id="pages">Dress Couple Mom and Kids</div>
                <div id="pages">Wedges Metalic Leather</div>
                <div id="pages">Sweater Thomas Train</div>
                <div id="pages">Lampu Baca Clip On</div>
             
                <div id="nav"><a href="informasi.html">Information</a></div>
                <div id="pages">Shipments and Returns</div>
                <div id="pages">About Us</div>
             
             </div>
             <div id="tengah">
              <div id="pages">
                <div id="navteng"><a href="hot.html">HOT NEWS</a></div>
                        <label>
                <td><div id="nama"><table border="2"><p align="center">Shawl Siffon Paris</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/shawl1.jpg"><img src="produk/shawl2.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 50.000</p></table></div></td>
                <label>
                <td><div id="nama"><table border="2"><p align="center">Scarf 2in1</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/shawl3.jpg"><img src="produk/shawl4.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 40.000</p></table></div></td>
                        <label>
                <td><div id="nama"><table border="2"><p align="center">Sweater Thomas Train</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/sweater1.jpg"><img src="produk/sweater2.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
                <label>
                <td><div id="nama"><table border="2"><p align="center">Wedges Metalic Leather</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/wedges2.jpg"><img src="produk/wedges3.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
                        <label>
                <td><div id="nama"><table border="2"><p align="center">Jam Tangan Alexandre Christie</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/jam1.jpg"><img src="produk/jam2.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
                <label>
                <td><div id="nama"><table border="2"><p align="center">Blouse Zenitha</p></table></div></td>
                <td><div id="gambar"><table border="2"><img src="produk/blouse1.jpg"><img src="produk/blouse2.jpg"></table></div></td>
                <td><div id="harga"><table border="2"><p align="center">Rp. 150.000</p></table></div></td>
                </div>
             </div>
           
             <div id="kanan">
              <div id="nav"><a href="#">Login</a></div>
                <tr>     <td>User Name</td>     <td>:</td>     <td><input type="text" name="user"></td> </tr> <tr>  
                <td>Password</td>     <td>:</td>     <td><input type="password" name="pass"></td> </tr> </table> <br>
                <table border="0" align="center"> <tr>     <td><input type="submit" value="kirim"></td>  
                <td><input type="reset" value="reset"></td> </tr>
                </table>
             
                <div id="nav"><a href="latest.html">Latest products</a></div>
                <div id="pages">Mukena Faira</div>
                <div id="pages">Shawl Shiffon RaZha</div>
                <div id="pages">Blouse Zenitha</div>
                <div id="pages">Scarf 2in1 RaZha</div>
                <div id="pages">Rok Zenitha</div>
             
             </div>
           
             <div id="footcont"></div>
             <div id="batas"></div>
             <div id="footer">Copyright &copy; 2014 BERLIA ONLINE SHOP<br>Yogyakarta Indonesia</div>
</div>

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

Sekian dan terima kasih untuk postingan yang telah saya buat.

No comments:

Post a Comment