Membuat WEBSITE sederhana dengan HTML

Posted by : Zachary's Blog Sunday, 13 May 2012

Hai Bro & Sista" smua ................STUDY FOR SUCCES
Kembali senyum menghiasi wajahku tau kenapa ???
karena tugaskku WEB dasar Almost done.... sambil senyum-senyum sendiri ku PASTEkan ni artikel ke BLOG ini, dengan ku baca dan sedkit kupahami, Langsung deh KuCOPAS ni artikel...

oke sob sekarang kita akan buat Website sederhana dengan HTML, sebelum kita bahas tentang pembuatanya, Aku akan berikan sejumlah tutorial dasar HTML, yang tak lain aku COPAS dari http://ilmuweb.net/html/tutorial-dasar-belajar-html/ . dan jangan salah kira ya bro & sis sampai penulis menCOPAS artikel ini penulis udah mandi, jadi sudah bersih deh... seperti tanpa kaca.. hehehehehehehe

mari kita lanjutin bacanya ...............
TKJ SUCCES YEAH.....................

syarat sebuah aplikasi dikatakan aplikasi web adalah minimal dibangun dengan menggunakan HTML. HTML merupakan singkatan dari HyperText Markup Language. HTML memiliki struktur tersendiri dalam penulisannya. Struktur HTML minimal terdiri dari HTML, Head, dan Body. Dalam penulisannya HTML menggunakan tag yang biasa ditulis dengan “<” dan “>”.

Untuk lebih memahami tentang penulisan HTML bisa dilihat pada contoh berikut ini:

<html>

<head>

<!-isi head nya ->

</head>

<body>

<!- isi dari body html ->

</body>

</html>

Dengan HTML kita bisa membuat website yang berisi table, form dan masih banyak lagi yang lainnya. berikut adalah beberapa penulisan dalam HTML:
1. Untuk memasukan image:

<img src="masukkan_url_image_disini" alt="" />

2. Untuk membuat paragraf:

Tuliskan Isi Paragraf disini

3. Untuk membuat link:

<a href="masukkan_url__disini">Link Yang Tampil</a>

Untuk lebih memahami HTML silakan download file dibawah ini. File berisi contoh-contoh penggunaan HTML dalam pembuatan web.
[DOWNLOAD]

Wah tentang tutorial dasar udah nih sob sekarang kita lanjut ke Membuat Web Sederhana Dengan HTML
cekidot

MEMBUAT WEB SEDERHANA DENGAN HTML

Web yang akan dibuat sangat sederhana, dengan tujuan untuk mempraktekan ilmu yang sudah didapat pada Tutorial Dasar 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, 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:

<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>

</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:
[DOWNLOAD]

Sumber : http://ilmuweb.net

semoga bermanfaat