LAPORAN MODUL 2

PRAKTIKUM PEMROGRAMAN WEB

“HTML 2”

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web

Dibimbing oleh Achmad Hamdan, S.Pd,M.Pd.

Oleh:
Bimo Ahmad Ramadhan 170533628584

S1 PTI ‘17 OFF A

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
Januari 2019
Tabel.htm

AtributTabel1.htm
AtributTabel2.htm
WarnaTabel.com
WarnaTabel2.htm
TabelRowspan.htm
TabelColspan.htm
RowspanColspan.htm
AlignValign.htm

Tugas Praktikum

A. Tugas Tabel 1
Penjelasan (Analisis) :

Pada Proram tersebut dibuat untuk menampilkan tabel vertical dan horizontal
dimana pada tabel tesebut terdapat nama dan bentuk catur. Dalam tabel tersebut untuk
membuat tebel tersebut digunakan fungsi <table border="1"> yang dimana fungsi ini
untuk menampilkan tabel pertama kemudian didalam <table border="1">
menggunakan <td rowspan="2" width="50" align="center"> <font face="arial black"
size="6"> untuk memberikan tulisan didalam tabel ditengah dan font pada tulisan.
Lalu pada tabel kedua <table border="1"> <th colspan="4" align="center"
height="60"> <font color="blue"><font face="times new roman" size="5"> <i>Bimo
Ahmad Ramadhan</i></font></font><br /> untuk memberikan Tulisan sesuai size
yang diinginkan dan nama tersebut diberi warna biru karena menggunakn font color
blue dan dibawah tabel Tulisan terdapat 4 tabel yang menggunakan fungsi <tr> <td
width="75" height="120" align="center"></td> untuk menampilkan 4 colom kosong
pada tabel pertama. Kemudian dibawah colom terdapat tabel colomg tang berisi nama
dengan menggunakan colspan, align, dan height dengan font yang diinginkan.
Selanjutnya tabel ke tiga terdapat 2 kolom yaitu colom terdapat tulisan dan colom
berbentuk catur. Dalam fungsinya sama seperti tadi menggunakan colspan, align dan
height dengan ukuran font yang diinginkan. Lalu colom kedua di tabel ke 3 berbentuk
catur dengan warna hitam dan putih. Dari bentuk tersebut digunakan fungsi <td
align="center" height="50" width="50" bgcolor="black"> untuk fungsi tersebut untuk
berwarna putih sedangkan </td> dan <td align="center" height="50"
width="50"></td> untuk berwarna hitam. Lalu akhiran diberi fungsi </table> </td>
dan </tr>. </html>

Tugas Tabel 2
Penjelasan (Analisis) :
Pada program ini menampilkan Web sebuah bentuk gambar Swastika yang
dimana program tersebut pertama menampilkan banyak tabel dan kemudian di
fungsikan dengan menggunakan tabel cellspacing <table cellspacing="0"> untuk
memberikan kombinasi warna menyatu dengan warna lain. Dalam bentuk gambar
tabel seperti ini mempunyai fungsi dalam bentuk <td align="center" rowspan="2"
height="100" width="130" bgcolor="black"></td> yang dimana pada align untu
memberikan garis bagian tengah sedangkan height dan width dengan ukuran bentuk
gambar atau tabel. Dan memberikan warna black. Untuk kombinasi dengan warna red
fungsinya sebagai berikut<td align="center" rowspan="2" height="100" width="130"
bgcolor="red"></td> kemudian akhiran difungsikan dengan menggunakan </ td>.
LatForm.htm

LatPasword.htm
LatCheckBox.htm
LatRadio.htm
LatSelect.htm
TugasPraktikum-Form.htm
Penjelasan (Analisis) :

Pada program Tugas Praktikum form tersebut menampilkan sebuah inputan data
mahasiswa yang dimana pada program tersebut mengisi inputan data kemudian disimpan
menggunakan submit. Program tersebut menggunakan fungsi <table border="0"> untuk
memberikan kolom tabel yang akan diisi menggunakan fungsi colspan untuk memberikan
kolom-kolom tersebut. Didalam tabel tersebut terdapat fungsi method-method untuk
memberikan ukuran kolom tersebut dengan menggunakan <td width>, <td align> . untuk
<input type="text" name="nama" /></td> digunakan sebagai inputan data dari teks tersebut.
Dari inputan mahasiswa sendiri terdapat form Nama, Usia, Kelamin, Jurusan, Email, Web,
Hobi, password. Dari form tersebut menggunakan fungsi <td width>, <td align> dan
memeberikan nama variabel itu sendiri.

Dalam Form kelamin ini bedanya hanya menambahkan radio batton yang diberi teks
varibael Man dan Women. Kemudian pada Form Jurusan menggunakan Option Value yang
dimana Option tersebut sebagai sebuah opsi (pilihan) dan value sebagai menentukan nilai
teks, terdapat pilihan pada form jurusan yaotu Informatika, elektro, sipil, mesin, otomotif.
Sedangakan Form Hobi tersebut mempunyai fungsi dalam bentuk CheckBox untuk
inputannya <input type="checkbox" name="Hobi" value="Menulis" />Membaca , Menulis
dan Mengaji.
TugasPraktikum-ValidasiForm.
Penjelasan (Analisis) :

Pada program Tugas Praktikum Validasi-Form tersebut menampilkan sebuah

inputan data mahasiswa yang dimana pada program tersebut mengisi inputan data kemudian
disimpan menggunakan submit. Program tersebut menggunakan fungsi <table border="0">
dam didalam tabel tersebut menggunakan <th colspan=” ”> untuk memberikan kolom tabel
yang akan diisi menggunakan fungsi colspan untuk memberikan kolom-kolom tersebut.
Didalam tabel tersebut terdapat fungsi method-method untuk memberikan ukuran kolom
tersebut dengan menggunakan <td width>, <td align> . untuk <input type="text"
name="nama" /></td> digunakan sebagai inputan data dari teks tersebut. Dari inputan
mahasiswa sendiri terdapat form Nama, Tanggal Lahir, Kelamin, Jurusan, Email, Web, Hobi,
password. Dari form tersebut menggunakan fungsi <td width=” “>, <td align> dengan
memeberikan nama variabel dan fungsi method placeholder, karena placeholder pada
program tersebut terdapat tulisan di kolom untuk mengetahui validasi pada isi form.
Placeholder berfungsi sebagai memberikan teks bantuan kepada user untuk inputan form
yang kompleks.

Dalam Form kelamin ini bedanya hanya menambahkan radio batton yang diberi teks
varibael Man dan Women. Kemudian pada Form Jurusan menggunakan Option Value yang
dimana Option tersebut sebagai sebuah opsi (pilihan) dan value sebagai menentukan nilai
teks, terdapat pilihan pada form jurusan yaotu Informatika, elektro, sipil, mesin, otomotif.
Sedangakan Form Hobi tersebut mempunyai fungsi dalam bentuk CheckBox untuk
inputannya <input type="checkbox" name="Hobi" value="Menulis" />Membaca , Menulis
dan Mengaji. Kemudian simpan meggunakan button <input type="button" name="Simpan"
value="Simpan" />.