Pertemuan 2 (HTML)

tml

 

HTML

HTML adalah kependekan dari hyper text markup language. HTML digunakan untuk menuliskan kode-kode dan tag-tag sebagai tampilan pada web browser user client (aplikasi yang berjalan di sisi client). Membuat HTML secara sederhana adalah dengan memakai file text editor, contohnya jika di platform Windows memakai notepad, pada Macintosh memakai simple text, dan pada Linux memakai Gedit. Dengan demikian, HTML dapat berjalan di platform mana saja (multi platform) karena walaupun berbeda tempat pembuatannya, hasil yang akan ditampilkan akan sama saja.

Berikut ini merupakan beberapa komponen yang terdapat pada HTML.

1. Form

Form merupakan komponen HTML yang dituliskan di dalam tag berikut.

<form>

….

</form>

Form biasanya digunakan untuk membuat suatu tampilan web yang dapat mengolah inputan dari user. Jadi, semua data/value yang ada pada tag tersebut akan dikirimkan secara bersamaan. Berikut ini adalah contoh tampilan web yang menggunakan tag form.

 

form

 

2. Text Control

Merupakan komponen HTML yang mengelompokkan jenis inputan yang akan dikirimkan.

Biasanya text control dituliskan bersamaan dengan tag input.

 

3. Push Button

Merupakan tag HTML yang dituliskan bersamaan dengan tag input dengan typenya adalah submit. Penulisannya adalah sebagai berikut.

<input type = “submit” name = “tombol” value = “kirim”>

Maksud dari tag di atas adalah kita ingin membuat push button, maka typenya adalah submit. Lalu name pada tag tersebut adalah sebagai variabel data/value yang dikirimkan. Dan value adalah nama tombol yang akan muncul pada web browser. Pada contoh gambar sebelumnya, push button terletak pada tombol Kirim.

push button

 

4. Check Box

Adalah tag HTML yang dapat menampilkan kotak pilihan. Jika menggunakan tag checkbox ini, maka kita dapat memilih lebih dari satu pilihan. Tag ini juga dituliskan bersamaan dengan tag input dengan type checkbox. Penulisannya adalah sebagai berikut.

Hobi :

<input type = “checkbox” name = “hobi1” value = “membaca”>Membaca

<input type = “checkbox” name = “hobi2” value = “berenang”>Berenang

<input type = “checkbox” name = “hobi3” value = “gaming”>Gaming

<input type = “checkbox” name = “hobi4” value = “dll”>dll

Dengan tag HTML di atas, kita dapat memilih satu atau lebih hobi yang tersedia. Tampilan checkboxnya adalah seperti berikut ini.

checkbox

 

5. Radio Button

Merupakan salah satu tag HTML menampilkan beberapa pilihan. Namun, kita hanya dapat memilih satu dari semua pilihan yang tersedia. Penulisan tag radio button berada di dalam tag input dengan type radio. Penulisannya adalah sebagai berikut.

Jenis Kelamin :

<input type = “radio” name = “jenis kelamin” value = “laki-laki”>Laki-laki

<input type = “radio” name = “jenis kelamin” value = “perempuan”>Perempuan

Tag HTML di atas hanya menghendaki kita memilih satu dari dua jenis kelamin. Pada web browser akan menampilkan hasilnya seperti berikut ini.

radio button

 

6. Combo Box

Combo box digunakan untuk membuat beberapa pilihan menjadi sebuah drop down menu. Kita hanya dapat memilih satu dari semua pilihan yang ada pada drop down tersebut. Penulisan tag combo box adalah sebagai berikut.

<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 tag combo box di atas adalah sebagai berikut.

combo box

 

7. File Uploads

Merupakan tag HTML untuk mencari file yang akan diupload ke web browser kita. Penulisan tag file upload ini dituliskan bersamaan dengan tag input dengan type file. Berikut penulisan tag HTML file uploads

Upload Foto :

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

Contoh tag HTML di atas adalah untuk mengupload foto dari komputer kita yang nantinya data foto tersebut akan ditampung dalam variabel name dengan nilainya adalah “foto”. Hasil tampilannya adalah sebagai berikut ini.

file uploads

Jika kita klik Browse, web browser akan otomatis mengarahkan ke hard disk untuk mencari file yang akan diupload.

 

8. Server Slide Image Maps

Image maps pada HTMl berguna untuk menampilkan foto pada web browser. Tag yang digunakan adalah sebagai berikut.

<img src = “D:\gambar.png” width = “100” height = “100”>

Pada web browser kita nanti, akan menampilkan gambar.html yang berada di direktori D:\ dengan panjang sebesar 100 dan height sebesar 100 seperti berikut ini.

gambar

 

9. Hidden fields

Merupakan salah satu tag pada HTML yang tidak akan muncul pada web browser, namun tetap memiliki nilai dan dituliskan pada file html kita. Penulisan tag hidden fields ini juga ditulis bersamaan dengan tag input  dengan type hidden. Contoh penulisannya adalah sebaai berikut.

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

Arti tag di atas adalah ketika kita sudah mengisi suatu form, maka status kita akan terdaftar. Namun pada web browser, tag tersebut tidak ditampilkan, hanya nilai status terdaftar saja yang nanti akan dikirimkan ke server. Status tersebut juga dapat dilihat pada alamat URL web browser jika menggunakan method get.

hidden

 

10. Grouping Data

Merupakan cara yang digunakan pada HTML untuk mengelompokkan satu inputan. Penulisannya adalah sebagai berikut.

<fieldset>

<legend>Form Daftar</legend>

….

</fieldset>

 

Form Daftar yang kita buat di atas, berada dalam satu grup sehingga lebih mudah untuk pengolahan data-data yang diinputkan. Hasilnya adalah sebagai berikut.

grouping

 

11. Pengiriman data

a. Method GET

Cara pengiriman data dengan semua data/value yang dikirim akan ditampilkan pada alamat link URL. Method GET ini adalah method default pengiriman data pada web browser kita. Data/value yang dikirimkan akan terlihat seperti berikut ini.

get1

Value-value yang dikirimkan akan diteruskan ke file html lain yang bernama hasil.html sehingga value-value tersebut akan ditampilkan seperti ini.

http://localhost:8080/hasil.html?nama=Sena&tempat+lahir=Pekanbaru&tanggal+lahir=22-05-1996&pekerjaan=Mahasiswa&jenis+kelamin=laki-laki&hobi3=gaming&hobi4=dll&agama=islam&foto=foto.jpg&sembunyi=terdaftar

b. Method POST

Cara pengiriman data dengan tidak menampilkan data/value yang dikirim pada alamat link URL walaupun sama-sama diarahkan ke file hasil.html

http://localhost:8080/hasil.html

Penulisan kedua method tersebut bersamaan dengan penulisan tag form. Berikut adalah penulisannya.

<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://www.spiderbeat.com/2012/04/pengertian-dari-html-adalah.html

 

Leave a Reply

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