» »Unlabelled » CONTOH WEBSITE TOKO HP
Selasa, 18 November 2014

website adalah sesuatu yang dapat diakses oleh orang lewat internet dengan bantuan jaringan komputer. sebenarnya banyak cara untuk membuat website toko hp tapi saya buat yng sederhana supaya mudah untuk memahaminya, dengan contoh website ini disarankan untuk sudah mengerti dengan html dan css minimal.


saya buat dengan tampilan seperti diatas

lihat codingnya dibawah ini
<!doctype html>
<html>
<head>
  <TITLE>TOKO HP JAYA WIJAYA</TITLE>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<BODY>
<div id="wrapper" >Jalan Tukad Balian renon Denpasar
<div id="JUDUL" ><h3><ins>TOKO HP TERPOLPUER</h3></ins></div>
<tr><td colspan='2' height='140px'> <img src='img/header.jpg' height='250px' width='100%'></td></tr>
<div>
<ul id="menu">
<li><a href="home.html">HOME</li><a>
<li><a href="contact.html">KONTAK</li><a>
<li><a href="tentang_saya.html">TENTANG</li><a>
<li><a href="pesan.html">PESAN</li><a>
<li><a href="list_harga.html">DAFTAR HARGA</li><a>
<li><a href="cara pembelian.html">CARA PEMBELIAN</li><a>
</ul>
</div>
<div class='body'>
<div id="kiri" >
<div class="title_box">Kategori Produk</div>
<ul class="left_menu">
<li class="odd">
<a href="samsung.html">Samsung</a></li>
<li class="even">
<a href="blackberry.html">Blackberry</a></li>
<li class="odd">
<a href="lenovo.html">lenovo</a></li>
<li class="even">
<a href="nokia.html">Nokia</a></li>
</ul>
<div class="border_box">
<div class="product_title"><a href="produk_terpopuler.html">Samsung Gaxy s5</a></div>
        <div class="product_img"><a href="produk_terpopuler.html"><img src="img/samsung1.jpg" alt="" width="158" height="134" border="0" /></a></div>
        <div class="prod_price"><span class="price"> Rp 7.900.000</span></div>
    </div>
</div>
<div id="konten"align="left">
  <p><strong>Produk Terbaru    </strong></p>
  <table width="605" height="623" border="1" align="center">
    <tr>
      <td width="198" height="23" scope="col"><strong>sony</strong></td>
      <td width="198" scope="col"><strong>lenuvo</strong></td>
      <td width="187" scope="col"><strong>Samsung galaxy s5</strong></td>
    </tr>
    <tr>
      <td height="159"><div align="center"><img src="img/sony.jpg" alt="" width="168" height="135"></div></td>
      <td><img src="img/lenuvo.jpg" width="168" height="135"></td>
      <td><img src="img/samsung1.jpg" width="168" height="135"></td>
    </tr>
    <tr>
      <td height="23"><div align="center"><span class="style2">4.300.000</span></div></td>
      <td><div class="style2" id="stcpDiv">Rp 6.850.000</div></td>
      <td><div class="style2" id="stcpDiv">Rp 7.900.000</div></td>
    </tr>
    <tr>
      <td height="29"><strong>Samsung galaxy tab 310.1 P5200 </strong></td>
      <td><strong>lenovo s930</strong></td>
      <td><strong>BlackBerry-Z30</strong></td>
    </tr>
    <tr>
      <td height="150"><img src="img/Samsung2.jpg" width="148" height="155"></td>
      <td height="150"><img src="img/lenovo-s930.jpg" width="148" height="155"></td>
      <td height="150"><img src="img/BlackBerry-Z30.jpg" width="148" height="155"></td>
    </tr>
    <tr>
      <td height="29">Rp.4.750.000</td>
      <td height="29">Rp.2.500.000</td>
      <td heihgt="29">Rp.7.500.000</td>
    </tr>
    <tr>
      <td height="29"><strong>Apple-iPhone-5S-16GB</strong></td>
      <td height="29"><strong>Apple-iPhone-4-16GB</strong></td>
      <td height="29"><strong>Apple-iPhone-3G-S-32GB</strong></td>
    </tr>
    <tr>
      <td height="150"><img src="img/Apple-iPhone-5S-16GB.jpg" width="148" height="155"></td>
      <td height="150"><img src="img/Apple-iPhone-4-16GB.jpg" width="148" height="155"></td>
      <td height="150"><img src="img/Apple-iPhone-3G-S-32GB.jpg" width="148" height="155"></td>
    </tr>
    <tr>
      <td height="29">Rp.11.800.000</td>
      <td height="29">Rp.4.800.000</td>
      <td height="29">Rp.4.100.000</td>
    </tr>
  </table>
  Detail Harga
  <ul>
    <li><a href="samsung.html">Samsung</li>
    <li><a href="lenovo.html">Lenovo</li>
    <li><a href="nokia.html">Nokia</li>
    <li><a href="blackberry.html">Blackberry</li>
  </ul>
</div>

<div id="kanan">
<div class="title_box">Produk Terlaris</div>
<div class="border_box">
<div class="product_title">
  <div align="center"><a href="produk_terlaris.html">Samsung galaxy s5</a></div>
</div>
        <div class="product_img">
          <div align="center"><a href="produk_terlaris.html"><img src="img/samsung1.jpg" alt="" width="160" height="143" border="0" /></a></div>
        </div>
        <div class="prod_price">
          <div align="center"><span class="price"> Rp 7.900.000</span></div>
        </div>
    </div>
<div id="kanan">
<div class="title_box">Informasi Toko Kami</div>
      <div class="border_box">
        <p>Buka mulai pukul 08.00 WIB</p>
        <p>sampai dengan 21.00 WIB</p>
        <p>Untuk hari libur Tutup</p>
        <p><strong>Alamat:</strong></p>
        <p>Jl. Tukad balian Renon Denpasar</p>
        <p>Telp/SMS:</p>
        <p>085737422295</p>
        <p>Email : dek@yahoo.co.id</p>
      </div>
</div>
</div>
<div id="bawah">Diberdayakan oleh I Made Winada</div>
</div>
 </BODY>
</HTML>

copy paste coding diatas dengan editor text dan simpan dengan nama home,html

coding css

 body {
      background:#8daaf2;
      margin:auto;
      width:1000px;
}
#wrapper {
      background-color:#;
      width:1000px;
      float:center;
      text-align:center;
}
#judul{
      margin-bottom:5px;
      margin-left:5px;
      margin-right:5px;
      padding:15px;
      background-color:green;}
ul#menu {
    padding: 0;
    width:1000px;
}
ul#menu li {
    display: inline;
}
ul#menu li a {
    background-color:#f50c2d;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
    background-color: #e9ec0c;
}
#kiri {
      margin-right:5px;
      margin-bottom:5px;
      height:auto;
      width:180px;
      background-color:url('img/kiri.jpg') no-repeat scroll 5px 5px;
      color:black;
      float: left;
      list-style: none;
   }
ul.left_menu {
    width: 196px;
    padding: 0px;
    margin: 0px;
    list-style: none outside none;
    float:left;
}
ul.left_menu li {
    margin: 0px;
    list-style: none outside none;
    float:left;
}
ul.left_menu li.odd a {
    width: 150px;
    height: 25px;
    display: block;
    background:0ef1f4;
    border-bottom: 1px solid #FFF;
    text-decoration: none;
    color: #504B4B;
    padding: 0px 0px 0px 30px;
    line-height: 25px;
}
ul.left_menu li {
    margin: 0px;
    list-style: none outside none;
    float:left;
    }
ul.left_menu li.even a {
    width: 150px;
    height: 25px;
    display: block;
    background: url('images/checked.png') no-repeat scroll 5px 5px #DAD0D0;
    border-bottom: 1px solid #FFF;
    text-decoration: none;
    color: #504B4B;
    padding: 0px 0px 0px 30px;
    line-height: 25px;
}
.border_box {
    width: 175px;
    height: auto;
    text-align: center;
    border: 2px solid #6DA6B1;
}
.product_title {
    color: #010c0f;
    padding: 5px 0px;
    font-weight: bold;
    font-size:15px;
}
.product_title a {
    text-decoration: none;
    color: #010c0f;
    padding: 2px 0px;
    font-weight: bold;
}
.product_img {
    padding: 5px 0px;
}
.prod_price {
    padding: 5px 0px;
}
span.price {
    color: #010c0f;
}


.title_box {
    width: 180px;
    height: 30px;
    margin: 5px 0px 0px;
    background:#76ee2d;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: blue;
    line-height: 30px;
}
#konten {
      font-size:15px;
      margin-bottom:5px;
      height:auto;
      float:left;
      width:620px;
      background-color:#;
   
}
#tabel{
background-color:#58baed;
}
tr{
    text-align:center;
}
#kanan {
      margin-left:5px;
      margin-bottom:5px;
      height:auto;
      float:right;
      width:180px;
      background-color:none;
}

#bawah{
      margin-top:5px;
      clear:both;
      padding:15px;
      height:30px;
      background-color:#898cf5;
      float:bottom;
}
#main_content #konten td {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-style: normal;
    background-color: #00FF33;
    text-align: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

simpan coding style css ini dengan nama style.css

dan lihatlah hasilnya
Diposting oleh di 20.39

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)