Laporan Praktikum Pemrograman WEB MODUL II

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

Laporan Praktikum Pemrograman WEB MODUL II

Documents

Transcript of Laporan Praktikum Pemrograman WEB MODUL II