Selamat datang kembali sobat !

Setelah beberapa minggu tidak berbagi rasanya ada yang kurang. Saling berbagi ilmu dan memberikan manfaat kepada orang lain adalah hal yang sangat-sangat mulia. Tentunya sobat tahu terutama yang beragama Islam bahwa sebaik-baik manusia adalah manusia yang memberikan manfaat kepada orang lain. Walau sobat hanya mempunyai sedikit ilmu, tapi manfaatkanlah dengan cara berbagi ilmu kepada teman sobat. 

Sesuai dengan judul di atas, pada postingan saya kali ini kita akan membahas tentang bagaimana Cara Membuat Form Menggunakan HTML di Pemrograman Web Dasar. 

Definisi Form :

Form identik dengan formulir dimana mengijinkan pengguna untuk memasukkan nilai atau data, misalnya menulis komentar ke dalam postingan website. Form juga bisa digunakan ketika kita ingin membuat pilihan daftar suatu kelompok barang atau item tertentu. Kemampuan form hanya sebatas menyediakan sebuah entry data dan mengirimkannya. Hal ini berarti form tidak difungsikan untuk menerima dan mengolah data. Bagian yang berfungsi untuk menerima dan mengolah data secara lanjut adalah web scipting yang bersiifat server side.

Pembuatan Form diawali dengan tag <form> dan diakhiri tag </form>. Tag <form> memiliki beberapa atribut, diantaranya adalah name, method, dan action. Atribut name adalah optional nama untuk form yang berlaku, digunakan untuk form handling. Atribut method terdapat dua nilai yaitu "GET" dan "POST". Kemudian atribut action berisi URL atau file yang digunakan untuk menangkap dan mengolah nilai atau data yang dikirimkan.

Tag, Atribut, dan Nilai dalam Form :

Tag	Atribut	Deskripsi
<form>	method : ·         GET ·         POST	Data dikirim melalui URL address Data dikirim bersama HTTP header
	action	URL atau file yang digunakan untuk menangkap dan mengolah nilai atau data yang dikirimkan
	name	Optional nama untuk form yang berlaku, digunakan untuk form handling
<input>	type : ·         text ·         password ·         hidden ·         radio ·         checkbox ·         submit ·         image ·         reset name size maxlenth	Digunakan untuk isian teks seperti nama atau alamat seseorang Digunakan untuk isian password dengan karakter * atau  ● Digunakan untuk membuat variabel hidden Bentuk masukan yang memungkinkan user memilih satu pilihan Bentuk masukan yang memungkinkan user dapat memilih satu atau beberapa pilihan Mengirimkan data yang telah diberikan pada form Berupa gambar dan value yang dikirim oleh type IMAGE Mengembalikan keadaan form seperti semula saat dijalankan Mendefinisikan nama dari tag input yang dibuat Mengatur ukuran besar dari tampilan tag input Mengatur berapa jumlah maksimal karakter yang bisa dimasukkan oleh user
<select>	name	Mendefinisikan nama dari sebuah pilihan
	size	Mendefinisikan besar dari tampilan tag select
	multiple	Memilih lebih dari satu pilihan pada tag select
<option>	selected	Menentukan nilai awal yang tampil saat form ditampilkan
	name	Mendefinisikan nama dari sebuah pilihan
	value	Mendefinisikan nilai dari sebuah pilihan
<textarea>	name	Mendefinisikan nama dari textarea yang telah dibuat
	cols	Menentukan ukuran isian kolom pada textarea
	rows	Menentukan ukuran isian baris pada textarea
	wrap	Menentukan bagaimana teks di textarea harus wrapping di akhir dari baris (soft, hard, off)

Contoh-contoh membuat isian form :

1. Membuat isian form nama dan alamat.
   
   
   Keterangan :
   Pada isian nama menggunakan tag <input> dengan type text,  besar ukuran 50 , dan maksimal 30 karakter yang bisa dimasukkan oleh user. Sedangkan untuk isian alamat menggunakan tag <textarea> dengan besat kolom 47, besar baris 3, dan non-wrapping.
   
2. Membuat isian form tanggal lahir.
   
   Keterangan :
   Pada isian tanggal lahir menggunakan tag <select> dan tag <option> sebagai daftar pilihan dari tag <select>. Pada tag <option> terdapat atribut name yang mendefinisikan nama atau jenis dari daftar pilihan tersebut. Sobat bisa melihat nilai atribut name dari ketiga isian di atas yaitu tanggal, bulan, dan tahun. Masing-masing nilai mendefinisikan jenis pilihan mereka sendiri.
   Selanjutnya, pada tag <option> juga terdapat atribut selected yang berfungsi untuk menentukan nilai awal yang tampil pada saat form ditampilkan pertama kali. Pada isian tanggal, atribut selected ditentukan di tanggal 1. Pada isan bulan, atribut selected ditentukan di bulan januari. Pada isian tahun, atribut selected ditentukan di tahun 1990.
   
   Gambar dari hasil isian tanggal lahir adalah sebagai berikut :
   
   
   
3. Membuat isian form pilihan jenis kelamin dan hoby.
   
   
   Keterangan :
   Pada isian jenis kelamin menggunakan tag <input> dengan nilai radio pada atribut type sehingga menghasilkan daftar pilihan bertipe radio. Pada tipe ini memungkinkan user hanya dapat memilih satu pilihan tidak boleh lebih. Seperti contoh di atas, user harus memilih antara Laki-laki atau Perempuan.
   Pada isian hoby menggunakan tag <input> dengan nilai checkbox pada atribut type sehingga menghasilkan daftar pilihan bertipe checkbox. Pada tipe ini memungkinkan user memilih satu atau beberapa pilihan. User dapat memilih hanya satu saja misalnya Sepak Bola. User juga bisa memilih beberapa pilihan misalnya Membaca, Menyanyi, dan Tenis.
   
4. Membuat isian form password, clear, dan submit.
   
   
   Keterangan :
   Pada isian password menggunakan tag <input> dengan nilai password pada atribut type sehingga ketika user menulis di kolom password karakternya akan berubah menjadi (* atau  ●). Pada tombol clear menggunakan tag <input> dengan nilai button pada atribut type dan nilai Clear pada atribut value yang menyebabkan tombolnya bernama Clear. Kemudian pada tombol submit menggunakan tag <input> dengan nilai button pada atribut type dan nilai Submit pada atribut value yang menyebabkan tombolnya bernama Submit.

Definisi dan Fungsi Linking :

Secara bahasa linking dapat diartikan sebagai sebuah hubungan antara satu dengan yang lain. Sedangkan linking dalam HTML diartikan sebagai hubungan antara halaman satu dengan halaman lain. Sebuah kata atau kalimat yang difungsikan dengan link yang bernilai halaman lain sehingga halaman baru akan muncul dan dapat diakses. Halaman baru yang dihubunngkan (linked) bisa dari satu website atau juga bisa dari website. Di dalam jaringan internet yang luas, semua halaman website bisa saja saling berhubungan menggunakan teknik linking.

Dari penjelasan di atas, saya harap sobat dapat memahami apa itu linking dan fungsi dari linking itu sendiri. Materi yang akan saya sampaikan hari ini adalah basik-basik pembuatan linking dari halaman satu ke halaman lain. Lalu apakah kita membutuhkan koneksi internet untuk belajar linking ? Jawabannya tidak. Kita akan belajar secara offline supaya sobat tidak mengeluarkan uang untuk membeli paket internet. Hehe

Kita akan membuat link dari beberapa halaman yang berekstensi .htm atau .html yang terletak di satu folder ataupun di folder lain. Linking halaman yang terletak di satu folder atau direktory akan lebih mudah dilakukan dibandingkan dengan linking halaman yang terletak di folder atau direktory lain. Karena melakukan linking halaman di folder lain, sobat harus terlebih dahulu mengetahui hirarki (hierarchy) file halaman tersebut terletak. Untuk lebih jelasnya mari kita mulai materi pada hari ini dengan membaca basmalah terlebih dahulu. Bismillahirrokhmaanirrokhiim..

Linking Halaman Dalam Satu Folder :

Linking Halaman Dalam Folder Lain :

Linking halaman dalam folder lain terdapat dua kasus. Pertama, halaman yang akan diakses atau dilinkkan terdapat di folder yang berhirarki di bawahnya. Kedua, halaman yang diakses terdapat di folder yang brhirarki di atasnya atau bahkan di folder dengan hirarki yang berbeda. Kita akan menggunakan ketiga file yang telah dicontohkan di atas untuk mempermudah pembelajaran. Namun ketiga file di atas akan kita pindah ke folder yang berhirarki di bawah atau di atas dari file utamanya. Langsung saja kita ke langkah-langkahnya :

• Sobat telah membuat file yang bernama Latihan Linking pada pembahasan sebelumnya. Sekarang coba sobat membuat subfolder di dalam folder Latihan Linking. Misalnya folder dengan nama Lihat Laptop. Kemudian pindahkan file tabelLaptop.html ke folder Lihat Laptop. Sehingga akan tampak seperti gambar di bawah ini :
  
  
  Gambar di atas menunjukkan bahwa folder Lihat Laptop berada di bawah hirarki dari folder Latihan Linking. 
• Sobat sudah mengetahui bagaimana letak folder yang berada di hirarki bawah dari folder tertentu. Yang sering kita kenal adalah subfolder, jadi Latihan Linking sebagai folder utama dan Lihat Laptop sebagai subfolder.
• Lalu bagaimana dengan folder yang berhirarki di atas? Baik, sejenak kita lupakan masalah folder hirarki bawah. Langsung saja sobat membuat folder dengan nama Lihat Android dan satu folder lagi dengan nama Lihat Utama. 
• Pidahkan file tabelAndroid.html ke dalam folder Lihat Android. 
• Pindahkan folder Lihat Laptop dan file hamalanDepan.hml ke folder Lihat Utama. Sehingga akan terlihat seperti ini :
  
  
  Gambar di atas menunjukkan bahwa file tabelAndroid.html berada di suatu folder dengan hirarki lebih atas dari folder dimana file utama berada. File utama yang dimaksud disini adalah halamanDepan.html
• Setelah selesai penempatan semua file ke beberapa folder dengan hirarki yang berbeda. Kita hanya perlu mengedit link yang berada pada ketiga file halaman tersebut. Perhatikan perubahan link tersebut di bawah ini :
  
  Halaman yang bernama halamanDepan.html
  
  
  Halaman yang bernama tabelAndroid.hmtl
  
  
  Halaman yang bernama tabelLaptop.html
  
  
  Keterangan :
  
  Perhatikan perbedaan penulisan link pada ketiga file di atas. Link tersebut akan berbeda dengan link ketiga file pada kasus Linking Halaman Dalam Satu Folder karena tempat ketiga file berada adalah berbeda. Yang perlu sobat perhatikan bahwa setiap link yang diberi tanda "/" (garis miring) menunjukkan pergi ke hirarki di bawahnya satu langkah (folder). Sedangkan tanda "../" (dua titik dan garis miring) menunjukkan pergi ke hirarki di atasnya satu langkah (folder).

1.       Ordered List
Ordered list berfungsi untuk membuat nomor daftar urut dengan angka, huruf abjad, dan huruf abjad romawi. Daftar urut ini diawali dengan tag <ol> dan diakhiri dengan tag </ol>. Tag yang berada di dalam tag <ol> dan tag </ol> adalah tag </li>. Tag ini berfungsi sebagai tag item, yaitu isi dari daftar yang dibuat. Untuk atribut apa saja yang bisa digunakan di tag ini, silahkan lihat tabel berikut :

2.       Unordered List
Unordered list berfungsi untuk membuat daftar urut tanpa nomor, yaitu dengan menggunakan beberapa elemen (simbol). Elemen-elemen tersebut adalah circle (lingkaran dengan lubang tengah), square (persegi padat), disc (lingkaran padat). Daftar urut ini diawali dengan tag <ul> dan diakhiri dengan tag </ul>. Sedangkan tag item atau tag yang berada di dalam tag ini adalah sama dengan tag <ol>, yaitu tag <li>.  Untuk melihat atribut yang digunakan, perhatikan tabel berikut :

Selamat datang kembali sob !

Setelah beberapa minggu tidak memposting dikarenakan ada Ujian Tengah Semester di Kampus, Rasanya ada yang kurang kalau tidak ketemu dengan sobat semua. Sobat semua harus merasa haus ilmu karena dengan seperti itu, sobat akan lebih mudah dalam belajar dalam berbagai hal. Sobat harus meluangkan beberapa jam per harinya untuk belajar. Seperti sebuah pepatah menyatakan bahwa Belajar dua jam per hari selama 4 bulan itu lebih baik daripada belajar 12 jam per hari selama 40 hari. 

Dari pepatah di atas bisa kita tarik kesimpulan bahwa sedikit belajar namun rutin setiap harinya dengan waktu yang lebih lama, adalah lebih baik dari pada belajar banyak namun dalam waktu yang lebih singkat. Apalagi saya yakin sobat semua akan merasa bosan jika belajar dengan waktu yang lama per harinya. Karena setiap orang mempunyai tingkat daya tangkap ilmu masing-masing. Dan juga mood pada seseorang selalu berubah-ubah. Maka dari itu sobat harus pandai-pandai mengatur kapan waktu yang tepat untuk belajar.

Baik, pada postingan saya kali ini kita akan membahas bagaimana Cara Membuat Tabel Menggunakan HTML di Pemrograman Web Dasar. Langsung saja kita mulai materinya sob !

Pada dasarnya tag yang digunakan untuk membuat tabel adalah diawaili dengan tag pembuka yaitu <table> dan diakhiri dengan tag peuntup yaitu </table>.  Di antara tag <table> dan </table>, terdapat beberapa tag penyusun tabel itu sendiri. Sobat bisa melihat daftar tag dan atribut yang bisa digunakan dalam pembuatan tabel berikut :

Tag	Atribut	Dekripsi
<table>	border cellpadding cellspacing width height name id title bgcolor background align	Mengatur tebal garis Mengatur jarak teks dengan cell Mengatur jarak antar cell Mengatur lebar tabel (dalam persen %) Mengatur tinggi tabel (dalam persen %) Mengatur name di tabel Mengatur identitas tabel Mengatu title tabel Mengatur warna backgroud tabel Menambah gambar sebagai backgroud tabel Mengatur rata tabel
<tr>	bgcolor align valign	Mengatur warna baris cell Mnegatur rata di baris cell Mengatur rata vertikal di baris cell (top,middlde,bottom)
<td>	height width bgcolor align valign colspan rowspan	Mengatur tinggi cell dalam pixel Mengatur lebar cell dalam pixel Mengatur warna background cell Mengatur rata teks dalam cell Mengatur rata vertikal pada teks dalam cell Menggabungkan beberapa kolom cell menjadi satu cell Menggabungkan beberapa baris cell menjadi satu cell
<th>	height width bgcolor align valign colspan rowspan	Mengatur tinggi cell header dalam pixel Mengatur lebar cell header dalam pixel Mengatur warna cell header Mengatur rata teks dalam cell header Mengatur rata vertika teks dalam cell header Menggabungkan beberapa kolom cell menjadi satu cell Menggabungkan beberaoa varis cell menjadi satu cell

Keterangan :

Tabel terdiri dari baris dan kolom, tag <tr> adalah untuk menentukan banyak baris dan tag <td> adalah untuk menentukan banyaknya cell kolom dalam satu baris. Sedangkan tag <th> adalah untuk membuat cell header.

• Contoh penggunaan atribut-atribut tag <table> :

• Contoh penggunaan atribut-atribut tag <tr> :

• Contoh penggunaan atribu-atribut tag <td> :

• Contoh penggunaan atribut-atribut tag <th> :