Langsung ke konten utama

TUTORIAL MEMBUAT TOKO ONLINE SEDERHANA PADA NOTEPAD

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>
Jadi inilah hasilnya :
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>
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>
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>
                &nbsp;<br>
                &nbsp;<br>
                &nbsp;<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>

 

Komentar

  1. Unknown25 Mei 2015 pukul 19.12

    Terimakasih infonya gan, lebih enak lagi kalau jualan online via jasa shopious gan :D pusatnya toko online :D

    BalasHapus
  2. Unknown16 Juni 2015 pukul 00.12

    Bikin online shop masih ribet? Kamu bisa mencoba buat Toko Online dengan Jejualan.com Aman, Cepat & Mudah. Hanya 20 Detik!

    BalasHapus
  3. Unknown28 November 2015 pukul 05.44

    makasih banyak mas bro,, mas bro telah memecahkan tugas saya,, siipplah

    BalasHapus
  4. Unknown29 Desember 2015 pukul 04.12

    makasi bro

    BalasHapus
  5. Unknown20 Januari 2016 pukul 08.18

    gabisa... ga ada cssnya

    BalasHapus
  6. latoifblog.spot4 November 2016 pukul 00.21

    thank you...

    BalasHapus
  7. Unknown22 Maret 2017 pukul 11.04

    cara masukkan poto nya gmna

    BalasHapus
  8. Unknown3 Mei 2017 pukul 19.24

    mas kalau kontennya sedikit kok konten di tengah mas, nggak mau ke atas, caranya gmna biar ke atas

    BalasHapus
  9. Unknown6 April 2018 pukul 02.59

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

PAMERAN PEMBANGUNAN DALAM RANGKA MENYAMBUT HUT KABUPATEN KLATEN KE-210 YANG DISELENGGARAKAN OLEH DINAS PEMUDA DAN OLAHRAGA

Oleh : Muchti Aji Masykuri 26 / XII MM 1 SMK NEGERI 1 KLATEN PAMERAN PEMBANGUNAN DALAM RANGKA MENYAMBUT HUT KABUPATEN KLATEN KE-210 YANG DISELENGGARAKAN OLEH DINAS PEMUDA DAN OLAHRAGA 1.     SMKN 1 KLATEN Dalam rangka menyambut HUT Kabupaten Klaten ke-210 Dinas Pemuda dan Olahraga mengadakan pameran yang berada digedung Sunan Pandanaran. Ada banyak sekolah maupun penguasaha yang mengikuti pameran tersebut. Salah satu diantaranya adalah SMKN 1 KLATEN. Stand yang dimiliki oleh SMKN 1 KLATEN terdapat beberapa hasil karya dari keahlian siswa dari beberapa jurusan. Distand SMKN 1 KLATEN terdapat hasil karya siswa bidang TI yang meliputi 3 jurusan yaitu Teknik Komputer dan Jaringan, Multimedia, dan Broadcasting. Dimana pada jurusan Multimedia memamerkan hasil karya siswa seperti CD Pembelajaran Interaktif, Company Profile, Iklan Layanan Masyarakat, dan lain lain. Disana pengunjung bisa langsung memutarnya dengan LED yang sudah disediakan. 2.        SMKN 3 KLATE
Posting Komentar
Baca selengkapnya

KARNAVAL PEMBANGUNAN DAN BUDAYA KAB. KLATEN 2014

 oleh : Muchti Aji Masykuri 26 / XII MM 1 SMK N 1 KLATEN Pada tanggal 18 dan 19 Agustus 2014 Pemkab Kabupaten Mengadakan karnaval dan kirab budaya disepanjang   Jl. Pemuda Klaten jam 13.00 – 17.00 WIB. Karnaval diikuti kurang lebih oleh 26 kecamatan seKabupaten Klaten.  Karnaval dibagi menjadi 2 yaitu karnaval Pembangunan dan Karnaval Budaya. Pada hari pertama 18 Agustus 2014 yaitu adalah karnaval pembangunan yang diikuti oleh beberapa kecaman yang ada di kota Klaten. Karnaval ini dikemas dalam 5W, Wasis, Wareg, Waras, Wisma, Wutuh, yang berarti Wasis yaitu berarti pendidikan, Wareg yaitu berarti kesediaan pangan, Waras yaitu kesehatan, Wisma berati tempat tinggal, dan Wutuh berarti persatuan. Selanjutnya karnaval pada hari kedua 19 Agustus 2014 yaitu adalah karnaval budaya yang diikuti   oleh   beberapa kecamatan dan perusahaan seperti Amigo, Naga Mas Motor, Asmat Pro Klaten, dan lain lain. Pada karnaval hari kedua ini menampilakan kebudayaan klaten seperti waya
Posting Komentar
Baca selengkapnya