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>
<tr><td
colspan="3" bgcolor="78d2f6"><center><font
color="92278f">Copyright 2014</center></font>
</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>
<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>
<tr><td colspan="3"
bgcolor="78d2f6"><center><font
color="92278f">Copyright 2014</center></font>
</td>
</tr>
</table>
</body>
</html>
Sehingga tampilannya seperti ini :
Sekian Tutorial dari saya dan semoga bermanfaat
Good....
BalasHapussaran//keterangan letak nama file kurang lengkap sist
BalasHapuscontoh
index.html
kamera.html
lensa.html
ane jadi bingung..hehe
tapi sangat membantu thanks
SANGAT MANFAAT KAK
BalasHapusGAN CARA MASUKIN GAMBARNYA GIMNA ?
BalasHapusKurang lengkap
BalasHapusSanggat membantu, terimakasih
BalasHapusthanks infonya
BalasHapuskunjungi website kita https://www.uma.ac.id/ , http://ekonomi.uma.ac.id/
kak caranya tambahin gamabar yg online shope tuh yg hasil 1 gimna yaa??
BalasHapus