Minggu, 18 November 2012

buat html

Setelah pada artikel sebelumnya IlmuWeb menjelaskan tentang dasar-dasar HTML, kali ini IlmuWeb akan menjelaskan tentang cara-cara membuat web sederhana. Web yang akan dibuat sangat sederhana, dengan tujuan untuk mempraktekan ilmu yang sudah didapat pada artikel sebelumnya mengenai dasar HTML.
Langsung saja, kali ini kita akan belajar membuat sebuah halaman web yang berisi gambar, link, tabel dan form. Asumsi, kita sudah menginstall XAMPP sebagai localhost. Bagi yang belum menginstall XAMPP silakan install terlebih dahulu, cara installnya bisa dibaca pada artikel sebelumnya yang berjudul Cara Install XAMPP. Jika XAMPP sudah terinstall, buka folder “htdocs” yang terdapat di dalam folder “xampp” kemudian buat folder baru dan beri nama dengan “html” (tanpa tanda petik), sehingga path nya menjadi seperti berikut “C:\xampp\htdocs\html”. Kemudain didalam folder “html” tersebut buat  file html dengan nama index.html, atur_artikel.html, dan view_tambah.html. Adapun isi dari file html tersebut adalah sebagai berikut:
index.html:
01<html>
02<head>
03<title>Belajar HTML | IlmuWeb.Net</title>
04<link rel="stylesheet" href="css/style.css" type="text/css" />
05</head>
06<body>
07<div class="header">
08</div>
09<div class="menu">
10<ul>
11<li>HOME</li>
12<li>HTML</li>
13<li>PHP</li>
14<li>JAVASCRIPT</li>
15<li>ILMUWEB.NET</li>
16<li><a href="atur_artikel.html">CONTOH TABEL</a></li>
17<li><a href="view_tambah.html">CONTOH FORM</a></li>
18</ul>
19</div>
20<div class="leftbar">
21</div>
22<div class="rightbar">
23<div class="main">
24<p><h2>Selamat datang di Ilmuweb.net</h2></p>
25<p>Contoh menampilkan gambar: </p>
26<img src="http://ilmuweb.net/wp-content/uploads/2011/06/aplikasi-web.png">
27<p>Tempat belajar membuat web secara gratis</p>
28<p>Untuk belajar mebuat web, terus kunjungi Ilmu Web Dot Net di http://ilmuweb.net atau bisa langsung klik <a href="http://ilmuweb.net">DISINI</a></p>
29</div>
30<div class="footer">
31</div>
32</body>
33</html>
atur_artikel.html:
01<html>
02<head>
03<title>Belajar HTML -- Membuat Table | IlmuWeb.Net</title>
04</head>
05<body>
06<p><h2>Contoh Tabel:</h2></p>
07<table border=1px;>
08<tr>
09<th>No.</th>
10<th>Judul</th>
11<th>Kategori</th>
12<th>Aksi</th>
13</tr>
14<tr>
15<td>1</td>
16<td>Belajar HTML</td>
17<td>HTML</td>
18<td>Edit | Hapus</td>
19</tr>
20<tr>
21<td>2</td>
22<td>Belajar PHP</td>
23<td>PHP</td>
24<td>Edit | Hapus</td>
25</tr>
26<tr>
27<td>3</td>
28<td>Belajar Javascript</td>
29<td>Javascript</td>
30<td>Edit | Hapus</td>
31</tr>
32<tr>
33<td>4</td>
34<td>Belajar Membuat Table</td>
35<td>HTML</td>
36<td>Edit | Hapus</td>
37</tr>
38<tr>
39<td>5</td>
40<td>Belajar Form</td>
41<td>HTML</td>
42<td>Edit | Hapus</td>
43</tr></p>
44<p style="text-align: justify;"></table>
45<a href="view_tambah.html">Contoh Form</a>
46</body>
47</html>
view_tambah.html:
01<html>
02<head>
03<title>Belajar HTML -- Membuat Form &amp;amp;amp; Table | IlmuWeb.Net</title>
04</head>
05<body>
06<p><h2>Contoh Form</h2></p>
07<form name="form tambah data" action="" method="">
08<table>
09<tr>
10<th>Judul</td>
11<td><input type="text name="judul" value=""/></td>
12</tr>
13<tr>
14<th>Isi</th>
15<td><textarea name="isi" rows="10" col="5"></textarea></td>
16</tr>
17<tr>
18<th>Kategori</th>
19<td><select name="kategori">
20<option value="HTML">HTML</option>
21<option value="PHP">PHP</option>
22<option value="Javascript">Javascript</option>
23</td>
24</tr>
25<tr>
26<th></th>
27<td><input type="submit" value="Submit"/></td>
28</tr>
29</table>
30</form>
31</body>
32</html>
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)