HTML Form

Form dalam html sangatlah penting,karena form adalah salah satu pintu utama untuk masukkan data.Intinya
Form digunakan untuk tag masukkan.Sintaks dasar form seperti di bawah ini

 <form name="nama_form" method="GET/POST" action="URL">
-----------
</form>

Form juga merupakan tag berpasangan,di dalam tag

terdapat beberapa atribut,salah satunya adalah
name -> berfungsi untuk memberi nama pada form tersebut
method -> berfungsi untuk menetukan metode apa yang akan digunakan untuk tranfer data ke server
action -> alamat yang akan digunakan untuk memproses data dari form itu sendiri.

Tag yang ada di dalam form antara lain tag input,select dan textarea,
Tag <input> mepunyai atribut type yang berfungsi untuk menentukan jenis inputannya.antara lain

• text
  
• password
• reset
• submit
• radio
• checkbox
  

   <input type="text/password" name="nama_input" size="panjang_input" / >
  <input type="submit/reset/" name="nama_input" value="caption_input" / >
  <input type="radio" name="nama_radio" value="caption_radion" / >
  <input type="radio" name="nama_radio" value="caption_radion" / >
  <input type="checkbox" name="nama_checkbox" value="value_radion" / >
  <input type="checkbox" name="nama_checkbox" value="value_radion" / >
  

tag <opton> berguna untuk inputan pilihan dropdown

 <select name="pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA</option>
</select>

tag <textare> berguna untuk inputan seperti text tapi lebih panjang jumlah karakternya

 <textarea name="nama_textarea" rows="tinggi" cols="lebar"></textarea>

Contoh pebuatan form dengan menggunakntable

 <form name="test" method="post" action="">
 <div style="border:1px solid #666; width:400px; background:#E4E3E3; margin:10px auto; padding:10px; font-family: Trebuchet MS, Tahoma, Sans; color:#666;">
      <table cellpadding="5"  width="100%" >
           <tbody>
                <tr>
                     <td>Nama : </td>
                     <td> <input name="nama" size="25" maxlength="50" type="text"> </td>
                </tr>
                <tr>
                     <td> Password : </td>
                     <td> <input size="25" type="password"> </td>
                </tr>
                <tr>
                     <td> Hobi : </td>
                     <td>      <input type="checkbox" name="hobi" value="Hiking"> Hiking <br>
                               <input type="checkbox"name="hobi" value="Berenang"> Berenang
                     </td>
                </tr>
                <tr>
                     <td> Status </td>
                     <td>      <input name="status" value="sudah" type="radio"> Menikah<br>
                               <input name="status" value="belum" type="radio"> Belum
                     </td>
                </tr>
                <tr>
                     <td> Pendidikan </td>
                     <td>
                          <select name="Pendidikan">
                               <option>SD </option>
                               <option>SMP </option>
                               <option>SMA </option>
                          </select>
                     </td>
                </tr>
                <tr>
                     <td> Tentangku : </td>
                     <td> <textarea name="deskripsi" rows="10" cols="20"></textarea> </td>
                </tr>
                <tr>
                     <td colspan="2" style="text-align:center; height:25px;">
                     <input value="Kirim Data" type="submit">
                     <input value="Reset" type="reset">
                     </td>
                </tr>
           </tbody>
      </table>
 </div>
</form>

Nama
Password
Hobi	Hiking Berenang
Status	Menikah Belum
Pendidikan	SD SMP SMA
Tentangku

latihan dasar html

Ini untuk latihan dasar html
Semangat :)

Klik link latihan

Mebuat tabel di HTML

Tabel adalah bagian dalam membuat halaman web,oleh karena itu kita harus mahir dalam
pengolahan tabel di script HTML,tag di tulis dalam tag .Pertama kita harus tahu paradigma baris dan kolom.
Mudahnya saja baris itu adalah garis horisontal dan kolom itu adalah garis vertikal
Dan di HTML baris di representasikan dangan tag ,sedangkan kolom di represantikan
tag .Untuk aribut2 yang ada dalam tabel bisa di lihat di post sebelumnya.Ini adalah
skema tabel.

 <table border="1">
<tbody>
<tr> <!-- baris pertama -->
 <td>testting tabel</td> <!-- ada satu kolom dalam baris  pertama -->
</tr>
</tbody>
</table>

testting tabel

hal yang penting lagi dalam utak utk tabel adalah atribut colspan dan rowspan,colspan adalah
atribut untuk menggabungkan kolom,sedangkan rowspan adalah atribut untuk menggabungkan
baris.

 <table border="1">
<tbody>   
  <tr>
       <td colspan="2">testting tabel</td>
  </tr>
  <tr>
       <td >testting tabel</td>
       <td >testting tabel</td>
  </tr>
</tbody>
</table>

testting tabel
testting tabel	testting tabel

 <table border="1">
<tbody>    
   <tr>
        <td rowspan="2">testting tabel</td>
        <td >testting tabel</td>
   </tr>
   <tr>
        <td >testting tabel</td>
   </tr>
</tbody>
</table>

testting tabel	testting tabel
	testting tabel

sekarang akan saya contoh kan bentuk tabel yang lebih rumit,

 <table border="1" width="100%">
    <tbody>          
         <tr>
              <td colspan="2">&nbsp;</td>
              <td>&nbsp;</td>
              <td rowspan="3">&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td rowspan="2">&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td> 
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td colspan="4">&nbsp;</td>
         </tr>
         <tr>
              <td rowspan="2">&nbsp;</td>
              <td>&nbsp;</td> 
              <td rowspan="2" colspan="2">&nbsp;</td> 
         </tr>
         <tr>
              <td>&nbsp;</td> 
         </tr>
    </tbody>
</table>

Sebenarnya ini adalah sangat mudah,hanya saja kita harus benar-benar tahu fungsi colspan dan rowspan .Jika kita mengusai tabel dengan benar,insaalloh kita akan mudah dalam pengerjaan web.Sekian dulu :)

Tag HTML DASAR

Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tag Utama Tag Atribut Deskripsi <html></html> Baris paling atas dari setiap file HTML <head></head> Informasi umum dari sebuah halaman web <title></title> Judul halaman. Terdapat pada head <body></body> Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth Settingan atribut untuk seluruh dokumen Modifikasi Teks Tag Deskripsi Contoh <b></b> Teks tebal Teks tebal <i> </i> Teks miring Teks miring <u> </u> Teks garis bawah Teks garis bawah <pre></pre> Preformatted teks Contoh teks <h1></h1> Header 1 Header 1 <h2></h2> Header 2 Header 2 <h3> </h3> Header 3 Header 3 <h4></h4> Header 4 Header 4 <h5></h5> Header 5 Header 5 <h6></h6> Header 6 Header 6 <sub></sub> Subscript Subscript <sup></sup> Superscript Superscript Font Tag Atribut Deskripsi <font></font> Color, size, name Mengubah gaya suatu huruf Links Tag Atribut Deskripsi <a> </a> Href, target, style, class, name, id Membuat link ke dokumen atau situs lainnya Gambar Tag Atribut Deskripsi <img> Src, alt, name, border, height, width Menampilkan sebuah gambar Formatting Tag Deskripsi Contoh <blockquote></blockquote> Digunakan untuk mengatur text dan gambar dalam suatu tag Contoh text in a block quote format ( “ “ ) <ol></ol> Ordered List (digunakan dengan <li>) 1. Item 1 <ul></ul> Unordered List (digunakan dengan <li>) • Item 1 <li> Elemen List <dd></dd> Definition List <dt> Definition Term <dd> Definition Description <p></p> Paragraf <br> Ganti baris <hr> Garis horizonta <center></center> Menengahkan elemen Tabel Tag Atribut Contoh <table></table> Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign Mengatur semua elemen table <tr></tr> Height, bgcolor, background, align, valign, title Membuat baris baru <td></td> Height, width, bgcolor, background, align, valign, title, colspan, rowspan Membuat kolom <th></th> Height, width, bgcolor, background, align, valign, title, colspan, rowspan Header(kepala tabel). Otomatis ke tengah dan tebal <tbody></tbody> Height, width, align, valign, bgcolor, background Format yang berlaku bagi cell yang diapit tag <colgroup></colgroup> Height, width, align, valign, bgcolor, background, colspan Format yang berlaku bagi kolom Form Tag Deskripsi Contoh <form></form> Method, action, name, enctype Mengatur elemen dari form <input type=> Text, password, hidden, radio, checkbox, submit, image, reset Variasi dari tipe elemen input dalam form <select></select> Name, size Membuat combo-box. Digunakan bersama dengan option <option> Selected, name, value <textarea></textarea> Name, rows, cols, wrap Membuat Text Area untuk input text dengan length yang lebih besar dari input text. wrap Off virtual physical no wrap word wrap, sent as one line word wrap, sent with breaks Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham.

Dasar HTML

HTML atau HyperText Markup Language adalah bahasa pemrograman dasar untuk menyusun
halaman WEB.File HTML disimpan dalam format teks yang mengandung tag-tag html yang
memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar HTML:

 <html> 
 <head> 
      // head area 
      <title>Disini Judul Dokumen HTML</title> 
 </head> 
 <body> 
      //body area 
      Disini penulisan informasi Web 
 </body> 
 </html> 

bagian-bagian struktur HTML :

a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah
tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag
penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah
tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk
menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang
tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

 <p> 
   <b> 
     ................ 
   </b> 
 </p> 

bukan seperti ini :

 <p> 
   <b> 
     ................ 
   </p> 
 </b> 

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai.
Penulisannya adalah sebagai berikut:

 <TAG> 
   nama-attr="nilai-attr" 
   nama-attr="nilai-attr" 
   ................. 
 > 
   ................. 
 </TAG> 

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh,
untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam,
penulisannya adalah

untuk lebih jelas kunjungi w3c