Pertemuan 2 – HTML

html-1024x768HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah bahasa markah berupa syntax atau kode yang dimasukkan ke dalam sebuah file untuk membuat tampilan website. website yang dibuat dengan kode HTML dapat terhubung oleh semua pengguna. asalkan pengguna tersebut memiliki penghubungnya yakni berupa browser. seperti Chrome, Mozilla Firefox, Safari, dll.

Syntax HTML ini dapat dibuat disistem operasi mana saja. seperti Windows dengan notepad, Linux dengan Gedit, dan Macintosh dengan Simple Textnya. sehingga dinamakan juga MULTIPLATFROM yaitu apabila dibuat di tempat yang berbeda maka tampilannya sama saja.

bahasa HTML terbaru adalah html 5 yang saat ini memudahkan penggunanya. akan tetapi hal ini belumlah cukup karena teknologi semakin canggih dan berkembang pesat. sehingga HTML ini terus ditingkatkan agar menciptakan tampilan web yang berkualitas. untuk itu terdapat organisasi dalam pengembangan bahasa HTML yang bernama W3C.

Berikut adalah mind map komponen yang terdapat pada HTML:

tml
1. Form
form adalah bagian dari dokumen web yang disi oleh pengguna a. form sangat dibutuhkan untuk membangun aplikasi yang dinamis agar pengembang website dapat mengetahui informasi dari pengguna.

berikut tag untuk membuat form:

<form>

….

</form>

contoh tampilan web menggunakan form:

form

2. Text Control
adalah jenis inputan yang mengelola inputan jenis text oleh user.
penulisan tag nya adalah sebagai berikut:

<input type = “text” name = “nama”>

tampilan:

text field

3. Push Button
adalah jenis inputan untuk membuat tombol submit atau tombol untuk mengirimankan semua data yang telah diinputkan

<input type = “submit” value = “Kirim”>

push button
4. Check Box
pada check box, user nantinya dapat memilih salah satu atau kesemua pilihan yang disediakan. tag ini dituliskan bersamaan dengan “input” dengan type “checkbox”.

Hobi :
<input type = “checkbox”>Membaca
<input type = “checkbox”>Berenang
<input type = “checkbox”>Gaming

hasil:

Check Box

5. Radio Button
adalah tag html untuk menampilkan pilihan. untuk bagian pilihan ini, kita hanya dapat memilih satu pilihan saja. tag ini dituliskan bersamaan dengan “input” dengan type “radio”.

Jenis Kelamin :
<input type = “radio” name = “jenis kelamin” value = “laki-laki”>Laki-laki
<input type = “radio” name = “jenis kelamin” value = “perempuan”>Perempuan

hasil:

Radio Button

6. Combo Box
adalah tag html untuk membuat kotak berisi pilihan dengan memilih salah satu pilihan dari daftar yang dibuat. Biasa digunakan untuk memilih jenis agama si pengguna.

           <select name = “agama”>
<option>Pilih Agama</option>
<option value = “islam”>Islam</option>
<option value = “katolik”>Katolik</option>
<option value = “protestan”>Protestan</option>
<option value = “hindu”>Hindu</option>
<option value = “buddha”>Buddha</option>
</select>

hasil:

Combo box

7. File Uploads
komponen tag html yang berfungsi untuk mencari file yang akan di upload ke web. dapat berupa audio, foto, document.
contoh penggunaan file uploads adalah untuk membuat foto profil di sosmed. maka kita akan diminta upload foto yang diinginkan.
tag ini dituliskan bersamaan dengan “input” dengan type “file

<input type = “file” name = “foto”>

hasil:

file upload

8. Server Side Images
images map pada komponen html untuk menampilkan gambar pada web browser. penulisan tagnya adalah:

<img src = “D:\Atiya’s Zone\PICTURE\bahan poster\Foto Islami\Ikhwan Akhwat
\wanwat.jpg”>

hasilnya tampil gambar pada web browser kita:

wanwat

9. Hidden Fields
sesuai namanya hidden (sembunyi), ia tidak akan tampil di web browser kita. tetapi masih memiliki nilai dan tertulis pada file html kita.

<input type = “hidden” name = “sembunyi” value = “terdaftar”>

artinya adalah ketika kita sudah mengisi semua form, maka status kita akan terdaftar dan hanya tampil pada url di web browser saja. sedangan tampilan di dalam web browser tidak tampil. kita bisa mengeceknya pada url di web browser kita jika kita menggunakan method get

url hidden field

10. Grouping Data
komponen html untuk mengelompokkan suatu inputan

<fieldset>
<legend>Form Daftar</legend>

…..
<fieldset>

hasil:

grouping data

11.Pengiriman Data

ada 2 tipe pengiriman data

– method GET

data-data yang ada pada form yang kita buat maka secara otomatis akan terkirim dengan menggunakan method GET. nantinya data-data tersebut menjadi sebuah value yang diarahkan ke link lain. contoh:

  1. ini adalah data yang kita inputkan sebelum dikirimkanform1
  2. setelah dikirim
    karena dalam kode html kita menggunakan method get dan diarahkan ke hasil.html maka pada url browser kita akan tampil:

    http://localhost:8080/hasil.html?nama=atiya&tempat+lahir=pekanbaru&pekerjaan=mahasiswa&jenis+kelamin=perempuan&agama=islam&foto=1511455301010_atiy_1421204802.jpg&sembunyi=terdaftar

– method POST

data-data yang ada apabila kita mengirimnya dengan menggunakan method post maka value dari data tersebut tidak akan ditampilkan di url browser.
maka yang tampil

http://localhost:8080/hasil.html

cara memberikan method GET dan POST pada tag html:

<form action = “localhost:8080/hasil.html” method = “get”>

<form action = “localhost:8080/hasil.html” method = “post”>

 

referensi:

http://dul.web.id/belajar/html/tag-element/input.php

http://senasama.blog.pcr.ac.id/2016/03/21/html/

http://www.burung-net.com/2015/05/pengertian-html-fungsi-html-serta-sejarah-html.html

Leave a Reply

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