Aza Fransysxa

Tutorial Membuat Halaman Produk Toko Online Menggunakan Notepad

1. Sebelum membuat halaman yang spesifik, pertama-tama kita berlatih membuat kerangka halaman terlebih dahulu. Buka aplikasi Notepad, Notepad++ atau aplikasi sejenisnya.

Kemudian masukkan syntax dibawah ini :

<html>

<head>

<title>TOKO ONLINE KAMERA</title>

</head>

<body body background="2.jpg" link="ff00ff" vlink="00aeef"><br>

<table width="1024" border="1" align="center">

<tr height="150">

<td colspan="3"> <img src="header3.jpg"/></td>

</tr>

<tr valign="top">

<td width="150" body background="bg1.jpg">

<br><br>

<UL TYPE="SQUARE">

<LI><a href="index.html">Profil Kami </a><br/>

<li><a href="Kontak.html">Kontak </a><br/>

</ul>

<br><br><br><br>

<oL type="1">

<li><a href="Kamera.html">Kamera</a><br>

<li><a href="lensa.html">Lensa</a><br>

<li><a href="lenshood.html">Lenshood</a><br>

</td>

<td align="center" width="724" bgcolor="ffebf4">

<font size="+10">isi kolom utama</font>

</td>

<td width="150" body background="bg2.jpg">

</td>

</tr>

</td>

</tr>

</table>

</body>

</html>

Catatan =

Untuk height pada table utama tidak usah diisi, karena panjang halaman nanti akan menyesuaikan sesuai dengan jumlah gambar produk yang kita muat.

Sehingga tampilannya seperti ini.

2. Setelah kita paham mengenai cara membuat kerangka utama, kemudian kita berlatih membuat tabel. Masukkan syntax-syntax dibawah ini di aplikasi Notepad.

<html>

<head>

<title>TOKO ONLINE KAMERA</title>

</head>

<body body background="2.jpg" link="ff00ff" vlink="00aeef"><br>

<table align="center" border="1">

<tr>

<td width="240" height="240"><center>kolom 1 baris 1</td>

<td width="240" height="240"><center>kolom 2 baris 1</td>

<td width="240" height="240"><center>kolom 3 baris 1</td>

</tr>

<tr>

<td width="240" height="240"><center>kolom 1 baris 2</td>

<td width="240" height="240"><center>kolom 2 baris 2</td>

<td width="240" height="240"><center>kolom 3 baris 2</td>

</tr>

<tr>

<td width="240" height="240"><center>kolom 1 baris 3</td>

<td width="240" height="240"><center>kolom 2 baris 3</td>

<td width="240" height="240"><center>kolom 3 baris 3</td>

</tr>

</table>

</body>

</html>

Sehingga tampilannya seperti ini :

3. Setelah selesai membuat kerangka table, kemudian kita akam mengisi table-tabel tersebut dengan gambar-gambar yang akan kita jual. Masukkan syntax-syntax ini ke Aplikasi Notepad.

<html>

<head>

<title>TOKO ONLINE KAMERA</title>

</head>

<body body background="2.jpg" link="ff00ff" vlink="00aeef"><br>

<table align="center">

<tr>

<td width="240" height="240"><center><img src="1000d.jpg"></td>

<td width="240" height="240"><center><img src="1100d.jpg"></td>

<td width="240" height="240"><center><img src="700d.jpg"></td>

</tr>

<tr>

<td width="240" height="240"><center><img src="650d.jpg"></td>

<td width="240" height="240"><center><img src="600d.jpg"></td>

<td width="240" height="240"><center><img src="550d.jpg"></td>

</tr>

<tr>

<td width="240" height="240"><center><img src="100d.jpg"></td>

<td width="240" height="240"><center><img src="60d2.jpg"></td>

<td width="240" height="240"><center><img src="7d.jpg"></td>

</tr>

</table>

</body>

</html>

Sehingga tampilannya seperti ini :

4. Setelah selesai membuat table diatas, kemudian gabungkan syntax-syntax table yang telah diisi gambar-gambar tadi kedalam syntax kerangka utama. “Isi Kolom Utama” dihapus kemudian diganti dengan syntax No. 3. Atau masukkan syntax-syntax dibawah ini :

<html>

<head>

<title>TOKO ONLINE KAMERA</title>

</head>

<body body background="2.jpg" link="ff00ff" vlink="00aeef"><br>

<table width="1024" border="1" align="center">

<tr height="150">

<td colspan="3"> <img src="header3.jpg"/></td>

</tr>

<tr valign="top">

<td width="150" body background="bg1.jpg">

<br><br>

<UL TYPE="SQUARE">

<LI><a href="index.html">Profil Kami </a><br/>

<li><a href="Kontak.html">Kontak </a><br/>

</ul>

<br><br><br><br>

<oL type="1">

<li><a href="Kamera.html">Kamera</a><br>

<li><a href="lensa.html">Lensa</a><br>

<li><a href="lenshood.html">Lenshood</a><br>

</td>

<td align="center" width="724" bgcolor="ffebf4">

<br>

<font size="+3" face="cooper black" color="ec008c">KAMERA</font><br>

<marquee><font color="bab7ff" size="+3" face="tekton pro">www.AzaBelyna.com</font></marquee>

<br>

<table align="center">

<tr>

<td width="240" height="240"><center><img src="1000d.jpg"></td>

<td width="240" height="240"><center><img src="1100d.jpg"></td>

<td width="240" height="240"><center><img src="700d.jpg"></td>

</tr>

<tr>

<td width="240" height="240"><center><img src="650d.jpg"></td>

<td width="240" height="240"><center><img src="600d.jpg"></td>

<td width="240" height="240"><center><img src="550d.jpg"></td>

</tr>

<tr>

<td width="240" height="240"><center><img src="100d.jpg"></td>

<td width="240" height="240"><center><img src="60d2.jpg"></td>

<td width="240" height="240"><center><img src="7d.jpg"></td>

</tr>

</table>

</td>

<td width="150" body background="bg2.jpg">

</td>

</tr>

</td>

</tr>

</table>

</body>

</html>

Sehingga tampilannya seperti ini :

Sekian Tutorial dari saya dan semoga bermanfaat

Momentum hut ri ke 69 menjadi moment yang sangat penting bagi masyarakat klaten dan Indonesia pada umumnya. Setelah banga ini melaksanakan pesta demokrasi dan pileg. Pilpres yang dilanjutkan dengan kesibuka mudik lebaran, kelelahan dan dan ketegangan masih sangat terasa.

PASREN (Paguyuban Seni Rupawan Klaten memaknai hut ri ke 69 dengan menggelar Pameran Seni Lukis PASREN 2014, disamping sebagai ajang apresiasi bagi masyarakat klaten dan pelajar di klaten , juga sebagai pelepas kejenuhan dan ketegangan ditengah kesibukan sekaligus sbagai pelepas dahaga di sela rutinitas. Kegiatan pameran ini juga sebagai ajang persatuan dan silaturahmi serta kebersamaan di tengan perbedaan pilihan.

Mari berkesnian, berapresiasi, bila mungkin silahkan mengoleksi dan lupakan nomor satu lpakan nomor dua. Mari menuju nomor tiga yaitu persatuan Indonesia.

Pameran Seni Lukis PASREN 2014 diadakan di gedung RSPD (Pandanaran) klaten mulai tanggal 17-22 Agustus 2014. Kegiatan itu mulai dibuka pada pukul 08.00-20.00 WIB.

Berikut beberapa profil Pelukis dan karyanya:

1. Joko SP

Bertempat tinggal di puri mojayan asri B 18 Klaten 57416, No. Telp. (0272) 320630 HP. 0813 2803 2930 . Blog : www.jakasppainter. Wordpress.com

2. Ansori

Pelukis otodidak sekaligus sebagai ketua PASREN ini bertempat tinggal di Jln. Cemara no.14 Klaten, HP. 0815 4290 1903, pelukis ini aktif berpameran di kota-kota besar di Indonesia.