Di artikel sebelumnya saya sudah membahas tentang Jenis-jenis badan html serta atribut lainnya namun itu hanya separuhnya, di artikel yang ini adalah sambungan atau kelanjutan di artikel sebelumnya.
Mengapa di artikel sebelumnya tidak lengkap? Karena saya kemarin malam itu telah kehabisan bensin, maksudnya ngantuk maka sekarang adalah mengganti artikel sebelumnya. Baiklah mari simak pembahasan kali ini dengan kelanjutan bagian ke 2.
Di artikel kali ini yang akan di bahas mengenai Jenis-jenis html serta atribut lainnya adalah berikut point-pintnya :
Hyperlink
- Link ke halaman lain
- Link ke service Internet lain
Warna
- Nilai warna Common Name
- Nilai Warna Hexadecimal
- Nilai Warna RGB
Tabel dan Form
Apa itu Hyperlink?
Hyperlink adalah menghubungkan halaman satu ke halaman lain dan bisa saling berhungan atau bisa membuat link yang satu ini berpindah ke halaman lain, hyperlink ini sering di gunakan untuk orang pemula maupun orang profesional, lihatlah di google contoh kecil : http://sukaipeulis.blogspot.com
Hyperlink atau link dalam html berfungsi menghubungkan ke halaman web atau dokumen satu dengan laiinya agar saling terhubung. Sintaks dasar penulisannya adalah:
Link dalam html di bagi menjadi dua, yaitu :
1. Link Ke Halaman Lain
Sintaks:
<a href="alamat_file"/nama.ekstensi"> Hyperlink ke halaman </a>
Contoh :
<a htef="c:/web/profil.html">Profil Perusahaan </a>
2. Link Ke Service Internet Lain
Http:
<a href="http://alamathttp/nama.ekstensi"> Hyperlink Ke Http </a>
Ftp:
<a href="ftp://alamatftp/nama.ekstensi"> Hyperlink Ke Http </a>
Mail:
<a href="mailto:alamat_email/nama.ekstensi"> Hyperlink Ke Http </a>
Warna
Warna dalam html dapat di tentukan dengan tiga cara, yaitu dengan memasukan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB.
- Nilai Warna Common Name Anda dapat menentukan warna dengan menggunakan nilai warna common name, yatiu dengan memasukan yang di inginkan dan biasanya menggunakan nilai warna dalam bahasa inggris seperti contoh berikut:
- Nilai Warna Hexadecimal Dengan nilai warna hexadecimal, anda dapat menentukan warna menggunakan nilai warna dalam bentuk hexadecimal yang sama dengan jika menggunkan html. Sebagai contoh bisa anda lihat kode berikut:
- Nilai Warna RGB Dengan menggunakan nilai warna RGB, anda dapat menentukan dengan memasukan nilai dari warna merah, hijau dan biru (Red, Green, Blue) seperti contoh berikut:
- color: blue bgcolor:lime
- color:#00ffff bgcolor:#00cff
- color:rgb(255,255,204)
Tabel
Tabel menggunakan elemen yang terdiri dari sel dan tersusun atau baris dan kolom, tabel di gunakan untuk membuat bentuk tabel yang berisi kolom dan baris.
Sintaksnya adalah :
- <table>atribut table</table>
Atribut tabel adalah:
- <tr>...</tr> : Membentuk baris tabel
- <td>...</td> : Membentuk kolom tabel
Tabel juga memiliki atribut untuk pengaturannya, yaitu :
- width : Lebar tabel
- height : Tinggi tabel
- border : Tebal garis tabel
- cellspacing : Spasi antar sel
- cellpaddig : Spasi dalam sel
- align : Perataan teks dalam sel
- bgcolor : Warna background tabel
Di antara tag tersebut di masukan perintah pembuatan baris dan kolom. Pembuatan baris selalu mendahului pembuatan kolom, sperti terlihat dalam contoh berikut :
- <html>
- <head>
- <title> Membuat Tabel </title>
- </head>
- <table width="300" border="1" bgcolor="grey">
- <tr>
- <td width=100>Kolom1 baris 1</td>
- <td>Kolom2 baris1</td>
- </tr>
- <tr height=80>
- <td>Kolom1 baris 2</td>
- <td>Kolom2 baris 2</td>
- </tr>
- </table>
- </body>
- </html>
Form
Form dalam Html dapat di gunakan untuk mengirim data melewati web dan kadang di gunakan sebagai contact form untuk konversi informasi yang di inputkan oleh pengguna ke dalam e-mail.
Dalam penggunaan pada dokumen web, form harus di kaitkan dengan script progam yang akan memproses data yang di inputkan oleh pengguna ke dalam form tersebut.
Tag-tag yang di gunakan untuk membuat form dengan html berupa :
form, input, textarea, select, dan option.
Dalam Html, penulisan form dengan html membutuhkan antibut action yang akan menentukan kemana isi dari form yang akan di kirim nantinya. Atribut method akan menentukan bagaimana data dalam form yang memiliki nilai get (nilai default) atau post tersebut di kirim, di mana nilai-nilai tersebut adalah nilai yang paling banyak di pakai.
Dengan demikian, sebuah elemen form terlihat seperti contoh di bawah ini :
<form action="processinhscript.ekstensi" method="post"> </form>
Tag input adalah inti dari sebuh form, di mana tag input dapat memiliki sepuluh form dan harus di tutup dengan tanda miring "/" perhatikan contoh di bawah ini :
- <input type="text" />, adalah textbox standar. Tag ini dapat memiliki sebuah atribut value, yang mengatur teks dalam textbox.
- <input type="password" />, sama dengan textbox, tetapi menampilkan tanda bintang yang menggantikan karakter yang di ketikan.
- <input type="checkbox" /> adalah bentuk checkbox, yang dapat di tampilkan dan tidak oleh pengguna. Tag ini memiliki sebuah atribut checked, yang di gunakan dalam format <input type="checkbox" checked="checked" />.
- <input type="radio" />, hampir sama dengan checkbok, tapi pengguna hanya dapat memilih sebuah radio button dalam kelompok tersebut. Tag ini juga memiliki atribut checked, yang di gunakan sama dengan checkbox.
- <input type="file" /> adalah suatu daerah yang menampilkan file-file dalam komputer seperti ketika anda membuka atau menyimpan dokumen dalam program.
- <input type="submit" /> biasanya berada pada sebuah tombol di mana ketika di pilih, akan mengirim (submit) form tersebut. anda dapat mengontrol penampakan text dalam tombol submit (sama seperti dalam tipe button dan reset) dengan atribut value. Perhatikan contoh berikut : <input type="submit" value="ini adalah nilai tombol"/>.
- <input type="button" /> adalah sebuah tombol (butto) yang tidak akan melakukan apapun tanpa penambahan kode ekstra lagi.
- <input type="reset" /> adalah sebuah tombol di mana ketika di pilih akan mengulang kembali (reset) field dalam form.
- <input type="hidden" /> adalah sebuah field yang tidak akan terlihat dan di gunakan untuk melewatkan informasi seperti nama alamat e-mail pada form yang akan di kirimkan.
Sebuah textarea biasanya berupa textbox yang luas yang membutuhkan atribut baris (rows) dan kolom (cols), seperti pada contoh di bawah ini :
<textarea rows="5" cols="20"> teks </textarea>
tag select bekerja dengan tag option dalam pembuatan sebuah drop-down select boxes, seperti pada contoh di bawah ini :
- <select>
- <option value="opsi pertama">Option 1 </option>
- <option value="opsi kedua">Option 2 </option>
- <option value="opsi ketiga">Option 3 </option>
- </select>
Ketika form di kirimkan, nilai dari opsi yang terpilih juga akan di kirimkan. Hampir sama dengan atribut checked dari checkbox dan radio button, sebuah tag option dapat pula memiliki atribut selected yang akan di gunakan dalam format :
<option value="hewan" selected="selected">kucing</option>
Keseluruhan tag yang di sebutkan di atas akan terlihat bagus dalam halaman web. Namun jika anda mengaitkan form anda dalam sebuah program form maka perintah yang ada di dalamnya akan di abaikan.
Hal ini di sebabkankarena filed form tersebut memerlukan sebuah nama (name). Jadi atribut name harus di tambahkan dalam field, seperti contoh di bawah ini :
<input type="text" name="teks komentar" />
Dalam contoh berikut, form akan bekerja jika terdapat file "koneksi.php" yang di tetapkan dalam atribut action dalam tag form untuk menangani file dalam form yang di kirimkan.
- <html>
- <head>
- <title>Belajar form</title >
- </head>
- <body>
- <form action="koneksi.php" method="post">
- <p>Nama : </p>
- <p><input type="text" name="nama" value="nama anda" /> </p>
- <p>Komentar : </p>
- <p><input type="textarea" name="komentar" rows="5" cols="20"> Komentar Anda </textarea> </p>
- <p>data : </p>
- <p><input type="radio" name="data" value="Laki-laki" /> Laki-laki </p>
- <p><input type="radio" name="data" value="Perempuan" /> Perempuan </p>
- <p><input type="submit" value="kirim" /></p>
- <p><input type="reset" value="ulangi" /></p>
- </form>
- </body>
- </html>
Tampilan dalam browser jika anda mengeksekusi kode di atas maka penampakanya akan seperti :
Catatan : Simpan kode tersebut dengan format (.Html)
Nah itulah Jenis-jenis badan html serta atribut lainnya bagian ke 2 (dua),
untuk bagian kedua nanti saya up to date, semoga artikel ini bisa
membantu dan juga bermanfaat. Salam Sukai Penulis
0 Komentar