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:
<html> <head> <title>Belajar HTML | IlmuWeb.Net</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div class="header"> </div> <div class="menu"> <ul> <li>HOME</li> <li>HTML</li> <li>PHP</li> <li>JAVASCRIPT</li> <li>ILMUWEB.NET</li> <li><a href="atur_artikel.html">CONTOH TABEL</a></li> <li><a href="view_tambah.html">CONTOH FORM</a></li> </ul> </div> <div class="leftbar"> </div> <div class="rightbar"> <div class="main"> <p><h2>Selamat datang di Ilmuweb.net</h2></p> <p>Contoh menampilkan gambar: </p> <img src="http://ilmuweb.net/wp-content/uploads/2011/06/aplikasi-web.png"> <p>Tempat belajar membuat web secara gratis</p> <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> </div> <div class="footer"> </div> </body> </html>
atur_artikel.html:
Your ads will be inserted here by
Easy AdSense.
Please go to the plugin admin page to paste your ad code.
<html> <head> <title>Belajar HTML -- Membuat Table | IlmuWeb.Net</title> </head> <body> <p><h2>Contoh Tabel:</h2></p> <table border=1px;> <tr> <th>No.</th> <th>Judul</th> <th>Kategori</th> <th>Aksi</th> </tr> <tr> <td>1</td> <td>Belajar HTML</td> <td>HTML</td> <td>Edit | Hapus</td> </tr> <tr> <td>2</td> <td>Belajar PHP</td> <td>PHP</td> <td>Edit | Hapus</td> </tr> <tr> <td>3</td> <td>Belajar Javascript</td> <td>Javascript</td> <td>Edit | Hapus</td> </tr> <tr> <td>4</td> <td>Belajar Membuat Table</td> <td>HTML</td> <td>Edit | Hapus</td> </tr> <tr> <td>5</td> <td>Belajar Form</td> <td>HTML</td> <td>Edit | Hapus</td> </tr></p> <p style="text-align: justify;"></table> <a href="view_tambah.html">Contoh Form</a> </body> </html>
view_tambah.html:
<html> <head> <title>Belajar HTML -- Membuat Form &amp;amp; Table | IlmuWeb.Net</title> </head> <body> <p><h2>Contoh Form</h2></p> <form name="form tambah data" action="" method=""> <table> <tr> <th>Judul</td> <td><input type="text name="judul" value=""/></td> </tr> <tr> <th>Isi</th> <td><textarea name="isi" rows="10" col="5"></textarea></td> </tr> <tr> <th>Kategori</th> <td><select name="kategori"> <option value="HTML">HTML</option> <option value="PHP">PHP</option> <option value="Javascript">Javascript</option> </td> </tr> <tr> <th></th> <td><input type="submit" value="Submit"/></td> </tr> </table> </form> </body> </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:
Seorang manusia biasa, tempatnya salah dan lupa, yang ingin turut berpartisipasi mencerdaskan kehidupan bangsa dan negara.
[...] CSS • Tutorial 0 Comments {lang: 'id'}Pada artikel sebelumnya kita telah membahas tentang cara membuat web HTML sederhana. Pada artikel kali ini, kita akan belajar CSS. Bagi yang belum tahu apa itu CSS, CSS merupakan [...]
Pretty very good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing for ones feed and I hope you write-up once more soon.
our favourite websites:…
todays best sites:…
postingannya mantab Gan, sangat cocok untuk menambah pengetahuan khususnya yang lagi belajar html seperti saya ini gan, salam kenal jangan lupa kunjung balik ya…..
makaci gan ilmunya,langganan aah
kalau html 5 alur skripnya sama ga ya???
Iya nih bingung,
Saya kan cuma buat web pake html, jadi bukan php.
Nah kalao sdh punya form diatas kan tinggal di buat haaman kontak.html (misalnya begitu).
Nah trus saat pengunjung sdh mengisi pesan dll, trus klik send atau submit itu gimana cara nyambungin nya ya?
Dan pengennya sih, saat pengnjung klik send/submit, semua pesan tersebut masuk ke email saya.
Mohon petunjuknya……
Nice article and Tips.
More Sehat & Cantik dengan Herbal
Mudah-mudahan nanti bisa tuliskan tutorialnya. ditunggu ya
itu sih gampang gan tinggal bikin script php
Waduhhh… masih lama ya?
ditunggu aja gan
udah buat new folder d xammpp tapi ga tau pathnya nih
Waktu kita menginstall XAMPP defaultnya folder XAMPP berada pada C:\
Untuk berarti jika kita akan membuat web, kita harus membuat folder baru (misalkan nama folder nya html) pada folder htdocs yang terdapat di dalam folder XAMPP.
Path nya jadi seperti ini:
“C:\xampp\htdocs\html”
admin saya pemula ………mau tanya nih browsernya di explore atau dimana maaf y bawel baru pemula dan buka localshot.html nya dimana pliss
Jika sudah mengikurti tutorial diatas silakan buka browser, .. Untuk lokasi browser, jika anda menggunakan windows 7 klik Start, kemudian di kolom search ketik Internet, maka akan muncul Internet Explorer. Itu browser nya.. silakan di klik. Atau Klik Start, cari all program, cari Internet explorer.
Semoga membantu
Halo. Saya menemukan situs web Anda melalui Google ketika mencari masalah yang sama, situs web Anda tiba di sini sampai. Tampaknya baik. Saya telah bookmarked di bookmark saya google untuk kembali lagi nanti.
thanks info nya ya mas ..postinganya menarik
aku dah lakuin smua langkah nya tapi pas buka browser trus nulis localhost/html kok gk bisa ya ?
mohon pencerahan kk tq
ak dah mengikuti smua langkahnya ni
trus kan langkah terakhir buka localhost/html kan ?
kok punya w gk bisa ya
mohon bantuan makasih
Maaf bisa tolong dijelaskan, ga bisanya seperti apa?
apakah langkah-langkah diatas sudah dilakukan dengan benar?
Terimakasih
uh pnjang amt crax ksh yg pndek” kcha
biar cpat di inggt n di mgrti
Mantap nih ilmunya,pasti bermanfaat buat smua orang..amin
Susah masuknya
Terima Kasih Pak Atas tutorialnya ..
artikel yang sangat bagus ..