HTML (HYPER TEXT MARKUP LANGUAGE)

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>[email protected]</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>Dhitaa junistiaa</td>

<td>@DjunistiaF</td>

<td>Kom. Spn</td>

</tr>

<tr>

<td>3</td>

<td>Muhammad edi s</td>

<td>022378998989</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>[email protected]</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 (HYPER TEXT MARKUP LANGUAGE)

Engineering

Transcript of HTML (HYPER TEXT MARKUP LANGUAGE)