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:
03 | <title>Belajar HTML | IlmuWeb.Net</title> |
04 | <link rel="stylesheet" href="css/style.css" type="text/css" /> |
16 | <li><a href="atur_artikel.html">CONTOH TABEL</a></li> |
17 | <li><a href="view_tambah.html">CONTOH FORM</a></li> |
22 | <div class="rightbar"> |
24 | <p><h2>Selamat datang di Ilmuweb.net</h2></p> |
25 | <p>Contoh menampilkan gambar: </p> |
27 | <p>Tempat belajar membuat web secara gratis</p> |
atur_artikel.html:
03 | <title>Belajar HTML -- Membuat Table | IlmuWeb.Net</title> |
06 | <p><h2>Contoh Tabel:</h2></p> |
28 | <td>Belajar Javascript</td> |
34 | <td>Belajar Membuat Table</td> |
46 | <a href="view_tambah.html">Contoh Form</a> |
view_tambah.html:
03 | <title>Belajar HTML -- Membuat Form & Table | IlmuWeb.Net</title> |
06 | <p><h2>Contoh Form</h2></p> |
07 | <form name="form tambah data" action="" method=""> |
11 | <td><input type="text name="judul" value=""/></td> |
15 | <td><textarea name="isi" rows="10" col="5"></textarea></td> |
19 | <td><select name="kategori"> |
20 | <option value="HTML">HTML</option> |
21 | <option value="PHP">PHP</option> |
22 | <option value="Javascript">Javascript</option> |
27 | <td><input type="submit" value="Submit"/></td> |
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.
0 komentar:
Posting Komentar