HTML

Pada pertemuan ke-2 mata kuliah pemrograman web kali ini, saya akan mereview apa yang saya dapatkan pada perkuliahan di kampus mengenai HTML. Temen-temen pasti pernah atau bahkan sering mendengar istilah html. Nah, apa sih itu html? Yuk kita bahas sama-sama.

HTML (Hypertext Markup Language) 
adalah bahasa markup yang digunakan untuk membuat website, nah jadi untuk membuat sebuah website kita memerlukan syntax html.

Dalam HTML kita akan mengenal beberapa istilah dibawah ini :
1. Push Buttons

Push Buttons terdiri dari 2 jenis :

• Submit Button   : Tombol ini berfungsi untuk memproses form.

      Syntax 

      <input type = "submit" value="submit">

• Reset Button      : Tombol ini berfungsi untuk mengosongkan isian form.

      Syntax

      <input type = "reset" value="reset">

2. Radio Buttons

Tombol ini berfungsi untuk memasukkan pilihan (hanya satu pilihan) . Contohnya pilihan jenis kelamin

Syntax 

<input type="radio" name="jk" value="Laki-laki">Laki-Laki</input>

<input type="radio" name="jk" value="Laki-Perempuan">Perempuan</input>

3. Check Boxes

Fitur untuk pilihan yang dapat dicentang lebih dari satu pilihan

Syntax

<input type="checkbox" name="hobi" value="Berenang">Berenang</input>
<input type="checkbox" name="hobi" value="Basket">Basket</input>
<input type="checkbox" name="hobi" value="Basket">Voly</input>

4. Combo Boxes

Fitur untuk memilih salah satu pilihan, dengan tampilan drop down.

Syntax

<select>
  <option value="Pekanbaru">Pekanbaru</option>
  <option value="Jakarta">Jakarta</option>
  <option value="Medan">Medan</option>
  <option value="Bandung">Bandung</option>

</select>

5. List Boxes

Fungsinya sama dengan combo boxes di atas, hanya saja berbeda pada tampilannya, yaitu list box dapat di scroll.

Syntax

<select name="Kota" multiple="multiple">
    <option>Pekanbaru</option>
    <option>Jakarta</option>
    <option>Medan</option>
    <option>Bandung</option>
    <option>Surabaya</option>

 </select>

6. Text Control

Text Control terbagi menjadi 3 :

• Text Field            : Text box inputan yang menerima inputan berupa tulisan / text. Contohnya inputan nama, alamat, username, dan lain lain yang merupakan inputan text pendek.

Syntax

Nama : <input type="text"> 

• Password Field   :  Text box inputan yang menerima inputan berupa password, tampilannya sama dengan text field hanya saja, inputan yang dimasukkan nantinya akan tampak berupa **** atau ••••

Syntax

Password : <input type="password">

• Text Areas           : Berfungsi sebagai kolom area teks yang dapat menampung karakter

Syntax

Alamat : <text area cols="30" rows="10">

7. Form

Merupakan salah satu elemen html yang digunakan untuk menerima inputan data dari pengunjung melalui sebuah form pengunjung pada halaman web yang dapat melakukan interaksi dengan web.

Syntax

<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> 

8. File Upload

Fitur untuk meng-upload file sesuai dengan kebutuhan

Syntax

Masukkan file :
<input type="file">
</input>

9. Server Side Image Maps

Berfungsi untuk menyimpan definisi map ke dalam server. Contohnya pada sebuah gambar peta dunia, terdapat pula beberapa gambar benua di dalamnya, maka ketika kita mengklik gambar benua asia contohnya, maka akan keluar informasi mengenai benua asia.

Syntax :

<a href="/action_page.php">
  <img src="w3html.gif" alt="W3Schools.com" width="100" height="132" ismap>
</a>

Misalnya pada gambar di bawah kita klik terserah dibagian mana saja.

kemudian maka ketika diklik, akan mengantarkan kita ke suatu halaman yang berisikan koordinat dari gambar tersebut 

Sumber : w3schools.com

10. Hidden Fields

Berfungsi untuk mengirim data ke suatu halaman ke halaman yang lain tanpa mengganggu bentuk form yang ada, biasa digabyngkan dengan proses javascript/php

Syntax 
<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  <input type="hidden" name="country" value="Norway">
  <input type="submit" value="Submit">
</form>

<p>Perhatikan bahwa fields bertipe data hidden tidak terlihat oleh user.</p>

namun ketika di submit, data fields yang bertipe hidden tetap terkirim

Sumber : w3schools.com

11. Grouping Controls

Berfungsi untuk mengelompokkan beberapa selector maupun tag html agar terlihat lebih rapi

Syntax
<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>

</form>

12. Method Pengiriman Data

Dalam pengiriman data terdapat 2 method :

1.Post

Pada method post ini memiliki beberapa karakteristik, yaitu :

- Tidak menampilkan nilai variabel ada URL
- Lebih aman karena password tidak tampil pada URL
- Dibatasi panjang string
- Method post biasanya digunakan untuk input dari form
- Untuk mengirim data rahasia
- Dibatasi ukuran filenya 8mb hanya saja dapat diubah pada pengaturan

Syntax
<form action ="thanks.html" method ="post">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">

</form>

Contohnya pada pengiriman form diatas menggunakan method "POST", ketika kita menekan tombol submit maka yang akan muncul di URL nya akan tampak seperti berikut ini :

2.Get

Pada method post ini memiliki beberapa karakteristik, yaitu :

- Menampilkan nilai variabel yang dikirimkan
- Kurang aman karena password ditampilkan pada URL
- Dibatasi string hingga 2047 karakter
- Menggunakan input dari link / akses menggunakan link
- Digunakan untuk mengirim / mengambil data publik

Syntax
<form action ="thanks.html" method ="get">
nama : <input type = "text" name="nama">
pass : <input type = "password" name="pass">
<input type="submit">

</form>

Contohnya pada pengiriman form diatas menggunakan method "GET", ketika kita menekan tombol submit maka yang akan muncul di URL nya akan tampak seperti berikut ini :

Tampak perbedaan antara URL yang menggunakan method POST dan GET adalah nilai yang kita kirimkan menggunakan method POST tidak tampak, sedangkan pada method GET nilai yang dikirimkan ditampilkan pada URL.

Sumber : wikipedia.co.id

Sekian pembahasan mengenai HTML kali ini, mohon maaf jika terdapat kesalahan karena saya masih belejar. Terimakasih sudah membaca 😀😀😀😀