Dasar-dasar dan penggunaan elemen yang akan kita gunakan antara lain:
- Link: Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya (atau bisa juga mengaitkan blok - blok di dalam satu dokumen)
- Tabel: Untuk menghasilkan data dalam bentuk tabular.
- Frame: Untuk membagi halaman web secara independen.
- Form: Untuk menghasilkan form masukan data.
A. Menggunakan Link
Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks yang memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman lainnya.
Untuk mengetahui cara membuat dan mengaitkan dokumen, ikuti langkah-
langkah berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
</html>
3. Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi direktori web.
4. Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya akan dikaitkan.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="link1.html">Klik di sini</a>
5. Simpan dengan nama link2.html.
6. Untuk menguji hasilnya, buka browser
7. Klik link yang ada secara bergantian.
B. Menggunakan Tabel
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Perpotongan baris dan kolom di dalam tabel disebut sebagai sel.
Contoh aplikasi pembuatan table kode htmlnya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border=1>
<!-- Header -->
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!-- Baris data pertama -->
<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
</html>
Frame memungkinkan kita untuk menampilkan lebih dari satu halaman dokumen dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame mencerminkan halaman yang independen.
aplikasi dari frame:
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
simpan dengan nama frame.html dan buka dari bowser anda
D. Menggunakan Form
form (formulir) konvensional, form HTML merupakan suatu media untuk memasukkan data. Di sini form juga terdiri dari komponen-komponen seperti text field, button, check box, radio button, dan sejenisnya.
aplikasi dari form:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran</h3>
<form action="" method="post">
<table border=0>
<tr>
<td>NIK</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" />Pria
<input type="radio" />Wanita
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select name="job">
<option>Guru</option>
<option>Wiraswasta</option>
<option>Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="ok" />
<input type="submit" value="cancel" />
</td>
</tr>
</table>
</form>
</body>
</html>
E. Pembagian Frame dilengkapi komponen Dasar HTML
Dalam contoh aplikasi ini frame dibagi menjadi 5 bagian yaitu (1) Frame Atas; (2) Frame Bawah; (3) Frame Kiri; (4) Frame Tengah; dan (5) Frame Kanan
Untuk dapat membagi frame kedalam 5 diatas langkah-langkahnya yaitu:
- Buka notepad
- Masukkan code file berikut: frame-bagi5
- Simpan dengan nama frame_bagi5.html
- Buka file dengan browser Mozilla
- Hasil
Dalam contoh aplikasi ini Border dibagi menjadi 5 bagian yaitu (1) Border Atas; (2) Border Bawah; (3) Border Kiri; (4) Border Tengah; dan (5) Border Kanan
Untuk dapat membagi Border kedalam 5 diatas langkah-langkahnya yaitu:
Buka notepad
Masukkan code file berikut:
<!DOCTYPE html
PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Muhammad Luthfi</title>
</head>
<body>
<table border=1 align="center" cellspacing=0 cellpadding=5>
<tr>
<th colspan=10 height="30">Header</th>
<tr>
<tr> <td width ="150" height = "350">Left Menu</a></td>
<td align="center" width= "1000" height = "520"> Contents</td>
<td align="Right" width = "150" height = "350">Right Menu</td>
</tr>
<tr>
<th colspan="3 height="25" align="center" bgcolor="#ffffA4">© design by: <a href = "mailto: "> luthfi2005@gmail.com </th>
</tr>
</table>
</body>
</html>
Simpan dengan nama Border _bagi5.html
Buka file dengan browser Mozilla
Hasil
