Kali ini saya akan membuat toko online sederhana dari notepad. Pada tutorial kali ini saya membuat toko online Gerabah Bayat. Jika anda ingin membuat produk yang berbeda anda dapat menyesuaikan sendiri.
1. Silahkan ketikkan atau copy paste script berikut untuk membuat halan home, kemudian simpan dengan nana index.html.
<html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="550">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br><br><br><br><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" bgcolor="black"><font size="+3" face="Comic Sans MS" color="white" ></font>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top">
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" ><marquee> SELAMAT DATANG DI WEBSITE KAMI </marquee></td>
</tr>
<tr height="150" vertical-align="top">
<center><td colspan="4"><font size="+3" face="Comic Sans MS" color="white"><img src="slide.gif" width="625"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="650">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="550">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br><br><br><br><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" bgcolor="black"><font size="+3" face="Comic Sans MS" color="white" ></font>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top">
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" ><marquee> SELAMAT DATANG DI WEBSITE KAMI </marquee></td>
</tr>
<tr height="150" vertical-align="top">
<center><td colspan="4"><font size="+3" face="Comic Sans MS" color="white"><img src="slide.gif" width="625"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
<tr>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
<td><img src="black.jpg"></td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="650">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
2. Silahkan ketikkan atau copy paste script berikut untuk membuat halaman profile, kemudian simpan dengan nama profile.html.
Jadi inilah hasilnya :
<html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="1250">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ><br><marquee>PROFIL KAMI</marquee></font><br><br>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top"><center>
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" align="center" ><center><br/>
Usaha Kriya kami didirikan sejak tahun 1985, dan diwariskan secara turun temurun.
Kini usaha kami dipegang oleh Muchti Aji M.
Bahan utama pembuatan hasil karya kriya kami adalah 70% tanah liat asli Bayat dan 30% tanah liat dari Pekalongan.
Gerabah-gerabah kami sudah beredar dibeberapa kota-kota besar di Indonesia,
seperti Surabaya, Semarang, Bogor, dan Bandung. Tak jarang pula Wisatawan Manca negara yang berwisata ke Bayat
membeli oleh-oleh gerabah dari produk kami. Agar Hasil produk tidak terlihat monoton, kami sering melakukan Inovasi-inovasi baru
dalam bentuk Gerabah yang akan dibuat.<br/><br/>
<img src="DSC_0721.jpg" width="400" height="270"><br><br>
Nama Saya Muchti Aji Masykuri<br>
Lahir di Klaten, 23 Agustus 1997<br>
Sekolah di SMK NEGERI 1 KLATEN<br>
Dengan kompetensi keahlian Multimedia <br>
Alamat di Ngirosaran, Kalitengah,<br>
Wedi, Klaten, Jawa Tengah<br>
Hobby adalah menggambar<br>
Dan cita-cita Animator atau Arsitektur<br><br>
" Without dreams, you reach nothing. <br>
Without love, you feel nothing, <br>
and without God you are nothing "<br><br>
</td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="1250">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
<html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="1250">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ><br><marquee>PROFIL KAMI</marquee></font><br><br>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top"><center>
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" align="center" ><center><br/>
Usaha Kriya kami didirikan sejak tahun 1985, dan diwariskan secara turun temurun.
Kini usaha kami dipegang oleh Muchti Aji M.
Bahan utama pembuatan hasil karya kriya kami adalah 70% tanah liat asli Bayat dan 30% tanah liat dari Pekalongan.
Gerabah-gerabah kami sudah beredar dibeberapa kota-kota besar di Indonesia,
seperti Surabaya, Semarang, Bogor, dan Bandung. Tak jarang pula Wisatawan Manca negara yang berwisata ke Bayat
membeli oleh-oleh gerabah dari produk kami. Agar Hasil produk tidak terlihat monoton, kami sering melakukan Inovasi-inovasi baru
dalam bentuk Gerabah yang akan dibuat.<br/><br/>
<img src="DSC_0721.jpg" width="400" height="270"><br><br>
Nama Saya Muchti Aji Masykuri<br>
Lahir di Klaten, 23 Agustus 1997<br>
Sekolah di SMK NEGERI 1 KLATEN<br>
Dengan kompetensi keahlian Multimedia <br>
Alamat di Ngirosaran, Kalitengah,<br>
Wedi, Klaten, Jawa Tengah<br>
Hobby adalah menggambar<br>
Dan cita-cita Animator atau Arsitektur<br><br>
" Without dreams, you reach nothing. <br>
Without love, you feel nothing, <br>
and without God you are nothing "<br><br>
</td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="1250">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
3. Silahkan ketikkan atau copy paste script berikut untuk membuat halaman produk, kemudian simpan dengan nama produk.html.
Jadi inilah hasilnya :
<html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="1750">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ></font>
<table width="600" height="150" border="0" align="center" vertical-align="top">
<tr height="150" vertical-align="top">
<td colspan="2"><font size="+3" face="Comic Sans MS" color="white" ><marquee> PRODUK GERABAH BAYAT, ASLI INDONESIA </marquee></td>
</tr></table><br>
<table width="600" height="300" border="1" align="center" >
<tr>
<td><img src="guci1.jpg" width="300" height="300"></td>
<td><img src="guci2.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="guci3.jpg" width="300" height="300"></td>
<td><img src="guci4.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="guci5.jpg" width="300" height="300"></td>
<td><img src="guci6.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="panci1.jpg" width="300" height="300"></td>
<td><img src="panci2.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="piring1.jpg" width="300" height="300"></td>
<td><img src="piring2.jpg" width="300" height="300"></td>
</tr>
</table>
<table width="600" height="300" border="0" align="center" >
<tr>
<td><img src="black.jpg" width="300" height="300"></td>
<td><a href="produk1.html">Selanjutnya >></a></td>
</tr>
</table><br>
<table width="600" height="300" border="0" align="center" >
<tr>
<td><img src="black.jpg" width="300" height="300"></td>
<td><img src="black.jpg" width="300" height="300"></a></td>
</tr>
</table><br>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="1750">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="1750">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ></font>
<table width="600" height="150" border="0" align="center" vertical-align="top">
<tr height="150" vertical-align="top">
<td colspan="2"><font size="+3" face="Comic Sans MS" color="white" ><marquee> PRODUK GERABAH BAYAT, ASLI INDONESIA </marquee></td>
</tr></table><br>
<table width="600" height="300" border="1" align="center" >
<tr>
<td><img src="guci1.jpg" width="300" height="300"></td>
<td><img src="guci2.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="guci3.jpg" width="300" height="300"></td>
<td><img src="guci4.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="guci5.jpg" width="300" height="300"></td>
<td><img src="guci6.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="panci1.jpg" width="300" height="300"></td>
<td><img src="panci2.jpg" width="300" height="300"></td>
</tr>
<tr>
<td><img src="piring1.jpg" width="300" height="300"></td>
<td><img src="piring2.jpg" width="300" height="300"></td>
</tr>
</table>
<table width="600" height="300" border="0" align="center" >
<tr>
<td><img src="black.jpg" width="300" height="300"></td>
<td><a href="produk1.html">Selanjutnya >></a></td>
</tr>
</table><br>
<table width="600" height="300" border="0" align="center" >
<tr>
<td><img src="black.jpg" width="300" height="300"></td>
<td><img src="black.jpg" width="300" height="300"></a></td>
</tr>
</table><br>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="1750">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
4. Silahkan ketikkan atau copy paste script berikut untuk membuat halaman kontak, kemudian simpan dengan nama kontak.html.
Jadi inilah hasilnya :
<html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="500">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ><marquee>KONTAK KAMI</marquee></font><br><br>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top"><center>
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" align="center" ><center>
<img src="gerabah-bayat.jpg" width="400" height="270"><br><br>
Alamat : Pagerjurang, Melikan, Wedi, Klaten, Jawa Tengah<br>
E-mail : Muchti.Aji66@yahoo.co.id<br>
Muchtiaji@gmail.com<br>
Facebook : Muchti<br>
Twitter : @Muchti_AA<br>
Instagram : @Muchti_AA<br>
Path : Muchti A.<br>
HP. 085 647 137 955<br>
Pin BB : 7E74ADE3<br>
<br>
<br>
<br>
</td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="500">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
<head>
<title>MembuatTabel</title>
</head>
<body>
<table width="1024" border"1" align="center">
<tr>
<td colspan="4"><img src="HEADER1.gif"></td>
</tr>
<tr height="50">
<td width="256" bgcolor="black"><a href="index.html"><img src="beranda.jpg"></a></td>
<td width="256" bgcolor="black"><a href="profil.html"><img src="profil.jpg"></a></td>
<td width="256" bgcolor="black"><a href="produk.html"><img src="produk.jpg"></a></td>
<td width="256" bgcolor="black"><a href="kontak.html"><img src="kontak.jpg"></a></td>
</tr>
<tr height="400">
<td width="150" background="b.jpg"><font size="+1" face="sans-serif" color="white">Artikel Terkait</font><br><br>
<table>
<tr height="500">
<a href="pengertian.html">Apa itu gerabah ?</a><br>
<a href="proses.html">Proses pembuatan gerabah</a><br>
<br>
<br>
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<td colspan="2" width="699" background="b.jpg"><font size="+3" face="Comic Sans MS" color="white" ><marquee>KONTAK KAMI</marquee></font><br><br>
<table width="600" height="150" border="0" vertical-align="top">
<tr height="150" vertical-align="top"><center>
<td colspan="4"><font size="+3" face="Comic Sans MS" color="white" align="center" ><center>
<img src="gerabah-bayat.jpg" width="400" height="270"><br><br>
Alamat : Pagerjurang, Melikan, Wedi, Klaten, Jawa Tengah<br>
E-mail : Muchti.Aji66@yahoo.co.id<br>
Muchtiaji@gmail.com<br>
Facebook : Muchti<br>
Twitter : @Muchti_AA<br>
Instagram : @Muchti_AA<br>
Path : Muchti A.<br>
HP. 085 647 137 955<br>
Pin BB : 7E74ADE3<br>
<br>
<br>
<br>
</td>
</tr>
</table>
</td>
<td width="163" background="b.jpg" width="300" >
<table>
<tr height="500">
<center><br><br><br><br><img src="iklan1.gif" height="200" width="145">
</tr>
<tr height="350"><td><tr><td>
</table>
</td>
<tr><td colspan="4"><center>Copyright 2014</center></td></tr>
</table>
</body>
</html>
Terimakasih infonya gan, lebih enak lagi kalau jualan online via jasa shopious gan :D pusatnya toko online :D
BalasHapusBikin online shop masih ribet? Kamu bisa mencoba buat Toko Online dengan Jejualan.com Aman, Cepat & Mudah. Hanya 20 Detik!
BalasHapusmakasih banyak mas bro,, mas bro telah memecahkan tugas saya,, siipplah
BalasHapusmakasi bro
BalasHapusgabisa... ga ada cssnya
BalasHapusthank you...
BalasHapuscara masukkan poto nya gmna
BalasHapusmas kalau kontennya sedikit kok konten di tengah mas, nggak mau ke atas, caranya gmna biar ke atas
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus