Jumat, 07 Maret 2014

Pemrograman Berbasis Web HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0.//EN" "http://www.w3.org/TR/html5/strict.dtd">
  <!--Tag <!DOCTYPE>dideklarasikan pada awal dokumen sebelum <html>. Tag ini
  memberitahukan kepada browser tipe dokumen HTML apakah XHTML. Tag ini sifatnya optional, 
  boleh ada atau tidak. <!DOCTYPE> ini terdiri dari 3 model tapi saya memakai model yang Strict 
  artinya pengecekan tag yg lebih teliti, gunakan tipe ini bersama dengan CSS-->
<html><!--artinya Mendefinisikan root dari suatu dokumen HTML-->
<head><!--<head>dapat digunakan sebagai tempat penulisan judul/title dokuments,informasi mengenai 
  dokuments dan definisi referensi alamat, di dalam <head> terdapat tag child, antara lain yang sering dipakai adalah:
  title,meta,link, style, script-->
 <title>Contoh Pemrograman Web HTML5</title><!--<title>digunakan untuk judul dokuments/menampilkan judul halaman web-->
</head>

<body><!--<body>Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan 
  di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya-->
 <form method="post|get"action="url">
   <!--<FORM>digunakan untuk suatu formulir pada documents,METHOD artinya (metode pengiriman, 
   digunakan pada server side) nilai post,get POST mengirimkan data secara terpisah,GET mengirimkan data pada
   server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk ,ACTION file tujuan dimana form dikirim, 
   digunakan pada server side-->
 <fieldset><!--<fieldset> digunakan untuk mendefinisikan wadah pengelompokan kontrol input-an pada formulir-->
 <legend>Form Registrasi </legend><!--<legend>digunakan untuk mendefinisikan judul dari<fieldset>-->
  <table><!--Tag <table>digunakan untuk membuat tabel biasanya diikuti oleh tag<tr>,<td>-->
   <tr><!--<tr></tr> digunakan untuk membuat baris-->
    <td>Nama</td><!--<td></td> digunakan untuk membuat kolom-->
    <td>:</td>
    <td> <input type="text" name="nama" required=required placeholder='Nama Anda ' ></td><!--element INPUT digunakan untuk 
   mendefiniskan suatu kontrol standar input-an pada formulir ,type jenis inputan ex: text,checkbox,radio dll, name artinya nama
   element -->
   </tr>
   <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><input type="text" name="alamat" required=required placeholder='Alamat Anda'></td>
    <!--input mendifiniskan suatu kontrol standart inputan -->
   </tr>
   <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>Laki-laki <input type="radio"name="gander"value="Laki-laki"></td>
    <td>Perempuan <input type="radio"name="gander"value="Perempuan"></td>
    <!--name artinya Nama vareable dari control yang akan menyimpan nilai dari input field-->
   </tr>
   <tr>
    <td>Kecamatan</td>
    <td>:</td>
    <td> 
    <select name="Kecamatan"><!--<select>digunakan untuk mendefinisikan kontrol daftar pilihan-->
     <option value="Pilih kecamatan">---Pilih Kecamatan---<!--<option>digunakan untuk mendefinisikan item dari kontrol daftar pilihan<select>-->
     <option value="sokobanah ">Sokobanah<!--value artinya Text yang di tampilkan pada tombol, default = "submit query"-->
     <option value="batu marmar">Batu Mar-Mar
     <option value="waru">Waru
     <option value="Ketapang">Ketapang
    </select>
    </td>
   </tr>
   <tr>
    <td>Tanggal Lahir</td>
    <td>:</td>
    <td><input type="Date" date="tanggal lahir" required=required placeholder='ex: DD-MM-YYYY'></td> 
   </tr>
   <tr>
    <td>No.Telpon</td>
    <td>:</td>
    <td><input type="number" number="no.telpon" required=required placeholder='ex: 0xxxxx'></td> 
   </tr>
   <tr>
    <td>Alamat Web</td>
    <td>:</td>
    <td><input type="url" url="alamat web" required=required placeholder='ex: http://xxx.com'></td> 
   </tr>
   <tr>
    <td>Email</td>
    <td>:</td>
    <td><input type="email" email="email" required=required placeholder='ex: xxx@xxx.com'></td> 
   </tr>
  </table>
  <input type="submit" value="Submit">
  <!--element button digunakan untuk mendefinisikan suatu tombol klik type aerinya mengirimkan atau mereset 
  form ke url yang telah di definisikan pada atribut action pada tag <form> value Memberikan nama label pada button.-->
 </fieldset>
 </form>
</body>
</html>


Anda bisa mendonwload file latihan dan source codenya di sini
Share:

0 komentar:

Posting Komentar

Popular