multimedia

Minggu, 29 Maret 2015

Membuat Table Pada HTML

1.Membuat Table Sederhana

Baik teman-teman kali ini kita akan belajar bagaimana cara membuat Table pada HTML. Cara membuat Table pada HTML diperlukan tida tag dasar yaitu:

-penanda table<table>

-penanda baris <tr>

-penanda kolom<td>

Tag <table> untuk menandai sebuah Table,<tr> untuk membentuk garis,dan <td> untuk membentuk kolom. secara default nilai border =0, jadi table akan tampil pada browser tanpa bingkai. Untuk dapat menampilkan bingkai,maka nilai border harus diberi nilai minimal=1.
Jangan lupa jika sudah anda masukkan kode awalan maka anda juga harus memakai kode penutupnya juga.

</td>
</tr>
</table>

Contoh dibawah ini adalah serangkaian kode HTML untuk membuat table sederhana:

<html>
<Head>
<Title>Tabel saya</title>
</head>
<body>
<p>Ini<strong>tabel saya</strong>yang sudah jadi</p>
<table>
<tr>
<td>kolom pertama baris ke 1</td>
<td>kolom kedua baris ke 1</td>
<td>kolom ketiga baris ke 1</td>
</tr>
<tr>
<td>kolom ke 1 baris kedua</td>
<td>kolom ke 2 baris kedua</td>
<td>kolom ke 3 baris kedua</td>
</tr>
</table>
</body>
</html>

Maka hasilnya browser akan menampilkanya seperti ini.

Gambar 1.1

Bagaimana apakah anda sudah paham bukan ??

2.Membuat Table Kompleks

Kali ini kita akan bahas bagaimana cara membut table yang kompleks . Kompleks disini adalah sebuah table yang akan menggabungkan beberapa cell sesuai kebutuhan contohnya seperti ini.

Gambar 1.2

Bagaimana cara membuatnya??

Rumus sederhana untuk membuat kode rumit diatas adalah seperti ini:

1.Buat dulu tag table

<html>
<head>
<title>Table Arisan</title>
</style>
</head>
<body>
<p>ini table arisan pengajian ibu-ibu didendang</p>
<table>
</table>

2.Ditengahnya table kita masukkan berapa baris table yang ingin kita buat. Misal contoh diatas kita buat sampai ada 3 baris

<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

3.Sekarang kita buat kolomnya. Dibaris pertama, kolom pertama, kolomnya turun hingga baris ke-2.Berarti ada 2 baris yang digabungkan, maka atributnya ROWSPAN="2" Sehingga jandinya seperti ini.

<table>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

4.Kolom ke-2 dibaris pertama menggabungkan 4 kolom. maka atributnya COLSPAN="4" sehingga jadinya seperti ini.

<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

5. Berikutnya baris kedua. Karena kolom pertama sudah diambil alih oleh kolom pertama baris pertama, maka sudah tidak perlu kita urus lagi. Jadi, langsung aja ke kolom kedua, ketiga, keempat dan kelima. Jadinya seperti ini:

<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

Lihat kan? Saya cuma menambahkan 4 kolom saja di baris 2 karena kolom 1 kan sudah diambil oleh baris pertama sehingga kita hanya perlu menambah kekurangannya saja.

6. Baris ketiga karena tidak ada yang diambil alih, berarti tetap 5 kolom yang kita pasang. Jadinya:

<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

7. Sekarang tinggal mengisi saja kolom-kolomnya dengan text sesuka hati. Dan inilah hasil akhir untuk tampilan diatas:

<html>
<head>
<title>Table Arisan</title>
<style type="text/CSS">
table, td,tr {
border:1px solid #C6C6C6;
}
</style>
</head>
<body>
<p>ini table arisan pengajian ibu-ibu didendang</p>
<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama ibu'-ibu'</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">Bulan</td>
</tr>
<tr>
<td>Muharom</td>
<td>safar</td>
<td>robiul awal</td>
<td>robiul akhir</td>
</tr>
<tr>
<td>yani</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>cahyu</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>sari</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>

Selamat mencoba !!!

3.Membuat Table Dengan Heading

Kali ini kita akan mencoba membuat table dengan menggunakan heading.
Contohnya seperti ini.

Gambar 1.3

ini lah langkah-langkahnya:

1.Buka dulu kode pembuka HTML dan kodeTable

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>

2.Ditengahnya table kita masukkan penanda baris table pertama dan juga penanda heading yang ingin kita buat,sehingga jadinya seperti ini:

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>
<tr>
<th> nomor induk siswa</th>
<th> nama siswa</th>
</tr>

3.Lalu kita masukkan lagi penanda kode baris kedua dan kode kolom.

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>
<tr>
<th> nomor induk siswa</th>
<th> nama siswa</th>
</tr>
<tr>
<td>9977974653 </td>
<td>Tri Nuryani</td>
</tr>
</table>
</body>
</html>

Mudah,,bukan?? selamat mencoba !!!!

4.Membuat Table Formulir Isian

Setelah selesai membuat table menggunakan heading kita akan melanjutkan membuat table formulir isian contohnya seperti ini:

Gambar 1.4

Langkah pertama adalah:
1. Buka kode pembuka HTML

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>

2.Masukkan kode form dan kode penanda baris pertama.

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
- <table width="55%" height="60%" border="1"align="center">
- <tr align="center">
- <td colspan="2"><b>INPUT DATA</td>
- </tr>

3.Lalu masukkan kode penanda baris kedua beserta penanda kolom , pada penanda kolom masukkan kata "NIM" kemudian di penanda kolom ke 2 baris 2 masukkan kode input type"text" seperti dibawah ini.

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>

4.Langkah selanjutnya masukkan penanda baris ke-3 beserta penanda kolomnya. pada kolom pertama baris ke-3 isikan kata "Nama",lalu kolom ke-2 baris ketiga masukkan "kode input type text" seperti dibawah ini:

<html>
<head>
<title>INPUT DATA</title>

</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>

5.Jika sudah sampai pada penanda baris ke-3 maka kita akan lanjut ke penanda baris ke-4. pada penanda baris ke-4 masukkan juga penanda baris kolom. kolom pertama baris ke-4 isikan "Jenis Kelamin" sedangkan pada penanda kolom ke-2 baris ke-4 masukkan kode "input type radio" seperti dibawah ini.

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
</tr>

6.Maka langkah selanjutnya kita akan membuat penanda baris yang selanjutnya beserta penanda kolomnya. pada penanda kolom yang pertama ketikkan kalimat "Hoby" dan pada kolom selanjutnya berilah kode Input type="checkbox" seperti contoh dibawah ini.

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>

7.Dan selanjutnya kita akan buat penanada baris yang ke-6 beserta penanda kolom nya. Pada penanda kolom yang pertama ketikkan kalimat "fakultas" kemudian pada penanda kolom selanjutnya masukkan kode select dan size nya=1. Kemudian pada optionya ketikkan nama-nama fakultasnya "Fakultas ilmu komputer,Fakultas Keguruan & Pendidikan,Fakultas kehutanan,Fakultas ekonomi dan yang terakhir adalah fakultas hukum." maka ini lah hasilnya.

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>

8.Pada penanda baris selanjutnya dan juga kolom selanjutnya,pada kolom pertama kita akan mengisikan teks"motto" dan pada penanda baris selanjutnya kita akan membuat kode "textarea " dengan rows="3" dan cols="25" jangan lupa kasih juga tag penutup textarea</textare>
Inilah hasilnya:

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>

9.Nah pada penanda baris yang terakhir ni kita akan memberi perataan tengah yaitu"align="center" kemudian pada penanda kolom kita sisipkan kode colspan="2" lalu kita juga akan menyisipkan kode input type"reset, dan button.Seperti dibawah ini:

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>

10.Jika sudah sampai seperti contoh diatas kita tinggal memberi kode penutupnya yaitu:

</table>
</form>
</body>
</html>

Maka inilah hasil akhirnya

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>
</table>
</form>
</body>
</html>

Itulah kode-kode table formulir isian yang sudah saya contohkan. meskipun lumayan sulit jangan takut untuk mencobanya ,,,!!dan selamat mencoba!!

5.Membuat Table Warna
Baiklah kita akan melanjutkan pelajaran yang selanjutnya yaitu"Membuat Table Warna".
Kolom pada HTML table juga bisa diberi warna. untuk memberi warna pada kolom table diperlukan kode bgcolor="#" yang ditaruh pada tag yang akan diberi warna.
Tulis kode warna #33FF33 (ini kode untuk warna Hijau) dan sisipkan pada bgcolor yang ada dalam tag seperti diatas menjadi <td bgcolor=”#33FF33″>
Pilihan warna dengan kode seperti diatas cukup banyak dan bisa dilihat Html Color Codes.
Nah,sekarang kita buka dulu link HTML Color Codes. Pilih salah satu kode warna, misalnya #FF9900. (Jangan lupa taruh # didepan kode warna!)
Supaya lebih jelasnya saya akan memberikan contoh pembuatan table warna yang sudah pernah saya buat.
<html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>
<th widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Cahyu</td>
<td align="center" bgcolor="#99CC66">Sidomukti</td>
<td bgcolor="#9966FF">082280718268</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
</table>
</body>
</html>

Jika kita luncurkan maka inilah hasilnya:

Gambar 1.5

Nah,,,Dengan berakhirnya pembahasan kita tentang membuat table warna maka berakhir pula rangkaian pelajaran tentang membuat table, Insyaallah kita akan melanjutkanya pada postingan selanjutnya.

Senin, 16 Maret 2015

Rangkuman Pelajaran HTML

                                                           Assalamu Alaikum wr.wb

          Baik teman-teman saya akan menjelaskan apa itu HTML yang sudah pernah saya pelajari selama di POS METRO JAMBI semoga akan ada manfaatnya untuk teman-teman sekalian.

1.Pengenalan HTML
HTML(Hyper Text Markup Langguage) merupakan bahasa tingkat tinggi . Bahkan cukup tinggi sehongga mudah dipelajari. untuk membuat suatu dokumen HTML (Halaman Web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web Browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, link maupun audio dan vidio.
           HTML mempunyai file perluasan (extention) htm/html. Dimana kedua perluasan itu sama, jadi anda boleh menyimpan file dokumen HTML dengan extention "html" atau "html".
untuk mulai belajar HTML kita akan menggunakan Notepad caranya tekan menu windows pada keyboard lalu tekan huruf R, lalu ketikkan Notepad lalu klik OK atau ENTER
* Nested HTML Element
Dalam penulisan dokumen HTML pastikan banyak menggunakan banyak elemen.
Inilah elemen pembuka pada HTML
1.<html>
2.<head>
3.<title>judul</title>
4.<body>
Dan di akhiri dengan elemen penutup
1.</html>
2.</head>
3.</body>

2.Macam-Macam Tag
Sekarang mari kita coba menuliskan kode HTML dan bagaimana cara memanipulasi tampilan yang keren seperti di Website pada umumnya. Maka disinilah kita mulai belajar HTML. Kita akan melakukan Markup tulisan sehingga bisa muncul sesuai keinginan.

Manipulasi yang pertama adalah Text Formating. Ini adalah manipulasi bagaimana menampilkan text yang sesuai keinginan. Seperti penebalan pada huruf, memiringkan, memberi garis bawahi, dll. Silakan lihat tabel berikut.

<strong>         Menebalkan Huruf
<em>              Memiringkan Huruf
<ins>              Menggarisbawahi Huruf
<del>              Mencoret Huruf
<sub>             Membuat huruf Subscripted
<sup>             Membuat Huruf Superscripted

Tag HTML memiliki sepasang tanda yaitu pembuka dan penutup. Misalnya tag strong, dia memiliki dua tag untuk pembuka yaitu <strong> dan penutup </strong>. Untuk menggunakannya, anda tinggal memasang text diantara dua tag tersebut. Contohnya jika ingin memiringkan huruf maka kita memakai tag

<em>Bagaimana Kabarmu??</em>

Maka akan jadi seperti ini

dan cobalah tag-tag yang lain.
<strong>kakak</srong>
<del>Nangis,Pingsan,Marah</del>
<ins>kami</ins>
<sub>sekali</sub>
<sup>5</sup>

Maka akan jadi seperti ini

Nah,,,,itulah macam-macam text formating dan kita akan melanjutk ke tahap berikutnya.

3 Memasukkan Gambar
Kita akan memasukkan style CSS di kode HTML kedalam kode gambar sehingga bisa melakukan aneka macam modifikasi.
Untuk menambah CSS dikode HTML kita cukup menambahkan atribut style saja.

Lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file HTML yang mengaksesnya . Misalnya file-html nya ada difolder "gambar dengan nama shake.jpg" maka lokasi gambarnya adalah
gambar/shake.jpg
Kemudian untuk memunculkan gambar kita letakkan kode ini di file HTML

<img class="caption" src="gambar/shake.jpg" border="4" alt="gambar pecah"title="alarm"style=float:left" width="200" height="200"/>

Ada tambahan,style=float:left" pada atribut image nya. Pada contoh diatas, saya buat gambar ada disebelah kiri, anda bisa mengubahnya menjadi disebelah kanan.
Maka akan muncul gambar seperti ini

4 Macam-Macam Heading

HTML juga mempunyai heading. Ada 1 hingga 6 heading. Bagi yang belum paham apa itu heading, silakan coba buka buku apa saja kususnya buku-buku non fiksi .
Didalam pembuatan web,anda harus meletakkan heading dalam halaman web anda agar search engine mampu mengenali tema dan materi yang sedang anda sampaikan dihalaman web tersebut. Dengan begitu,mereka tidak akan salah persepsi.
Untuk membuatnya cukup sederhana, kita tinggal memakai kode heading<hn> dan kode penutup</hn>
n=menunjukkan itu heading level berapa.
Jadi kalau kita mau makai heading 2 maka kodenya
<h2>kata yang dimunculkan</h2>
kita tinggal masukkan heading berapa yang mau kita pakai.
Misalnya:

<h1>Investasi Properti Diplomasikan </h1>
<h2>Terkendala Sertivikasi Vendor</h2>
<h3>Lelang SUN Topang Rupiah</h3>
<h4>Bursa Dipengaruhi Rapat The Fed</h4>
<h5>Bank Permata Siap Terjun Ke Maritim</h5>
<h6>Mentri Indroyono Puji BPPT</h5>

Maka hasilnya akan seperti ini

Nah,,,, Mudah Sekali Bukan ???

5.Fungsi Dan Penggunaan Atribut Href Pada Tag HTML

Attribut href pada html biasanya digunakan untuk membuat link namun fungsinya tidak hanya itu. Kali ini kita akan membahas apa saja yang bisa kita buat menggunakan attribut href ini.
Membuat Link Menuju Ke Halaman Lain.
Untuk fungsi ini tentunya kita memakai kode html ini
<a href="masukkan link disini">tulisan</a>
supaya lebih jelasnya saya akan membuat contohnya.
Misal:
<a href="tebal.html">contoh pembuatan huruf tebal</a>
Jika kita luncurkan maka akan keluar tampilan seperti ini.

Nah jika sudah kita luncurkan kta bisa mengkliknya maka akan keluar isi sebuah teks dari contoh diatas.
Gimana,,,????mudah juga bukan untuk mempelajari kode ini.

6.Membuat Formulir Isian

Sekarang kita akan belajar membuat formulir isian. Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya.Tag form memiliki 2 atribut Yaitu:
1. action
yaitu menunjukkan file untuk memproses formulir
2. method
ada 2 macam method
a.method "POST" dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, input artikel baru dll.
b.method "GET" dipakai untuk pengiriman data yang sangat kecil.
Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Dan kali ini saya akan coba menjelaskan Form "method"
semua input data harus diletakkan diantara tag <form action="" method="post"> dan </form>. Jika anda meletakkan diluar tag tersebut, maka data itu tidak akan dikirimkan ke file pemroses.
Inilah Contohnya
<form action="" method="post"/form>
<input type="text" name="NAMA_FIELD" size="60"/></p>
<form action="" method="post"/form>
<input type="button" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="checkbox" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="file" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="hidden" name="NAMA_FFIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="image" name="NAMA_FIELD" size="30"/></p>
<form action="" method="post"/form>
<input type="password" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="radio" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="reset" name="NAMA_FIELD" size"30"/></p>
<form action="" method="post"/form>
<input type="submit" name="NAMA_FIELD" size"30"/></p>

Maka Inilah hasilnya.

7.Form Input Data

Sekarang kita akan bahas elemen-elemen form yang bisa kita masukkan
TAG INPUT
Tag pertama untuk memasukkan data adalah INPUT. Tag ini sudah sering kita jumpai di search engine, form opt-in subscriber atau formulir-formulir online. Biasanya digunakan untuk memasukkan data yang hanya satu baris saja seperti nama, email, alamat rumah dsb.

Kode HTML nya seperti ini
<input type="text" name="NAMA_FIELD" size="30"/>
karena tag ini tidak memiliki tutup maka kita tutup dibagian akhirnya tanda />

Atribut type dipakai untuk menentukan jenis input-nya. Ada beberapa macam type yaitu:

button = input berbentuk tombol
checkbox = input berbentuk tanda centang, dipakai untuk memilih lebih dari 1 opsi
file = input file utk diupload
hidden = input data tersembunyi, biasanya data default
image = input berbentuk gambar, biasanya dipakai menggantikan tombol submit dengan gambar
password = input untuk password. Kalau diketik, tulisannya berubah jadi *****
radio = input bulatan, dipakai untuk memilih satu dari beberapa opsi
reset = tombol reset untuk menghapus semua isian form
submit = tombol untuk mengirimkan data
text = input berbentuk kotak untuk mengisikan data

ini adalah salah satu contoh dari atribut diatas yang sudah saya buat, dengan kode sbb:
<form action="" method="post"/form>
<input type="text" name="NAMA_FIELD" size="50"/></p>

Untuk size, berisi angka yang menunjukkan berapa karakter lebar kotak input-nya. Semakin besar tentunya semakin lebar kotaknya.

8.Membuat Optional

Ada kalanya kita ingin memberikan beberapa opsi bagi pengunjung saat mereka mengisikan formulir. Di HTML, ada beberapa macam cara untuk menampilkan optional. Dan kita akan membahasnya disini.
Oh iya, sebelum diteruskan, artikel ini masih satu rangkaian dengan artikel tentang cara membuat form HTML ya. Jadi, kode-kode ini harus diletakkan di dalam blok form yang sudah kita bahas di artikel sebelumnya.
Dan inilah beberapa cara untuk menampilkan opsi kepada pengunjung.

Radio Button
Radio button adalah opsi berbentuk bulatan dimana pengunjung harus memilih salah satu dari beberapa opsi yang ada. Misalnya untuk toko garmen, opsi ini bisa dipakai untuk memilih ukuran pakaian yang diinginkan. Dan saya akan memberikan 3 contoh untuk kalian dari hasil yang sudah saya buat, seperti ini:
1. <p>blog merupakan singkatan dari ?<br/>
    <input type="radio" name="singkatan" value="baju longgar"/> baju longgar<br/>
    <input type="radio" name="singkatan" value="web log"/> web log<br/>
    <input type="radio" name="singkatan" value="bintang logo"/> bintang logo<br/>
    <input type="radio" name="singkatan" value="budi logis"/> budi logis<br/>
    <input type="radio" name="singkatan" value="burung terbang"/> burung terbang<br/>

2. <p>kumpulan web blog biasanya disebut....kecuali<br/>
    <input type="radio" name="biasanya" value="blogosphere"/> blogosphere<br/>
    <input type="radio" name="biasanya" value="blogstorm"/> blogstorm<br/>
    <input type="radio" name="biasanya" value="badai blog"/> badai blog<br/>
    <input type="radio" name="biasanya" value="perkemahan"/> perkemahan<br/>

3. <p>menurut istilah bahasa indonesia "blogging" adalah ?<br/>
     <input type="radio" name="bahasa" value="ngeblog"/> ngeblog<br/>
     <input type="radio" name="bahasa" value="ngetwitt"/> ngetwitt<br/>
     <input type="radio" name="bahasa" value="ngerock"/> ngerock<br/>
     <input type="radio" name="bahasa" value="ngeri"/> ngeri<br/>
     <input type="radio" name="bahasa" value="ngepir"/> ngepir<br/>

Dari contoh kode diatas, maka akan menghasilkan seperti ini:

Mudah sekali bukan? Nah, kita coba lagi optional yang lain yaitu:

Checkbox
Prinsipnya hampir sama dengan radio button, hanya saja di opsi ini, pengunjung bisa memilih lebih dari 1 pilihan. Biasanya dipakai di form subscribe yang memiliki lebih dari 1 berita.

Dan saya juga akan memberikan 3 contoh yang telah saya buat.

1.<p>langkah awal sebelum membuat blog ialah....<br/>
<input type="checkbox" name="sebelum" value="memacul"/> memacul<br/>
<input type="checkbox" name="sebelum" value="menari"/> menari<br/>
<input type="checkbox" name="sebelum" value="bernyanyi"/> bernyanyi<br/>
<input type="checkbox" name="sebelum" value="membuat email"/> membuat email<br/>
<input type="checkbox" name="sebelum" value="merokok"/> merokok<br/>

2.<p>salah satu fungsi blog adalah ?<br/>
   <input type="checkbox" name="fungsi" value="sebagai bahan pupuk"/> sebagai bahan pupuk<br/>
   <input type="checkbox" name="fungsi" value="sebagai bahan pangan"/> sebagai bahan pangan<br/>
   <input type="checkbox" name="fungsi" value="sebagai lahan pertanian"/> sebagai lahan pertanian<br/>
   <input type="checkbox" name="fungsi" value="sebagailahan peternakan"/> sebagai lahan peternakan<br/>
   <input type="checkbox" name="fungsi" value="sebagai bahan pupuk"/> sebagai program-program media dan perusahaan-perusahaan<br/>

3.<p>blog virus biasanya digunakan untuk ?</br>
<input type="checkbox" name="digunakan" value="merusak"/> merusak<br/>
<input type="checkbox" name="digunakan" value="merawat"/> merawat<br/>
<input type="checkbox" name="digunakan" value="memperbaiki"/> memperbaiki<br/>
<input type="checkbox" name="digunakan" value="memotong"/> memotong<br/>
<input type="checkbox" name="digunakan" value="mencabut"/> mencabut<br/>

Kode diatas, akan menghasilkan optional seperti ini:

Nah itu lah hasilnya,,,gimana mudah bukan ???

9.Membuat Optional,Heading dan Memasukkan Gambar

Jika tadi kita sudah belajar mengenai pembuatan optional,,maka kali ini kita akan belajar membuat optional disertai dengan heading gambar. caranya hampir sama dengan yang diatas namun disini ada perbedaan sedikit yaitu penambahan kode-kode nya.
Kali ini kita akan memakai kode ini.

<h1>pihak yang memiliki blog disebut....</h1>
<img class="caption"src="gambar/orang.jpg"border="3" alt="gambar pecah"title="gambar 1.7"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="memiliki" value="bos"/> bos<br/>
<input type="radio" name="memiliki" value="karyawan"/> karyawan<br/>
<input type="radio" name="memiliki" value="siswa"/> siswa<br/>
<input type="radio" name="memiliki" value="blogger"/> blogger<br/>
<input type="radio" name="memiliki" value="supir"/> supir<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>

Kode yang sudah saya buat diatas jika kita diluncurkan maka akan munculnya seperti ini..

Itu hasilnya ,,,,tidak sulit bukan??

10.Membuat Optional Data Dari Banyak Data.

Kali ini saya akan membahas tentang membuat optional data dari banyak data, pada artikel optional kita hanya bisa menggunakan sedikit data saja. paling 3-4 data aja sudah tergolong banyak nantinya.
Nah, bagaimana kalau pilihannya ada banyak, misalnya propinsi atau nama negara gitu, maka kita memerlukan optional dalam bentuk drop down. HTML menyediakan tag untuk menampilkan optional dalam bentuk dropdown dengan format seperti ini:

<select name="NAMA_FIELD">
  <option value="VALUE-1">LABEL-1</option>
  <option value="VALUE-2">LABEL-2</option>
  <option value="VALUE-3">LABEL-3</option>
  <option value="VALUE-4">LABEL-4</option>
  ......
</select>

Kita menggunakan tag select untuk membuat dropdown option. Dan untuk menampilkan opsi-opsinya, kita menggunakan tag option. NAMA_FIELD sebagaimana telah dijelaskan dalam membuat input data berguna untuk mengidentifikasi nama data yang dikirimkan.
VALUE-1 sampai VALUE-4 dan seterusnya kita pakai untuk memberi isi datanya jika pengguna memilih label tersebut. Misalnya pengguna memilih LABEL-4, maka data yang dikirimkan adalah VALUE-4. VALUE dan LABEL bisa dibuat sama atau berbeda-beda terserah anda.

Dan dibawah ini adalah contoh kode yang sudah pernah saya buat,namun contoh yang sudah saya buat memakai heading.

<h3>berikut nama dan kerabat dekat saya</h3>
<select name="NAMA_FIELD">
<option value="value-1">Abdul Hanan</option>
<option value="value-2">Adel</option>
<option value="value-3">Adi Santoso</option>
<option value="value-4">Andik Ardiansyah</option>
<option value="value-5">Anita Zerli</option>
<option value="value-6">Dwi Sulis</option>
<option value="value-7">Doni Triadi</option>
<option value="value-8">Eko Rasta</option>
<option value="value-9">Ibnu Robbi'</option>
<option value="value-10">Ike Nurfatimah</option>
<option value="value-11">Lestari Wahyuni</option>
<option value="value-12">Laras</option>
<option value="value-13">Miftahhun Na'im</option>
<option value="value-14">Mujib</option>
<option value="value-15">Muna Waroh</option>
<option value="value-16">Rahmad Wahyudi</option>
<option value="value-17">Riski Alviansyah</option>
<option value="value-18">Rofi'i Rutab</option>
<option value="value-19">Vinka</option>
<option value="value-20">Yuli</option>
</select>
Jika kita luncurkan maka inilah hasilnya,,

jika kita klik tanda v nya maka akan berubah tampilan seperti ini

Multiple Option

Selanjutnya bagaimana kalau kita ingin pengunjung bisa memilih lebih dari satu option, maka tag select ini kita tambahkan atribut multiple. Contohnya seperti ini:

<select name="NAMA_FIELD" multiple="multiple" size="2">
  <option value="VALUE-1">LABEL-1</option>
  <option value="VALUE-2">LABEL-2</option>
  <option value="VALUE-3">LABEL-3</option>
  <option value="VALUE-4">LABEL-4</option>
  ......
</select>

Pada kode diatas, saya tambahkan dua atribut baru yaitu multiple="multiple" size="2". Multiple dipakai untuk menunjukkan bahwa opsi ini bisa dipilih lebih dari satu. Untuk memilih lebih dari satu, user cukup menekan tombol Ctrl dan klik opsi yang diinginkan. Bagi pengguna Machintos, klik Command Button-nya.
Atribut size adalah jumlah opsi yang dimunculkan. Defaultnya kan cuma 1 aja. Nah, biar pengguna tahu kalau ini multiple option, maka kita tampilkan lebih dari 1, misalnya 2. Tapi kalau opsinya banyak saya sarankan lebih dari 2 yang dimunculkan.

<h3>Berikut Nama Provinsi dan Alamat Kantornya</h3>
<select name="NAMA_FIELD" multiple="multiple" size="3">
<option value="value-1">Nanggreo Aceh Darussalam - Jl. T. Nyak Arief No.219, Banda Aceh</option>
<option value="value-2">Sumatra Utara - Jl. P.Diponegoro No.30,Medan</option>
<option value="value-3">Sumatra Barat - Jl.Jend Sudirman No 51, Padang</option>
<option value="value-4">Riau - Jl.Jen.Sudirman No. 460,Pekan Baru</option>
<option value="value-5">Kepulauan Riau - Jl.Basuki Rahmat Tanjung Pinang</option>
<option value="value-6">Jambi - Jl.A Yani No.1 Telanai Pura,Jambi 36128</option>
<option value="value-7">Sumatra Selatan - Jl.Kapten A.Riai No.1, Palembang</option>
<option value="value-8">Bangka Belitung - Komplek Perkantoran dan Pemukiman Terpadu</option>
<option value="value-9">Bengkulu - Jl.Pembangunan No.1 Padang Harapan, Bengkulu 38225</option>
<option value="value-10">Lampung - Jl.Wr.Monginsidi 69 Teluk Betung</option>
<option value="value-11">Banten - Jl.Brigjen K.HSyam'un NO.5,Serang</option>
<option value="value-12">Jawa Barat - Jl.Taman Sari No.55,Bandung</option>
<option value="value-13">DKI Jakarta - Jl.Merdeka Selatan Blog.8-9, Jakarta Pusat</option>
<option value="value-14">Jawa Tengah - Jl,Pahlawan No.9Lt.11/12,Serang</option>
<option value="value-15">D.I Yogyakarta - Komp.Kepatihan Danurejan,Yogyakarta 55213</option>
<option value="value-16">Jawa Timur - Jl Ahmad Yani242-244,Surabaya</option>
<option value="value-17">Bali - JlKapten Cok Agung Tresna,Renon</option>
<option value="value-18">Kalimantan Barat - JlA,Yani,Pontianak</option>
<option value="value-19">Kalimantan Selatan - Jl.Jend.Sudirman No.14,Banjarmasin 70114</option>
<option value="value-20">Kalimantan Timur - Jl Gadjah Mada 2,Samarinda</option>
<option value="value-21">Sulawesi Barat - Jl.Ahmad Yani No.1Mamuju 91511</option>
<option value="value-22">Sulawesi Selatan - Jl.Urip Sumoharjo 269,Makassar 90245</option>
<option value="value-23">Sulawesi Tengah - Jl.UProf.Dr.Moh.Yamin,SH No.7,Palu 94112</option>
<option value="value-24">Sulawesi Tenggara - Kompleks Bumi Pradja Anduonouhu,Kendari93232</option>
<option value="value-25">Sulawesi Utara - Jl.17 Agustus No. 69,Manado</option>
<option value="value-26">Gorontalo - Jl.Sapta Marga Gorontalo</option>
<option value="value-27">Maluku - Jl.Dr.Latumeten No.12,Ambon</option>
<option value="value-28">Maluku Utara - Jl.Pahlawan Revolusi No 1 Ternate</option>
<option value="value-29">Nusa Tenggara Barat - Jl.Udayana No.14,Mataram</option>
<option value="value-30">Nusa Tenggara Timur - Jl.Raya El Tari No.52 Kupang</option>
<option value="value-32">Papua - Jl.Soa Siu Dok,Jayapura</option>
<option value="value-33">Papua Barat - Jl.Siliwangi No.1,Manokwari</option>
</select>jika diluncurkan maka akan muncul seperti ini.

Terlihatkan perubahanya,,,???

11.Membuat Text Area

Cara Mudah Membuat Textarea - Pada kesempatan kali ini saya akan share cara mudah membuat textarea, apa itu textarea? Textarea adalah sebuah elemen untuk menaplkan sebaris/lebih tulisan dalam blok tersendiri. Dalam membuat textarea kita bisa memodifikasi kodenya misal dengan menambahkan selector CSS agar tampilan yang dihasilkan kelihatan lebih bagus dan menarik perhatian.

Berikut script kode untuk membuat textarea dengan berbagai variasi tampilan :

Script Pertama

<textarea align="center">
Silahkan Berikan Komentar Anda Yang Sopan Dan Berbobot
</textarea>
Previw :

Script Kedua
<textarea align="center" style="background-color: #6699cc; height:50px; width:50px;">
Kalimat Komentar Ini Biasa Saja Namun Mengandung Warna Kebiruan
</textarea>
Previw:

Script Ketiga
<textarea align="center" style="border-radius: 6px 6px 6px 6px; border: 2px solid rgb(204, 204, 204); height: 100px; width:100px;">
textarea dengan style garis tepi rounded corner
</textarea>
Previw:

Script Keempat
<textarea align="center" style="background-color: #ff6633; border-radius: 8px 8px 8px 8px; border: 1px solid rgb(204, 204, 204); height:200px; width:200px">
Kolom Komentar Ini Dibuat Dengan Style Garis Bersudut Tumpul Dengan Warna Orange
</textarea>
Previw:

Note :
#6699cc dan #ff6633 adalah kode warna, ganti sesuai dengan keinginan anda, sedangan height dan width adalah kode untuk mengatur tinggi dan lebar textarea yang akan dibuat, sesuaikan dengan selera anda.

12.Membuat Tombol Submit Dan Reset

Sampailah kita pada bagian akhir pembuatan form dengan HTML. Apalagi kalau bukan tombol submit dan reset. Sebenarnya, saya sudah menjelaskan tentang tombol submit ini di pelajaran tentang input data, hanya saja mungkin anda belum terfokus kesana sehingga saya perlu untuk menjelaskan lebih lanjut disini.
Untuk membuat tombol submit, kita menggunakan kode seperti ini:

<input type="submit" value="kirimkan"/>
maka inilah hasilnya.

Sedangkan untuk tombol reset, kita menggunakan kode:
<input type="reset" value="Hapus Form"/>
maka inilah hasilnya.

Submit Menggunakan Gambar

Sekarang kita akan mencoba membuat tombol submit menggunakan gambar. Caranya hampir sama, hanya saja kita sekarang menggunakan type=”image”. Contohnya seperti ini:

<input type="image" src="file-gambar.jpg" width="55" height="22"/>

file-gambar.jpg harus anda ganti dengan gambar anda sendiri. width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel.

Inilah contoh yang sudah saya buat dengan kode:

<input type="image" src="gambar/penemu.jpg" width="20" height="20"/>

Maka tampilanya seperti ini.

Nah, dengan berakhirnya artikel tentang tombol submit ini, maka berakhir jugalah rangkaian pelajaran tentang membuat form ini. Insya Allah nanti kita akan bahas elemen-elemen HTML yang lain.