Scribd
Upload
39 views20 pages

Laporan Web Programming UM

The document is a report on Module 2 Tables and Forms. It consists of 16 sections that demonstrate different HTML table and form syntax and features, including: creating basic tables, adding table attributes, using row and column spans, setting background and text colors, and creating forms with various input fields like text, password, checkbox, radio button, select dropdown and submit buttons. Screenshots are provided for each code example to show the rendered output.

Uploaded by

andikafibycandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views20 pages

Laporan Web Programming UM

The document is a report on Module 2 Tables and Forms. It consists of 16 sections that demonstrate different HTML table and form syntax and features, including: creating basic tables, adding table attributes, using row and column spans, setting background and text colors, and creating forms with various input fields like text, password, checkbox, radio button, select dropdown and submit buttons. Screenshots are provided for each code example to show the rendered output.

Uploaded by

andikafibycandra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

LAPORAN MODUL 2 TABEL DAN FORM

Disusun untuk memenuhi matakuliah Pemrogramman Berbasis Web Dibimbing oleh Bapak
Achmad Hamdan, S.Pd., M.Pd.

Disusun Oleh :
Andika Fiby Candra Pratama
130533608141
OFF A 16

UNIVERSITAS NEGERI MALANG


FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA
SEPTEMBER 2018
1. Tabel.html
Sintak :

<!DOCTYPE HTML>
<head>
<title>DAsar HTML</title>
</head>
<body>
<table border=2>
<caption>Data Diri Mahasiswa UM</caption>
<!-- Header -->
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!-- Barisan data pertama -->
<tr>
<th>1</th>
<th>Andika fiby candra</th>
<th>jalan ikan gurami</th>
</tr>
</table>
</body>
</html>

Hasil screen shot


2. AtributTabel.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Atribut Tabel</title>
</head>
<body>
<table border="1" align="center" cellspacing="0" cellpadding="10">
<caption>Daftar Harga Sembako</caption>
<tr><th>No</th><th>Nama</th><th>Harga</th></tr>
<tr><td>1</td><td>Beras</td><td>Rp.15.000</td></tr>
<tr><td>2</td><td>Minyak</td><td>Rp.25.000</td></tr>
<tr><td>3</td><td>Gula</td><td>Rp.20.000</td></tr>
<tr><td>4</td><td>Bawang</td><td>Rp.35.000</td></tr>
</table>
</body>
</html>

Hasil Screen shot :


3. AtributTabel2.html
Sintak :

<!DOCTYPE HTML>
<head>
<title>Atribut Width Tabel 2</title>
</head>
<body>
<table border="1" Align="center" cellspasing="0" cellpadding="10">
<caption>Daftar Nama Mahasiswa</caption>
<tr>
<th>No</th>
<th width="150">Nama</th>
<th width="50">Fakultas</th>
</tr>
<tr>
<td>1</td><td>Andika</td><td>Teknik</td>
</tr>
</table>
</body>
</html>

Hasil Screen shot :


4. WarnaTabel.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Background Tabel</title>
</head>
<body>
<table border="1" bgcolor="yellow">
<tr>
<th>No</th>
<th width="150">Negara</th>
</tr>
<tr><td>1.</td><td>Indonesia</td></tr>
<tr><td>2.</td><td>Thailand</td></tr>
<tr><td>3.</td><td>Singapura</td></tr>
</table>
</body>
</html>

Hasil Screen shot :


5. WarnaTabel2.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Warna</title>
</head>
<body>
<table border="1" bgcolor="#f0f8ff">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td bgcolor="#FFDEAD">GHI</td>
<td><font color="#a52aa2a">JKL</font></td>
</tr>
</table>
</body>
</html>

Hasil Screen shot :


6. TabelRowspan.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Tabel Rowspan</title>
</head>
<body>
<table border="1">
<caption>Dartar Wilayah dan Kota</caption>
<tr>
<td rowspan="3">Jawa Tengah</td>
<td>Semarang</td>
</tr>
<tr><td>Kudus</td></tr>
<tr><td>Solo</td></tr>
<tr>
<td rowspan="4">Jawa Timur</td>
<td>Surabaya</td>
</tr>
<tr><td>Malang</td></tr>
<tr><td>Kediri</td></tr>
<tr><td>Madiun</td></tr>
</table>

</body>
</html>

Hasil Screen shot :


7. TabelColspan.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Tabel Colspan</title>
</head>
<body>
<table border="1" width="250">
<caption>Daftar Target</caption>
<tr height="40">
<th colspan="2">Area Jawa Tengah</th>
</tr>
<tr><td>Semarang</td><td>15.000.000</td></tr>
<tr><td>Kudus</td><td>11.000.000</td></tr>
<tr><td>Solo</td><td>14.000.000</td></tr>

<tr height="40">
<th colspan="2">Area Jawa Timur</th>
</tr>
<tr><td>Surabaya</td><td>20.000.000</td></tr>
<tr><td>Malang</td><td>11.000.000</td></tr>
<tr><td>Kediri</td><td>14.000.000</td></tr>
</table>
</body>
</html>
Hasil Screen shot :
8. RowColspan.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Rowspan dan Colspan</title>
</head>
<body>
<table border="1">
<caption>Daftar Pengusaha</caption>
<tr>
<th colspan="2" rowspan="2">Pengusaha</th>
<th colspan="3">Kota</th>
</tr>
<tr>
<th>Semarang</th><th>Kudus</th><th>Solo</th>
</tr>
<tr>
<th rowspan="2">Jenis Kelamin</th>
<th>pria</th>
<td>30</td><td>20</td><td>30</td>
</tr>
<tr>
<th>Wanita</th>
<td>20</td><td>20</td><td>18</td>
</tr>
</table>
</body>
</html>
Hasil Screen shot :
9. AlignValign.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Align dan Valign</title>
</head>
<body>
<table border="1" width="200">
<tr height="50">
<td>A</td>
<td align="center">B</td>
<td align="right">C</td>
</tr>
<tr height="50">
<td align="right" valign="top">D</td>
<td valign="bottom">E</td>
<td>F</td>
</tr>

</table>

</body>
</html>
Hasil Screen shot :
10. TugasTabel1.html
Sintak :

Hasil Screen shot :


11. LatFoem.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Membuat Form</title>
</head>
<body>
<form action="info.html" method="post">
Nama <input type="text" size="15" maxlength="20"><br>
Alamat <input type="text" size="25" maxlength="50"><br>
<input type="submit" value="KIRIM">
<input type="reset" value="HAPUS">
</form>

</body>
</html>
Hasil Screen shot :
12. LatPassword.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Membuat Form</title>
</head>
<body>
<form>
username
<input type="text"><br>
password
<input type="password"><br>
<input type="submit" value="Login">
</form>

</body>
</html>
Hasil Screen shot :
13. LatCheckbox.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Membuat Form</title>
</head>
<body>
<form>
buah yang anda sukai : <br>
<input type="checkbox">anggur<br>
<input type="checkbox">Jeruk<br>
<input type="checkbox">Melon<br>
</form>
</body>
</html>
Hasil Screen shot :
14. LatRadio.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>membuat Form</title>
</head>
<body>
<form>
Jenis Kelamin : <br>
<input type="radio" name="sex" checked="">Pria<br>
<input type="radio" name="sex">Wanita<br>
<hr width="20000" color="red">
Agama : <br>
<input type="radio" name="Agama" value="I"> Islam<br>
<input type="radio" name="Agama" value="K"> Kristen<br>
<input type="radio" name="Agama" value="T"> Katolik<br>
<input type="radio" name="Agama" value="B"> Budha<br>
<input type="radio" name="Agama" value="H"> Hindu<br>
<input type="radio" name="Agama" value="L"> Lain-lain<br>
</form>
</body>
</html>
Hasil Screen shot :
15. LatSelect.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Tag Select</title>
</head>
<body>
<form>
<p>jasa kirim/kurir apa yang anda gunakan?</p>
<label>Kurir:
<select>
<option value="pos">POS Indonesia</option>
<option value="jne">JNE</option>
<option value="tiki">TIKI</option>
<option value="wahana">Wahana</option>
</select>
</label>
</form>

</body>
</html>
Hasil Screen shot :
16. TugasForm.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Tugas Praktikum Form</title>
</head>
<body>
<table>
<h3>INPUT DATA MAHASISWA</h3>
<form action="info.html" method="post">
<tr>
<td>Nama</td><td>:<td><input type="text" size="25"
maxlength="50"></td>
</tr>
<tr>
<td>Usia</td><td>:<td><input type="text" size="25"
maxlength="50"></td>
</tr>
<tr>
<td>Kelamin</td> <td>:</td><td><input type="radio"
name="sex">Man<input type="radio" name="sex">Woman<br>
<label></td>
</tr>
<tr>
<td>Jurusan</td><td>:</td><td><select>
<option value="informatika">Informatika</option>
<option value="Elektro">Elektro</option>
<option value="Sipil">Sipil</option>
<option value="mesin">Mesin</option>
</select>
</label>
</td>
</tr>
<tr>
<td>Email</td><td>:</td><td><input type="text" size="25"
maxlength="50"></td>
</tr>
<tr>
<td>Web</td><td>:</td><td><input type="text" size="25"
maxlength="50"></td>
</tr>
<tr>
<td>Hobi</td><td>:</td><td><input type="checkbox">Membaca<br>
<input type="checkbox">Olahraga<br>
<input type="checkbox">Mengaji<br>
<input type="checkbox">Menulis<br>

</td>
</tr>
<tr>
<td>Password</td> <td>:</td><td><input type="Password" name=""></td>
</tr>
<tr>
<td></td><td></td><td><input type="submit" value="SIMPAN"><br>
</tr>
</form>
</table>
</body>
</html>
Hasil Screen shot :
17. ValidasiInputan.html
Sintak :

<!DOCTYPE html>
<html>
<head>
<title>Form Validasi</title>
</head>
<body>
<table>
<form>
<tr>
<td width="30" height="30" size="10">Nama
Lengkap</td><td>:</td><td><input type="text" size="25" maxlength="100"
name="nama" placeholder="Masukkan Nama Lengkap anda" ></td>
</tr>
<tr>
<td width="30" height="30">User Name</td><td>:</td><td><input
type="text" size="25" maxlength="100" name="username" placeholder="Masukkan
Username" ></td>
</tr>
<tr>
<td width="30" height="30">Password</td><td>:</td><td><input
type="Password" size="25" maxlength="10" name="pass" placeholder="Masukkan
Password" ></td>
</tr>
<tr>
<td width="30" height="30">Email</td><td>:</td><td><input type="text"
size="25" maxlength="100" name="Email" placeholder="Masukkan Alamat Email Anda"
></td>
</tr>
<tr>
<td width="30" height="30">Telepon</td><td>:</td><td><input
type="text" size="25" maxlength="100" name="Email" placeholder="Masukkan Alamat
Email Anda" ></td>
</tr>
<tr>
<td></td><td></td><td><input type="submit" value="Buat Akun Saya"
></td>
</tr>

</form>
</table>
</body>
</html>
Hasil Screen shot :

You might also like