Anda di halaman 1dari 5

MODUL II

MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABLE


DAN MEMBUAT FORM

A. MAKSUD DAN TUJUAN


1. Maksud
• Merapikan teks yang berupa daftar (list) dan tabel dengan tag HTML
• Membuat halaman web terhubung dengan halaman lain (link)

2. Tujuan
• Mahasiswa dapat membuat tabel dan mengatur sel-sel dalam
tabel untuk ditampilkan dalam dokumen web.
• Mahasiswa dapat membuat link untuk menghubungkan halaman-
halaman web.

B. DASAR TEORI
Daftar Item (List)
Seringkali sebuah dokumen berisikan teks yang berupa daftar sehingga penulisannya
ditampilkan dalam bentuk sebuah daftar item (list). Dengan menggunakan tag,
halaman HTML juga dapat menampilkan teks berupa daftar (list).
Link
Untuk membuat link atau hyperlink, dapat menggunakan tag:
<a href> … </a>
Tabel
Untuk membuat tabel dalam halaman HTML, dapat menggunakan tag berikut:
<table></table> : Membuat tabel dan sebagai tanda awal dan akhir tabel
<tr></tr> : Membuat baris dalam tabel
<td></td> : Membuat kolom (sel).
<th></th> : Membuat judul kolom
<caption></caption> : Membuat judul pada tabel.
C. PEMBAHASAN
Dalam pembahasan modul kedua ini kita akan belajar meggunakan item, membuat
table dan membuat form yang akan di jalankan pada web server apache dan browser
web.
<HTML><HEAD><TITLE>Membuat List</TITLE></HEAD>
<BODY>
<p align="justify">Persaingan ketat dalam bidang teknologi telah
membuat berbagai vendor perusahaan handphone untuk meluncurkan
berbagai tipe ponsel. Diawal tahun 2005 ini, hampir semua vendor
ponsel mengeluarkan produk terbarunya, dengan seri yang terhitung
banyak, yaitu 10 - 20 ponsel untuk setiap merk.</p><BR>
<H2>Ponsel-ponsel seri terbaru antara lain:</H2>
<UL>Nokia 9300<BR>
O2 XDA mini<BR>
Samsung SGH-P730<BR>
Nokia 6255 CDMA<BR>
T-Mobile MDA IV<BR>
LG KV3600<BR>
</UL>
</BODY>
</HTML>
Keterangan program:
 <html> yaitu tag untuk mengawali sebuah html
 <head> yaitu Bagian Kepala Dari html
 <p> yaitu untuk mengawali sebuah paragraf baru kita menggunakan simbol <p>
dan diakhiri dengan simbol </p> yang didalam P terdapat atribut align yang
berfungsi untuk mengatur posisi teks apakah text tersebut rata kanan. Rata kiri
ataupun bentuk center atau tengah, dalam <p juga terdapat <br> yang berfungsi
untuk berpindah atau berganti baris kebaris berikutnya.
 <ul> Digunakan untuk Menampilkan daftar item (list) tanpa penomoran,
 <li> Menambahkan tanda bullet didepan masing-masing item.dan biasanya tag ini
muncul diantara tag <ul> misalnya seperti contoh diatas yaitu :
 Nokia 9300
 Motorola, dan sebagainya.
Kita tidak perlu khawatir apakah kode yang kita buat benar-atau salah karena jika
kode yang kita buat salah tampilan browser akan menunjukkan dimana letak
kesalahannya.

D. TUGAS
1. Susunlah script HTML agar menghasilkan tampilan halaman web sebagai
berikut.
Keterangan : Warna latar halaman web adalah silver
Dan pengaturan table sebagai berikut:
Border=1, cellpadding=1, sellspacing=1, dan warna latar table putih
2. Susunlah script untuk membuat form agar menghasilkan tampilan halaman
web sebagai berikut.
Jawab:
1. <html>
<head>
<title>Mambuat tabel</title></head>
<body bgcolor="silver" >
<table bgcolor="white" width="51%" border="1" cellspacing="1"
cellpadding="1">

<tr>
<td width="21%" rowspan="2" align="center" valign="middle">
<b><font color="blue">NAMA</font></b></td>
<td colspan="5" height="50" align="center" valign="top">
<b><font color="blue">UKURAN BADAN</font></b></td>
</tr>

<tr align="center">
<td width="33%"><font color="green"><b>TINGGI</b></font></td>
<td width="32%"><font color="green"><b>BERAT</b></font></td>
</tr>

<tr>
<td><font color="black">Reinka</font></td>
<td align="center">170</td>
<td align="center">48</td>
</tr>

<tr>
<td><font color="black">Varkan</font></td>
<td align="center">180</td>
<td align="center">79</td>
</tr>
<table bgcolor="white" width="51%" border="1" cellspacing="1”
cellpadding="0">
<td align="center" valign="middle">
<b><font color="blue">Data diambil pada tanggal 17 Februari
2005
</font></b></td></table>

</table>
</body>
</html>

2. <html>
<head>
<title>Form</title>
</head>

<body bgcolor=white>
<form method="post" action="terimakasih.php">
<table bgcolor="white" width="85%" border="1" cellspacing="0"
cellpadding="0">
<td align="justify" valign="middle"><b>
<font color="blue">Form Pendaftaran UKM Renang STMIK AKAKOM
</font></b></td>
</table>

<table border=2 cellspacing=0 width=85%>


<tr>
<td width=18%><b>Nama</b></td>
<td> <input type=text name=nama maxlength=30 size=32></td>
</tr>

<tr>
<td width=18%><b>No.Mhs</b></td>
<td> <input type="Nomor" name=No.Mhs maxlength=20 size=12></td>
</tr>

<tr>
<td><b>Jurusan : <br></td>
<td>
<select name=jrs>
<option value="TI" selected>Teknik Informatika</option>
<option value="SI" >Sistem Informasi</option>
<option value="MI" >Manajemen Informatika</option>
<option value="TK" >Teknik Komputer</option>
<option value="KA" >Komputer Akuntansi</option>
</select>
</td>
</tr>

<tr>
<td width=18%><b>Jenis Kelamin</b></td>
<td> <input type=radio name=jk checked=checked>Pria <br>
<input type=radio name=jk>Wanita
</td>
</tr>

<tr>
<td width=18%><b>UKM yang Anda ikuti saat ini</b></td>
<td>
<input type=checkbox name=wamika >Wamika <br>
<input type=checkbox name=mapala >Mapala <br>

<input type=checkbox name=lain-lain>Lain-Lain,Sebutkan


<input type=text name=lain-lain maxlength=30 size=32><br>
</td>
</tr>

</table>
<tr>
<table bgcolor="white" width="85%" border="1" cellspacing="0"

cellpadding="0">
<td width=18%></td>
<p>
<td valign="middle">
<font size=5><b>
<input type="submit" value="Kirim" name="tblkrm">
<input type="reset" value="Batal" name="tblbtl">
</td></p></tr>
</table>
</body>
</html>

E. KESIMPULAN
Dengan menggunakan tag, alamat HTML dapat menampilkan teks berupa daftar
(list). Hal ini mengingat bahwa sebuah dokumen seringkali berisikan teks-teks yang
berupa daftar. Jika menggunakan atribut-atribut untuk mengatur warna atau
tampilannya,atribut tersebut di letakkan pada tab <BODY>.

F. LISTING PROGRAM

Anda mungkin juga menyukai