Laporan 2

LAPORAN PRAKTIKUM KE-2
TABEL DAN FORM

Disusun Oleh:
RIZALINA NUR AFIFAH
160533611512
PTI Offering C
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN ELEKTRO
PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA
SEPTEMBER 2018
 LATIHAN
Nama File : Tabel.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Dasar HTML</title>
</head>
<body>
<table border= 1>
<caption> Judul Tabel</caption>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>No</td>
<td>Ibnu</td>
<td> Jl. Jombang</td>
</tr>
</table>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk menampilkan
table . Pada program di atas menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk
mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan merupakan case sensitive
yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil pada penulisan suatu
program. Kemudian untuk menampilkan kepala dari suatu website yang akan ditampilkan pada
tab menu di sebuah website dapat menggunakan perintah <head>. Dan untuk menampilkan
judul dari tab menu website tersebut menggunakan perintah <title>. Kemudian perintah <body>
merupakan suatu perintah yang digunakan untuk menampilkan suatu table yang dapat dibuat
menggunakan tag <table>…</table>. Kemudian fungsi border =1 pada tag table adalah untuk
memberikan bingkai yang terdapat pada table tersebut. Kemudian untuk memberikan suatu judul
table dapat menggunakan perintah <caption>…</caption>. Pada latihan ini terdapat 2 buah baris
dan 3 buah kolom. Dimana untuk membuat suatu baris dapat menggunakan perintah <tr>…</tr>.
Kemudian untukj membuat suatu kolom dapat menggunakan perintah / tag <td>…</td>. Pada
table ini juga terdapat 3 judul kolom yang mana hal tersebut dapat dibuat menggunakan tag <th>
… </th>.
Nama File : Atribut.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled 1</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>
Output :
Analisis
table dengan disertai atribut. Pada program di atas menggunakan deklarasi <!DOCTYPE
HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut
bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar dan
huruf kecil pada penulisan suatu program. Kemudian untuk menampilkan kepala dari suatu
website yang akan ditampilkan pada tab menu di sebuah website dapat menggunakan perintah
<head>. Dan untuk menampilkan judul dari tab menu website tersebut menggunakan perintah
<title>. Kemudian pada bagian body juga terdapat suatu perintah yang digunakan untuk
membuat suatu table. Dimana dalam pembuatan suatu table ini menggunakan tag yang sama
dengan latihan sebelumnya. Tetapi ada hal yang membedakan antara latihan ini dengan latihan
yang sebelumnya. Hal yang membedakan tersebut yaitu terdapat suatu elemen yang dapat
digunakan untuk memformat suatu tampilan table. Dimana atribut yang digunakan dalam
mengatur tampilan table disini adalah menggunakan align yang digunakan untuk mengatur posisi
table, cellspasing digunakan untuk menentukan spasi dari setiap sel/kolom. Kemudian tag
cellpadding digunakan untuk mengatur spasi antara border sel dengan isinya. Pada latihan ini
juga terdapat perbedaan jumlah baris dan kolom dimana jumlah baris yang dapat dibuat dengan
menggunakan tag <tr>…</tr> sebanyak 5 baris. Dan juga terdapat jumlah kolom yang dapat
dibuat dengan menggunakan tag <td>…</td> sebanyak 3 kolom. Dan juga terdapat perintah
yang dapat digunakan untuk membuat judul suatu kolom yang dapat dilakukan dengan
menggunakan tag <th>…</th>.
Nama File : AtributTable2.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Atribut Width Tabel</title>

</head>
<body>
<table border="1" align="center" cellspacing="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>Muhaimin</td><td>Teknik</td>
</tr>
</table>
</body>
</html>
Output :
Analisis
suatu table dengan disertai atribut. Perintah <head> digunakan untuk menampilkan kepala dari
suatu dokumen HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu
website dapat menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen
terdapat suatu perintah yang digunakan untuk membuat suatu table dengan ukuran yang dapat
ditentukan sesuai dengan keinginan. Pada latihan 3 ini hamper sama dengan latihan 2 hanya saja
pada latihan 3 ini terdapat suatu perintah/tag yang digunakan untuk menentukan lebar table/sel,
yang mana dapat dilakukan dengan menggunakan perintah width kemudian menentukan ukuran
yang akan disesuaikan sesuai dengan keinginannya. Pada latihan ini sel yang dilakukan
perubahan ukuran adalah sel dengan nama kolom “Nama” dan juga “Fakultas”.
Nama File : WarnaTabel.htm
Script Program :
<!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> Malaysia</td></tr>
</table>
</body>
</html>
Output :
Analisis :
Program di atas merupakan suatu perinta yang digunakan untuk membuat pewarnaan pada suatu
tabel. Dimana dalam pembuatan website tersebut terdapat pendeklarasian perintah <head> yang
digunakan untuk menampilkan kepala dari suatu dokumen HTML. Kemudian untuk memberikan
judul pada kepala dokumen atau tab menu website dapat menggunakan perintah <title>.
Kemudian pada bagian <body> isi dokumen terdapat suatu perintah yang digunakan untuk
memberikan warna pada background table, diaman untuk memberikan background warna pada
suatu table maka dapat menggunakan perintah/atribut bgcolor. Tetapi untuk pembuatan table
pada latrihan ini adalah sama dengan latihan sebelumnya yaitu menggunakan tag
<table>…</table>
Nama File : WarnaTabel2.htm
Script Program :
<!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><fornt color="#A52A2A">JKL</fornt></td>
</tr>
</table>
</body>
</html>
Output :
Analisis
Program diatas merupakan suatu perintah yang digunakan untuk melakukan pewarnaan table
pada setiap selnya. Dimana dalam pembuatan website tersebut terdapat pendeklarasian perintah
<head> yang digunakan untuk menampilkan kepala dari suatu dokumen HTML. Kemudian
untuk memberikan judul pada kepala dokumen atau tab menu website dapat menggunakan
perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat suatu perintah yang
digunakan untuk memberikan warna di setiap selnya/kolom. Jadi ketika ingin melakukan
perintan ini maka perintahya hampir sama dengan perintah ketka melakukan pewarnaan pada
table, hanya saja terdapat tag tambahan yang digunakan untuk melakukan pewarnaan di setiap
kolom/selnya. Dan untuk melakukan hal tersebut maka dapat menggunakan perintah <td
bgcolor="#FFDEAD">GHI</td>.
Nama File : TabelRowspan.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tabel Rowspan</title>
</head>
<body>
<table border="1">
<caption>Daftar 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>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk
menggabungkan sel antar baris. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan
merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf
kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala dari suatu dokumen
HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu website dapat
menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat suatu
perintah yang digunakan untuk menggabungkan sel antar baris. Dimana pada latihan ini terdapat
penggabungan sel antara baris ke 1,2,3, dan juga penggabungan sel antara baris ke 4,5,6,7 yang
semuanya berada pada kolom ke-1. Dimana untuk melakukan penggabungan sel antara abris ke
1,2,3 maka dapat menggunakan perintah /atribut “colspan” yaitu <td rowspan="3">Jawa
Tengah</td> yang artinya system akan menggabungkan 3 baris yang berada pada kolom
pertama. Dan untuk menggabungkan sel antara baris ke4,5,6,7 maka dapat menggunakan
perintah <td rowspan="4">Jawa Timur</td>. Dimana arti dari tag tersebut adalah suatu
system akan menggabungkan 4 baris selanjutnya yang berada pada kolom pertama.
Nama File : TabelColspan.htm
Script Program :
<!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>12.000.000</td></tr>
<tr><td>Kediri</td><td>13.000.000</td></tr>
</table>
</body>
</html>
Output :
Analisis
menggabungkan sel antar kolom. Pada program di atas menggunakan deklarasi <!DOCTYPE
huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
perintah yang digunakan untuk menggabungkan sel antar kolom dengan menggunakan perintah /
atribut COLSPAN. Pada latihan ini terdapat suatu perintah yang digunakan untuk mengatur
tinggi dari sebuah kolom yaitu menggunakan perintah <tr height="40">. Kemudian untuk
menggabungkan sel antar kolom pada latihan ini menggunakan perintah <th
colspan="2">Area Jawa Tengah</th> yang artinya system akan menggabungkan 2 sel antar
kolom yang berada pada baris ke 1 dimana sel yang digabungkan ini merupakan sel yang
digunakan untuk mengisis judul kolom. Kemudian juga terdapat suatu perintah yang digunakan
untuk menggabungkan sel antar kolom pada latihan ini menggunakan perintah <th
colspan="2">Area Jawa Timur</th> yang mana pada perintah ini akan menggabungkan 2
kolom yang berada pada baris ke 5.
Nama File : RowColspan.htm
Script Program :
<!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>8</td><td>18</td>
</tr>
</table>
</body>
</html>
Output :
Analisis
menggabungkan atribut rowspan dan colspan. Pada program di atas menggunakan deklarasi
<!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi
tersebut bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf
besar dan huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut
terdapat pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala dari suatu
dokumen HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu
terdapat suatu perintah yang digunakan untuk untuk menggabungkan atribut rowspan dan
colspan. Pada latihan ini terdapat penggabungan kolom antar sel yaitu berada pada kolom
pertama dan kedua dan juga terdapat penggabungan sel antar kolom yang terdapat pada baris
pertama dan kedua dan juga berada pada kolom pertama dan kedua. Untuk menggabungkan
keduanya tersebut maka dapat digunakan menggunakan perintah <th colspan="2"
rowspan="2">Pengusaha</th>. colspan="2" atribut ini digunakan untuk menggabungkan 2

kolom, dan atribut rowspan="2" digunakan untuk menggabungkan 2 baris yang nantinya
kesemua perntah tersebut akan berada pada baris pertama. Kemudian masih berada pada baris
pertama juga terdapat suatu perintah yang digunakan unruk menggabungkan kolom antar baris.
Dimana pada perintah ini akan menggabungkan 3 kolom sekaligus untuk diisi dengan judul
kolom Kota. Kemudian pada baris kedua juga terdapat suatu perintah yang akan diisi dengan jdul
kolom berupa nama masing-masing kota. Kemudian pada baris ke 4 juga terdapat suatu
perinta yang digunakan untuk menggabungkan baris antar kolom. Dimana atribut
yang digunakan untuk melakukan perintah tersebut adalah <th rowspan="2">Jenis
Kelamin</th> yang artinya system akan menggabungkan 2 baris yang berada pada kolom ke 1.
Nama File : AlignValign.htm
Script Program :
<!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>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk mengatur
posisi teks pada suatu tabel. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat 3 kolom
dan 2 baris yang masing-masing sel diisi dengan teks. Pada baris pertama kolom pertama diisi
dengan teks normal artinya posisi teknya tidak diatur, kemudian pada baris pertama kolom kedua
terdapat suatu atributa yang digunakan untuk mengatur posisi teks berada di tengah secara
horizontal yaitu menggunakan perntah <td align ="center"> B </td>. Kemudian pada
baris pertma kolom ketiga terdapat suatu teks yang beri atribut <td align="right">C</td>
yang artinya teks tersebut akan berada diseelah kanan secara horizontal. Kemudian pada baris
kedua kolom pertama terdapat suatu perintah <td align="right" valign="top">D</td>
yang digunakan untuk membuat teks tersebut berada di sebelah kanan (dengan menggunakan
atribut align)dan juga menggunakan atribut valign=”top” untuk membuat teks berada di atas.
Kemudian untuk baris kedua kolom kedua terdapat suatu perintah yang digunakan untuk
membuat teks berada di bawah secara, maka dapat menggunakan atribut valign=”bottom”.
Kemudian untuk baris kedua kolom ketiga teks berada pada kondisi normal yaitu berada di
sebalh kiri.
Nama File : LatForm.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Membuat Form</title>
</head>
<body>
<form action="info.htm" 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="KIRIM" />
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program form HTML yang akan digunakan untuk suatu
form yang melibatkan field teks, tombol submit, dan tombol reset. Pada program di atas
menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag
html yang mana deklarasi tersebut bukan merupakan case sensitive yang artinya tidak
membedakan penggunaan huruf besar dan huruf kecil pada penulisan suatu program. Dimana
dalam pembuatan website tersebut terdapat pendeklarasian perintah <head> yang digunakan
untuk menampilkan kepala dari suatu dokumen HTML. Kemudian untuk memberikan judul pada
kepala dokumen atau tab menu website dapat menggunakan perintah <title>. Kemudian pada
bagian <body> isi dokumen terdapat suatu perintah yang digunakan untuk menampilkan suatu
form dengan menggunakan tag <form>…</form>. Kemudian pada tag form tersebut terdapat
suatu atribut “action” yang digunakan untuk menentukan URL yang akan dijalankan, dimana
jika URL tersebut tidak ditentukan maka akan menjalankan halaman web itu sendiri. Kemudian
pada suatu form tersebut terdapat perintah untuk mengisikan suatu nama dengan menggunakan
tipe text yaitu perintah Nama <input type="text" size="15" maxlength="20"/><br/>
dimana pada tipe text tersebut ukuran kotak masukan yang tampil untuk suatu teks nama adalah
15, kemudian jumlah karakter yang dapat dimasukkan dalam kotak teks tersebut adalah 20.
Begitupun pada alamat ha,pir sama dengan usia hanya saja atribut size=”25” dan atribut
maxlength=”50”. Kemudian untuk membuat tombol submit dan reset dapat menggunakan tipe
submit pada tag <input> akan membentuk tombol submit tetapi value nya diganti dengan
“KIRIM” yang digunakan untuk mengirim semua data yang sudah diinputkan pada suatu form.
Kemudian untuk tombol reset dapat dibuat dengan menggunakan tipe reset <input> kemudian
valuenya diganti dengan “HAPUS” maka akan menghapus , mengosongkan atau mengembalikan
nilai field teks ke nilai bawaan.
Attribute action digunakan untuk menentukan URL yang akan dijalankan dan menerima semua
masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang
sama dengan halaman web itu sendiri.
Atribut size digunakan untuk menentukan ukuran kotak masukan yang akan tampil untuk teks
dan password
Atribut maxlength digunakan untuk menentukan jumlah karakter yang dapat dimasukkan dalam
kotak password dan kotak teks
Attribut values digunakan untuk menentukan nilai awal untuk kotak masukan, dan nantinya akan
dikirmkan ke web server. Jadi dalam menentuka value ini harus merupakan cerminan/kata-kata
yang secara umu sering digunakan agar user lebih mudah dalam mencari.
Perbedaan atribut method yang menggunakan nilai get dan post yaitu POST membuat informasi
dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim
menjadi satu dengan URL.
Nama File : LatPassword.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
Username
<input type="text" /><br/>
Password
<input type="Password" /><br/>
<input type="submit" value="Login" />
</form>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program form HTML yang akan digunakan untukmembuat
suatu password yang diinputkan menjadi tanda *. Pada program di atas menggunakan deklarasi
<!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi
tersebut bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf
besar dan huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut
terdapat pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala dari suatu
dokumen HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu
terdapat suatu form yang di dalamnya terdapat 3 type pemasukan data yaitu tipe teks, tipe
password, dan tipe submit. Pada username menggunakan tipe pemasukan data <input> dengan
tipe teks, kemudian pada password terdapat tipe pemasukan data password dan submit. Tipe
pemasukan data password digunakan untuk membuat suatu data yang diinputkan akan berubah
menjadi tanda *, kemudian tipe data submit valuenya diganti dengan “Login” artinya digunakan
untuk mengirimkan data berupa username dan password yang telah diinputkan sebelumnya.
Nama File : LatCheckBox.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
</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>
Output :
Analisis
Pada latihan di atas merupakan suatu program form HTML yang akan digunakan untuk membuat
suatu list checkbox pada suatu form . Pada program di atas menggunakan deklarasi <!DOCTYPE
huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
perintah form yang digunakan untuk membuat tipe inputan berupa checkbox. Untuk membuat
tipe inputan tersebut perintahnya hampir sama dengan membuat tipe inputan berupa teks, hanya
saja atribut pada type <input> nya diganti dengan “checkbox” dan mengisis data apa yang akan
diletakkan pada list checkbox tersebut.
Nama File : LatRadio.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
Jenis kelamin: <br/>
<input type="radio" name="sex" checked="" />Pria<br/>
<input type="radio" name="sex" />wanita<br/>
<br/>
<hr/>
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/>
<br/>
</form>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk membuat list
dengan tipe inputan radio. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat suatu form
yang didalmnya terdapat tipe pemasukan data yang digunakan yaitu tipe radio. Pada bagian atas
sebelum garis horizontal terdapat suatu perintah yang menggunakan tipe radio yang mana
digunakan untuk memilih jenis kelamin. Tipe masukan data yang digunakan adalah
menggunakan radio dimana nama yang digunakan adalah “sex” dan terdapat attribute checked
pada pilihan pria, artinya diantaranya kedua pilihan tersebut yang dipilih adalah pria. Kemudian
untuk pilihan wanita perintahnya sama menggunakan tipe <input> radio hanya saja tidak
terdapat atribut checked. Kemudian untuk perintah yang terdapat pada bawah baris horizontal
adalah sama dengan perintah yang terdapat pada jenis kelamin yaitu menggunakan tipe radio,
tetapi terdapat tambahan value pada tiap tipe radionya. Value disini digunakan untuk
menentukan nilai terhadap nama data sekiranya tombol tersebut diklik.
Kegunaan attribute checked pada script di atas menandakan bahwa pilihan yang ada attribute
tersebut merupakan pilihan yang sudah dipilih oleh user.
Nama File : LatSelect.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>TagSelect</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>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk menyeleksi
suatu pilihan dnegan menggunakan tag <select>. Pada program di atas menggunakan deklarasi
<!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana
deklarasi tersebut bukan merupakan case sensitive yang artinya tidak membedakan penggunaan
huruf besar dan huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website
tersebut terdapat pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala
dari suatu dokumen HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab
menu website dapat menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen
terdapat suatu form yang didalamnya terdapat tag <select> yang digunakan untuk memilih suatu
option yang berada pada tag select tersebut. Kelebihan dari tag select ini selain pengguna dapa
memilih secara manual tetapi pengguna dapat menginputkan suatu kata yang dapat memancing
dari pilihan yang akan dipilih. Pada tag <select> diikuti dengan tag <option> yang berguna untuk
memberikan daftar pilihan yang ada pada tag select. Dimana pilihan yang dibuat disini ada 4
pilihan yang dapat dipilih oleh user.
Kegunaan attribute value adalah untuk digunakan di dalam tag option. Nilai dari atribut inilah
yang akan dikirimkan kedalam web server. Sehingga nilai yang diinputkan disarankan untuk
nilai yang umum diketahui oleh user.
 TUGAS PRAKTIKUM
Nama File : TugasTabel1.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas Tabel 1</title>

</head>
<body>
<table border ="1" width ="580">
<tr height="470">
<td rowspan="2" width="80" align="center">
<b> <font face="Arial" size="7"> T <br /> U <br /> G <br /> A <br /> S
<br /> </b>
</font>
</td>
<td>
<table border="1" width="500">

<tr height ="60" align="center">
<th colspan="4">
<i><font face="Colonna MT" size="7" color="orange" align="center">
Rizalina </font></i>
</th>
</tr>
<tr height="150">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height ="60" align="center">

<td colspan="4">
<i><u><font face="Calibri" size="7" color="purple" align="center"> S1
PTIC 2016 </font></i></u>
</td>
</tr>
<table border="1" width ="500">
<tr height="30">
<td rowspan="5" width="75" align="center">
<b> <font face="Arial" size="6" align ="center" color="red"> </br>P <br
/> E <br /> N <br /> D <br /> T <br /> I </br> U </br> M </br> </br></font>
</b>
</td>
<td bgcolor="#000000"> </td>
<td></td>
<td bgcolor="#000000"></td>
<td></td>
</tr>
<tr height="30">
<td></td>
<td></td>
<td></td>
</tr>
<tr height="30">
<td bgcolor="#000000"> </td>
<td></td>
<td></td>
</tr>
<tr height="30">
<td > </td>
<td ></td>
<td></td>
</tr>
<tr height="30">
<td bgcolor="#000000"> </td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output :
Analisis
Pada tugas praktikum di atas merupakan suatu program HTML yang akan digunakan membuat
suatu table dengan penggabungan baris, kolom dan memberikan pewarnaan. Pada program di
atas menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan
suatu tag html yang mana deklarasi tersebut bukan merupakan case sensitive yang artinya tidak
membedakan penggunaan huruf besar dan huruf kecil pada penulisan suatu program. Dimana
dalam pembuatan website tersebut terdapat pendeklarasian perintah <head> yang digunakan
untuk menampilkan kepala dari suatu dokumen HTML. Kemudian untuk memberikan judul pada
kepala dokumen atau tab menu website dapat menggunakan perintah <title>. Kemudian pada
bagian <body> isi dokumen terdapat suatu perintah yang digunakan untuk membuat 3 buah
table, dimana pada table pertama terdiri dari 1 baris dengan tinggi 470, dimana untuk mengatur
tinggi baris tersebut maka dapat menggunakan atribut height. Kemudian menggabungkan kedua
baris antar kolom tersebut dengan menggunakan atribut rowspan="2". Kemudian kedua baris
yang telah digabungkan tadi kemudian diisi dengan suatu teks dengan menggunakan tag
<font>…</font>. Dimana dalam pengisisan teks ini dibuat secara vertical yaitu dengan cara
ganti baris anatar setiap hurufnya yaitu menggunakan tag </br>. Jadi pada kolom pertama
terdapat 2 baris yang digabungkan menjadi 1 atau di rowspan kemudian diisi teks secara vertical
menggunakan tag </br>.
Kemudian membuat table kedua dimana pada table kedua ini terdiri dari 3 baris dan juga 4
kolom, dimana pada baris pertama terdapat penggabungan suatu judul kolom antar baris yang
dapat dijalankan dengan menggunakan atribut colspan=4. Setelah keempat judul kolom tersebut
digabungkan kemudian diisi dengan teks yang dicetak miring yang mana perintah untuk
menginputkan suatu teks tersebut menggunakan tag <font>…</font> dan untuk membuat teks
dengan cetak miring maka dapat menggunakan tag <i>…</i>. kemudian padabaris selanjutnya
terdapat 4 kolom kososng yang dibuat dengan menggunakan tag <td></td> yang diulang secara
4kali. Dimana pada kolom ini tingginya diatur dengan menggunakan perintah <tr height="150">.
Artinya tinggi dari baris tersebut akan berukuran 150. Kemudian pada baris ke3 terdapat suatu
atribut yang digunakan untuk mengatur tinggi baris yang mana atribut yang digunakan sama
dengan ketika mengatur baris sebelumnya, hanya saja tinggi baris pada baris ke3 ini adala 60 dan
posisi berada di tengah. Kemudian pada baris ketiga ini sama dengan bari pertama kolom kedua
yaitu menggabungkan 4 kolom menjadi 1 dengan menggunakan perintah <td colspan="4">.
Setelah keempat kolom tersebut digabungkan kemudian diisi dengan teks yang perintahnya sama
dengan menginoutkan teks pada baris pertama kolom kedua yaitu menggunakan tag
<font>…</font> tetapi pada tek di baris ketiga kolom kedua ini terdapat suatu perintah agar teks
dapat tercetak garis bawah dan miring. Jadi untuk membuat teks bergaris bawah maka dapat
menggunakan tag<u>…</u> kemudian untuk membuat teks bercetak miring dapat menggunakan
tag <i>…</i>.
Kemudian memebuat table ketiga dimana pada table ketiga ini terdiri dari 5 baris dan 6 kolom.
Dimana pada kolom pertama table ketiga ini terdapat suatu penggabungan baris dengan
menggunakan perintah <td rowspan="5" width="75" align="center"> yang didalamnya juga
mengatur lebar dari baris yang telah digabungkan dan menempatkannya pada rata tengah.
Setelah kelima baris tersebut digabungkan kemudian diisi dengan teks yang dapa dibuat
menggunakan tag<font>…</font>. Dan untuk mengatur posisi huruf secara vertical maka dapat
menggunakan tag </br> antar setiap hurufnya. Pada bari pertama juga terdapat suatu sel yang
mana terdapat warna yang berbeda pada setiap selnya.
 Pada baris pertama terdapat 5 kolom dengan warna yang berbeda yaitu hitam, putih,
hitam, putih, hitam. Dimana untuk membuat suatu sel dengan warna hitam maka dapat
menambahkan atribut bgcolor=”#000000” pada sel yang akan diberi warna. Dalam
proses pewarnaan terdaat 2 cara yang dapat dilakukan yaitu menggunakan nama warna
dan juga menggunakan kode decimal dari warna tersebut.
 Pada baris kedua terdapat 5 kolom dengan warna yang berbeda yaitu putih,
hitam,putih,hitam.putih. Dimana untuk membuat suatu sel dengan warna hitam maka
dapat menambahkan atribut bgcolor=”#000000” pada sel yang akan diberi warna. Dalam
 Pada baris ketiga terdapat 5 kolom dengan warna yang berbeda yaitu hitam, putih, hitam,
putih, hitam. Dimana untuk membuat suatu sel dengan warna hitam maka dapat
 Pada baris keempat terdapat 5 kolom dengan warna yang berbeda yaitu putih,
hitam,putih,hitam.putih. Dimana untuk membuat suatu sel dengan warna hitam maka
dapat menambahkan atribut bgcolor=”#000000” pada sel yang akan diberi warna. Dalam
 Pada baris kelima terdapat 5 kolom dengan warna yang berbeda yaitu hitam, putih, hitam,
putih, hitam. Dimana untuk membuat suatu sel dengan warna hitam maka dapat
Nama File : TugasTabel2.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas Tabel Warna</title>

</head>
<body>
<table bgcolor="#000000" width="500">

<tr height="80">
<td rowspan="2" bgcolor="#FF0000"></td>
</tr>

<tr height="70">
<td colspan="2" bgcolor="#FF0000"></td>
</tr>

<tr height="80">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr height="70">
<td colspan="2" bgcolor="#FF0000"></td>
<td rowspan="2" bgcolor="#FF0000"></td>
</tr>

<tr height="80">
</tr>
</table>
</body>
</html>
Output :
Analisis
Pada tugas praktikum di atas merupakan suatu program HTML yang akan digunakan membuat
tabel warna. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML> yang
digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan merupakan
case sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil pada
penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat pendeklarasian
perintah <head> yang digunakan untuk menampilkan kepala dari suatu dokumen HTML.
Kemudian untuk memberikan judul pada kepala dokumen atau tab menu website dapat
perintah yang digunakan untuk membuat table dimana table diberi dengan warna dasar hitam dan
lebar table adalah 500. Adapun perintah yang digunakan untuk membuat suatu tampilan tersebut
adalah <table bgcolor="#000000" width="500">.
 Pada baris pertama tinggi nya diatur dengan 80 dan dapat dilakukan dengan
menggunakan atribut <tr height="80">. Kemudia pada baris pertama terdapat 5 kolom
dimana pada kolom kedua terdapat suatu sel dengan warna merah. Dan pada kolom ke 1,
3, 4,dan 5 menggunakan warna hitam. Untuk memberikan warna pada sel tersebut dapat
menggunakan tag bgcolor dan memberikan atribut warna yang diinginkan. Dalam proses
pewarnaan terdapat 2 cara yang dapat dilakukan yang pertama adalah menggunakan
nama warna, yang kedua menggunakan kode decimal dari warna yang diinginkan. Pada
baris pertama ini juga terdapat penggabungan 2 baris yang terdapat pada kolom kedua
yang dapat dilakukan dengan menggunakan atribut <td rowspan="2"
bgcolor="#FF0000"></td>
 Pada baris kedua tinggi nya diatur dengan 70 dan dapat dilakukan dengan menggunakan
atribut <tr height="70">. Pada baris kedeua ini terdapat 5 kolom tetapi pada kolom kedua
baris kedua sudah digabungkan dengan kolom kedua oaris pertama. Jadi hanya perlu
menambahkan 3 buah kolom yaitu kolom ke1, 3, dan4. Pada kolo keempat baris kedua
ini juga terdapat suatu perintah yang digunakan untuk menggabungan 2 kolom sekaligus
d=yaitu menggunakan perintah <td colspan="2" bgcolor="#FF0000"></td> dimana
kedua kolom yang telah digabungkan tersebut akan diberi warna merah dengan
menggunakan atribut bgcolor="#FF0000". Kemudian sel yang tidak dilakukan
penggabungan akan diberikan warna hitam yaitu dengan menggunakan atribut
bgcolor="#000000"
 Pada baris ketiga ini terdapat 5 kolom yang kesemuanya diisi dengan menggunakan
warna hitam, karena warna table yang diatur sebelumnya adalah berwarna hitam maka
hanya perlu menambahkan kolom tanpa menambahkan warna sel.
 Pada baris keempat terdapat penggabungan baris dan kolom, dimana penggabungan
kolom dilakukan antara kolom 1 dan kolom kedua pada baris keempat kemudian
penggabungan baris dilakukan antara baris keempat dengan bariskelima pada kolom
keempat. Untuk melakukan penggabungan baris disini dapat menggunakan atribut <td
colspan="2" bgcolor="#FF0000"></td>. Dimana selain terdapat penggabungan kedua
kolom, kolom yang sudah digabungkan tersebut kemudian diberikan warna merah
dengan menggunakan atribut bgcolor="#FF0000" dan menggunakan kode decimal yang
menunjukkan bahwa sel tersebut akan berwarna merah. Kemudian pada kolom kedua
merupakan kolom yang normal artinya tidak terdapat penggabungan antar bari atau
kolom. Dan pada kolom ketiga baris keempat warna selnya adalah hitam, jadi dapat
menggunakan atribut bgcolor="#000000" untuk memberikan warna hitamnya atau juga
hanya menambahkan suatu kolom menggunakan tag <td>…</td> tanpa harus
memberikan pewarnaan, karena warna dasar yang diatur oleh table adalah hitam.
Kemudian pada kolom keempat terdapat suatu penggabungan kedua baris dengan
menggunakan atribut “rowspan” dan kedua baris yang telah digabungkan ersebut
diberikan warna merah seperti cara yang dilakukan ketika memberikan warna pada kedua
kolom yang telah digabungkan (kolom 1 dan 2 pada baris keempat). Kemudian untuk
kolom kelima baris keempat sama dengan kolom ketiga baris keempat yaity bewarna
hitam, dapat dilakukan dengan memberikan atribut bgcolor="#000000" atau tanpa atribut
tersebut karena warna dasar table sudah diatur dengan warna hitam.
 Pada baris kelima terdapat 4 kolom karena pada kolom keempat sudah dilakukan
penggabungan dengan baris keempat kolom keempat. Kemudian untuk kolom ke1,2,3,5
prosesnya sama yaitu dengan menambahkan kolom dengan menggunakan tag
<td>…</td> dan menambahkan warna hitam pada sel tersebut dengan menggunakan
atribut bgcolor="#000000" atau dapat juga todak menggunakan atribut tersebut karena
warna dasar table sudah diatur menjadi warna hitam.
Nama File : TugasForm.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas Form</title>
</head>
<body>
<h1>INPUT DATA MAHASISWA</h1>
<form>
<table cellspacing="0" cellpadding="8">
<tr>
<td> Nama </td>
<td> : </td>
<td><input type="text" size="15" maxlength="20" /></td>
</tr>
<tr>
<td>Usia </td>
<td> : </td>
<td><input type="text" size="15" maxlength="20" /></td>
</tr>
<tr>
<td>kelamin </td>
<td> : </td>
<td><input type="radio" name="sex" checked="" />Man
<input type="radio" name="sex" />Woman<br/></td>
</tr>
<tr>
<td>jurusan </td>
<td> : </td>
<td><select>
<option value="informatika">Informatika</option>
<option value="matematika">Matematika</option>
<option value="rpl">RPL</option>
<option value="tkj">TKJ</option>
</select><br/>
<tr>
<td> Email </td>
<td> : </td>
<td><input type="text" size="15" maxlength="20"/></td>
</tr>
<tr>
<td>Web </td>
<td> : </td>
<td><input type="text" size="15" maxlength="20"/></td>
</tr>
<tr>
<td>Hobi </td>
<td> : </td>
<td>
<input type="checkbox" />Membaca<br/>
<input type="checkbox" />Menulis<br/>
<input type="checkbox" />Mengaji<br/>
</td>
</tr>
<tr>
<td> Password </td>
<td> : </td>
<td><input type=" Password" size="15" maxlength="20"/></td>
</tr><br />
<tr>
<td> </td>
<td> </td>
<td><input type="submit" value="SIMPAN" /></td>
</tr>
</table>
</form>
</body>
</html>
Output :
Analisis
Pada tugas praktikum di atas merupakan suatu program HTML yang digunakan untuk membuat
suatu form. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML> yang
digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan merupakan
case sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil pada
penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat pendeklarasian
perintah <head> yang digunakan untuk menampilkan kepala dari suatu dokumen HTML.
Kemudian untuk memberikan judul pada kepala dokumen atau tab menu website dapat
menggunakan perintah <title>. Kemudian pada <body> terdapat suatu perintah yang digunakan
untuk membuat suatu table untuk membuat suatu frm dengan keadaan urut, tetapi untuk
bordernya dihilangkan atau disamadengankan 0. Pada tugas praktikum ini terdaoat 3 kolom dan
9 baris. Dimana pada masing – masing kolom diiisi dengan tipe inputan yang berbeda
 Pada kolom ketiga baris pertama merupakan kolom yang digunakan untuk menginputkan
suatu nama dengan tipe inpputan teks. Jadi pada kolom ketiga baris pertama
ditambahakan suatu tipe inputan teks dengan ukuran kotak masukan (size=”15”)
kemudian untuk pangjang maksimal karakter yang dapat diinputkan yaitu 20
(maxlength="20")
 Pada kolom ketiga baris kedua merupakan kolom yang digunakan untuk mengisi usia.
Dimana pada kolom ini tipe inputan yang digunakan sama dengan tipe inputan nama
yaitu tipe inputan teks.
 Pada kolom ketiga baris ketiga merupakan kolom yang digunakan untuk menentukan
suatu pilihan jenis kelamin, dimana untuk membuat suatu list pilihan jenis kelamin ini
menggunakan tipe inputan radio. Kemudian maksut dari checked=”” yang berada pada
pilihan “man” adalah bahwa man merupakan pilihan yang dipilih oleh user.
 Pada kolom ketiga baris keempat merupakan kolom yang digunakan untuk menentukan
jurusan dari user tersebut. untuk membuat list jurusan ini menggunakan
tag<select>..</select>. Dimana option digunakan untuk mengisi data atau list yang akan
ditampilkan pada suatu pilihan di halaman website.
 Pada kolom ketiga baris kelima merupakan kolom yang digunakan untuk menginputkan
email dari user tersebut. tipe inputan yang digunakan pada hal ini adalah tipe inputan
teks, dengan size dan maxlength sama dengan ukuran pada kotak nama dan usia.
 Pada kolom ketiga baris keenam merupakan kolom yang digunakan untuk menginputkan
web dari user tersebut. tipe inputan yang digunakan pada hal ini adalah tipe inputan teks,
dengan size dan maxlength sama dengan ukuran pada kotak nama,usia, dan email.
 Pada kolom ketiga baris ketujuh merupakan kolom yang digunakan untuk memilih hobi
dari user tersebut. untuk membuat list hobi disini menggunakan tipe inputan checkbox,
dimana user dapat memilih lebih dari satu hobi yang diinginkan.
 Pada kolom ketiga baris kedelapan merupakan kolom yang digunakan untuk
menginputkan password dari pengguna tersebut. Untuk membuat kotak inptan password
tersebut menggunakan tipe inputan password agar data yang diinputkan dapat diubah
menjadi tanda bintang (*).
 Pada kolom ketiga baris ke Sembilan merupakan kolom yang digunakan untuk membuat
tombol submit, dimana tombol ini dibuat menggunakan tpe inputan submit dan value
(nama buttonnya diganti menjadi simpan) agar semua data yang telah dikirimkan tersebut
dapat disimpan,
Nama File : TugasValidasiForm.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas Validasi Form</title>

</head>
<body>
<h1>INPUT DATA MAHASISWA</h1>
<form>
<table cellspacing="0" cellpadding="8">
<tr><td> Nama </td><td> : </td><td><input type="text" name="nama"
placeholder ="Masukkan Nama Anda" size="40" maxlength="40" /></td></tr>
<tr><td>Tanggal Lahir </td><td> : </td><td><input type="date" name="birth"
required ="" /></td></tr>
<tr><td>kelamin </td><td> : </td><td><input type="radio" name="sex" />Man
<input type="radio" name="sex" />Woman<br/></td></tr>
<tr><td>jurusan </td><td> : </td><td><select>
<option value="informatika">Informatika</option>
<option value="matematika">Matematika</option>
<option value="rpl">RPL</option>
<option value="tkj">TKJ</option>
</select><br/>
<tr><td> Email </td><td> : </td><td><input type="email" name ="email"
size="40" maxlength="40" placeholder="Masukkan alamat Email Anda"
required=""/></td></tr>
<tr><td>Web </td><td> : </td><td><input type="text" size="40"
maxlength="40" placeholder="Alamat Website Anda"/></td></tr>
<tr><td>Hobi </td><td> : </td><td>
<input type="checkbox" />Membaca<br/>
<input type="checkbox" />Menulis<br/>
<input type="checkbox" />Mengaji<br/></td>
</tr>
<tr><td> Password </td><td> : </td><td><input type="password" size="40"
maxlength="40" name="password" placeholder="Masukkan Password"
required=""/></td></tr><br />
<tr><td> </td><td> </td><td><input type="submit" value="SIMPAN" />
</td></tr>
</table>
</form>
</body>
</html>
Output :
tampilan halaman utama
Tampilan ketika user menginputkan email yang tidak sesuai format

Tampilan ketika semua data sudah terisi
Tampilan ketika semua data sudah disimpan

Analisis
Pada tugas praktikum di atas merupakan suatu program HTML yang akan digunakan untuk
melakukan validasi form. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
perintah yang digunakan untuk membuat melakukan validasi form dengan membuatsuatu table
agar form dapat dalam keadaan urut, tetapi untuk bordernya dihilangkan atau disamadengankan
0. Pada tugas praktikum ini terdapat 3 kolom dan 9 baris. Dimana pada masing – masing kolom
diiisi dengan tipe inputan yang berbeda
 Pada kolom ketiga baris pertama merupakan kolom yang digunakan untuk menginputkan
suatu nama dengan tipe inpputan teks. Jadi pada kolom ketiga baris pertama
ditambahakan suatu tipe inputan teks dengan ukuran kotak masukan (size=”40”)
kemudian untuk pangjang maksimal karakter yang dapat diinputkan yaitu 40
(maxlength="40"). Kemudian untuk placeholder digunakan untuk memberikan
keterangan pada inputan nama.
 Pada kolom ketiga baris kedua merupakan kolom yang digunakan untuk mengisi tanggal
lahir user. Dimana pada kolom ini tipe inputan yang digunakan adalah tipe inputan date.
Kemudian menambahkan atribut required yang artinya input date ini wajib diisi dan jika
tidak diisi akan mendapatkan peringatan.
 Pada kolom ketiga baris ketiga merupakan kolom yang digunakan untuk menentukan
suatu pilihan jenis kelamin, dimana untuk membuat suatu list pilihan jenis kelamin ini
menggunakan tipe inputan radio.
 Pada kolom ketiga baris keempat merupakan kolom yang digunakan untuk menentukan
jurusan dari user tersebut. untuk membuat list jurusan ini menggunakan
tag<select>..</select>. Dimana option digunakan untuk mengisi data atau list yang akan
ditampilkan pada suatu pilihan di halaman website.
 Pada kolom ketiga baris kelima merupakan kolom yang digunakan untuk menginputkan
email dari user tersebut. Tipe inputan yang digunakan pada hal ini adalah tipe inputan
email, dengan size dan maxlength sama dengan ukuran pada kotak nama. Kemudian tipe
inputan email ini berfungsi agar email yang diinpputkan sesuai dengan format email yang
benar, dan jika tidak sesuai maka akan terdapat peringatan. Kemudian juga terdapat
placeholder yang digunakan untuk memberikan keterangan pada inputan email. Dan
atribut required menandakan bahwa kotak inputan ini wajib diisi dan jika tidak diisi akan
mendapatkan peringatan.
 Pada kolom ketiga baris keenam merupakan kolom yang digunakan untuk menginputkan
web dari user tersebut. tipe inputan yang digunakan pada hal ini adalah tipe inputan teks,
dengan size dan maxlength sama dengan ukuran pada kotak nama, email. Dan juga
terdapat placeholder yang digunakan untuk memberikan keterangan pada inputan web.
 Pada kolom ketiga baris ketujuh merupakan kolom yang digunakan untuk memilih hobi
dari user tersebut. untuk membuat list hobi disini menggunakan tipe inputan checkbox,
dimana user dapat memilih lebih dari satu hobi yang diinginkan.
 Pada kolom ketiga baris kedelapan merupakan kolom yang digunakan untuk
menginputkan password dari pengguna tersebut. Untuk membuat kotak inptan password
tersebut menggunakan tipe inputan password agar data yang diinputkan dapat diubah
menjadi tanda bintang (*). Kemudian juga terdapat placeholder yang digunakan untuk
memberikan keterangan pada inputan password. Dan atribut required menandakan bahwa
kotak inputan ini wajib diisi dan jika tidak diisi akan mendapatkan peringatan.
 Pada kolom ketiga baris ke Sembilan merupakan kolom yang digunakan untuk membuat
tombol submit, dimana tombol ini dibuat menggunakan tpe inputan submit dan value
(nama buttonnya diganti menjadi simpan) agar semua data yang telah dikirimkan tersebut
dapat disimpan,

Laporan 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

Laporan 2

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM KE-2

TABEL DAN FORM

RIZALINA NUR AFIFAH

UNIVERSITAS NEGERI MALANG

<title>Atribut Width Tabel</title>

<title>Rowspan dan Colspan</title>

rowspan="2">Pengusaha</th>. colspan="2" atribut ini digunakan untuk menggabungkan 2

<title>Align dan Valign</title>

<title>Tugas Tabel 1</title>

<table border="1" width="500">

<tr height ="60" align="center">

<title>Tugas Tabel Warna</title>

<title>Tugas Validasi Form</title>

tampilan halaman utama

Tampilan ketika user menginputkan email yang tidak sesuai format

Tampilan ketika semua data sudah disimpan

Anda mungkin juga menyukai