HTML DASAR

1 Sahrul Sindriana
Bab I
HYPER TEXT MARKUP LANGUAGE
Pengertian HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser internet. Pada bab ini kita akan mempelajari bahasa markup atau markup language kegunaan bahasa ini ialah untuk memanipulasi browser sehingga dapat menampilkan informasi yang dapat dibaca oleh computer.
Html Berupa kode-kode tag yang mengntruksikan browser untuk menghasilkan tampilan yang di inginkan. Sebuah file Html dapat dibuka menggunakan browser web seperti Microsoft Internet Exploler , Mozila Firefox, Google chrome, Opera, Safari, Dan lain-lain.
a. Dasar-Dasar HTML
Fungsi utama HTML memberikan perintah kepada browser tampilan melalui Tag-tag yang di tulis dalam HTML. Dengan demikian browser menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau di perintahkan terlebih dahulu.
Untuk menuliskan suatu dokumen HTML Dapat digunakan perangkat sederhana yang khusus diantaranya :
 Notepad
 Dreamweaver
 Ultraedit
Setelah selesai menuliskan dokumen tersebut lakukan save dengan format Nama_file.html dan pada bagian perintah SAVE TYPES pilih ALL FILES.
b. Struktur HTML
Dokumen Html dapat terdiri dari teks, Gambar, Suara ataupun video. Satu hal yang membedakan HTML dengan dokumen lainya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga menentukan struktur bagian tersebut dalam dokumen HTML.
c. Elemen HTML
Pada dasarnya elemen HTML terdiri dari 2 kategori :
1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser

2 Sahrul Sindriana
d. Tag
Pada dokumen HTML sebuah teks bias memuat intruksi yang ditandai dengan kode atau lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih besar “ < > “. Tag biasanya berpasangan awal tag dinyatakan dalam bentuk <Nama_tag> dan akhir Tag dinyatakan dalam bentuk </Nama_tag>. Contoh diawali dengan <HTML> dan diakhiri dengan </HTML>

3 Sahrul Sindriana
BAB II
DASAR-DASAR HTML
1. Membuat dokumen HTML
Dokumen HTML dimulai dengan perintah Awal <HTML>, Kemudian <HEAD> dan <TITLE>. Antara perintah <TITLE> dengan </TITLE> adalah bagian judul dokumen yang akan dibuat. Misalkan diberi nama “Web pertama aku” , Kemudian ditutup dengan perintah </HEAD> Ini merupakan bagian pertama dari bagian Dokumen HTML. Bagian kedua atau isi dimulai dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut berisi bagian dari isi HTML. Pada bagian akhir di tutup dengan </HTML>.
Contoh Program :
<html>
<head>
<title>
Belajar html
</title>
</head>
<body>
Ini web pertama aku !
</body>
</html>
Hasil tampilan :
Gambar 1

4 Sahrul Sindriana
2. Menambahkan background pada Halaman Web
Halaman HTML dapat ditambahkan background baik berupa warna ataupun gambar. Tag dilakukan pada perintah <BODY>. Untuk menambahkan background warna perintahnya adalah :
<BODY BGCOLOR=”Warna”>
Sedangkan untuk menambahkan Background gambar perintahnya adalah :
<BODY BACKGROUND=”Nama_gambar.JPG”>
Format gambar tidak hanya .JPG bias juga format gambar .PNG, .Gif, Dll.
Contoh program :
Background Warna
<html>
<head>
<title>
Belajar html
</title>
</head>
<body Bgcolor="Blue">
</body>
</html>
Hasil tampilan :
Gambar 2

5 Sahrul Sindriana
Background Foto
<html>
<head>
<title>
Belajar html
</title>
</head>
<body Background="Fotoku.Jpg">
</body>
</html>
Hasil tampilan
Gambar 3
3. Mengganti warna text
Untuk mengganti warna text di tambahkan perintah <FONT COLOR=”WARNA”> Pada text yang akan di ganti warnanya dan di akhiri dengan </FONT COLOR>
Contoh Program :
<html>
<head>
<title>
Belajar html
</title>
</head>

6 Sahrul Sindriana
<body Bgcolor="yellow">
<font color="RED"> ini warna merah !</font color> <br>
<font color="green">Ini warna hijau</font color> <br>
<font color="Pink">Ini warna Merah jambu</font color> <br>
</body>
</html>
Hasil Tampilan
Gambar 4
4. Mengenter dan menambahkan garis pada halman HTML
Tag untukmeng enter adalah <BR> sedangkan Tag untuk menambahkan garis adalah <HR> .
Contoh Program :
<html>
<head>
<title>
Belajar html
</title>
</head>
<body Bgcolor="yellow">
<font color="RED"> ini warna merah !</font color>
<br>
<hr>
<font color="green">Ini warna hijau</font color>
<br>
<hr>
<font color="Pink">Ini warna Merah jambu</font color>
<br>
<hr>
</body>

7 Sahrul Sindriana
</html>
Hasil tampilan
Gambar 5
5. Hyperlink
Untuk membuat hyperlink sederhana pada web gunakan perintah <A HREF=”NAMA_HTML_YANG_DI_TUJU.HTML”> Keterangan Link </A>
Contoh Program :
<html>
<head>
<title> Belajar html </title>
</head>
<body>
Halaman Pertama , Untuk melanutkan silahkan klik
<br>
<A HREF="LINK2.HTML"> Masuk ke halaman selanjurnya </A>
</body>
</html>
Simpan dengan nama Link1.HTML
<html>
<head>
<title> Belajar html </title>
</head>
<body>
halaman kedua , Untuk kembali silahkan klik
<br>
<A HREF="LINK1.HTML"> kembali ke halaman sebelumnya ! </A>
</body>
</html>
Simpan dengan nama Link2.HTML

8 Sahrul Sindriana
Hasil Tampilan
Gambar 6 Gambar 7
6. Pemberian warna pada Hyperlink
Tulisan HYPERLINK juga dapat di beri warna sesuai dengan warna yang kita mau , dengan menggunakan perintan LINK, ALINK dan VLINK yang di sisikan pada perintan <BODY> sebagai berikut :
Contoh : <BODY LINK=”purple” ALINK=”yelow” VLINK=”almond”>
Contoh Program :
<HTML>
<HEAD>
<TITLE> BELAJAR HTML </TITLE>
</HEAD>
<BODY LINK="Purple" ALINK="Yellow" VLINK="Almond">
Ini bagian pertama <br>
<A HREF="LINK2.html"> KLIK UNTUK MELANJUTKAN </A>
</HTML>
Hasil tampilan :
Gambar 8
Gambar di atas ditunjukan saat Link di Klik

9 Sahrul Sindriana
7. Efek dan karakter fisik
a. Efek cetak pada huruf
Efek cetak pada huruf seperti cetak tebal, Miring dan garis bawah termasuk apa yang disebut dengan physical style atau karakteristik fisik yang merupakan suatu jenis format yang diberikan pada text tanpa bergantung pada jenis elemen dasar text tersebut.
Elemen-elemen yang dikategorikan kedalam physical style adalah :
TAG
FUNGSI
<B> ………………………………....</B>
Menebalkan text
<I>……………………………………<I>
Membuat text Miring
<U>…………………………………<U>
Menggaris bawahi
<S>…………………………………….<S>
Memberi coretan pada text
<BLINK>……………………</BLINK>
Membuat text berkedip
<TT>…………………………..</TT>
Menampilkan text dalam format typewriter
<BIG>……………….</BIG>
Membesarkan tulisan
<SMALL> ……………….. </SMALL>
Mengecilkan text
<SUB>…………………</SUB>
Membuat text subscript
<SUP>…………………………</SUP>
Membuat text superscript
Contoh Program :
<HTML>
<HEAD>
<TITLE>
Efek cetak pada huruf
</TITLE>
</HEAD>
<BODY>
<B>Hallo , selamat datang </B>
<I>di website pertamaku</I>
<U>disini kita akan membahas tentang</U>
<S>efek cetak pada huruf</S>
<BLINK>saya harap teman-teman</BLINK>
<SUP>bisa mudah memahami</SUP>
<BIG>materi ini.</BIG>
<SMALL>silahkan mencoba sendiri</SMALL>
<SUB>Semoga kalian bisa.</SUB>
<TT>Ayooo smk pasti bisa ....</TT>
</BODY>
</HTML>

10 Sahrul Sindriana
Hasil program :
Gambar 10 Text yang di BLOCK Adalah Efek blink.
Selain itu ada juga efek yang digabungkan . Contoh :
<B><I> Ini adalah contoh efek yang digabungkan </I> </B>
<B><SUB><I> Ini adalah contoh penggabungan beberapa tag </I></SUB></B>
Selain tag-tag diatas anda juga bias menggabungkan tag lainya , silahkan di coba untuk menambah pengetahuan masing-masing.
b. Ukuran Huruf
Untuk menentukan ukuran suatu text pada html dapat mengubah melalui elemen FONT karena elemen font menyediakan atribut SIZE dengan nilai 1 samppai dengan 7. Nilai 1 digunakan untuk huruf paling kecil sedangkan 7 paling besar. Nilai default suatu huruf pada html adalah 3 dan itu adalah standar text pada sebuah halaman web.
Conton :
<FONT SIZE=1> maka akan berukuran satu </FONT>
Contoh Program :
<HTML>
<HEAD> <TITLE> UKURAN </TITLE>
</HEAD>
<BODY>
<FONT SIZE=1> UKURAN 1 </FONT><BR>

11 Sahrul Sindriana
</BODY>
</HTML>
Hasil Tampilan
Gambar 11
c. Jenis huruf
Untuk menentukan jenis huruf dari suatu teks , elemen FONT menyediakan atribut FACE dengan jenis huruf yang tersedia pada computer.
Contoh Ptogram :
<HTML>
<HEAD> <TITLE> JENIS HURUF </TITLE>
</HEAD>
<BODY>
<FONT FACE=ARIAL> JENIS HURUF ARIAL </FONT><BR>
<FONT FACE=jokerman> JENIS HURUF JOKERMAN </FONT><BR>
<FONT FACE=FANGSONG> Jenis huruf fangsong </font><br>
</BODY>
</HTML> Hasil tampilan

12 Sahrul Sindriana
d. Warna Huruf
Untuk mengubah warna hurup elemen FONT menyediakan atribur COLOR (WARNA) dengan jenis warna yang tersedia pada masing-masing versi HTML. Ada dua cara untuk mengubah warna di antaranya :
1) Dengan penulisan bahasa inggris warna tersebut.
Contoh : <FONT COLOR=”Blue”> Text berwarna biru </FONT>
<FONT COLOR=”GREEN”> Text berwarna Hijau </FONT>
2) Dengan menuliskan kode komputasi RGB
Contoh: <FONT COLOR=”#0000FF”> Text berwarna biru </FONT>
<FONT COLOR=”#D2691E”> Text berwarna Coklat </FONT>
Cara menuliskan warna menggunakan kode komputasi warna RGB ini di awali dengan tanda “#”.
Tabel kode warna !
Kode
Warna
#F0F8FF
ALiCE BLUE
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
beige
#FFE4C4
Bisque
#000000
Black
#FFFFFF
White
#0000FF
Blue
#8A2BE2
Blue violet
#A52A2A
Brown
#FF0000
Red
#EE82EE
Violet
#800000
Maroon
#00FF00
Lime
#FFA500
Orange
#FF7F50
Coral
#fb04a7
#f025ab
#8c4a75
#b44b90
#db0aee
#BDB76B
DarkKhaki
#8B008B
Darkmagenta
#8B0000
Darkred
#FFEBCD
Blanchedalmond
#DEB887
Burlywood
Kode
Warna
#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#64950
Cornflowerblue
#FFF8DC
cornsilk
#DC143C
Crismon
#00FFFF
Cyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darklivegreen
#FF8C00
Darkkorange
#9932CC
Darkorchild
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#1E90FF
Dogerblue
#FFD700
Gold
#FF69B4
Hotpink
#4B0082
Indigo
#F0E68C
Khaki
#778899
Lightslategray
#00FF00
Lime
#32CD32
Lime green
#800000
Maroon
#DA70D6
Orchild
#CD853F
Peru
#8B4513
Sadleborwn

13 Sahrul Sindriana
Untuk melihat kode warna lainya silahkan buka : http://camex.wen.ru/Sampel/Warna.html
8. Tabel
Tabel meruapakan cara untuk menampilkan informasi dalam bentuk sel yang terdisi
atas baris dan kolom. Untuk menampilkan data dalam bentuk table dalam HTML. Untuk
membuat table digunakan tag <table>……… </table> .
Selain itu atribut Cellspacing juga bisa digunakan untuk menentukan spasi antar sel dan
border. Nilai Cellspacing dimulai dari angka 1,2,3 dst. Semakin besar nilainya Maka
ruang cell semakin besar. Atribut berikutnya adalah Cellspading Menentukan jumlah
spasi antara dalam cell dan border sel.
Contoh : <TABLE BORDER=2 CELLSPACING=3 CELLPADDING=5>
Tag tersebut tidak dapat berdiri sendiri tetapi harus disertai tag-tag lain seperti :
a) Table Row (TR)
Elemen ini digunakan untuk menandai awal dari tiap baris pada table , atau tag ini
digunakan untuk membuat baris table. Tag yang digunakan <TD>……..</TD>
b) Table Data (TD)
Elemen ini digunakan untuk menandai awal dan akhir dari tiap sel di dalam table
atau tag ini digunakan untuk membuat colom dan sebuah baris. Tag yang digunakan
adalah <TD>…….</TD>
c) Table Header (TH)
Elemen ini sama fungsinya dengan table data tetapi huruf di dalam nya akan di
cetak tebal.Tag yang digunakan adalah <TH>……..</TH>
Contoh program :
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border=1>
<tr>
<td>baris 1 kolom 1</td>
</tr>
</table>
</body>
</html>

14 Sahrul Sindriana
Contoh Program :
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
</table>
</body>
</html>
Contoh Program :
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>Tabel 1 baris 1</td>
</tr>
<tr>
<td>tabel 2 baris 2</td>
</tr>
</table>
</body>
</html>
Contoh Program :
<html>
<head>
<title>Tebel collspan</title>
</head>
<body>
<table border="1">

15 Sahrul Sindriana
<tr>
<th colspan="2">Ini adalah Header</th>
</tr>
<tr>
<td>Bagian 1 kolom 1</td>
<td>Bagian 1 kolom 2</td>
</tr>
<tr>
<td colspan="2">Baris 2 Collspan</td>
</tr>
</table>
</body>
</html>
Contoh Program :
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Bagian header tabel</th>
</tr>
<tr>
<td rowspan="2">Kolom 1</td>
<td>Sel 1.2</td>
</tr>
<tr>
<td>Sel 2.2</td>
</tr>
</table>
</body>
</html>

16 Sahrul Sindriana
Contoh Program :
<body>
<table border="6" cellspacing="0" cellpadding="0" bgcolor="darkblue"
bordercolor="gold">
<tr>
<th colspan="2">Bagian header tabel</th>
</tr>
<tr>
<td rowspan="2">Kolom 1</td>
<td>Sel 1.2</td>
</tr>
<tr>
<td>Sel 2.2</td>
</tr>
</table>
</body>
Contoh Program :
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">No</td>
<td rowspan="2">Nama</td>
<td rowspan="2">Nomor telfon</td>
<td colspan="3" align="center">Akun</td>
<td rowspan="2" align="center">Alamat</td>
</tr>
<tr>
<td align="center">E-mail</td>
<td align="center">Facebook</td>
<td align="center">Twitter</td>
</tr>
<tr>
<td>1</td>
<td>Sahrul sidriana</td>
<td>0818427288</td>
<td>Sahrul.Sindriana@gmail.com</td>

17 Sahrul Sindriana
<td>Sahrul Sindriana</td>
<td>@sahrulsindriana</td>
<td>Jl.Pasirlangu 05/03 Ds.Pasirlangu kec.cisarua Kab.Bandung barat</td>
</tr>
<tr>
<td>2</td>
<td>Dhita Junistia</td>
<td>081234567891</td>
<td>dhita@yahoo.com</td>
<td>Dhitaa junistiaa</td>
<td>@DjunistiaF</td>
<td>Kom. Spn</td>
</tr>
<tr>
<td>3</td>
<td>Muhammad edi s</td>
<td>022378998989</td>
<td>Edis@gmail.com</td>
<td>Ediee</td>
<td>@edies</td>
<td>Jl.Kolonel masturi</td>
</tr>
</table>
</body>
</html>
Hasil !
Gambar 19
9. List
List diperlukan untuk menampilkan informasi yang bersifat berurutan dan biasanya
ditampilkan dalam bentuk daftar.HTML menyediakan beberapa jenis diantaranya :
1. List tanpa nomor/Unordered list/bulleted list
2. List dengan nomor/Ordered list/Numbered list
3. List definisi/ Definition list

18 Sahrul Sindriana
a. List tanpa nomor
Tag list tanpa nomor dimulai dengan tag <UL>. Kemudian untuk menampilkan daftar
butir-butir yang di inginkan menggunakan tag <LI>, dan untuk mengakhirinya ditutup
dengan <UL>
Contoh Program :
<html>
<head>
<title>LIST</title>
</head>
<body>
Daftar siswa kelas RPL A<hr /> Hasil
<UL>
<li>Abi Anugerah GP
<li>Adrian Rizki H
<li>Ardi
<li>Udin
<li>usep
<li>ujang
</UL>
</body>
</html> Gambar 20
Adapun beberapa bullet yang tersedia
Type Bentuk
Disc 
Square 
Circle o
Contoh Program :
<html>
<head>
<title>LIST</title>
</head>
<body>
Daftar siswa kelas RPL A<hr />
<UL type="square">
<li>Abi Anugerah GP

19 Sahrul Sindriana
<li>Adrian Rizki H
<li>Ardi
<li>Udin Hasil
<li>usep
<li>ujang
</UL>
Daftar Siswa Rpl b
<hr>
<UL type="circle">
<li>Maesaroh
<li>Maemunah
<li>Komeng
</UL>
</body>
</html> Gambar 21
b. List dengan nomor
Tag untuk membuat list nomor dimulai dengan <OL>. Kemudian untuk menampilkan
butir-butirnya menggunakan tag <LI> , Dan untuk menutupnya di akhiri dengan
</OL>
Jenis urutan nomor list adalah 1,2,3… Dan seterusnya . tapi dapat di rubah ke dalam
jenis list yang di inginkan.
Type Jenis
1 Untuk menampilkan daftar angka 1,2,3 … dst
I Untuk menampilkan daftar angka romawi besar
i Untuk menampilkan daftar angka romawi kecil
A Untuk menampilkan daftar abjad besar
a Untuk menampilkan daftar abjad Kecil
Contoh Program :
<html>
<head>
<title>LIST</title>
</head>
<body>
Daftar Jurusan di smk negeri 2 cimahi<hr />
<OL>
<li> Rekayasa Perangkat Lunak
<li> Animasi
<li> Multimedia

20 Sahrul Sindriana
<li> Mekatronika Hasil
</OL>
</body>
</html>
Gambar 22
Contoh Program :
<html>
<head>
<title>LIST</title>
</head>
<body>
Daftar mata pelajaran produktif RPL kelas X<hr />
<OL type="I">
<li> Pemrograman Web
<li> Pemrograman dasar
<li> Sistem Komputer
<li> Jaringan Komputer
<li> Perakitan Komputer
<li> Sistem Operasi
</OL>
Daftar Mata pelajaran Produktif RPL Kelas XI<hr>
<ol type="i">
<li> Basis data
<li> Pemerograman Desktop
<li> Pemerograman Web dinamis
<li> Pemerograman Berbasis Objek
<li> Oracle
<li> pemodelan perangkat lunak
</ol>
Daftar mata pelajaran Normatif<hr>
<ol type="A">
<li> Bahasa Indonesia

21 Sahrul Sindriana
<li> Matematika
<li> Sejarah Indonesia Hasil
<li> Pendidikan pancasila dan kewarganegaraan
</ol>
Daftar mata pelajaran adaftip <hr>
<ol type="a">
<li>Prakarya dan kewirausahaan
<li>Seni dan budaya
<li>Pendidikan jasmani olahraga dan kesehatan
</ol>
</body>
</html>
Gambar 23
10. List Devinisi
Pembuatan daftar devinisi menggunakan tag Devinition list <DL> yang terdiri dari
Devinition term Dengan tag <DT> dan devinition devinition <DD>
Contoh Program :
<html>
<head>
<title> DEVINITION LIST</title>
</head>
<body>
<DL>
<DT> WORD WIDE WEB (WWW)
<DD>Internet merupkan jaringan global yang menghubungkan suatu network dengan
network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan
yang beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat
berkembang dan
paling populer
<DT> HTML

22 Sahrul Sindriana
<DD>Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk
menampilkan
document web.
</DL>
</body>
</html>
Hasil
Gambar 24
11. Nested List
Merupakan suatu list bersarang,atau dalam suatu list utama terdapat sub list.
Contoh Program :
<html>
<head>
<title>LIST</title>
</head>
<body>
Daftar mata pelajaran produktif RPL kelas X<hr />
<ul>
<li> Pemrograman Web
<ul type="square">
<li>HTML
<li>PHP
</ul>
<li> Pemrograman dasar
<ul type="square">
<li> Dasar pemrograman
<li> Intruksi input/output

23 Sahrul Sindriana
<LI> Pengambilah keputusan dengan If Else
<ul type="circle">
<li> Operator relasi
<li> Operator Logika
<li> Prioritas operator logika dan relasi Hasil
</ul>
</ul>
<li> Sistem Komputer
<li> Jaringan Komputer
<li> Perakitan Komputer
<li> Sistem Operasi
</ul>
</body>
</html>
Gambar 26
12. Address
Perintah Address digunakan untuk memberikan informasi tentang pembuat website
seperti e-mail,organisasi atau anggal di perbarui biasanya di letakan di paling baawah.
Contoh Program :
<html>
<head>
<title>Address</title>
</head>
<body>
<address>
<H5> Dari : </H5>
<b>Sahrul.sindriana@gmail.com</b>
</address>
</body>
</html>
13. Mengatur peletakan text terhadap gambar
Kita dapat menempatkan posisi text dengan menggunakan atribut Align.
Contoh Program :
<html>

24 Sahrul Sindriana
<head>
<title>Address</title>
</head>
<body>
<img src="Foto1.jpg" width=233 height=430 align="Bottom" >
Posisi text ada di bawah <br> <br>
<img src="Foto 2.jpg" width=233 height=400 align="middle" >
Posisi text ada di tengah <br> <br>
<img src="Foto3.jpg" width=320 height=430 align="top" >
Posisi text ada di atas <br> <br>
</body>
</html>
Hasil
Gambar 27
14. Membuat Forulir
Formulir adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs kita , Di
awasli dengan tag <FORM> dan di akhiri dengan tag </FORM>.
Contoh program :
<html>
<head>
<title>Formulir</title> Hasil
</head>
<body>
<form> Gambar 28
Nama Anda <input type="text" name="Nama"><br>
</form>

25 Sahrul Sindriana
</body>
</html>
a) Atribut pendukung form
Atribur pendukung Form yaitu action dan method .
- Action
Digunakan untuk menentukan tujuan apabila sebuah control pada formulir
dijalankan
- Method
Digunakan untuk menentukan teknis penyampaian informasi.pada umumnya
method terdiri dari get dan post. Bila menggunakan Get berarti informasi yang
ditampilkan akan di peroleh pada halaman itu sendiri. Sedangkan Post informasi
tsb akan dikirim terpisah dari Url.
Contoh :
<form action=”Send.Html” method=”post”>……</form>
Contoh program :
<html>
<head>
<title>Formulir</title>
</head>
<body>
<form action="send.html" method="post">
Nama Anda : <input type="text" name="Nama" placeholder=" Masukan nama
anda"><br><br>
<input type="submit" value="Kirim">
<input type="reset" value="Delete">
</form>
</body>
</html>
Hasil
Gambar 29
Ket : Jika tombol Kirim di klik maka akan melanjutkan ke halaman Send.html ,
Jika Tombol Delete di klik maka Apa yang di inputkan akan di form Nama anda
hilang.

26 Sahrul Sindriana
b) Menentukan textarea
Textarea biasanya digunakan untuk jenis yang jumlah masukan karakternya banyak
seperti komentar dan lainya . tag yang digunakan <textarea>…..</textarea>
Contoh program :
<html>
<head>
</head>
<body> Hasil
<form>
Komentar :<br>
<textarea>
Menurut saya
</textarea>
</form>
</body>
</html> Gambar 30
c. Penggunaan select pada formulir
Untuk menentukan pilihan sendiri terhadap yang di tampilkan pada daftar tertentu
dapat di buat dengan menggunakan tag <select> dan </select>, istilah dari select
adalah kotak kombo (drop-down).
Contoh program :
<html>
<head>
</head>
<body>
<form>
Kelas :
<select name="kelas">
<option value =" XRplA "> X RPL A
<option value =" XRplB "> X RPL B
<option value =" XMMA "> X MULTIMEDIA A
<option value =" XMMB "> X MULTIMEDIA B
<option value =" XMekaA "> X MEKATRONIKA A
<option value =" XMekaB "> X MEKATRONIKA B
<option value =" XMEKAC "> X MEKATRONIKA C

27 Sahrul Sindriana
<option value =" XMEKAD "> X MEKATRONIKA D
<option value =" XANIM "> X ANIMASI
</form>
</body>
</html>
Hasil
Gambar 31
d. Penggunaan Checkbox
Checkbox berfungsi untuk memilih informasi dengan cara meng klik (Centang) pada
kotak pilihan yang tersedia.
Contoh program :
<html>
<head>
</head>
<body>
<form>
Jurusan yang anda minat : <br />
<input type="checkbox" name = "RPL" > Rekayasa Perangkat Linak <br>
<input type="checkbox" name = "animasi" > Animasi <br>
<input type="checkbox" name = "Mekatronika" > Mekatronika <br>
<input type="checkbox" name = "Multimedia" > Multimedia <br>
</form> Hasil
</body>
</html>
Gambar 32

28 Sahrul Sindriana
Ket : Anda bisa memilih lebih dari satu pada pilihan yang menggunakan checkbox
e. Penggunaan Radio button
Kegunaan radio button hamper sama dengan checkbox , bedanya pada checkbook
pilihan berbentuk kotak sedangkan pada radio button bulat, bedanya lagi untuk
checkbox bisa di pilih lebih dari satu sedangkan radio button hanya dapat di ilih satu.
Padaumumnya radio biasa di gunakan untuk pilihan Agama , Jenis kelamin , Dan lain-lain.
Contoh program :
<html> Hasil
<head>
</head>
<body>
<form>
Agama : <br>
<input type="radio" name="Agama"> Islam <br>
<input type="radio" name="Agama"> Kristen <br>
<input type="radio" name="Agama"> hindu <br> Gambar33
<input type="radio" name="Agama"> Budha <br>
<input type="radio" name="Agama"> Konghucu <br>
</form>
</body>
</html>
Ket : Pada radio butto tidak dapat memilih lebih dari satu
f. Penggunaan type password
Password merupakan sandi yang tidak boleh di ketahui oleh orang lain , oleh karena
itu untum menginputkan password kita harus menggunakan atribut khusus
password ,biasanya password berbentuk karakter “*” walaupun yang kita input
berupa huruf atau angka.
Contoh program :
<html>
<head>
</head>
<body>
<form>

29 Sahrul Sindriana
E-mail : <input type="text" name="Nama" size="35" /><br>
Password : <input type="password" name="pass" />
</form>
</body>
</html>
Hasil
Gambar 34
Contoh Program :
<html>
<head>
</head>
<body>
<form action="send.html" method="post">
Nama :<input type="text" name="nama" placeholder="Masukan nama anda"><br>
Kelas :<select name="kelas">
<option value =" XRplA "> X RPL A
<option value =" XRplB "> X RPL B
<option value =" XMMA "> X MULTIMEDIA A
<option value =" XMMB "> X MULTIMEDIA B
<option value =" XMekaA "> X MEKATRONIKA A
<option value =" XMekaB "> X MEKATRONIKA B
<option value =" XMEKAC "> X MEKATRONIKA C
<option value =" XMEKAD "> X MEKATRONIKA D
<option value =" XANIM "> X ANIMASI
</select><br>
Jenis Kelamin :<br>
<input type="radio" name="Sex" value="LK"> Laki-laki
<input type="radio" name="sex" value="Wn"> Perempuan<br>
Hobi :<br>
<input type="checkbox" name="olahraga"> Olahraga
<input type="checkbox" name="Jalan-jalan"> Jalan-jalan
<input type="checkbox" name="belajar"> Belajar
<input type="checkbox" name="Lain-lain"> Dan lain-lain <br>

30 Sahrul Sindriana
E-mail : <input type="text" name="email" size="25" placeholder="Masukan email
anda"> <br>
Password : <input type="password" name="pass" placeholder="Masukan
password"><br>
Komentar anda : <br>
<textarea>
Menurut saya
</textarea><br>
<input type="submit" value="Send">
<input type="reset" value="Hapus">
</form>
</body>
</html>
Hasil
Gambar 35

HTML DASAR

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML DASAR

Similar to HTML DASAR (20)

More from Sahrul Sindriana

More from Sahrul Sindriana (7)

Recently uploaded

Recently uploaded (9)

HTML DASAR