1. Perkenalan dengan HTML
HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML sangat
mudah digunakan dan diaplikasikan, oleh karena itu apabila kalian ingin belajar membangun sebuah situs
sendiri maka bahasa HTML wajib kalian pelajari. Pelajaran HTML ini akan diberikan dalam bahasa yang
mudah dimengerti sehingga kalian dapat belajar mulai dari nol alias tidak tahu apa-apa tentang html.
Anggap kalian sedang ingin membuat suatu kue. Sebelum membuat suatu kue maka kalian harus
mengetahui terlebih dahulu bahan-bahan yang akan kalian gunakan beserta tahapan-tahapannya agar kue
itu nanti terasa lezat apabila dimakan. Membuat file html pun demikian, sebelum membuat suatu file html
kalian harus mengerti struktur dari file html itu sendiri dan 'bahan-bahan' yang digunakan dalam membuat
file tersebut agar file html kalian dapat tampil dengan bagus di browser manapun.
HTML merupakan singkatan dari Hypertext Markup Language yang merupakan bahasa paling standard
yang digunakan untuk membuat suatu website. HTML bukanlah merupakan suatu bahasa pemrograman,
karena bahasa ini hanya berguna untuk mengontrol tampilan dari suatu halaman (web page) beserta isinya,
beda dengan bahasa PHP yang didalamnya dapat mendukung suatu bentuk perulangan (Loop) atau bentuk
pengandaian (if-else) sehingga bahasa PHP dapat disebut sebagai suatu bahasa pemrograman. Namun
dengan berawal dari bahasa paling dasar ini kamu dapat menambahkan obyek-obyek lainnya seperti
gambar, suara, video, dan permainan flash dalam suatu dokumen HTML.
Untuk membuat suatu dokumen HTML, hal-hal yang kamu perlukan hanyalah sebuah text editor biasa
seperti : Notepad atau Wordpad (program standar bawaan dari windows) lalu kamu mengetikkan kode
HTML didalamnya kemudian di save (simpan) dengan akhiran (ekstensi) .htm atau .html. Sebagai contoh
kamu bisa menyimpan dokumen HTML kamu dengan nama belajar.html Bila kamu ingin sebuah HTML
editor yang lebih profesional lagi, mungkin kamu bisa menggunakan program MS FrontPage atau bahkan
Dreamweaver (editor HTML yang paling terkenal), tetapi tentunya kedua program (software) diatas
merupakan software berbayar yang tentunya disini kami amat tidak menyarankan kamu untuk mencari
crack-nya atau menggunakan software ilegal. Kemudian apabila file kamu telah disimpan dengan
akhiran .html atau .htm maka selanjutnya kamu dapat membukanya dengan software (dalam hal ini
disebut browser) seperti : Internet Explorer (bawaan windows) , Mozilla Firefox , Google
Chrome , Opera , atau browser lainnya.
Dasar-dasar HTML
Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur dari HTML. Struktur HTML
ini dapat kamu ibaratkan seperti Hamburger. Pernah makan? Kalau belum, kamu akan melihat roti bulat
yang ditumpuk-tumpuk dengan isi sayuran didalamnya. Struktur HTML ini mirip seperti Hamburger,
sayuran yang dijepit oleh roti tersebut adalah isi dari kedua tag HTML yang menjepitnya. Apa itu tag?
Sekarang kita langsung lihat saja pada struktur sederhana dari HTML.
Di bawah ini adalah struktur dasar suatu file html,
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <title>Sedang Belajar</title>
4. </head>
5. <body>
6.
7. aku belajar html nih ..
8.
9. </body>
10. </html>
kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa tanda kutip) merupakan tag-tag
HTML. Tag-tag ini menandai bagian-bagian pada halaman situs agar ditampilkan sesuai dengan standar
tampilannya. Tag HTML dasar adalah yang kalian lihat diatas, yaitu html, head, dan body, inilah roti dari
hamburger kita, mereka masing-masing menjepit isinya. Perhatikan kode paling atas dan paling bawah,
yaitu
view plaincopy to clipboardprint?
1. <html>
dan
view plaincopy to clipboardprint?
1. </html>
Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat dalam tag ini adalah bagian dari
html.
Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag <head> dan </head> digunakan
untuk meletakkan informasi-informasi penting yang tidak ditampilkan oleh browser sehingga ketika kita
tidak akan melihatnya pada halaman situs. Tulisan didalam <head> dan </head> hanya dapat dilihat
apabila kita mengklik 'View Source' pada browser Internet Explorer, atau 'View Page Source' pada
Mozilla Firefox. Keduanya dapat ditemukan dengan klik kanan pada halaman situs yang dilihat. Tag
<head> ini umumnya berisi judul (tag <title> dan </title>) dari halaman situs dan beberapa informasi
tambahan lainnya.
Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan
ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain
yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan
paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan
definisinya dan cara pemakaiannya pada pembahasan khusus tag.
Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html
adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body
ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
1. <html>
2. <head>
3. <title>Sedang Belajar</title>
4. </head>
5. <body bgcolor=red>
6.
7. aku belajar html nih ..
8.
9. </body>
10. </html>
Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang merah pada halaman situs..". Sehingga
latar belakang dari halaman yang kalian buat akan berwarna merah. Atribut-atribut yang lain dapat kalian
temukan pada bagian tag yang bersangkutan.
Meletakkan Gambar pada HTML
Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa suatu situs
disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari
suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk meletakkan gambar ke suatu
halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file
htmlnya kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar yang diperlukan untuk
meletakkan gambar pada halaman html.
Cara pengunaannya seperti ini, lihat kode dibawah ini
view plaincopy to clipboardprint?
1. <img src="gambar_mobil.jpg" alt="gambar mobil" />
Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan,
melainkan menutup dirinya sendiri. Coba kalian perhatikan di akhir tag ia menutupnya sendiri dengan />
bukan? Lalu apa artinya atribut src dan alt? Atribut src adalah atribut yang berisi info dimana lokasi
gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang keluar apabila browser
yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah kependekan dari Source (sumber)
dan Alt adalah kependekan dari Alternative (alternatif teks).
Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian coba
kode berikut di papan tulis di bawah.
view plaincopy to clipboardprint?
1. Teks sejajar
2. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
3. align="bottom" />
4. dengan gambar<br />
5. Teks ditengah-tengah
6. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
7. align="middle" />
8. gambar<br />
9. Teks diatas
10. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
11. align="top" />
12. gambar
Gunakan align="bottom untuk membuat bagian bawah dari gambar rata dengan bagian bawah tulisan, dan
gunakan align="middle" untuk membuat gambar berada di tengah-tengah tulisan, namun apabila kalian
menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata atas) maka kalian dapat
menggunakan align="top".
Pasti kalian juga akan bertanya apabila gambar tersebut tidak diantara tulisan melainkan pada bagian
tersendiri dan tidak diapit oleh teks bagaimana cara membuatnya menjadi disebelah kiri atau kanan
halaman? Gunakan align="left" dan align="right" untuk membuatnya rata kiri dan rata kanan. Namun
apabila kalian ingin membuat gambar yang ditengahkan kalian harus menambahkan tag <center> dan
</center>. Lihat kode dibawah untuk lebih jelasnya.
view plaincopy to clipboardprint?
1. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
2. align="left" /><br /><br />
3.
4. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
5. align="right" /><br /><br />
6.
7. <center>
8. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" />
9. </center>
Kalian juga bisa membuat suatu gambar sebagai background dari halaman html kalian. Caranya cukup
mudah yaitu pada tag <body> kalian tambahkan atribut background. Lalu isi dengan nama file gambarnya.
1. <body background="namafilegambarkalian.gif">
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Membuat Tautan atau Hyperlink dalam HTML
Hyperlink atau tautan dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu alaman
dengan halaman lain. Untuk membuat Hyperlink, bahan yang diperlukan adalah <a>. Tag ini kependekan
dari anchor. Lihat kode di bawah ini.
view plaincopy to clipboardprint?
1. <a href="http://klikbelajar.com">Klik Saya</a>
kode diatas hasilnya akan seperti dibawah ini
Klik Saya
Atribut href pada tag <a> berfungsi sebagai tempat informasi alamat yang dituju. Apabila kalian ingin
alamat yang dituju adalah google maka tuliskan href="http://www.google.com". Cara penulisan alamat ini
ada dua macam yaitu absolut dan relatif. Penulisan alamat absolut adalah penulisan alamat yang lengkap
sedangkan relatif yang alamat singkatnya. Sekarang begini anggap kalian tinggal di daerah terpencil di
pulau Rote (ada yang tahu pulau Rote?). Kalian berniat mengirim surat ke Jakarta melalui pos. Kalian
pasti akan menuliskan alamat lengkapnya besert RT RW dan Kelurahannya untuk memastikan surat
tersebut sampai di tujuan bukan? Namun apabila kalian akan mengirim surat ke teman yang rumahnya
hanya berbeda 3 rumah dari rumah kalian, kalian dapat menuliskan nomor rumah dan menitipkannya
pada ketua RT untuk menyampaikannya bukan?
Hal yang sama dapat kalian analogikan ke dalam tipe penulisan alamat href. Tipe Absolut adalah
penulisan alamat lengkap menggunakan RT RW dan Kelurahan yang dalam html contohnya seperti ini,
view plaincopy to clipboardprint?
1. <a href="http://klikbelajar.com/pelajaran-sekolah/pelajaran-bahasa/bahasa-inggris/belajarbahasa-
inggris-past-continous/">Klik Saya</a>
Tipe absolut ini digunakan apabila alamat yang dituju jauh diluar tempat penyimpanan halaman yang
kalian edit sekarang. Namun apabila kalian mempunyai dua file dalam satu folder yaitu coba1.html dan
coba2.html, dan kalian sekarang sedang mengedit halaman coba1.html. Apabila kalian ingin menaruh
tautan ke halaman coba2.html maka kalian cukup menulis sebagai berikut
1. <a href="coba2.html">Klik untuk menuju halaman coba2</a>
Lihat perbedaannya, yang absolut menggunakan http:// dan juga menuliskan folder-folder yang
menyertainya, sedangkan yang relatif cukup menuliskan nama file yang dituju karena berada dalam satu
folder.
Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink pada
tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode di bawah ini.
1. <a href="coba2.html"><img src="gambarkodok.jpg" /></a>
Kode diatas adalah contoh hyperlink dimana ketika gambar kodok di klik maka halaman coba2.html akan
terbuka. Karena gambar "gambarkodok.jpg" ditulis dalam bentuk relatif maka gambar kodok tersebut
diletakkan dalam satu folder yang sama. Jika tidak maka gambar kodok tersebut tidak akan muncul.
Untuk belajar lebih lanjut tentang penempatan gambar pada halaman web silahkan buka pelajaran
sebelumnya "Meletakkan Gambar pada halaman HTML".
Dalam membuat hyperlink juga ada pilihan untuk jendela pembukanya, apakah di halaman yang sama
atau di halaman baru sehingga halaman sebelumnya tidak tertutup. Untuk membuat pilihan seperti ini
tambahkan atribut target pada tag <a>. Lihat kode dibawah ini.
1. <a href="http://klikbelajar.com" target="_blank">Munculkan
2. Klikbelajar.com di halaman baru</a>
3. <a href="http://klikbelajar.com">Munculkan
4. Klikbelajar.com di halaman ini</a>
Apabila kalian menginginkan halaman baru dibuka di jendela yang lain maka gunakan target="_blank"
sedangkan apabila kalian menginginkan halaman yang dibuka pada halaman itu juga maka hilangkan
atribut target maka ia secara default akan membuka pada halaman itu sendiri.
Membuat Tabel pada Halaman HTML
Tabel seperti yang kalian tahu terdiri dari kolom dan baris. Pada tabel data-data dimasukkan dalam
kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa digabungkan untuk
membuat tampilan yang sesuai dengan kebutuhan data kita. Pada html semua itu dapat dilakukan, namun
tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk meracik
sebuah tabel. Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut, <table>,
<tr>, dan <td>.
Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,
view plaincopy to clipboardprint?
1. <table>
2. <tr>
3. <td>baris 1, kolom 1</td>
4. <td>baris 1, kolom 2</td>
5. </tr>
6. <tr>
7. <td>baris 2, kolom 1</td>
8. <td>baris 2, kolom 2</td>
9. </tr>
10. </table>
Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang berukuran 2 X 2, yaitu 2 kolom
dan 2 baris. Sekarang perhatikan karena konsep dari tabel ini cukup sulit namun akan menjadi mudah
apabila kalian memperhatikan penjelasan berikut.
Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data pada
baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah membuat sebuah baris
lalu setelah itu membuat kolom, baru setelahnya memasukkan data. Apabila kalian ingin memasukkan
data pada kolom kedua baris pertama maka kalian harus membuat sebuah baris, kemudian buat kolom
pertama, setelah itu buat kolom kedua, baru isi datanya. Jadi intinya baris dulu baru kolom.
<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data.
Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d = data.
Setelah mengetahui dasarnya, maka selanjutnya kita akan belajar untuk menyatukan 2 kolom pada sebuah
tabel. Lihat contohnya dibawah ini, kita akan membuat sebuah tabel dimana terdapat 2 kolom yang
digabungkan.
1
2 3
4 5
Lihat, pada baris pertama, kolom pertama dan kedua digabung sehingga isi dari kolom tersebut bisa
sepanjang 2 kolom. Biasanya penggabungan kolom seperti contoh diatas digunakan untuk membuat judul
dari tabel.
Lalu sekarang bagaimana cara membuatnya agar bisa digabungkan ? Asal kita mengetahui bahan
tambahannya hal itu mudah sekali untuk dilakukan. Bahan tambahan tersebut berupa atribut dari <td>
yang bernama colspan. Lihat di bawah ini untuk cara penggunaannya.
· <table>
· <tr>
· <td colspan="2">Ini adalah kolom yang digabungkan</td>
· </tr>
· <tr>
· <td>baris 2, kolom 1</td>
· <td>baris 2, kolom 2</td>
· </tr>
· <tr>
· <td>baris 3, kolom 1</td>
· <td>baris 3, kolom 2</td>
· </tr>
· </table>
Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya terlihat perintah <td colspan="2">
bukan ? Ini adalah contoh penggunaan colspan. Colspan memerintahkan agar beberapa kolom
digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai tersebut adalah "2" sehingga 2
kolom digabungkan menjadi satu dan hasilnya dapat kalian lihat seperti contoh tabel diatas.
Contoh diatas adalah untuk menggabungkan kolom secara horisontal, namun bagaimana cara
menggabungkan kolom secara vertikal? Berikut ini kita akan belajar untuk menggabungkan kolom 2
secara vertikal. Lihat tabel dibawah ini.
1
2
3
5
Perhatikan tabel diatas, kolom 2 dan kolom 4 digabung sehingga kolom 4 nya hilang. Untuk membuat
tabel seperti diatas atribut tambahan yang diperlukan adalah rowspan. Mudah bukan mengingatnya? jika
masih dalam satu baris kita menggunakan colspan sedangkan apabila pidah baris kita menggunakan
rowspan. Dibawah ini adalah perintah yang digunakan untuk membuat tabel seperti diatas.
1. <table>
2. <tr>
3. <td colspan="2">Ini adalah kolom yang digabungkan</td>
4. </tr>
5. <tr>
6. <td rowspan="2">baris 2, kolom 1</td>
7. <td>baris 2, kolom 2</td>
8. </tr>
9. <tr>
10. <td>baris 3, kolom 2</td>
11. </tr>
12. </table>
Membuat Form Isian pada HTML
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.
Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat
form relatif lebih sulit. Untuk itu kalian sebaiknya membaca setiap petunjuk disini agar lebih mudah
memahami cara membuat form ini.
Di bawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input.
Nama Kalian :
Password :
Hobi :
Baca
Berenang
Pernah ke Klikbelajar.com sebelumnya?
Sudah
Belum
Mana yang kalian sukai?
Ceritakan tentang diri kalian :
Kirim Data Reset
Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan bahanbahannya,
yaitu <form>, <input>, <select>, dan <option>.
Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat sebuah form
yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL. Disini kalian hanya
mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form yang baik.
Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang berbedabeda.
Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web kalian misalnya
teks. Dari atas ke bawah :
· Text
· Password
· Checkbox
· Radio
· Select
· Textarea
Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak.
Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya
adalah sebagai berikut :
view plaincopy to clipboardprint?
1. Nama : <input type="text" size="25" />
2. Pesan Anda : <input type="textarea" cols="20" rows="20" />
Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam
kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
view plaincopy to clipboardprint?
1. Password : <input type="password" size="25" />
Silahkan script html tersebut kalian coba pada papan tulis di bawah.
Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari beberapa
pilihan yang disediakan.
Checkbox
Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat penggunaannya
berikut ini :
view plaincopy to clipboardprint?
1. Pelajaran yang kalian sukai :
2. <input type="checkbox"> Matematika
3. <input type="checkbox"> Fisika
4. <input type="checkbox"> Kimia
5. <input type="checkbox"> Sejarah
Radio
Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
1. Pelajaran yang kalian sukai :
2. <input name="favorit" value="matematika" type="radio"> Matematika
3. <input name="favorit" value="fisika" type="radio"> Fisika
4. <input name="favorit" value="kimia" type="radio"> Kimia
5. <input name="favorit" value="sejarah" type="radio"> Sejarah
Select
Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya
aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu
bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :
1. Pelajaran yang kalian sukai :
2. <select name="favorit">
3. <option>Matematika
4. </option><option>Kimia
5. </option><option>Fisika
6. </option><option>Bahasa
7. </option></select>
Silahkan kode-k kode diatas dicoba di papan tulis dibawah agar kalian lebih memahami aplikasinya.
Jika anda ingin membuat semacam daftar isian (form) di situs web anda, artikel ini akan membahas
bagaimana cara membuatnya. Tapi artikel ini hanya akan membuat form nya saja. Untuk memproses data
yang diinput dari form, tidak akan dibahas disini.
Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.
-----------------mulai kode html----------------------
<form method="???" action="???">
<tag tertentu>
</form>
-----------------akhir kode html----------------------
pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi
dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika
anda mengisi 'get' maka data akan terlihat di address bar web browser.
atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"
Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk
membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset
data.
1. Textfield.
Berikut adalah kode HTML untuk membuat textfield.
-----------------mulai kode html----------------------
<input type="text" name="judul" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form
berbentuk textfield. atribut ini harus ada untuk membuat textfield.
++ atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut
memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari
tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput
pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka.
Boleh dihilangkan dari tag <input>.
++ atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan,
dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
2. Textarea.
Berikut adalah kode HTML untuk membuat Textarea.
-----------------mulai kode html----------------------
<textarea name="keterangan" cols="50" rows="5"></textarea>
-----------------akhir kode html----------------------
penjelasan:
++ atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki
nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag
<textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini
dapat dihilangkan.
++ atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan.
Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.
3. Password
-----------------mulai kode html----------------------
<input type="password" name="katasandi" maxlength="20" size="20">
-----------------akhir kode html----------------------
penjelasan:
++ sama seperti textfield hanya saja atribut 'type' diisi dengan nilai 'password'. Karakter yang diinput akan
tidak terlihat diganti dengan simbol lingkaran atau asterisk (*).
4. dropdown box.
-----------------mulai kode html----------------------
<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b"
selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah
orangnya!</option></select>
-----------------akhir kode html----------------------
penjelasan:
++ tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan
identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak
ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1'
atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka
sebanyak angka tersebut pilihan akan ditampilkan.
++ tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di
browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat
diantara tag <option> </option> adalah kalimat yang akan ditampilkan ke browser.++ atribut 'selected'
dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat
dipakai pada satu option saja.
5. radio button
merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.
-----------------mulai kode html----------------------
<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">
<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'radio'.
++ untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau
lebih radio button. Dalam contoh di atas, terdapat dua kelompok
radio button, yaitu 'pilihan' dan 'pilihan2'.
++ atribut 'value' diisi nilai yang akan diproses nanti.
++ atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).
Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu
di pilhan kedua 'BMW". Berikut kodenya.
-----------------mulai kode html----------------------
Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">
<br><br>
Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">
-----------------akhir kode html----------------------
Jadi teks yang Audi, BMW, Honda, Yamaha itulah yang akan ditampilkan di browser. Sedangkan teks
yang berada di dalam 'value' itulah nilai yang akan diproses.
6. checkbox
merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).
-----------------mulai kode html----------------------
<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">
<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">
-----------------akhir kode html----------------------
keterangan:
++ sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.
7. tombol reset
tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.
-----------------mulai kode html----------------------
<input type="reset" value="Batal">
-----------------akhir kode html----------------------
keterangan:
++ atribut 'type' harus diisi 'reset'.
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.
8. tombol submit
tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang
ditulis pada atribut 'action' (lihat artikel Membuat form dengan
HTML 1).
-----------------mulai kode html----------------------
<input type="submit" value="Kirim">
-----------------akhir kode html----------------------
Sumber : http://klikbelajar.com, http://www.andhika-maulana.co.cc
sumber : http://smaypkbontang.sch.id/down/html.pdf
Tidak ada komentar:
Posting Komentar