Sekarang kita akan belajar HTML dasar untuk halaman yang ke 3. Disini juga tidak saya terangkan kode kodenya semua secara mendetail, karena sudah saya jelaskan pada halaman 1 dan 2. Jadi, jika ada kode yang belum paham, silahkan lihat pada halaman 1 atau halaman 2. Untuk tutorial halaman 3 ini, kita akan belajar membuat TABLE.
Buka kembali program NotePad, lalu tuliskan kode kode program HTML dibawah ini: Sedangkan hasil dari halaman web yang kita buat ini bisa anda lihat pada gambar.
<html>
<head>
<title>halaman 3</title>
</head>
<body text=”white” bgcolor=”brown”>
<font size=15 >
<u>Membuat Table</u>
<br>
<br>
<p align=”left”> <font size=6 >
<table border=2>
<tr>
<td>NAMA</td>
<td>PEKERJAAN</td>
<td>ALAMAT</td>
<td>TELPON</td>
</tr>
<tr>
<td>alex</td>
<td>wiraswasta</td>
<td>jakarta</td>
<td>0215846845</td>
</tr>
<tr>
<td>john</td>
<td>guru</td>
<td>surabaya</td>
<td>03154845662</td>
</tr>
<tr>
<td>riena</td>
<td>ibu rumah tangga</td>
<td>Kediri</td>
<td>03544548566</td>
</tr>
<tr>
<td colspan=4>
Ini Adalah Contoh Table Sederhana untuk HTML
</td>
</tr>
</table>
<br>
<a href=”satu.html”>1</a> <a href=”dua.html”>2</a>
</body>
</html>
KETERANGAN dari kode program: (sebagian sudah saya jelaskan pada HTML dasar halaman 1 atau halaman 2, silahkan lihat kembali !).
- Tulis judul pada Title
- Warna dari isi tulisan (body text) adalah putih sedangkan warna dari background (bgcolor)halaman ketiga ini adalah coklat.
- Saya menulis tulisan “Membuat Table” dengan ukuran tulisan 15 ( <font size=15 > ) dan tulisan tersebut di garis bawahi (dengan memakai kode yang diawali dengan <u> dan diakhiri dengan </u>.
- Untuk tulisan tulisan selanjutnya dan seterusnya posisi tulisan tersebut diletakkan pada sebelah kiri ( <p align=”left”> ) sedangkan ukuran tulisannya adalah 6 (<font size=6 >).
- Untuk selanjutnya kita akan membuat sebuah TABLE.
- Untuk membuat sebuah Table kode yang dipakai diawali dengan <table> dan diakhiri dengan </table>. Tapi anda juga diminta menentukan besar dari garis table (Table Border) agar garis dari table tersebut kelihatan. sebagai contoh disini saya menulis kode ( <table border=2> ) yang artinya besar atau tebal dari garis Table tersebut adalah 2.
- Untuk mendefinisikan sebuah baris dari Table gunakanlah kode yang diawali dengan <tr> dan diakhiri dengan </tr>. sedangkan untuk menyisipkan data kedalam sel dari Table tersebut gunakan kode yang diawali dengan <td> dan diakhiri dengan </td>.
Perhatikanlah bahwa tulisan Nama, Pekerjaan, Alamat dan Telpon akan menjadi satu baris sejajar antara satu dengan yang lainnya karena disebabkan dengan adanya kode <TR> tadi. sedangkan data data dari Table tersebut dimasukan dengan memakai kode <TD> tadi.
- Sekarang perhatikan pada baris terakhir dari Table, disitu saya menggabungkan antar kolom yang satu dengan kolom yang lainnya dengan memakai kode <td colspan=jumlah sel yang digabung > sehingga tulisan “Ini Adalah Contoh Table Sederhana untuk HTML” berada dalam satu kolom saja.
- Untuk bagian terakhir dari halaman 3 ini saya membuat LINK untuk pindah ke halaman 1 ( <a href=”satu.html”>1</a> ) dan LINK untuk pindah ke halaman 2 ( <a href=”dua.html”>2</a> ) .
- Demikianlah seluruh tutorial sederhana untuk belajar HTML dasar, dari halaman satu, dua hingga tiga ini. mudah mudahan bermanfaat bagi yang menulis dan membacanya. Ada kurang lebihnya saya mohon maaf yang sebesar besarnya karena saya juga masih belajar. Jika ada saran tolong tulis dibagian komentar. Terima Kasih Banyak atas perhatiannya. WASSALAMUALAIKUM !!!
By: OPIX HOLMES
opix.holmes@yahoo.com
www.islamicunderground.wordpress.com
