Membuat Web HTML

Posted by : Arief Hilman Nugraha Wednesday, February 20, 2013

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>

Setelah semua file dibuat, aktifkan localhost dengan cara double klik icon XAMPP kemudian klik start pada Apache dan Mysql. Kemudian buka browser Anda dan buka localhost/html. Selamat, web pertama Anda sudah berhasil dibuat.

Untuk script web lengkap bisa di download melalui link dibawah ini:

[DOWNLOAD]

Share This