Pertemuan 2 HyperText Markup Language

Pertemuan 2 HyperText Markup Language

Pertemuan 2 HyperText Markup LanguageHyperText Markup Language yang biasanya disingkat HTML adalah bahasa standar yang digunakan untuk membuat halaman web dari sisi client. HTML dapat dibuat melalui berbagai editor, bahkan bisa melalui notepad sekalipun. Kolaborasi dengan CSS ( Cascading Style Scripts ) dan JavaScript membuat tampilan web menjadi lebih menarik dan dinamis.

Sedikit Sejarah dari HTML, HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Sejak tahun 1990 HTML mengalami perkembangan yang sangat pesat. Deskripsi pertama yang ditampilkan ke publik dari HTML adalah dokumen yang disebut “HTML Tag” oleh Tim Berners-Lee pada tahun 1991. Hingga saat ini HTML telah berkembang hingga versi terbarunya, yaitu HTML 5.0.

Logo HTML 5.0

Pertemuan 2 - HyperText Markup Language

Dalam HTML terdapat beberapa komponen tag seperti yang tergambar di bawah ini.

HTML Tag ( Xmind ) 2

Kita akan membahas satu persatu dari fungsi-fungsi tag di atas beserta contohnya :

  1. Form
    Berfungsi untuk mengambil inputan user. Data yang diambil dari tag <form> sampai tag akhir form “</form>.

    <form>

    element form…

    </form>

  2. Text Control
    Merupakan inputan berupa text dalam berbagai tipe, seperti :
    1. <input type=”text” name=”Nama” size=”30″ maxlength=”20″>
    – Inputan dengan tipe berupa text biasa
    – “size” berfungsi untuk menentukan panjang ukuran dari kotak inputan
    – “maxlength” berfungsi membatasi banyaknya inputan
         Berdasarkan contoh di atas, inputan dibatasi hanya 20 buah karakter.
    – “name” berfungsi sebagai variabel penampung nilai yang diinput oleh user.

    Hasil tipe input berupa text :
    Input type text
    2. <input type=”password” name=”Password”>
    –  Inputan dengan tipe password ( isi text disamarkan dengan bulatan hitam )

    Hasil tipe input berupa password :
    inputan type password
    3. <input type=”email” name=”Email”>
    – Inputan dengan tipe berupa email
    – Inputan harus benar sesuai dengan struktur email yang sebenarnya.

    Hasil tipe input berupa email :
    inputan tipe email salah
    *Inputan tersebut salah karena bukan merupakan struktur email yang benar.

    Hasil tipe inputan email yang benar :inputan email benar

  3. Push Button

    Dari 2 kata diatas, “Push” berarti mendorong atau menekan dan “Button” artinya tombol. Jadi Push Button ini adalah Tombol yang ditekan. Fungsi dari Push Button ini adalah mengirim semua value atau data yang telah diisi pada halaman web dengan syarat tempat inputan yang dibuat berada dalam tag <form>. Ketika  Sintaks HTMLnya seperti di bawah ini :
    <input type=”submit” name=”Kirim” value=”Kirim”>

    Hasil tipe inputan submit
    Inputan type submit

  4. Check Boxes

    Check Boxes, jika dipisah menjadi “Check” berarti benar ( tanda ceklis ) dan Boxes berarti kotak. Jadi CheckBoxes itu Kotak yang diberi tanda ceklis. Check Boxes dapat menyediakan lebih dari satu pilihan. Dan user dapat memilih lebih dari satu pilihan. Contoh kasus yang dapat menggunakan Check Boxes, seperti Hobi atau Aggrement seperti pada saat Pendaftaran Facebook. Sintaks untuk Check Boxes dapat dilihat di bawah berikut :
    <input type=”checkbox” name=”Hobi” value=”Badminton”>Badminton<br>
    <input type=”checkbox” name=”Hobi” value=”Berenang”>Berenang<br>
    <input type=”checkbox” name=”Hobi” value=”Membaca”>Membaca<br>
    *Contoh sintaks diatas memiliki 3 pilihan.

    Hasil inputan dengan tipe Check Boxes :
    inputan tipe checkboxes

  5. Radio Buttons
    Radio Buttons mirip dengan Check Boxes. Kalau Check Boxes tandanya berupa ceklis, sedangkan penandaan Radio Buttons berupa bulatan hitam.
    Selain itu, Radio Buttons juga menyediakan banyak pilihan seperti Check Boxes, tetapi user hanya diperbolehkan memilih salah satu dari pilihan yang disediakan. Contoh kasus yang dapat menggunakan Radio Buttons seperti Jenis Kelamin, pasti kamu milih antara Laki-laki atau Perempuan kan ??
    Berikut sintaks untuk Radio Buttons :
    Jenis Kelamin :
    <input type=”radio” name=”Jenis Kelamin” value=”Laki-laki”>Laki-laki
    <input type=”radio” name=”Jenis Kelamin” value=”Perempuan”>Perempuan
    <br>Hasil inputan dengan tipe Radio :
    Inputan type radio
  6. Combo Boxes

    Inputan tipe Combo Boxes ini juga seperti Radio Buttons, yaitu memilih salah satu dari beberapa pilihan.
    Bedanya itu terdapat pada tampilannya. Jika pada Radio Buttons menampilkan semua pilihan pada halaman web, sedangkan Combo Boxes menampilkan pilihan-pilihannya dengan drop-down.
    Penulisan sintaks combo boxes ini dengan elemen “select” dan “option” sebagai pilihannya. Sintaks untuk membuat Combo Boxes dapat dilakukan seperti di bawah ini :

    Jurusan :
    <select name=”Jurusan”>
    <option selected=”Pilih Jurusan”>Pilih Jurusan</option>
    <option>Teknik Informatika
    <option>Sistem Informasi
    <option>Teknik Elektronika Telekomunikasi
    <option>Teknik Komputer</option>
    <option>Teknik Mesin</option>
    <option>Teknik Listrik</option>
    <option>Teknik Mekatronika</option>
    <option>Teknik Telekomunikasi</option>
    <option>Teknik Elektronika</option>
    <option>Akuntansi</option>
    </select><br>

    Hasil yang ditampilkan :
    Inputan type combo boxes

  7. List Boxes

    List Boxes dapat dikatakan hampir sama dengan Combo Boxes, sama-sama memiliki drop-down choice ( pilihan ).
    Perbedaannya yaitu pada List Boxes, tampilannya seperti inputan bertipe text seperti yang di jelaskan sebelumnya. Pada saat kita menginputkan text, muncul pilihan-pilihan seperti yang terdapat pada combo boxes.
    Sintaks dalam membuat List Boxes sebagai berikut :

    Agama :
    <input list=”Agama” name=”Agama”>
    <datalist id=”Agama”>
    <option value=”Buddha”>
    <option value=”Protestan”>
    <option value=”Islam”>
    <option value=”Hindu”>
    <option value=”Katolik”>
    <option value=”Konghucu”>
    </datalist><br>

    Hasil yang ditampilkan :
    Inputan list box
    inputan list box ( pada saat pengetikan )

  8. File Uploads
    Selain inputan berkategori text, ada juga inputan khusus untuk file. Tipe inputan ini disebut File. Cukup dengan mengklik tombol “Browse”, lalu pilih file yang akan kita upload ke halaman web. Sintaks dalam pembuatan inputan bertipe file seperti di bawah ini :
    File CV :
    <input type=”FILE” name=”File CV”>

    Hasil yang ditampilkan pada halaman web :

    Inputan tipe file

  9. Server Side Image Maps
    HTML juga mendukung terjadinya penampilan gambar atau foto pada browser. Sintaks untuk menampilkan gambar pada browser yaitu :<image src=”Images/java.png” width=”150px” height=”120px”>
    – “width” berfungsi untuk mengatur panjang gambar secara horizontal.
    – “height” berfungsi untuk mengatur tinggi gambar secara vertikal.
    – “scr” berfungsi untuk menentukan gambar yang akan dipasang pada browser sesuai dengan lokasi file gambar.

    Hasil yang ditampilkan pada browser :
    Inputan tipe gambar

  10. Hidden Fields
    Tipe inputan kali ini sedikit berbeda dari tipe inputan yang lain. Mengapa berbeda ??? Tipe ini sedikit malu dari yang lain. Tidak pernah memunculkan diri pada browser. Tetapi tetap ada data yang dikirim meskipun tidak nampak oleh user pada browser.
    Hidden Fields ini juga sangat membantu developer untuk mengirim data tanpa diketahui oleh user, biasanya berisi kode-kode khusus atau data lain yang dirasa tidak penting untuk diketahui oleh user.
    Untuk mendeteksinya cukup memakai tipe pengiriman method “GET”. Penjelasan tipe pengiriman data akan dijabarkan pada nomor 12.
    Sintaks pembuatan inputan bertipe hidden seperti di bawah ini :
    <input type=”hidden” name=”TanggalAkses” value=”2016-03-27″>

    Berikut Hasil ketika pengimplementasian hidden fields :
    inputan tipe hidden
    Ketika kita menekan button “Simpan”, kelihatannya tidak terjadi apa-apa. Sebenarnya dibalik itu sudah ada data yang terkirim. Tampak seperti gambar di atas, dengan method pengiriman GET dapat ketahuan nih data apa sih yang dikirim..

  11. Grouping Data
    Teknik Grouping Data yaitu mengelompokkan data-data inputan dalam satu kotak, terdiri dari tag <fieldset> sebagai kotak itu sendiri dan tag <legend> sebagai keterangan pengelompokan tersebut.
    Sintaks dalam pembuatan grouping data yaitu :
    <fieldset>
    <legend>Form Fieldset</legend>
    </fieldset>

    Hasil yang ditampilkan :
    Fieldset dan legent

  12. Pengiriman Data
    Setelah kita menginputkan data-data atau value yang diminta pada form. Pastinya data-data itu akan dikirim ke server atau tempatnya pengembang/developer.
    Dalam pengiriman data ini menggunakan tag <form> yang memiliki kata action yang berarti alamat atau tempat yang akan dituju oleh data-data yang telah diinputkan. Dan kata method yang berarti metode pengiriman apakah yang kita inginkan yang terdiri dari 2 buah, yaitu :
    1. GET
    Metode GET ini menampilkan data-data yang diinputkan oleh user pada URL.–.Sintaks dalam pembuatan form dalam method GET
    -.f<form action=”OlahGET” method=”GET”>
    1.1. Isi Form……1.
    1.
    1.
    </form>
    –.

    Berikut contoh URL ketika memakai method GET.Method get form

    Jadi, misalnya kita mengetikkan username dan password pada form ini, value dari username dan bahkan password yang diinputkan akan ketahuan di URL ini.

    2. POST
    2. Method POST berbeda dari method GET, dia lebih dapat dipercaya karena 2…inputan kita tidak ditampilkan di URL ketika menekan tombol “Submit”.
    2.  Sintaks dalam pembuatan form dalam method POST
    -.2<form action=”OlahPOST” method=”POST”>

    1. Isi Form……1.
    1.
    1.
    </form>

    2. Berikut contoh URL ketika kita memakai method POST
    method post form

     

     

     

Nah, gimana ?? Udah pada mengerti belum??

Ini saya berikan contoh form yang memuat semua komponen di atas :

Contoh Form

Sintaks HTML untuk Open Recruitment Panitia “Programmer Day” seperti di bawah ini :

<html>
<head>
<title>Form Recruitment</title>
<body>
<h2>Open Recruitment Panitia “Programmer Day”</h2>
<form method=”GET”>
<image src=”Images/java.png” width=”150px” height=”120px”><br>
<fieldset>
<legend>Form Penginputan Tugas</legend>
Nama :
<input type=”TEXT” name=”Nama” maxlength=”20″ size=”17″><br>
Kelas :
<input type=”TEXT” name=”Kelas” maxlength=”5″ size=”10″><br>

Jenis Kelamin :
<input type=”radio” name=”Jenis Kelamin” value=”Laki-Laki”> Laki-laki
<input type=”radio” name=”Jenis Kelamin” value=”Perempuan”> Perempuan<br>
Hobi :
<input type=”checkbox” name=”Hobi” value=”Menulis”>Menulis
<input type=”checkbox” name=”Hobi” value=”Membaca”>Membaca
<input type=”checkbox” name=”Hobi” value=”Olahraga”>Olahraga<br>
<input type=”Hidden” name=”Universitas=”PCR”>
Jurusan :
<select name=”Jurusan”>

<option selected=”Pilih Jurusan”>Pilih Jurusan</option>
<option value=”Teknik Informatika”>Teknik Informatika</option>
<option value=”Sistem Informasi”>Sistem Informasi</option>
<option>Teknik Elektronika Telekomunikasi</option>
<option>Teknik Komputer</option>
<option>Teknik Mesin</option>
<option>Teknik Listrik</option>
<option>Teknik Mekatronika</option>
<option>Teknik Telekomunikasi</option>
<option>Teknik Elektronika</option>
<option>Akuntansi</option>
</select><br>
Agama :
<input list=”Agama” name=”Agama”>
<datalist id=”Agama”>
<option value=”Buddha”>
<option value=”Protestan”>
<option value=”Islam”>
<option value=”Hindu”>
<option value=”Katolik”>
<option value=”Konghucu”>
</datalist><br>
File CV :
<input type=”FILE” name=”File”><br>
<ol>Syarat pengumpulan :
<li>Deadline tanggal 28 maret</li>
<li>Maksimal 1 halaman</li>
<li>Ukuran tulisan 12</li>
<li>Isi CV sekreatif mungkin</li>
</ol>
<input type=”Submit” name=”Submit” value=”Simpan”>
</fieldset>
</form>
</body>
</head>
</html>

Referensi yang mendukung :

https://en.wikipedia.org/wiki/HTML

http://www.w3schools.com/html/html_forms.asp

http://www.duniailkom.com/tutorial-form-html-fungsi-dan-cara-penggunaan-tag-input-type-hidden-html/

http://pintasku.net/elemen-input-type-hidden-dalam-html/

 

 

,
One comment on “Pertemuan 2 HyperText Markup Language
  1. Pingback: Pertemuan 3 Pemrograman Web J2EE dan Konsep Client-Server - Fandy's Personal Blog

Leave a Reply

Your email address will not be published. Required fields are marked *