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 :
- mangga
- pisang
- 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 :
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.
