Gudang Ku

Membuat Radio Button

Praktek 3.4 Membuat Radio Button

<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.

Ketikkan tag seperti di bawah ini.

<html>

<body>

<h1>Contoh Radio Button</h1>

Jenis Kelamin : <input type="radio" name="jk" value="baca"> Laki-Laki

<input type="radio" name="jk" value="tulis"> Perempuan

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul 2 radio button.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Check Box

Praktek 3.3 Membuat Check Box

<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.

Ketikkan tag seperti di bawah ini.

<html>

<body>

<h1>Contoh Checkbox</h1>

Hoby : <input type="checkbox" name="Baca" value="ON"> Membaca

<input type="checkbox" name="Tulis" value="ON"> Menulis

<input type="checkbox" name="Makan" value="ON"> Makan

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul tiga check box.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Input Text

Praktek 3.2 Membuat Input Text

<input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.

Ketikkan tag seperti di bawah ini.

<html>

<h1>

<font color=white face="Arial">FORM DATA MAHASISWA<br>

UNIVERSITAS UNMUS</font>

</h1>

</center>

<pre>

Nama Anda : <INPUT TYPE=TEXT NAME="Nama"Size=20>

Alamat : <INPUT TYPE=TEXT NAME="Alamat"Size=30>

</pre>

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul form untuk menginput Nama Anda dan Alamat.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Penggunaan Metode GET

Praktek 3.1 Penggunaan Metode GET

Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get (di mana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Ketikkan tag seperti di bawah ini.

<html>
<head>
<title>Penggunaan Metode GET</title>
<body>
<center>
<form action="http://www.google.com" method="GET">
<table bgcolor=pink border=0 cellpadding=2 cellspacing=0>
<tr>
<td align=middle colSpan=2><B>Contoh Form</B></td>
</tr>
<tr>
<td>
<Input name=AlamatPalsu value="Masukkan e-mail anda">
<Input name="Klik di sini" type=submit value="Klik di sana">
</td>
</tr>
</center>
</body>
</head>
</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak ada form untuk menginput informasi.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Element TD

Praktek 2.10 Element TD

Tag <td> </td> ini digunakan untuk membuat kolom baru pada tabel.

Contoh tagnya seperti di bawah ini:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<th>

Ini adalah contoh header tabel

</th>

</tr>

<tr>

<td>

Sel 1,1

</td>

<td>

Sel 1,2

</td>

</tr>

<tr>

<td>

Sel 2,1

</td>

<td>

Selb2,2

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini:

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul kolom dan baris baru.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Element Tabel Heading

Praktek 2.9 Element Tabel Heading

Fungsi elemen <th> adalah membuat judul tabel otomatis bold.

Contoh tagnya seperti di bawah ini:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<th>

Ini adalah contoh header tabel

</th>

</tr>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini:

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak judul tabel otomatis menjadi bold (hitam tebal).

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Element Tabel Raw

Praktek 2.8 Element Tabel Raw

Table Row <tr>, mendefiniskan baris pada tabel.

Contoh tagnya seperti di bawah ini:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<td>

Ini adalah contoh header tabel

</td>

</tr>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Akan muncul baris baru.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Senin, 15 Agustus 2016

Praktek 3.4 Membuat Radio Button

Praktek 3.3 Membuat Check Box

Praktek 3.2 Membuat Input Text

Praktek 3.1 Penggunaan Metode GET

Praktek 2.10 Element TD

Praktek 2.9 Element Tabel Heading

Praktek 2.8 Element Tabel Raw