Belajar Bikin Website Yuk?

Contoh tabel yang akan kita buat seperti ini :

No.	Nama	Pekerjaan
1	Fandhie	Web Designer
2	Eyang	Pejabat
3	Ani Berta	Bandar Arisan

Tabel diatas terdiri dari 3 kolom (column) dan 4 baris (row) dimana baris pertama adalah baris judul, dengan warna latar belakang abu-abu (#666666) serta warna teks (font) putih (#FFFFFF). Posisi tabel (alignment) adalah di tengah halaman (center) dan lebar tabel 400 piksel.
Untuk membuat tabel kita menggunakan tag <table></table>, dan untuk membuat baris(row) kita menggunakan tag <tr></tr>;. Yuk langsung kita coba dengan menulis kode HTML sbb :
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Kode diatas berarti tabel terdiri dari 4 baris(row), selanjutnya kita tambahkan kolom(column) menggunakan tag <td></td>. Perhatikan bahwa tag <tr></tr> selalu diapit oleh tag <table></table> sedangkan tag <td></td> harus berada di dalam tag <tr></tr>, sbb :
<table>
<tr> <!– baris pertama –>
<td></td> <!– kolom pertama –>
<td></td> <!-- kolom kedua -->
<td></td> <!-- kolom ketiga -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Nah kerangka tabelnya udah jadi. Tau ngga? Tulisan atau kode-kode di dalam tanda <!-- dan --> itu adalah penjelasan-penjelasan yang bisa kita tuliskan di kode/script HTML untuk mengingatkan kita aja dan tidak akan ditampilkan di browser. Selanjutnya kita isi tabel kita sbb :
<table>
<tr> <!– baris pertama –>
<td>No.</td> <!– kolom pertama –>
<td>Nama</td> <!-- kolom kedua -->
<td>Pekerjaan</td> <!-- kolom ketiga -->
</tr>
<tr>
<td>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>
dan hasilnya akan muncul di browser sebagai berikut :

No.	Nama	Pekerjaan
1	Fandhie	Web Designer
2	Eyang	Pejabat
3	Ani Berta	Bandar Arisan

hasil tabelnya masih default dan sederhana kan? alias masih jelek nah berikut kita tambahkan settingan style ke tabel, kolom dan baris. Tag <table></table> kita tambahkan variabel sbb :
<table width="400" border="1" align="center">
Artinya lebar tabel diatur menjadi 400 pixel, tebal border = 1 (semakin besar nilai akan semakin tebal border) dan posisi tabel adalah di tengah halaman (center).
Kemudian pada baris pertama <tr></tr> kita tambahkan variabel sbb :
<tr bgcolor="#666666" style="color:#FFFFFF; font-weight:bold;">
Artinya baris bertama diberi warna dasar (bgcolor) abu-abu (#666666), warna huruf putih (color:#FFFFFF) dan huruf dicetak tebal (font-weight:bold)
Kode HTML selengkapnya akan menjadi seperti ini :
<table width="400" border="1" align="center">
<tr bgcolor=”#666666″ style=”color:#FFFFFF; font-weight:bold;”>
<td align=”center” width=”30″>No.</td>
<td width=”170″>Nama</td>
<td width=”200″>Pekerjaan</td>
</tr>
<tr>
<td align=”center”>1</td>
<td>Fandhie</td>
<td>Web Designer</td>
</tr>
<tr>
<td align=”center”>2</td>
<td>Eyang</td>
<td>Pejabat</td>
</tr>
<tr>
<td align=”center”>3</td>
<td>Ani Berta</td>
<td>Bandar Arisan</td>
</tr>
</table>
<td align="center"> artinya, teks dalam kolom tersebut diatur pada posisi tengah (center).
<td width="170"> artinya, lebar kolom diatur 170 piksel.
Hasil akhir tabel yang kita buat akan seperti contoh diatas. Yah memang masih cukup sederhana. Jangan kuatir, nanti pada tingkat yang lebih maju kita akan belajar bagaimana mengatur tampilan tabel menjadi lebih canggih dengan menggunakan CSS.

Pertama kita akan belajar cara membuat list atau daftar. Contohnya kita akan membuat daftar buah sbb :

1. mangga
2. pisang
3. jambu

Daftar diatas disebut ordered list karena menggunakan angka (nomor) sebagai urutan list. Tag yang akan digunakan adalah<ol></ol> dan <li></li>. Cara menuliskannya adalah sbb :
<ol>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ol>
Sekarang bagaimana kalau kita akan membuat daftar tanpa urutan nomor(angka) tapi hanya menggunakan bullet sbb :

• mangga
• pisang
• jambu

Kita hanya perlu mengganti tag <ol></ol> dengan tag <ul></ul> atau disebut juga unordered list. Kodenya sbb :
<ul>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ul>
Selanjutnya mari kita menggabungkan hasil pelajaran dalam postingan ini dengan postingan sebelumnya dalam sebuah skrip. Buka program Notepad dan ketik kode-kode berikut :

<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua<br />dan ini baris kedua dari paragraf kedua.</p>
<p><img src=”gambar1.jpg” /></p>
<p>Berikut adalah daftar buah dengan nomor urut:</p>
<ol>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ol>
<p>Dan berikut adalah daftar buah tanpa nomor urut :</p>
<ul>
<li>mangga</li>
<li>pisang</li>
<li>jambu</li>
</ul>
</body>
</html>
Simpan(save) dan buka di browser. Nah sekarang selain menulis kalimat dan menyisipkan gambar, kamu juga dah bisa membuat list (daftar).

Untuk dapat membuat website, yang pertama harus kita mengerti adalah bahasa HTML dan penggunaannya. Dari menguasai bahasa HTML kemudian akan kita kembangkan pelan-pelan ke jenis script yang lain hingga kita dapat membangun sebuah website mulai dari yang paling sederhana hingga sebuah website yang sangat kompleks sekalipun.
BTW, tutorial-tutorial gw akan bersifat praktikal. Langsung berupa praktek-praktek serta penjelasan mengenai kode dan skrip yang digunakan. Tidak akan membahas panjang-panjang mengenai apa itu website, HTML teori-teori yang bersifat terlalu teknis, kecuali gw emang merasa penting untung menjelaskan untuk menghindarkan kebingungan bagi pemula.
Oke, langsung belajar aja yah? Untuk memudahkan belajar bikin website, sebaiknya bikin folder dulu di komputer kamu. Misalnya folder *website*. Nanti simpan file yang anda kerjakan mengikuti tutorial ini dalam folder *website* ini.
Untuk menuliskan kode-kode HTML untuk sementara kita ngga akan menggunakan software-software web editor yang kompleks dulu, takutnya interface software-software web editor tadi justru akan membingungkan dan bikin kamu yg baru belajar jadi ga fokus. Cukup kita akan gunakan software NOTEPAD aja dulu dari Windows. Gimana, siap?
Nah sekarang coba buka Notepad kemudian tuliskan kode berikut :
<html>
website pertama saya nih!
</html>
Kemudian simpan (save) file kamu. Jangan lupa di Save as type: dipilih All files dulu kemudian simpan dengan nama website.html (ekstension html-nya ngga boleh lupa. Karena kalau hanya simpan menggunakan nama website, file akan tersimpan dalam format notepad, bukan format html sebagai format dasar halaman web yang dapat dikenali browser).
Nah sekarang, silahkan buka file website.html tadi di browser… taadaaa….. itulah halaman website kamu yang pertama yang isinya “website pertama saya nih!”  Mudah banget kan yahh
Pada dasarnya sebuah halaman website memang harus diawali dengan tag <html> dan kemudian ditutup oleh tag </html> . Pelan-pelan kamu bakal makin mengerti dan mengenal sifat-sifat tag dalam bahasa HTML.
Sekarang tambahkan kode berikut di notepad kamu :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
</body>
Ini badan website!
</html>
Selanjutnya save (simpan) dan buka lagi di browser. Hasilnya masih sama kann? Tapi coba perhatikan di tab paling atas browser, pastinya disitu tertulis  Ini kepala website bukann?
Yaa.. selain harus dibuka dan ditutup oleh tag <html> dan </html>, setiap halaman website juga harus terdiri dari 2 bagian yaitu bagian yang diapit tag <head></head> serta bagian yang diapit tag <body></body>.
<head></head> adalah bagian kepala website. Di bagian ini kita akan menuliskan kode-kode yang tidak akan ditampilkan dihalaman website pada browser.
<body></body>. adalah bagian dimana kita akan menuliskan isi halaman website yang ditampilkan di browser, baik itu berupa teks, gambar, video dan lain-lain.
Oke, selanjutnya kita coba mengenal beberapa tag html yang sering digunakan, antara lain :
<p></p> adalah tag untuk sebuah paragaraf.
<img> untuk menyisipkan file gambar
<br /> untuk memotong kalimat/baris.
Nah disini kamu bisa lihat, kalau tag html tidak semuanya memiliki tag pembuka dan tag penutup, seperti <html> dan </html>, <p> dan </p>, tapi ada beberapa tag yang hanya menggunakan satu tag tunggal seperti <img />, <br /> dan lain-lain.  Santai aja.. ngga usah kuatir..  pelan-pelan kamu bakal terbiasa dengan tag-tag html ini.
Oke lanjut, silahkan tulis skrip berikut :
<html>
<head>
<title>Ini kepala website </title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua<br />dan ini baris kedua dari paragraf kedua.</p>
<p><img src=”gambar1.jpg” /></p>
</body>
</html>
Jangan lupa di folder yang sama dengan file website.html yang kamu simpang yaitu folder *website* tadi, simpan juga file gambar dengan nama gambar.jpg.  Sekarang save file kamu dan buka di browser.  Well, selain kalimat kamu juga dah punya gambar di halaman website kamu.