web modul 3


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>

</table>
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. 
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 :
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                   : 20160910128 <br>
    Nama                  : Muhamad nur jamaludin lufi <br>
    Tempat, Tanggal Lahir : Kuningan, 05 September 1996 <br>
    <br>
    <b> Pendidikan </b>
    <ol>
        <blockquote><li> SD  : SDN 03 cikarang </li></blockquote>
        <blockquote><li> SMP : SMPN 1 cikarang </li></blockquote>
        <blockquote><li> SMA : SMK 1 cikarang </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"> &copy;Copyright : Regipermana.idt </td>
</tr>
</table>
</table>
</body>
</html>



Komentar

Posting Komentar