Senin, 14 November 2016
Jumat, 11 November 2016
BAB.6 pertemuan 1
kali ini saya akan memposting tutorial membuat website dengan html
langkah langkahnya :
1. buka notepad anda
2. masukkan kode di bawah ini
<html>
<head>
<title> Layout dengan Tabel | Index </title>
</head>
<body>
<font face="arial" size=3>
<table width=1010 align=center>
<tr>
<td width ="240" bgcolor ="#FF9900"><font size="3" face="arial"><strong>Logo Usaha <img src="logoo.png" height=50 width=50></strong></font></td>
<td width ="758" align=right valign=bottom>
<table bgcolor ="#FFAA00">
<tr>
<td><strong>Button Home |</strong></td>
<td><strong><font size="3" face="arial">Button Profil |</font></strong></td>
<td><strong><font size="3" face="arial">Button Produk |</font></strong></td>
<td><strong><font size="3" face="arial">Button Kontak |</font></strong></td>
</tr>
</table>
</td></tr>
</table>
<table rules=group frame=box align=center>
<thead>
<tr><th bgcolor ="#FF7700" colspan=3><p> </p><img src="Header-blog.jpg"><p> </p></th>
</tr>
</thead>
<tbody>
<tr><th height =30 width=1000 bgcolor ="#FF7700"colspan=3><marquee behavior=alternate scrollamount=3>
<b><font size="3" face="arial">Selamat Datang di Website Toko Elektronik Kami...</font></b></marquee></th></tr>
</tbody>
<tbody>
<tr><td valign=top align=center bgcolor ="#FFAA00" width=200>
<table>
<tr><td align=center><br><img src="poto.png" height=85 width=85></td></tr>
<tr><td align=center><br><strong>Foto Saya</strong><br></td></tr>
<tr><td align=center><br><p><hr width=200 color="#FF7700">Adalah Mahasiswa <font size="3" face="arial"> Amik Parbina</font>
yang mencoba untuk belajar selagi masih sempat untuk belajar.
<hr width=200 color ="#FF7700"></p><br></td></tr>
<tr><td align=center><img src="fotoo.png" height=85 width=85><br></td></tr>
<tr><td align=center>
<table>
<tr><td>Username</td><td><input type=text size=15></td></tr>
<tr><td>Password</td><td><input type=password size=15></td></tr>
<tr><td colspan=2><b>Lupa Password ?</b></td></tr>
<tr><td colspan=2><a href="thanks.html"><input type=submit value=kirim></a>
<a href="index.html"><input type=reset value=batal></a></td></tr>
</table>
</td></tr>
</table>
</td>
<td valign=top align=center bgcolor="#FFCC00" width=500>
<table align=center>
<tr><td align=center><br><img src="1.png" height=85 width=85><br></td></tr>
<tr><td align=center><p><font size="3" face="arial"><strong>Logo Usaha<img src="logo1.png" height=50 width=50></strong></font></p>
<hr color="#FF7700"></td></tr>
<tr><td><b>INFO PRODUK TERBARU HARI INI</b></td></tr>
<tr><td> Berikut Daftar Produk Terlaris Hari Ini :</td></tr>
<tr><td><table width=500>
<tr><td>
<ul>
<li>Cool Pad</li>
<li>Mouse Variasi</li>
<li>Joystik</li>
</ul></td>
<td align=right><img src="coolpad.jpg" height=70 width=80></td>
<td align=right><img src="mouse.jpg" height=70 width=80></td>
<td align=right><img src="joystik.jpg" height=70 width=80></td></tr></table>
</td></tr>
<tr><td><b>INFO PRODUK DISCOUNT 50%</b></td></tr>
<tr><td>Berikut Daftar Produk Terlaris Yang Discount :</td></tr>
<tr><td><table width=500>
<tr><td>
<ul>
<li>Flashdisk 4 GB</li>
<li>Speaker Mini</li>
<li>Cool Pad</li>
</ul></td>
<td align=right><img src="flashdisk.png" height=70 width=80></td>
<td align=right><img src="speaker.png" height=70 width=80></td>
<td align=right><img src="coling.png" height=70 width=80></td></tr></table>
</td></tr>
<tr><td><hr color="#FF7700"><b>INFO PRODUK KOMPUTER DAN LAPTOP</b></td></tr>
<tr><td>Berikut Daftar Produk Komputer dan Laptop :</td></tr>
<tr><td><table>
<tr><td><img src="komputer.png" height=100 width=120></td>
<td><img src="komputer2.png" height=100 width=120></td>
<td><img src="17.png" height=100 width=120></td>
<td><img src="16.png" height=100 width=120></td>
</tr></table>
</td></tr>
</table>
</td>
<td valign=top align=center bgcolor="#FFAA00" width=200>
<table align=center>
<tr><td align=center><br><img src="11.png" height=85 width=85><br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="seperangkat1.png" height=60 width=60><hr color="#FF7700"></td>
<td>Seperangkat Komputer Desktop</td></tr>
<tr><td><img src="asus.png" height=60 width=60><hr color="#FF7700"></td>
<td>Notebook Terbaru Asus 1215B</td></tr>
</table>
</td></tr>
<tr><td align=center><br><img src="13.png" height=85 width=85></td></tr>
<tr><td align=center><marquee direction="down" scrollamount=3>
<table align=center>
<tr><td align=center><hr color="#FF7700" width=200>Baru Kemaren mesan hari ini sudah sampai gandi tempat ane,
rekomended deh pelayannya, thanks gan Admin.
</td></tr>
<tr><td align=center><hr color="#FF7700" width=200>Harganya murah meriah, ane kemaren beli langsung banyak,
buat toko ane di Banjarmasin.
</td></tr>
<tr><td align=center><hr color="#FF7700" width=200>Wah, gua juga mau nih gan, Kira-kira ke Jogya berapa ya ongkirnya...?
<hr color="#FF7700" width=200>
</td></tr>
</table>
</marquee>
</td></tr>
<tr><td><b>Mau Kirim Pesan...?</b></td></tr>
<tr><td><a href="kontak.html"><input type=submit value="klik disini"></a></td></tr>
<tr><td>
<table>
<tr>
<td><img src="6.png" height=50 width=50></td>
<td><img src="7.png" height=50 width=50></td>
<td><img src="8.png" height=50 width=50></td>
<td><img src="22.png" height=50 width=50></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan=3 align=center bgcolor="#FF7700" height=50><b><font size="3" face="arial">Create by JH</font></b></td>
</tr></tfoot></table><br><br>
</font>
</body>
</html>
3. kemudian simpan dengan nama: index.html
(perhatikan gambar,jika ada kode pemanggilan gambar masukkan kode nama gambar sesuai dengan gamar dan buat dalam satu folder seperti gambar dibawah ini
4. maka hasilnya akan seperti gambar dibawah ini
langkah langkahnya :
1. buka notepad anda
2. masukkan kode di bawah ini
<html>
<head>
<title> Layout dengan Tabel | Index </title>
</head>
<body>
<font face="arial" size=3>
<table width=1010 align=center>
<tr>
<td width ="240" bgcolor ="#FF9900"><font size="3" face="arial"><strong>Logo Usaha <img src="logoo.png" height=50 width=50></strong></font></td>
<td width ="758" align=right valign=bottom>
<table bgcolor ="#FFAA00">
<tr>
<td><strong>Button Home |</strong></td>
<td><strong><font size="3" face="arial">Button Profil |</font></strong></td>
<td><strong><font size="3" face="arial">Button Produk |</font></strong></td>
<td><strong><font size="3" face="arial">Button Kontak |</font></strong></td>
</tr>
</table>
</td></tr>
</table>
<table rules=group frame=box align=center>
<thead>
<tr><th bgcolor ="#FF7700" colspan=3><p> </p><img src="Header-blog.jpg"><p> </p></th>
</tr>
</thead>
<tbody>
<tr><th height =30 width=1000 bgcolor ="#FF7700"colspan=3><marquee behavior=alternate scrollamount=3>
<b><font size="3" face="arial">Selamat Datang di Website Toko Elektronik Kami...</font></b></marquee></th></tr>
</tbody>
<tbody>
<tr><td valign=top align=center bgcolor ="#FFAA00" width=200>
<table>
<tr><td align=center><br><img src="poto.png" height=85 width=85></td></tr>
<tr><td align=center><br><strong>Foto Saya</strong><br></td></tr>
<tr><td align=center><br><p><hr width=200 color="#FF7700">Adalah Mahasiswa <font size="3" face="arial"> Amik Parbina</font>
yang mencoba untuk belajar selagi masih sempat untuk belajar.
<hr width=200 color ="#FF7700"></p><br></td></tr>
<tr><td align=center><img src="fotoo.png" height=85 width=85><br></td></tr>
<tr><td align=center>
<table>
<tr><td>Username</td><td><input type=text size=15></td></tr>
<tr><td>Password</td><td><input type=password size=15></td></tr>
<tr><td colspan=2><b>Lupa Password ?</b></td></tr>
<tr><td colspan=2><a href="thanks.html"><input type=submit value=kirim></a>
<a href="index.html"><input type=reset value=batal></a></td></tr>
</table>
</td></tr>
</table>
</td>
<td valign=top align=center bgcolor="#FFCC00" width=500>
<table align=center>
<tr><td align=center><br><img src="1.png" height=85 width=85><br></td></tr>
<tr><td align=center><p><font size="3" face="arial"><strong>Logo Usaha<img src="logo1.png" height=50 width=50></strong></font></p>
<hr color="#FF7700"></td></tr>
<tr><td><b>INFO PRODUK TERBARU HARI INI</b></td></tr>
<tr><td> Berikut Daftar Produk Terlaris Hari Ini :</td></tr>
<tr><td><table width=500>
<tr><td>
<ul>
<li>Cool Pad</li>
<li>Mouse Variasi</li>
<li>Joystik</li>
</ul></td>
<td align=right><img src="coolpad.jpg" height=70 width=80></td>
<td align=right><img src="mouse.jpg" height=70 width=80></td>
<td align=right><img src="joystik.jpg" height=70 width=80></td></tr></table>
</td></tr>
<tr><td><b>INFO PRODUK DISCOUNT 50%</b></td></tr>
<tr><td>Berikut Daftar Produk Terlaris Yang Discount :</td></tr>
<tr><td><table width=500>
<tr><td>
<ul>
<li>Flashdisk 4 GB</li>
<li>Speaker Mini</li>
<li>Cool Pad</li>
</ul></td>
<td align=right><img src="flashdisk.png" height=70 width=80></td>
<td align=right><img src="speaker.png" height=70 width=80></td>
<td align=right><img src="coling.png" height=70 width=80></td></tr></table>
</td></tr>
<tr><td><hr color="#FF7700"><b>INFO PRODUK KOMPUTER DAN LAPTOP</b></td></tr>
<tr><td>Berikut Daftar Produk Komputer dan Laptop :</td></tr>
<tr><td><table>
<tr><td><img src="komputer.png" height=100 width=120></td>
<td><img src="komputer2.png" height=100 width=120></td>
<td><img src="17.png" height=100 width=120></td>
<td><img src="16.png" height=100 width=120></td>
</tr></table>
</td></tr>
</table>
</td>
<td valign=top align=center bgcolor="#FFAA00" width=200>
<table align=center>
<tr><td align=center><br><img src="11.png" height=85 width=85><br></td></tr>
<tr><td align=center>
<table align=center>
<tr><td><img src="seperangkat1.png" height=60 width=60><hr color="#FF7700"></td>
<td>Seperangkat Komputer Desktop</td></tr>
<tr><td><img src="asus.png" height=60 width=60><hr color="#FF7700"></td>
<td>Notebook Terbaru Asus 1215B</td></tr>
</table>
</td></tr>
<tr><td align=center><br><img src="13.png" height=85 width=85></td></tr>
<tr><td align=center><marquee direction="down" scrollamount=3>
<table align=center>
<tr><td align=center><hr color="#FF7700" width=200>Baru Kemaren mesan hari ini sudah sampai gandi tempat ane,
rekomended deh pelayannya, thanks gan Admin.
</td></tr>
<tr><td align=center><hr color="#FF7700" width=200>Harganya murah meriah, ane kemaren beli langsung banyak,
buat toko ane di Banjarmasin.
</td></tr>
<tr><td align=center><hr color="#FF7700" width=200>Wah, gua juga mau nih gan, Kira-kira ke Jogya berapa ya ongkirnya...?
<hr color="#FF7700" width=200>
</td></tr>
</table>
</marquee>
</td></tr>
<tr><td><b>Mau Kirim Pesan...?</b></td></tr>
<tr><td><a href="kontak.html"><input type=submit value="klik disini"></a></td></tr>
<tr><td>
<table>
<tr>
<td><img src="6.png" height=50 width=50></td>
<td><img src="7.png" height=50 width=50></td>
<td><img src="8.png" height=50 width=50></td>
<td><img src="22.png" height=50 width=50></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan=3 align=center bgcolor="#FF7700" height=50><b><font size="3" face="arial">Create by JH</font></b></td>
</tr></tfoot></table><br><br>
</font>
</body>
</html>
3. kemudian simpan dengan nama: index.html
(perhatikan gambar,jika ada kode pemanggilan gambar masukkan kode nama gambar sesuai dengan gamar dan buat dalam satu folder seperti gambar dibawah ini
4. maka hasilnya akan seperti gambar dibawah ini
Langganan:
Postingan (Atom)