Kamis, 17 Maret 2016

Pertemuan 3 - HTML - Form

Pada pertemuan ini kita akan membahas mengenai pembuatan Form dengan menggunakan HTML.

Ada beberapa atribut yang dimiliki oleh HTML untuk pembuatan form:
  • Text boxes
  • Check boxes
  • Radio buttons
  • Combo boxes
  • List boxes
  • Submit Button
  • etc...
kerangka yang kita gunakan untuk membuat form adalah:
<form>

    content

</form>

ada beberapa argumen yang berhubungan dengan perintah yang diberikan:
- action = "url"
mengarahkan ke mana data akan dikirim
- method = "get"
pengiriman data melalui url
- method = "post"
pengiriman data melalui sistem sehingga lebih aman
- target = "target"
menspesifikasikan lokasi url action dibuka pada browser

A Text field:
    <input type="text" name="textfield" value="with an initial value">

A multi-line text field:
    <textarea name="textarea" cols="20" rows="2">Hello</textarea>

A password field:
    <input type="password" name="textfield3" value="secret">

A checkbox: 
    <input type="checkbox" name="checkbox" value="checkbox" checked>

Radio buttons:
   <input type="radio" name="radiobutton" value="myValue1">
    male<br>
   <input type="radio" name="radiobutton" value="myValue2" checked>
    female

A menu or list:
<select name="
select">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="BLUE">blue</option>

</select>

A submit button:
   <input type="submit" name="Submit" value="Submit">
A reset button:
   input type="reset" name="Submit2" value="Reset">
A plain button:
   <input type="button" name="Submit3" value="Push Me">

Berikut merupakan contoh pembuatan sebuah code untuk form pendaftaran:
<html>
<head>
<title>latihan</title>
</head>

<body>
<h2>Registration Form:</h2>
<table>
<form method="post">
    <tr>
       <td><label> Name : </label> </td>
       <td><input type="text" name="name"> </td>
    </tr>
    <tr>
       <td> <label> Email : </label> </td>
       <td> <input type="text" name="email"> </td>
    </tr>
    <tr>
        <td> <label> Password : </label> </td>
        <td> <input type="password" name="pass"> </td>
    </tr>
    <tr>
       <td> <label> Gender : </label> </td>
       <td> <input type="radio" name="gender" value="m">Male             
        <input type="radio" name="gender" value="f">Female </td>
    
    </tr>
    <tr>
       <td> <label> Country : </label> </td>
       <td> <select name="select">
           <option value="Indonesia">Indonesia</option> 
           <option value="Malaysia">Malaysia</option> 
           <option value="Singapore">Singapore</option>
       </select> </td>
    </tr>
    <tr>
        <td> <label> Address : </label> </td>
        <td> <textarea name="address" rows="3"> </textarea> </td>
    </tr>
    <tr>
     <td> <input type="submit" name="Submit" value="Submit"> </td>
    </tr>
</form>
</table>
</body>

</html>

Hasilnya:



Rabu, 09 Maret 2016

Pertemuan 2 - HTML - Web Design Fundamental 1

Pertemuan ini membahas mengenai HTML. Apa sih HTML itu? HTML adalah singkatan untuk HyperText Markup Languange. HTML merupakan salah satu bahasa pemograman yang umum digunakan dalam merancang tampilan dalam web.

HTML memiliki tag atau keyword khusus dalam penggunaannya. Tag tersebut akan dibuka dengan tanda kurang dari "<" lalu ditutu dengan tanda lebih dari ">".

Ada 2 macam tag pada HTML
a. penggunaan normal:
  - opening tag <p>
  - closing tag </p>
b. single tag
  - <p />

ada beberapa software yang dapat digunakan untuk melakukan coding HTML
- Notepad
-NetBeans
- Dreamweaver
- dll...

Dalam HTML ada yang disebut Style Sheet. Style Sheet merupakan halaman khusus yang mengatur beberapa atribut dalam HTML seperti font, colour, margin, and allignment. Style Sheet bisa juga kita ambil dari luar (tidak dibuat sendiri) yang disebut sebagai external style sheet.