softwaremedancity: Membuat Web 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>

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:

softwaremedancity

Minggu, 14 Oktober 2012

Membuat Web HTML

Tidak ada komentar:

Designer