Modul Web Dasar HTML CSS

WEB PROGRAMMING
1. Format Penulisan HTML

Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>,
<body> beserta tag penutupnya masing-masing. Susunan tag – tag tersebut
membentuk dokumen HTML sebagai berikut :
Gambar 1 Format Penulisan HTML
2. Memulai Membuat Dokumen dengan Format HTML

Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :
1. Buka notepad++ sebagai editor dokumen HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad++ :
Gambar 2 Format Penulisan HTML
3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau
.html
Path directory : …./nama_folder/xxx.html
WEB PROGRAMMING
Gambar 3 Format Penyimpanan HTML
4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen
tersebut menggunakan web browser. Dengan klick Run – Launch in IE.
Gambar 4 Tampilan Hasil Eksekusi Contoh
3. Tag Dasar dalam HTML

1) Heading
Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam
dokumen HTML, dengan berbagai ukuran yang berbeda.
Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x
adalah level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag
WEB PROGRAMMING
yang mempunyai tag awal <Hx> dan tag penutup </Hx>

Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :
<HTML>
<BODY>
<H1>Heading 1 adalah 24 Point</H1>
<br>
<br>
<br>
<br>
<br>
<br>
2) Paragraf
a. Melakukan Formating Paragraf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan
informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus,
untuk mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output,
seperti teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
 teks tebal : menggunakan tag <b>

 teks penting : menggunakan tag <strong>
 teks miring : menggunakan tag <i>
 teks menekankan : menggunakan tag <em>
 teks menandai : menggunakan tag <mark>
 teks kecil : menggunakan tag <small>
 teks menghapus : menggunakan tag <del>
 teks memasukkan : menggunakan tag <ins>
 subscript / pangkat dibawah : menggunakan tag <sub>
 superscripts / pangkat di atas : menggunakan tag <sup>
b. Menggunakan Line Break

Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak
berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol
WEB PROGRAMMING
Enter, maka tidak kan dianggap 1 pun.

Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya
fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>
c. Preformatted Text
Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu
spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di
dalam editor teks, maka teks yang bersangkutan harus di beri tanda tag <pre> di
awalnya dan </pre> di akhir teks. Dengan tag <pre>, yang mempunyai
kepanjangan "preformatted" teks akan di tampilkan dalam browser dengan ukuran
font dengan lebar - fix. Tag ini juga akan menjaga spasi, baris baru, dan tap sesuai
dengan aslinya pada saat di tampilkan dalam browser.
e. Mengolah Properti Dari Font

Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin
karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style="property:value" untuk mengubah style property dari font. Gunakan atribut
style untuk elemen styling HTML
 background-color untuk warna latar belakang
 color untuk warna teks
 font-family untuk font teks
 font-size untuk ukuran teks
 text-align untuk perataan teks
f. Membuat garis Horizontal

Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE,
dan WIDTH. Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri.
Jadi tidak perlu ditutup dengan tag penutup.
WEB PROGRAMMING
3) List
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list,
unordered list dan definition list.
a. List Tanpa Urutan (Unordered Lists)

Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol
atau special character pada HTML. nama lain dari unordered list sendiri adalah bullet
list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat
suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini,
pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada
jenis synthax yang digunakan dimana unordered list akan menggunakan <ul>.
b. List Berurut (Ordered Lists)

Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka,
abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis
elemen yang dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan
<li> yang merupakan singkatan list item
c. Definition List
Definition list merupakan jenis daftar yang umumnya digunakan untuk
mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga
daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benar-
benar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga
jenis tag : Diawali dengan <dl> yang merupakan singkatan definition list; <dt>
yang merupakan singkatan definition term (digunakan untuk kata yang akan
didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu
istilah (<dt>).
WEB PROGRAMMING
CONTOH
1. Menggunakan Heading.
Gambar 5 Menggunakan Heading
2. Memformat Paragraf.
Gambar 6 Skrip contoh format paragraph

WEB PROGRAMMING
3. Penggunaan Line Break dalam HTML.
Gambar 7 Contoh penggunaan Line Break
4. Penggunaan Pre dalam HTML.
Gambar 8 Contoh skrip penggunaan preformatted
5. Memformat Bentuk Tulisan dalam HTML ( penebalan, penulisan miring dan

garis bawah pada font).
Gambar 9 Contoh skrip format penulisan

WEB PROGRAMMING
6. Penggunaan Superscript dan Subscript dalam HTML.
Gambar 10 Contoh skrip format penulisan
7. Mengolah property text.
Gambar 11. Contoh skrip property text
8. Menambahkan Garis Horisontal pada HTML.
Gambar 12 Contoh skrip untuk penambahan garis horizontal

WEB PROGRAMMING
9. Penggunaan Unordered List pada HTML
Gambar 13 Contoh skrip untuk penggunaan Unordered List

WEB PROGRAMMING
10. Penggunaan Ordered List pada HTML
Gambar 14 Contoh skrip untuk penggunaan Ordered List

WEB PROGRAMMING
Link dan Gambar
1. Link
Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau
lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen
HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML.
Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila
diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan
warnanya menjadi berbeda. Sintaksis penulisan :
Beberapa atribut yang sering ditambahkan atau sering digunakan dalam

penggunaan sintak diatas adalah seperti dibawah ini:
Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari
posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih
memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web.
Caranya dengan menyisipkan Tag Anchor <a> dengan atribut "name" di bagian
dokumen yang akan dituju.
Untuk perintah standartnya :
Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan
'#nama_section" menjadi :
WEB PROGRAMMING
2. Gambar
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file
gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif,
psd, dan sebagainya. Pada umumnya, perancang web hanya menggunakan
kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis yang
digunakan secara standar adalah
Apabila kita mengakses sebuah website, seperti facebook atau search engine google
terdapat logo dari dua website tersebut. Logo tersebut merupakan gambar dimana
kita sering dapat melakukan klick terhadap gambar tersebut dan merujuk ke sebuah
link tertentu. Berikut contoh sintaks penggunaan obyek gambar menjadi hyperlink :
<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>

 Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.
 Atribut src adalah sumber/url dari gambar.
 Atribut alt adalah untuk memberikan nama alternatif gambar. Apabila gambar
tidak bisa ditampilkan, maka yang muncul adalah nama alternatifnya.
 Atribut height dan width adalah untuk mengatur ukuran gambar.
contoh:
<img src=‟sepeda.jpg' alt='Click Me!' width=100' height='100'>
WEB PROGRAMMING
CONTOH
1. Membuat Link Antar Dokumen
Dalam Contoh ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman
html dengan nama Magister Teknik Informatika.html, Sistem
Informasi.html, Teknik Informasi.html (disimpan di direktori anda masing-
masing) dengan script masing-masing seperti dibawah ini:
Gambar 1 Skrip untuk direksional link dari HTML utama
Setelah kita mengetikkan skrip diatas dan melakukan penyimpanan, selanjutnya kita
akan membuat halaman HTML baru yang nanti ada link untuk merujuk ke tiap
halaman HTML diatas.
WEB PROGRAMMING
Gambar 2 Skrip untuk Halaman utama
2. Membuat Link ke dalam Dokumen
Gambar 3 Skrip untuk merujuk dalam dokumen

WEB PROGRAMMING
3. Menyisipkan gambar pada HTML.
Gambar 4 Skrip untuk menyisipkan gambar didalam HTML
4. Membuat gambar menjadi hyperlink.
Gambar 5 Skrip untuk menyisipkan sebuah link dalam gambar
Jika diperhatikan, skrip diatas terdapat sebuah sintak yang mengarah sebuah
halaman html tertentu. Oleh karenanya, buatlah sesuai nama halaman html diatas
agar bisa dirujuk oleh halaman tersebut.
WEB PROGRAMMING
Gambar 6 Skrip untuk menyisipkan sebuah link tautan
Jika pengetikan skriptidak terjadi kesalahan, maka obyek gambar diatas jika diklik
maka akan merujuk ke halaman html yang telah kita buat setelahnya.
WEB PROGRAMMING
Form
Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan
dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan
sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus,
penyuntingan data dan lain sebagainya.
1. Menu Form
Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau
masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat
digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data,
browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form
dalam html adalah.
Pada penulisan form "nama form" adalah nama form yang sedang digunakan,
method adalah metode atau cara yang digunakan untuk menyimpan data ke server
sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk
memproses input dari form kedalam server.
2. Jenis-jenis media input dalam Form

Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-
masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari :
1) Kontrol Berupa Text

Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan
menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk
masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk
masukan teks yang hanya satu baris.
Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya

langsung memasukkan tag-nya saja:
<textarea>
</textarea>
WEB PROGRAMMING
selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag
untuk mendapatkan nilai masukan standar:
<textarea>
Contoh isi textarea
</textarea>
Gambar 1 Contoh Penggunaan Elemen TextArea

Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan
menggunakan properti height danwidth.
Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya

tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita
menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang
banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:
<input type="text">
yang akan menghasilkan elemen masukan seperti berikut:
Gambar 2 Contoh Penggunaan Elemen Input

Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk
menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang
dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada,
sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada
atribut type yaitu:
1. color 9. time
2. datetime-local 10. datetime
3. number 11. month
4. tel 12. search
5. week 13. url
6. date 14. password
7. email 15. text
8. range 16. file
WEB PROGRAMMING
2) Kontrol Berupa Radio Button
Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya
pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran
online, biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin ,
agama, ataupun sebagainya. Radio Button ini akan sering kita temui saat kita
berselancar di dunia maya yang terkait dengan proses input data seperti
pendaftaran dll.
Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan
atribut type bernilai : code`radio`:
<input type="radio" name="sex" value="pria"> Pria <br>

<input type="radio" name="sex" value="wanita"> Wanita
dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut
lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan
browser bahwa radio button dengan atribut name yang sama adalah merupakan
kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua
buah pilihan pada radio button tersebut.
Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.
Gambar 3 Contoh Penggunaan Elemen Radio Button
3) Kontrol Berupa Checkbox

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan,
pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau
tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data
yang sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut. Input
checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih
maka pengguna akan men-check (mencentang) dan jika tidak memilih akan
dibiarkan saja.
WEB PROGRAMMING
Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai
atribut type-nya berisikancheckbox.
<input type="checkbox" name="day" value="senin"> Senin <br>

<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu
Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox,
dengan alasan yang sama untuk radio button.
Gambar 4 Contoh Penggunaan Elemen Checkbox

Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun
checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang
sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan
negara yang ada di dunia akan jika ditampilkan pada radio button akan
menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh
pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.
4) Dropdown list
Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen,
yaitu select dan option. Elemenselect membungkus seluruh elemen option yang ada,
untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari
dropdown yang diinginkan. Perhatikan kode di bawah:
<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
yang akan menghasilkan:

WEB PROGRAMMING
Gambar 5 Contoh Penggunaan Elemen Dropdown

dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat
menambahkan atribut multiple pada elemen select:
<select name="country" multiple>

<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Gambar 6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak
5) Button
Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website.
Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain
sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti
tombol.
a. Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.
Pembuatan tombol submit juga dilakukan dengan menggunakan elemen input, yang
atribut type-nya diisikan dengan nilai submit, seperti berikut:
<input type="submit" name="submit" value="Masukkan Form">
Perhatikan bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari

atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal
ini menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form,
WEB PROGRAMMING
seperti pada radio button ataupun checkbox.
Gambar 7 Contoh Penggunaan Tombol Submit
b. Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan
nilai semua elemen yang ada pada form). Pembuatan tombol dilakukan sama persis
seperti pada tombol submit, dengan perbedaan nilai pada atribut type, yang diisikan
dengan reset pada tombol penghapusan ini.
<input type="reset" name="reset" value="Kosongkan Form">
6) Organisasi Elemen Form

Mengetahui bagaimana membuat elemen-elemen masukan / input pada form masih
merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan
form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna
tidak dapat mengetahui data apa yang harus diisikan ke dalam elemen-elemen
tersebut.
Untuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan
elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form.
Adapun elemen-elemen yagn dapat digunakan untuk tujuan tersebut
yaitu label, fieldset, dan legend.
a. Label
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan
form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin
ditambahkan, dan harus memiliki atribut for. Atribut for pada elemenlabel berisikan
nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang
sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna
dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan
oleh elemen label.
Perhatikan kode berikut di mana isi dari atribut for pada label adalah sama dengan
isi atribut id pada elemen input.
WEB PROGRAMMING
<label for="username">Username</label>
<input type="text" name="username" id="username">
b. Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa
elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut
merupakan elemen masukan yang berada pada satu grup yang sama, atau saling
berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen-
elemen di dalamnya, yang tentunya dapat diubah dengan menggunakan CSS.
Berikut adalah contoh penggunaan fieldset :
<fieldset>
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
yang hasil eksekusinya adalah:
Gambar 8 Contoh Penggunaan Fieldset

c. Legend
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan
elemen legend sangat sederhana, hanya dengan menambahkan elemen tersebut
sebagai child pertama dari fieldset, seperti berikut:
<fieldset>
<legend>Login</legend>
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
yang akan menghasilkan tampilan seperti berikut:

WEB PROGRAMMING
Gambar 9 Contoh Penggunaan Legend
dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.
7) Validasi Masukan pada Form

Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang
tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh
pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan
dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai
belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan
yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses
pengecekan kewajiban isi atau berbagai batasan lain ini dikenal dengan nama
validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1. Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika
pengguna tidak mengisikan elemen maka browser secara otomatis akan
memberikan peringatan kepada pengguna dan membatalkan pengiriman
form. Contoh penggunaan atribut ini yaitu:
<input type="text" name="username" requied>
2. Pengunaan atribut type yang benar, untuk memastikan browser dapat

melakukan pengecekan nilai yang diisikan pengguna dengan format sesuai
dengan yang dispesifikasikan pada standar HTML. Misalnya, jika
menggunakantype="email", maka pengguna tidak dapat
mengisikan bukanemail sebagai masukan form.
Gambar 10 Contoh Pesan Kesalahan Pengisian Email pada HTML

WEB PROGRAMMING
CONTOH
1. Penggunaan input text dalam sebuah form.
Gambar 11 Contoh skrip untuk penggunaan input text dalam sebuah form
2. Penggunaan Input Text berupa Password.
Gambar 12 Contoh skrip untuk penggunaan input text dalam sebuah password
menu
WEB PROGRAMMING
3. Penggunaan Input text berupa radio button
Gambar 13 Contoh skrip untuk penggunaan input text berupa radio button
4. Penggunaan checkbox dalam HTML.
Gambar 14 contoh skrip untuk penggunaan input text berupa checkbox

WEB PROGRAMMING
5. Penggunaan submit, reset, dan image sebagai button.
Gambar 15 Contoh skrip penggunaan input berupa button
6. Penggunaan Text area dalam Form.
Gambar 16 Contoh skrip penggunaan input berupa text area

WEB PROGRAMMING
7. Penggunaan Select Dropdown dalam Form.
Gambar 17 Contoh skrip penggunaan Select Dropdown

WEB PROGRAMMING
TABLE DAN FRAME
Tabel merupakan cara untuk menampilkan informasi dalam halaman web denan
bentuk kolom dan baris. Hampir semua web yang mempunyai kualitas dan
profesional, dirancang dengan menggunakan tabel. Layaknya sebuah spreadsheet
yang memiliki sel dan berisi angka-angka, tabel dalam web juga mempunyai sel
yang berisi link, gambar dan text.
Frame akan dapat membagi sebuah HTML menjadi beberapa dokumen HTML.
Dimana masing-masing bagian terhubung dengan dokumen HTML yang terpisah.
1. Tabel
a. Membuat Sebuah Tabel dan Judul Tabel
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya
setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas
kolom-kolom menunjukkan kelompok data dalam satu kesatuan.
Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang

dilibatkan, baris untuk informasi dan sel untuk setiap itemnya. Pada tabel berikut,
kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel
HTML dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag.
Berikut ini disajikan elemen-elemen yang sering digunakan dalam pembuatan tabel
dalam HTML.
WEB PROGRAMMING
b. Melakukan format Baris dan Kolom
Setiap tabel pasti akan terdiri dari atas baris-baris yang diwakili dengan sebuah tag
<tr> dan juga mempunyai kolom-kolom yang menggunakan sebuah tag <td>.
Setiap baris dan kolom pada tabel memiliki atribut nya masing-masing.
c. Pembahasan Tabel Lebih Lanjut
Pada pembahasan selanjutnya, kita akan belajar menyisipkan sebuah gambar

kedalam sebuah susunan tabel. Tabel di dalam sebuah website dapat berisi
hyperlink, gambar, gambar yang menunjuk ke sebuah hyperlink dan teks dengan
huruf yang berwarna.
WEB PROGRAMMING
2. Frame
Framing dalam HTML dapat kita pergunakan untuk membuat tampilan halaman
HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana didalam setiap
bagian halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya
sedangan bagian lain tetap sehingga dapat melakukan efisiensi terhadap bandwidth
koneksi internet dan mempercepat proses download page secara keseluruhan.
Berikut adalah sintaks umum yang sering digunakan dalam membuat frame
Atribut Fungsi
Width Ukuran lebar frame dalam pixels
Height Ukuran panjang frame dalam pixels
Name Menentukan nama frame

Scrolling Menentukan apakah akan
menampilkan bilah gulir di
<iframe> atau tidak
Src Menentukan alamat dokumen yang

akan ditanamkan di <iframe>
WEB PROGRAMMING
CONTOH
1. Penggunaan table dalam HTML.
Gambar 1 Skrip Penggunaan table dalam HTML
2. Pengggunaan formating baris dan kolom dalam skrip HTML.

WEB PROGRAMMING
Gambar 2 Skrip contoh untuk melakukan formating baris dan kolom dalam table
3. Penyisipan gambar dan text dalam Tabel.
Gambar 3 Skrip contoh untuk penyisipan gambar dan text

WEB PROGRAMMING
4. Contoh Penggunaan menu menggunakan Frame HTML
Sebelum membuat sebuah frame, kita buat beberapa dokumen web yang nanti akan
ditampilkan ke dalam tiap frame. Misal kita akan membuat tiga halaman yang akan
ditampilkan yang terdiri dari halaman header.html, belajar.html,
menuutama.html, home.html dan menu.html. sebuah tips jika akan membuat
sebuah website dengan sub subnya, akan lebih efektif lagi jika kita membuat sub-
sub nya terlebih dahulu. Misal membuat header, menu-menu baru dibuat frame
utama berisi sub-sub diatas.
a. Header
Simpan dengan nama header.html
Gambar 4 Skrip contoh untuk pembuatan header
b. Menu Utama
Selanjutnya adalah kita membuat menu utama. Dimana menu utama ini adalah
menu paling depan sebagai “menu penyambut” ketika user mengakses halaman
website yang kita buat. Berikut ini adalah skrip yang dibuat. Simpan dengan nama
menuutama.html
WEB PROGRAMMING
Gambar 5 Skrip contoh untuk pembuatan menu utama
c. Sub Menu Belajar
Pada langkah selanjutnya adalah membuat sub menu Belajar.html. Mari kita
ketikkan skrip dibawah ini kedalam aplikasi editor.
Gambar 6 Skrip contoh untuk pembuatan sub menu “belajar”

WEB PROGRAMMING
d. Menu Pilihan Margin Kiri
Langkah selanjutnya adalah membuat bagian dimana untuk memberikan akses

kepada pengguna dengan menyajikan kumpulan link-link dari sub menu yang ada.
Contoh skrinya adalah sebagai berikut. Simpan dengan nama menu.html
Gambar 7 Skrip contoh untuk pembuatan sub menu pilihan
e. Frame
Setelah kita telah selesai membuat sub menu dari website tersebut, selanjutnya kita
akan membuat frame. Agar dapat memilah satu halaman website menjadi beberapa
bagian yang berisi tiap halaman tersebut. Berikut ini adalah contoh skrip yang akan
kita buat. Simpan dengan nama home.html
Gambar 8 Skrip contoh untuk pembuatan frame

WEB PROGRAMMING
Cascading Style Sheet (CSS)
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan
untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS
diperkenalkan untuk pengembangan website kurang lebih pada tahun 1996. Nama
CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan
secara berurutan, yang kemudian akan membentuk hubungan parent-child pada
setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web
yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web
Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan
dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui
layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca
layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga
dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna
dengan menggunakan CSS.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser
terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan
standar CSS.
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan
secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur
tampilan / desain suatu halaman HTML.
WEB PROGRAMMING
Pengertian CSS
 CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi
yang menentukan bagiamana suatu text akan tertampil di halaman web.
 Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf)
, colors (warna), margins (ukuran), latar belakang (background), ukuran font
(font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts
(huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda
pada layers (lapisan) yang berbeda.
 CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu
dokumen akan disajikan.
 Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan
style sheet.
 Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada
setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah
style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat
kembali menggunakannya bila diperlukan.
Keuntungan Menggunakan CSS

 CSS memberikan keseragaman pada halaman web.
 Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat
menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman
web. Anda hanya perlu membuat perubahan dalam style sheet.
 CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
 Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. \
 CSS membantu Anda memelihara halaman web Anda dengan mudah dan
efektif.
WEB PROGRAMMING
1. Pengertian Selector, Property dan Value pada CSS
Gambar 1 Selector, Property dan Value pada CSS
1) Selector
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS
dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam
CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin
dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari
seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link
yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i,
h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.
2) Property
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah
tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan
hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property
adalah “efek apa yang ingin dimanipulasi dari tag p tersebut “, seperti ukuran text,
warna text, jenis fontnya, dll.
WEB PROGRAMMING
3) Value
Value CSS adalah nilai dari property. Misalkan untuk property background-
color yang digunakan untuk mengubah warna latar belakang dari sebuah
selector, value atau nilainya dapat berupa red, blue, black, atau white.
2. Penempatan Sebuah CSS

Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web,
ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang
diingkan.
1) Inline Style Sheet
CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web
yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan
dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur
style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web,
semua tag harus diformat secara independen.
Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag
HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website
dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika
menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web
hanya dapat menggunakan satu property saja pada tag HTML yang akan
dimanipulasi.
2) Embedded Style Sheet

Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi
embedded style sheet juga menjadi satu dengan halaman web yang akan diatur
style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag
<head>) dengan menambahkan tag <style type=”text/css”>.
Dengan menggunakan model penempatan CSS sebagai embedded style sheet,
pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag –
tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara
berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model
inline style sheet yang mengharuskan pembuat web menentukan style pada tag –
WEB PROGRAMMING
tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang
berbeda pada tag tersebut.
3) Linked Style Sheet

Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked
style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai
format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh
halaman web yang membutuhkan pengaturan style.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman
web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file
CSS.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman
web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file
CSS.
3. Penggunaan CSS Pada Halaman Web

Kita dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun
tidak menutup kemungkinan juga kita dapat menggunakan dua atau ketiganya
dalam sebuah website jika memang diperlukan.
1) Pengolahan Font
Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf
(<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau
ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi
tulisan / text, seperti : <th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang
memungkinkan berisi text.
Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :
WEB PROGRAMMING
2) Memanipulasi Color dan Background

Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada
tulisan, menambahkan warna background, atau dengan menambahkan gambar
sebagai background.
Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas,
ditampilkan pada tabel di bawah ini.
WEB PROGRAMMING
4. Mengenal Jenis-jenis Selector Dasar CSS

Selector adalah sebuah pola (pattern) yang digunakan untuk „mencari‟ suatu tag
di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p,
atau mencari seluruh tag h1 yang memiliki atribut class=judul.
1) Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini
bertujuan untuk „mencari‟ semua tag yang ada.
Contoh Universal Selector CSS:
* {
color: blue;
background-color: white;}
}
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan
background berwarna putih.
2) Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya
merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector,
dan seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan
seluruh tag <p>akan berukuran 14pixel.
Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam
tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai
ditemui tag penutup </p>.
WEB PROGRAMMING
3) Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan „mencari‟ seluruh tag yang memiliki atribut
class dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai
atribut class. Contohnya:
<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>
Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan
nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh
lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki
atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class,
yaitu judul, penting, dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda
titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text
akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
WEB PROGRAMMING
4) ID Selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum
dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID
selector hampir sama dengan class selector, dengan perbedaan jika pada Class
Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita
menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>
<h1 id=”judul_utama”>Judul Artikel</h1>
<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-
masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang
digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa
digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita
mencari tag yang memiliki id tersebut.
5) Attribute Selector
Selector ini sedikit lebih advanced dibandingkan dengan selector-selector
sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki
atribut yang dituliskan.
Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada
diantara tanda kurung siku “[” dan “]”. [href] akan cocok dengan seluruh tag yang
memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>).
Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut
type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut
selector ini tidak terlalu sering digunakan.
CONTOH
1. Penggunaan Inline Style Sheet
Gambar 2 Contoh Skrip CSS Inline Style Sheet

2. Penggunaan Embedded Style Sheet.
Gambar 3 Contoh Skrip CSS Embedded Style Sheet
3. Penggunaan Linked Style Sheet.
Gambar 4 Contoh Skrip Linked Style Sheet

Kemudian buat file kedua
Gambar 5 Contoh Skrip Linked Style Sheet
4. Pemberian property multi kepada selector.

Gambar 6 Contoh Skrip dalam pemberian property multi kepada selector
5. Manupulasi font dengan menggunakan selector bebas, class, dan ID.
Gambar 7 Contoh Hasil Skrip penggunaan multi kepada selector bebas, class dan
ID

Modul Web Dasar HTML CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Web Dasar HTML CSS

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web Dasar HTML CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

WEB PROGRAMMING

1. Format Penulisan HTML

Gambar 1 Format Penulisan HTML

2. Memulai Membuat Dokumen dengan Format HTML

Gambar 2 Format Penulisan HTML

Gambar 3 Format Penyimpanan HTML

Gambar 4 Tampilan Hasil Eksekusi Contoh

3. Tag Dasar dalam HTML

yang mempunyai tag awal <Hx> dan tag penutup </Hx>

 teks tebal : menggunakan tag <b>

b. Menggunakan Line Break

Enter, maka tidak kan dianggap 1 pun.

e. Mengolah Properti Dari Font

f. Membuat garis Horizontal

a. List Tanpa Urutan (Unordered Lists)

b. List Berurut (Ordered Lists)

Gambar 5 Menggunakan Heading

Gambar 6 Skrip contoh format paragraph

3. Penggunaan Line Break dalam HTML.

Gambar 7 Contoh penggunaan Line Break

4. Penggunaan Pre dalam HTML.

Gambar 8 Contoh skrip penggunaan preformatted

5. Memformat Bentuk Tulisan dalam HTML ( penebalan, penulisan miring dan

Gambar 9 Contoh skrip format penulisan

6. Penggunaan Superscript dan Subscript dalam HTML.

Gambar 10 Contoh skrip format penulisan

7. Mengolah property text.

Gambar 11. Contoh skrip property text

8. Menambahkan Garis Horisontal pada HTML.

Gambar 12 Contoh skrip untuk penambahan garis horizontal

9. Penggunaan Unordered List pada HTML

Gambar 13 Contoh skrip untuk penggunaan Unordered List

10. Penggunaan Ordered List pada HTML

Gambar 14 Contoh skrip untuk penggunaan Ordered List

Link dan Gambar

Beberapa atribut yang sering ditambahkan atau sering digunakan dalam

Untuk perintah standartnya :

<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>

1. Membuat Link Antar Dokumen

Gambar 1 Skrip untuk direksional link dari HTML utama

Gambar 2 Skrip untuk Halaman utama

2. Membuat Link ke dalam Dokumen

Gambar 3 Skrip untuk merujuk dalam dokumen

3. Menyisipkan gambar pada HTML.

Gambar 4 Skrip untuk menyisipkan gambar didalam HTML

4. Membuat gambar menjadi hyperlink.

Gambar 5 Skrip untuk menyisipkan sebuah link dalam gambar

Gambar 6 Skrip untuk menyisipkan sebuah link tautan

2. Jenis-jenis media input dalam Form

1) Kontrol Berupa Text

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya

Gambar 1 Contoh Penggunaan Elemen TextArea

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya

yang akan menghasilkan elemen masukan seperti berikut:

Gambar 2 Contoh Penggunaan Elemen Input

2) Kontrol Berupa Radio Button

<input type="radio" name="sex" value="pria"> Pria <br>

Gambar 3 Contoh Penggunaan Elemen Radio Button

3) Kontrol Berupa Checkbox