Home » HyperText Markup Language » HTML (HyperText Markup Language) - Lanjutan

Thursday, September 5, 2019

HTML (HyperText Markup Language) - Lanjutan

Posted by on Thursday, September 5, 2019


a.      HTML Table

Sebuah tabel HTML didefinisikan dengan tag <table>. Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah tabel header didefinisikan dengan tag <th>. Secara default, heading table adalah bold dan centered. Sebuah data/sel tabel didefinisikan dengan tag <td>. Contoh :
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

HTML Table - Menambahsebuah Border (garis pembatas)
Jika tidak ditentukan secara spesifik garis pembatas pada sebuah tabel, maka akan ditampilkan tanpa pembatas. Sebuah pembatas diset dengan property pembatas CSS. Sebagai catatan definsikanlah garis pembatas tabel dan selnya.
Contoh :
table, th, td {
    border: 1px solid black;
}
HTML Table - Collapsed Borders
Jika diingkinkan garis pembatas bertumpang tindih satu sama lain (collapsed), tambahkanlah property CSS border-collapse.
Contoh :
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
HTML Table –Menambah Cell Padding
Cell padding men-spesifikkan spasi antara isi sel dan garis pembatasnya. Jika tidak di-spesifikkan sebuah padding, sel-sel tabel akan ditampilkan tanpa padding. Untuk men-set padding digunakan property CSS.
Contoh :
th, td {
    padding: 15px;
}

HTML Table - Left-align Headings
Secara default, table heading atau kepala tabel adalah tebal dan posisinya berada ditengah. Untuk membuat rata kiri dapat digunakan property CSS text-align.
Contoh :
th {
    text-align: left;
}

HTML Table –Menambah  Border Spacing
Border spacingmen-spesifikkan spasi antara sel-sel. Untuk men-set border spacing sebuah tabel, dapat menggunakan property CSS border-spacing. Jika tabel diset dengan collapsed border, border-spacing tidak akan memberikan efek.
Contoh :
table {
    border-spacing: 5px;
}

HTML Table –Sel dengan rentang menjadi beberapa kolom
Untuk membuat sebuahcell span(rentang sel) lebih dari satu kolom, gunakan atribut colspan.
Contoh:
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Sel dengan rentang menjadi beberapa baris
Untuk membuat sebuah cell span (rentang sel) lebih dari satu baris, gunakan atribut rowspan.
Contoh:
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Table –Menambah judul tabel
Menambah judul dari sebuah tabel dapat digunakan tag  <caption>. Tag <caption> harus disisipkan setelah tag <table>.
Contoh:
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Satu Style  Khusus untuk Satu Tabel
Untuk mendefinisikan sebuah style khusus untuk sebuah tabel khusus, tambahkan sebuah  atribut id pada tabel.
Contoh :
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Sehingga, style khusus untuk tabel ini adalah :

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

dan, dapat pula ditambahkan style :
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

a.      HTML Form

Elemen <form>
Elemen HTML <form> mendefinsikan sebuah form yang digunakan untuk mengambil masukan/input dari pengguna.
<form>
.
.
form elements
.
.
</form>

Sebuah HTML form berisi elemen-elemen form. Elemen-ElemenForm adalah terdiri dari beberapa jenis elemen yang berbeda, seperti text fields, checkboxes, radio buttons, submit buttons, dan seterusnya.
Elemen <input>
Elemen <input> adalah elemen yang paling penting  dari elemen form. Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada tipe-tipe atributnya.
Tabel 3.1 Beberap contoh tipe elemen <input>
Tipe
Deskripsi
<input type="text">
Mendefinisikan satu baris text input field
<input type="radio">
Mendefinisikan satu radio button (untuk memilih satu dari beberapa pilihan)
<input type="submit">
Mendefinisikan satu submit button (untuk fom pengiriman )
<input type="password"> 
Mendefinsikan sebuah password field
<input type="reset"> 
Mendefinisikan satu tombol reset yang akan mereset semua nilai menjadi nilai default.

Text Input
Contoh :
<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Browser akan menampilkan seperti ini :
First name:

Last name:
Catatan, secara default, rentang isian sebuah text field adalah 20 karakter.

Radio Button Input
Radio buttons akan meminta user memilih SATU dari pilihan terbatas.
Contoh :
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Browser akan menampilkan kode HTML di atas sebagai berikut :

 Male
 Female
 Other

The Submit Button
<input type="submit"> mendefinisikan sebuah tombol(button)untuk submitting (mengirimkan) data dari form ke form-handler.Form-handleradalah tipe halaman server dengan sebuah skrip untuk pemrosesan data yang dimasukkan. form-handler secara khusus dalam atribut actiondari form.
Contoh :
<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Browser akan menampilkan kode HTML di atas sebagai berikut :
First name:
 
Last name:
 

Input Type Password
Contoh :
<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

Browser akan menampilkan kode HTML di atas seperti :
User name:

User password:

Karakter dalam password field akan tertutup (tampilan hanya berupa karakter asterik atau bulatan hitam)
Input Type Reset
Contoh :
<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

Browser akan menampilkan kode HTML di atas seperti :
First name:

Last name:
 

 
jika nilai-nilai input diubah kemudian tombol “Reset” ditekan, form-data akan direset ke nilai default.

The Action Attribute
Atribut action mendefinisikan aksi yang akan dilakukan ketika form dikirimkan. Secara normal, data form dikirim ke halaman web pada server ketika pengguna meng-klik pada tombol submit. Pada contoh di atas, data form di kirim ke satu halaman pada server yang diberi nama "action_page.php".  Halaman ini berisi skrip server-side (sisi server) yang mengolah data form.
<form action="action_page.php">
Jika atribut action dihilangkan, aksi di-set pada halaman itu sendiri.

The Method Attribute
Atribut method menentukan HTTP method (GET atau POST) yang digunakan ketika mengirimkan data form.
<form action="action_page.php" method="get">
Atau
<form action="action_page.php" method="post">

Kapan menggunakan GET?
Method default ketika pengiriman data form adalah GET. Namun, ketika GET digunakan, data form yang dikirim akan terlihat pada field alamat halaman.
action_page.php?firstname=Mickey&lastname=Mouse
catatan, GET tidak boleh digunakan untuk mengirim informasi yang dirahasiakan !. GET paling cocok untuk jumlah data kecil dan tidak rahasia.

Kapan menggunakan POST?
Selalu gunakan POST jika data berupa data atau informasi yang sifatnya rahasia. Method POST tidak akan ditampilkan pada field alamat halaman ketika data form dikirim. POST tidak memiliki batasan ukuran sehingga dapat digunakan untuk mengirim data dalam jumlah yang besarhas no size limitations, and can be used to send large amounts of data.

Atribut Name
Setiap input field harus memiliki atribut name untuk dikirim. Jika atribut name dihilangkan, data dari input field tidak akan dikirim. Contoh berikut hanya akan mengirim input field dengan nama “last name”.
<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Pengelompokkan Form Data dengan<fieldset>
Elemen  <fieldset> digunakan untuk mengelompokkan data-data yang berhubungan dalam sebuah form. Elemen <legend> mendefinisikan judul untuk elemen<fieldset>. Contoh :
<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Browser akan menampilkan kode HTML di atas sebagai berikut :
Personal information:First name:
 
Last name:
 

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )
Terimakasih Telah Berkunjung Ke Blog Kami :)