Andi Fajrin Noer Ahmad - 1929041001 - PTIKA2019 - Pemrograman Web - Tugas Modul 2

PRAKTIKUM MODUL 2 PEMROGRAMAN WEB
HTML (TABLE, FORM, FRAME, HYPERLINK)
DISUSUN OLEH :
NAMA : ANDI FAJRIN NOER AHMAD

NIM : 1929041001
KELAS : PTIK A
DOSEN :
HASRUL BAKRI, S.Pd., M.T.
PRODI PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER
JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
FAKULTAS TEKNIK
UNIVERSITAS NEGERI MAKASSAR
2021
Modul 2
HTML (TABLE, FORM, FRAME, HYPERLINK)
A. Judul
HTML (Table, Form, Frame, Hyperlink)

B. Tujuan
1. Mengenal perintah dasar HTML.
2. Mahasiswa mampu membuat dokumen html menggunakan tabel, form, frame, dan
hyperlink dengan menggunakan text editor dan menampilkannya lewat browser
3. Mahasiswa mampu menyelesaikan tugas mandri html menggunakan tabel, form,
frame, dan hyperlink dengan menggunakan text editor dan menampilkannya lewat
browser
4. Membuat file extensi html sederhana menggunakan text editor dan menampilkan
pada browser.
C. Alat dan Bahan
1. Laptop / PC
2. Notepad / Notepad++ / Text editor lainnya
3. Web browser (Firefox, Google Chrome, Internet Explorer atau yang lainnya)
D. Langkah Kerja
1. Bukalah notepad atau program text editor yang lain.
2. Ketikkan script doukumen html :Simpan (File|Save As), dengan nama
nama_modul2.html (file harus disimpan dengan format .html)
3. Bukalah dokumen yang anda buat tadi dengan cara klik kanan Open with (pilih salah
satu web browser yang tersedia di komputer/PC Anda
4. Analisis dan jelaskan Script Tugas Mandiri
E. Teori Dasar dan Praktikum
1. Tabel
Fungsi Utama tabel adalah menampilkan informasi secara terstruktur, ringkas dan
mudah dibaca dan mengatur tampilan homepage agar lebih menarik. Pada
dasarnya tabel memiliki 4 unsur : Baris, Kolom, Sel, dan Garis.
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
Modul Praktikum Pemrograman WEB Teknik Komputer||13

3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header
Atribut yang berhubungan pada proses pembuatan tabel Html
a) Membuat Tabel
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table boder= 1 >
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>

Output :
Analisis :

b) Menambahkan Judul
Judul tabel: <caption>
Judul baris/kolom: <th> (table header)
<html>
<head>
<title> Membuat Tabel </title>
</head>
<body>
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b>
</caption>
<tr><th>No</th><th>NIM</th><th>Nama</th><th>Kelamin</th></tr>
<tr><td>1</td><td>1929041001</td><td>Andi Fajrin Noer
Ahmad</td><td>Laki Laki</td></tr>
<tr><td>1</td><td>1929041002</td><td>Nuru
l Izzah</td><td>Perempuan</td></tr>
<tr><td>2</td><td>1929041003</td><td>Baso Adam</td><td>Laki
Laki</td></tr>
</table>
</body>
</html>
Output :
Analisis :
c) Membuat Warna Pada Tabel
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">

<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NIM</th><th>Nama</th></tr>
<tr><td bgcolor="blue" width="20">1.</td>
<td bgcolor="red" align="left" valign="middle"
width="80" height="40">1929041001</td>
<td bgcolor="red" align="left" valign="middle" width="180"
height="40"> Andi Fajrin Noer Ahmad </td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="green" align="left" valign="middle"
width="80" height="40">1929041003</td>
<td bgcolor="green" align="left" valign="middle"
width="180" height="40"> Baso Adam </td></tr>
</table>
</body>
Output :
Analisis :
d) Mengatur lebar dan tinggi suatu tabel
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>Baris 1 Kolom 1</td>
</tr>

<tr height=70>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
</tr>
</table>
</body>
</html>
Output:
Analisis :
e) Perataan Sell Tabel

horisontal: atribut align <caption>, <tr>, <td> dan <th>
vertikal: atribut valign <tr>, <td> dan <th>
<table border="1" align="center">
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NIM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">123456</td>
<td align="right" valign="top"
width="180" height="50">Andi Fajrin</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">98765</td>
<td align="left" valign="bottom"
width="180" height="70">Baso Adam</td></tr>
</table>
Output :

Analisis :
f) Mengabungkan baris dan kolom

Menggabungkan beberapa kolom menjadi 1: atribut colspan
Menggabungkan beberapa baris menjadi 1: atribut rowspan
<table border="1" bgcolor="white" align="center">

<b> Tabel Daftar Nilai Mahasiswa Teknik Komputer</b> </caption>
<tr bgcolor= gray ><th rowspan= 2 >No</th>
<th rowspan= 2 >NIM</th> <th rowspan= 2 >Nama</th> <th
colspan= 2 >Nilai</th>
</tr>
<tr bgcolor= gray ><th>UTS</th> <th>UAS</th> </tr>
<tr><td align= center width= 20 >1.</td>
<td align= left valign= middle width= 80 height= 40 >45678</td>
<td align= left valign= middle width= 180 height= 40 >Andi Fajrin</td>
<td align= center valign= middle >70</td> <td align= center
valign= middle >80</td>
</tr>
<tr><td width= 20 >2.</td>
<td align= left valign= middle width= 80 height= 40 >23456</td>
<td align= left valign= middle width= 180 height= 40 >Baso
Adam</td>
<td align= center valign= middle >70</td> <td align= center
valign= middle >80</td>
</tr>
</table>
Output :

Analisis :
g) Cellpading dan cellspasing

atribut cellpading: mengatur spasi antara border dengan tulisan
atribut cellspasing: mengatur spasi antar 2 buah sel
cellpadding="10"
cellspacing="12">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th
colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80" height="40">898989</td>
<td align="left" valign="middle" width="180" height="40">Andi
Fajrin</td>
<td align="center" valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80" height="40">767676</td>
<td align="left" valign="middle" width="180" height="40">Baso
Adam</td>
<td align="center" valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
</table>
Output :

10
Analisis:
h) Form
Menerima informasi atau meminta umpan balik dari user dan memproses informasi
tersebut di server
Standar penulisan:
. </form>
i) Text Box
Tag: <input>

<body>
<b>Login: <b> <br>
<form method="post">
<table>
<tr> <td>User:</td> <td><input type="text" name="user"
size="20"></td></tr>
<tr> <td>Password:</td> <td><input type="password" name="password"
size="20"></td></tr>
</table>
</form>
</body>
Output :
Analisis :
j) Submit dan reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke
server. Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua
masukan yang ditulis dalam form.
<body>
<b>Data Pengunjung: <b> <br>
<form method="post" action="data mahasiswa.html">
<table>
<tr> <td>Nama:</td>
<td><input type="text" name="nama" size="20"></td></tr>
<tr> <td>Alamat:</td>
<td><input type="text" name="NIM" size="20"></td></tr>
<tr> <td>Alamat:</td>
<td><input type="text" name="alamat" size="20"></td></tr>
</table>
<input type="submit" value="Simpan" name="t1">
<input type="reset" value="Reset" name="t2">
</form>
</body>
Output :

Analisis :
k) Checkbox
Checkbox berfungsi Untuk memberi beberapa pilihan kepada user berbentuk kotak.
<html>
<head>
<title> Belajar Membuat Form dengan checkbox</title>
</head>
<body>
<form method="post" action="bacaanmahasiswa.html">
<b>Bacaan Mahasiswa: </b><br>
<input type="checkbox" name="bacaan" value="to"> Tabloid Olahraga <br>
<input type="checkbox" name="bacaan" value="jurnal"> Jurnal Ilmiah<br>
<input type="checkbox" name="bacaan" value="aw"> Artikel web <br>
<input type="checkbox" name="bacaan" value="ltn"> Liputan 6 <br>
<input type="submit" value="Simpan" name="t1">
</form>
</body>
</html>
Output:

Analisis :
F. Tugas Mandiri
1.Buatlah Kode dan tampilkan hasil dokumen HTML tersebut: Radio Button,
Drop Down, Text Area, Frame Horisontal, Frame Vertikal, Frame Gabungan
H-V.
Jawab :
• Radio Button
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki<br>
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>

• Drop Down
<div class="menu">
<ul id="navigasi">
<li><a href="index.php">Beranda</a></li>
<li><a href="index.php">Tentang</a></li>
<li><a href="#">Berita</a>
<ul>
<li><a href="index.php">International</a></li>
<li><a href="index.php">National</a></li>
</ul>
</li>
</ul>
</div>
• Text Area
<!DOCTYPE html>

<html>
<head>
<title>Belajar Tag Textarea HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<h4>Tag textarea dengan atribut: name</h4>

<textarea name="komentar1">
Silahkan isi komentar anda
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + cols="40"</h4>

<textarea name="komentar2" cols="40">
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>

<textarea name="komentar3" cols="40" rows="5"> Silahkan
isi komentar anda
</textarea>
<br />
<h4>Tag textarea dengan atribut: name + readonly</h4>

<textarea name="komentar4" readonly="readonly">

</textarea>
<br />
<h4>Tag textarea dengan atribut: name + disabled</h4>

<textarea name="komentar5" disabled="disabled"> Silahkan
isi komentar anda
</textarea>
</form>
</body>
</html>
• Frame Horizontal
<html>

<head>
<title>membuat frame horizontal</title>
</head>
<frameset cols=”40%,*”>
<frame name=”atas”
src=”atas.html”
scrolling=”no”>
<frame name=”bawah”>
src=bawah.html>
</frameset>
</html>
• Frame Vertikal
<html>
<head>
<title>Frame Vertical</title>
</head>
<frameset rows="25%, 50%, 25%">
<frame name="frame1" src="frame1.html">
</frameset>

</html>
• Frame Gabungan V-H

<html>
<head>
<title>Frame campuran</title>
</head>
<frameset rows="25%, *">
<frame name="frame1" src="frame1.html" scrolling="no"
noresize="noresize">
<frameset cols="25%, *">
<frame name="frame3" src="frame3.html" scrolling="auto">
</frameset>
<noframes>
<body>
Maaf, browser Anda tidak mendukung penggunaan frame.
</body>
</noframes>
</frameset>
</html>
2. Buatlah Tabel Kartu Keluarga anda.
Jawab :
Script :
<html>
<head>
<title>Kartu Keluarga</title>
</head>
<body>
<center> <h1> KARTU KELUARGA </h1>

Modul Praktikum
<h2> No. 7306070509010001 </h2>Pemrograman WEB Teknik Komputer||29
</center>
<br>
<left>
Nama Kepala Keluarga : Ahmad<br> Alamat : BTN Nusa Indah<br>
RT/RW : 11/02<br>
Kode Pos : 92161<br><left>
<br>
<right>
Desa/Kelurahan : Bontoala<br> Kecamatan : Pallangga<br> Kabupaten : Gowa<br>
Provinsi : Sulawesi Selatan<br></right>
<br>
<tr><th>No</th>
<th>Nama Lengkap</th>
<th>NIK</th>
<th>Jenis Kelamin</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
<th>Agama</th>
<th>Pendidikan</th>
<th>Jenis Pekerjaan</th>
<th>Golongan Darah</th></tr>
<tr><td>1</td>
<td>AHMAD</td>
<td>7306070509020001</td>
<td>LAKI-LAKI</td>
<td>SELAYAR</td>
<td>26-05-1965</td>
<td>ISLAM</td>
<td>STRATA I</td>
<td>SWASTA</td>
<td>O</td>
</tr>
<tr><td>2</td>
<td>SAADIAH</td>
<td>7306070509020002</td>
<td>PEREMPUAN</td>
<td>MAKASSAR</td>
<td>27-06-1968</td>
<td>ISLAM</td>
<td>STRATA I</td>
10
<td>PNS</td>
<td>O</td>
</tr>
<tr><td>3</td>
<td>ANDI FAJRIN NOER AHMAD</td>
<td>7306070509020003</td>
<td>LAKI-LAKI</td>
<td>MAKASSAR</td>
<td>04-09-2002</td>
<td>ISLAM</td>
<td>SLTP/SEDERAJAT</td>
<td>MAHASISWA</td>
<td>O</td>
</tr>
</table>
<BR>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Status Perkawinan</th>
<th rowspan="2">Tanggal Perkawinan</th>
<th rowspan="2">Status Hubungan Dalam Keluarga</th>
<th rowspan="2">Kewarganegaraan</th>
<th colspan="2">Nama Orang Tua</th>
</tr>
<tr>
<td>Ayah</td>
<td>Ibu</td>
<tr>
<td>1</td>
<td>KAWIN</td>
<td>05-09-2001</td>
<td>KEPALA KELUARGA</td>
<td>WNI</td>
<td>DG.JARRA</td>
<td>DG.SINGARA</td>
</tr>

<tr>
11
<td>2</td>
<td>KAWIN</td>
<td>05-09-2001</td>
<td>ISTRI</td>
<td>WNI</td>
<td>DG.LALLO</td>
<td>DG.SAMBARA</td>
</tr>
<tr>
<td>2</td>
<td>BELUM KAWIN</td>
<td>-</td>
<td>ANAK</td>
<td>WNI</td>
<td>AHMAD</td>
<td>SAADIAH</td>
</tr>
</table>
</body>
</html>
3. Buatlah Form Pengisian dibawah ini :
Jawab :

12
Script :
<html>
<head>
<title> Form Registrasi Account TCPNS
</title>
</head>
<body>
<body bgcolor="#d1edf2">
<center>
<h2>Form Registrasi Account TCPNS</h2>
<br>
<h3>Silahkan isi form dibawah ini dengan baik dan benar</h3>
</center>
<center>
<table>

13
<tr>
<td>Nama :</td>
<tr> <td>Email :</td>
<td><input type="text" name="Email" size="20"></td></tr>
<tr> <td>Password :</td>
<td><input type="text" name="Password" size="20"></td></tr>
<tr>
<td>Jenis Kelamin :</td>
<td>
<select name="Jenis Kelamin">
<option value="" selected>Pilih Jenis Kelamin</option>
<option value="1"> Perempuan </option>
<option value="2"> Laki-laki </option>
</select>
</td></tr>
<tr>
<td>Tanggal Lahir :</td>
<td>
<select name="Tgl">

14
<option value=""selected> Tgl : </option>
<option value=""> 1 </option>

15
</select>
<td>Bulan :</td>
<td>
<select name="bulan">
<option value=""selected> bulan : </option>

16
</select>
</td>
<td>Tahun:</td>
<td>
<select name="tahun">
<option value=""selected> Tahun : </option>
</select>
</td></tr>
</table>

17
</center>
<center><input type="submit" value="Kirim" name="t1"></center>
</form>
</body>
</html>
4. Buatlah Form seperti dibawah ini :

Jawab :
Script :
<html>
<head>
<title> Form Pendaftaran </title>
</head>

18
<form>
<body>
<h2>Form Pendaftaran </h2> <br>
<table>
<tr>
<td>Nama :</td>
<tr> <td>Alamat :</td>

<td><input type="text" name="Alamat" size="20"></td></tr>
<tr> <td>Kota :</td>

<td><input type="text" name="Kota" size="20"></td></tr>
<tr> <td>Telp :</td>

<td><input type="text" name="Telepon" size="20"></td></tr>
<td>Jenis Kelamin :</td>
<td><input type="radio" name="jenis1" value="Pria"> Pria

<input type="radio" name="jenis2" value="wanita"> Wanita </td></tr>
<td>Hobby :</td>
<td><input type="checkbox" name="hobby1" value="Musik"> Musik

<input type="checkbox" name="hobby2" value="Olahraga"> Olahraga
<input type="checkbox" name="hobby3" value="Jalan"> Jalan </td></tr>

19
<td>Agama :</td>
<td>
<select name="Agama">
<option value="">--Pilih Agama--</option>
<option value="1" selected> Islam </option>
<option value="2">Kristen </option>
<option value="3">Hindu </option>
<option value="4">Buddha</option>
<option value="5">Konghucu </option>
</select>
</td></tr>
<td>Asal Sekolah :</td>

<td><input type="text" name="Asal Sekolah" size="20"></td></tr>
<td>Jurusan :</td>
<td><input type="text" name="Jurusan" size="20"></td></tr>
</table>
<input type="submit" value="Kirim" name="t1">
</form>
</body>
</html>
5. Buatlah Tabel seperti dibawah ini
Jawab :

20
Script :
html>
<head>
<title> menggabungkan baris pada tabel </title>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td rowspan="2">Nama</td>
<th colspan="2">Status Kelulusan</th>
</tr>
<tr>
<td>Nilai</td>
<td>Kriteria</td>
</tr>
<tr>
<td>Andi Fajrin</td>
<td>67</td>
<td>Tidak Lulus</td>

21
</tr>
</tbody>
</table>
</body>
</html>

22

Andi Fajrin Noer Ahmad - 1929041001 - PTIKA2019 - Pemrograman Web - Tugas Modul 2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Andi Fajrin Noer Ahmad - 1929041001 - PTIKA2019 - Pemrograman Web - Tugas Modul 2

Judul Asli:

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM MODUL 2 PEMROGRAMAN WEB

HTML (TABLE, FORM, FRAME, HYPERLINK)

NAMA : ANDI FAJRIN NOER AHMAD

HASRUL BAKRI, S.Pd., M.T.

PRODI PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER

UNIVERSITAS NEGERI MAKASSAR

HTML (Table, Form, Frame, Hyperlink)

Modul Praktikum Pemrograman WEB Teknik Komputer||13

Atribut yang berhubungan pada proses pembuatan tabel Html

Modul Praktikum Pemrograman WEB Teknik Komputer||14

Modul Praktikum Pemrograman WEB Teknik Komputer||15

c) Membuat Warna Pada Tabel

Modul Praktikum Pemrograman WEB Teknik Komputer||16

d) Mengatur lebar dan tinggi suatu tabel

Modul Praktikum Pemrograman WEB Teknik Komputer||17

e) Perataan Sell Tabel

Modul Praktikum Pemrograman WEB Teknik Komputer||18

f) Mengabungkan baris dan kolom

<table border="1" bgcolor="white" align="center">

Modul Praktikum Pemrograman WEB Teknik Komputer||19

g) Cellpading dan cellspasing

Modul Praktikum Pemrograman WEB Teknik Komputer||1

Modul Praktikum Pemrograman WEB Teknik Komputer||20

j) Submit dan reset

Modul Praktikum Pemrograman WEB Teknik Komputer||21

Modul Praktikum Pemrograman WEB Teknik Komputer||22

<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki<br>

<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>

Modul Praktikum Pemrograman WEB Teknik Komputer||23

Modul Praktikum Pemrograman WEB Teknik Komputer||24

<h4>Tag textarea dengan atribut: name</h4>

<h4>Tag textarea dengan atribut: name + cols="40"</h4>

<h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>

<h4>Tag textarea dengan atribut: name + readonly</h4>

Modul Praktikum Pemrograman WEB Teknik Komputer||25

<h4>Tag textarea dengan atribut: name + disabled</h4>

Modul Praktikum Pemrograman WEB Teknik Komputer||26

Modul Praktikum Pemrograman WEB Teknik Komputer||27

• Frame Gabungan V-H

<center> <h1> KARTU KELUARGA </h1>

Modul Praktikum Pemrograman WEB Teknik Komputer||2

3. Buatlah Form Pengisian dibawah ini :

Modul Praktikum Pemrograman WEB Teknik Komputer||2

<title> Form Registrasi Account TCPNS

<h2>Form Registrasi Account TCPNS</h2>

<h3>Silahkan isi form dibawah ini dengan baik dan benar</h3>

Modul Praktikum Pemrograman WEB Teknik Komputer||2

<td><input type="text" name="nama" size="20"></td></tr>

<tr> <td>Email :</td>

<td><input type="text" name="Email" size="20"></td></tr>

<tr> <td>Password :</td>

<td><input type="text" name="Password" size="20"></td></tr>

<td>Jenis Kelamin :</td>

<select name="Jenis Kelamin">

<option value="" selected>Pilih Jenis Kelamin</option>

<option value="1"> Perempuan </option>

<option value="2"> Laki-laki </option>

<td>Tanggal Lahir :</td>

Modul Praktikum Pemrograman WEB Teknik Komputer||2

<option value=""> 1 </option>

<option value=""> 2 </option>