TUTORIAL
CARA MEMBUAT
DAFTAR
BARANG DAN HARGA DI ONLINE SHOP
- HALAMAN UTAMA PRODUK OLSHOP :
Untuk
dapat membuat halaman utama produk seperti diatas kita harus
memperhatikan 4 bagian utamanya yaitu :
1. HEADER
2. KOTAK
KANAN DAN KIRI
3. KOTAK
TENGAH
4. TABEL
HARGA DAN GAMBAR BARANG
Untuk
spesifikasi gambar dan cara Membuat akan diterangkan dibawah ini :
1. HEADER
Untuk
pembuatan header disini kami membuat dengan satuan ukur yaitu pixel.
Ukuran header yaitu 1024 x 150 px, bisa dibuat sesuka hati dengan
aturan saling terkait dengan produk yang di jual belikan.
Ini adalah syntak untuk memasukkan header ke dalam tabel : <td><img
src="PUJI.jpg" width="1024" height="175"/></td>
2.
TABEL
SAMPING KANAN DAN KIRI
Tabel
kanan dan kiri dibuat dengan cara membagi ukuran panjang header
menjadi 3 bagian yang beda ukkuran namun jumlahnya sama seperti
header. Dengan syntak : <table>
<table
width="1035" height="600" border="1"
align="center">
<tr>
<td
width="197" align="center"
valign="top"background="g.jpg">
<p> </p>
3.
KOTAK
TENGAH
Dibuat
dengan cara memasukkan syntak berikut :
<td
width="822"background="g.jpg"><html>
<head>
<title>membuat
tabel</title>
</head>
<body
background="o.jpg">
<TABLE
border="1">
Syntak
untuk tulisan berjalan :
<p>
<CENTER> <marquee><b><font size="5"
color="red" face="algerian"> SELAMAT DATANG
</font size="5" color="#5a24ca"
face="algerian"></b></marquee></p>
<p>
<CENTER> CONTOH KOLEKSI SEPATU di JETHOSE SHOP : </CENTER>
</P>
</table>
4.
TABEL
HARGA DAN GAMBAR BARANG
Cara
membuatnya cukup mudah yaitu dengan syntak sebagai berikut :
<table
width="100" height="100" border="1"
align="center">
<tr>
<td>
Highhells Harga Rp.400.000</td>
<td>
Highhells Black Rp.325.000</td>
<td>
Sepatu Wanita Harga Rp.175.000 </td>
<td>
Sepatu Sekolah Rp.150.000 </td>
<td>
Sepatu Wanita Rp.450.000 </td>
</tr>
<tr>
<td><img
src="A.jpg" width="100" height="100"/></td>
<td><img
src="MN.jpg" width="100" height="100"/></td>
<td><img
src="1.jpg"width="100" height="100"/></td>
<td><img
src="IMG_20140812_223036.jpg" width="100"
height="100"/></td>
<td><img
src="DLD.jpg" width="100" height="100"/></td>
</tr>
INI
ADALAH SELURUH SYNTAK YANG SAYA GUNAKAN :
<html>
<head>
<title>
halaman utama </title>
</head>
<body>
<table
width="1024" border="1" align="center">
<tr>
<td><img
src="PUJI.jpg" width="1024" height="175"/></td>
</tr>
<table>
<table
width="1035" height="600" border="1"
align="center">
<tr>
<td
width="197" align="center"
valign="top"background="g.jpg">
<p> </p>
<font
size="+1"face="sans-serif"> MENU :</font>
<br>
<a
href ="BerAnda.html">1.Beranda</a><br>
<a
href ="profil puji.html">2.Profil kami </a><br>
<a
href ="all.html">3. Semua Produk Kami </a><br>
<a
href ="High hill.html">4.Produk High hill </a><br>
<a
href ="wedges.html">5.Produk Wedges </a><br>
<a
href ="kue.html">6.Produk Kue Lebaran </a><br>
<a
href ="kontak.html">7.Hubungi kami</a><br>
</td>
<td
width="822"background="g.jpg"><html>
<head>
<title>membuat
tabel</title>
</head>
<body
background="o.jpg">
<TABLE
border="1">
<p>
<CENTER> <marquee><b><font size="5"
color="red" face="algerian"> SELAMAT DATANG
</font size="5" color="#5a24ca"
face="algerian"></b></marquee></p>
<p>
<CENTER> CONTOH KOLEKSI SEPATU di JETHOSE SHOP : </CENTER>
</P>
</table>
<table
width="100" height="100" border="1"
align="center">
<tr>
<td>
Highhells Harga Rp.400.000</td>
<td>
Highhells Black Rp.325.000</td>
<td>
Sepatu Wanita Harga Rp.175.000 </td>
<td>
Sepatu Sekolah Rp.150.000 </td>
<td>
Sepatu Wanita Rp.450.000 </td>
</tr>
<tr>
<td><img
src="A.jpg" width="100" height="100"/></td>
<td><img
src="MN.jpg" width="100" height="100"/></td>
<td><img
src="1.jpg"width="100" height="100"/></td>
<td><img
src="IMG_20140812_223036.jpg" width="100"
height="100"/></td>
<td><img
src="DLD.jpg" width="100" height="100"/></td>
</tr>
<tr>
<td>
Sepatu Polo Harga Rp.215.000 </td>
<td>
Sepatu hitam Rp.165.000 </td>
<td>
Sepatu Rp.190.000 </td>
<td>
Sepatu Rp.185.000 </td>
<td>
Sepatu Wanita Harga Rp.185.000 </td>
<tr>
<td><img
src="IMG_20140812_221926.jpg" width="100"
height="100"/></td>
<td><img
src="NBV.jpg" width="100" height="100"/></td>
<td><img
src="IUO.jpg" width="100" height="100"/></td>
<td><img
src="IMG_20140818_202153.jpg" width="100"
height="100"/></td>
<td><img
src="kxkmc.jpg" width="100" height="100"/></td>
</tr>
</table>
</body>
</html></td>
<td
width="163"background="g.jpg"> </td>
<tr><td
colspan="3"<center>Design by : Puji
Hastuti</center><td></tr></center>
</td>
</tr>
</table>
</body>
</html>
SELESAI.....
GAMPANG KAN ?, SELAMAT MENCOBA !!!!
