PEMOGRAMAN WEB 1
MODUL 3
“FRAME DAN FROM”
NAMA : REGI PERMANA JAYA
NIM : 20160910112
KELAS : SI-C 2016
UNIVERSITAS KUNINGAN
FAKULTAS ILMU KOMPUTER
2018
Post Test :
1. Buatlah form login dengan jumlah password yang di inputkan sebanyak 8 karakter !
Skrip :
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <table width="405" height="169" border="0" cellpadding="0" cellspacing="0"> <tr bgcolor="#428ef6"> <td height="37" colspan="2"><div align="center"><strong>PLEASE LOGIN</strong></div></td> </tr> <tr> <td width="95" height="32">Username</td> <td width="304"><label>: <input name="username" type="text" id="username" /> </label></td> </tr> <tr> <td height="26">Password</td> <td><label>: <input name="password" type="password" id="password" /> </label></td> </tr> <tr> <td height="48"> </td> <td><input name="Login" type="submit" id="Login" value="Login" /> <input name="Batal" type="submit" id="Batal" value="Batal" /></td> </tr> <tr bgcolor="#428ef6"> <td height="26" colspan="2"><div align="right"><strong>regipermana-idt.blogspot.co.id</strong></div></td> </tr> </table> </body> </html> |
Hasil :
Penjelasan :
- Di dalam <table>...</table> kita bisa mengasih attribut tinggi dan lebar juga. kita tinggal mengasih nilai pada attribut tersebut (height & width).
- <div align="center>... </div> gunanya untuk membuat text rata tengah.
- <strong>...</strong> untuk membuat text menjadi cetak tebal.
- Tag <input> untuk menentukan sebuah field input, dimana pengguna bisa memasukan data. Sebuah input dapat bervariasi dalam banyak cara, tergantung type attribut.
- attribut text pada input untuk membuat text field.
- attribut password untuk membuat text field rahasia.
- attribut submit untuk button.
2. Buatlah halaman website seperti berikut !
Skrip :
<form id=”form1″ name=”form1″ method=”post” action=””>
<p><strong>Property Readonly </strong></p> <p> NIM : <input type=”text” name=”nim” id=”nim” readonly value="20160910112"></p> <p><strong>Readonly dan Title di Text Area</strong></p> <p>Komentar : <textarea cols=”100″ rows=”100″ readonly title=”Ini Komentarnya”> Komentar di Text Area Tidak Bisa Dihapus</textarea></p> <p><strong> Checked </strong></p> <p>Jenis Kelamin : <input type = "radio" name = "sex" value = "laki"/>L <input type = "radio" name = "sex" value = "perempuan"/>P</form> </p> <p><strong>Maximal Character</strong></p> <p> NIM : <input type=”text” maxlength=”10″ size=”20″> Maximal 10 karakter </p> </form> |
Penjelasan :
Text Field
<input type = "text"/> untuk menentukan form input/kotak isian yang dapat digunakan untuk memasukan teks.
<input type = "text"/> untuk menentukan form input/kotak isian yang dapat digunakan untuk memasukan teks.
Radio-Button
<input type = "radio"/> untuk menentukan tombol radio pada form. Tombol radio berguna ketika kita akan memberikan pilihan untuk pengunjung dalam menentukan pilihan dari jumlah pilihan yang telah kita sediakan.
Tugas :
Maka Hasil nya :
1. Buatlah website dengan desain seperti berikut ini :
Gunakan frame untuk mengatur tiap komponen dan buat tampilan yang menarik dengan menggunakan tag-tag HTML yang anda sudah pelajari !
Skrip :
<html>
<head> <title> HyperLink </title> </head> <body> <table border=”2″ color=”black” align=”center” width=”100%”> <tr> <td colspan=”3″ align=”center”><img src="Kop.PNG" width="709" height="178" alt=""/></td> </tr> <table> <tr> <td width=”15%” valign=”top” bgcolor="pink"> <ul type=”disc”> <li><a href="Tugas.html" target="”main”">Beranda</a></li> <li><a href="Biodata.html" target="”blank”">Biodata</a></li> <li><a href="Daftar Nilai.html" target="”blank”">Daftar Nilai</a></li> </ul> </td> <td width=”50%”><center> <h3> UNIVERSITAS KUNINGAN </h3> <h3> Fakultas Ilmu Komputer </h3> <h3> Program Studi Sistem Informasi Jenjang S1 </h3><br><br> </center> <pre> NIM : 20160910112 <br> Nama : Regi Permana Jaya <br> Tempat, Tanggal Lahir : Kuningan, 16 September 1996 <br> <br> <b> Pendidikan </b> <ol> <blockquote><li> SD : SDN 03 Maniskidul </li></blockquote> <blockquote><li> SMP : SMPN 1 Jalaksana </li></blockquote> <blockquote><li> SMA : SMK Pertiwi Kuningan </li></blockquote> </ol> </pre> </td> <td width=”15%” valign=”top” bgcolor="pink"> <ul type=”disc”> <li><a href=”tag.html” target=”main”> Tags </a></li> <li><a href=”kat.html” target=”blank”> Kategories </a></li> </ul> </td> </tr> <tr> <td colspan=”3″ align=”center” bgcolor="pink"> ©Copyright : Regipermana.idt </td> </tr> </table> </table> </body> </html> |
Maka Hasil nya :
.png)