html (hypertext markup language) · pdf filehtml menyediakan enam tingkatan heading, dimana ....

46
1 HTML (HYPERTEXT MARKUP LANGUAGE) Oleh : Asep Erlan Maulana, S.Kom

Upload: doanh

Post on 11-Feb-2018

229 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

1

HTML (HYPERTEXT MARKUP LANGUAGE)

Oleh : Asep Erlan Maulana, S.Kom

Page 2: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

2

DAFTAR ISI

BAB I : PENGENALAN HTML ............................................................... 1

A. Pengertian HTML ............................................................................. 1

B. Sejarah HTML .................................................................................. 3

C. Penggunaan HTML .......................................................................... 3

D. Strukture Documen HTML............................................................4

E. Contoh HTML ................................................................................... 4

BAB II : PENGOLAHAN BACKGROUND ............................................... 9

A. Background Warna ........................................................................... 1

B. Background Gambar ..................................................................10

BAB III : PENGOLAHAN HURUF ........................................................... 39

A. Heading...........................................................................................................10

B. Paragraf.........................................................................................................10

C. Preformatte Text.............................................................................................10

D. Blokquote........................................................................................................10

E. BR (Break)........................................................................................................10

F. Font.................................................................................................................10

G. Garis Pemisah Horisontal....................................................................................10

H. List/Daftar

1. OL..............................................................................................................10

Page 3: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

3

2. UL..............................................................................................................10

3. DL..............................................................................................................10

I. Link.................................................................................................................10

J. Image(Gambar)...............................................................................................10

BAB IV PENGOLAHAN TABEL.................................................................................45

A. Bagian-Bagian Tabel :

1. Tag TR dan

TD.................................................................................................................10

2. Contoh Tag TR dan

TD........................................................................................................................10

B. Atribut Tabel :

1. Border.................................................................................................................10

2. Align.................................................................................................................10

3. Width & Height..............................................................................................10

4. Bgcolor & Background...................................................................................10

5. Colspan................................................................................................................10

6. Rowspan..............................................................................................................10

7. Bordercolor..........................................................................................................10

8. Cellpadding & Cellspasing.................................................................................10

BAB V : PENGOLAHAN FORM ............................................................. ..................93

A. Pengertian Form............................................................................................10

B. Tag-Tang didalam form .................................................................................10

1. Tag <FORM>......................................................................................................10

2. Tag <INPUT>.......................................................................................................10

Page 4: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

4

3. Tag <TEXTAREA>..............................................................................................10

4. Tag <SELECT>...............................................................................................10

DAFTAR PUSTAKA .............................................................................. 94

Page 5: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

5

BAB I : PENGENALAN HTML

A. PENGERTIAN HTML

HTML adalah Hypertext Markup Language adalah sebuah bahasa markup yang

digunakan untuk membuat sebuah halaman web dan menampilkan berbagai

informasi didalam sebuah browser internet.

HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu

Standard Generalized Markup Language (SGML). HTML sebenarnya adalah

dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu

sistem operasi tertentu.

B. SEJARAH HTML

HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN. HTML

dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 90’an, HTML

mengalami perkembangan yang sangat pesat. Setiap pengembangannya pasti akan

menambahkan kemampuan dan fasilitas yang lebih baik daripada versi sebelumnya.

C. PENGGUNAAN HTML

Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser

disimpan dalam ekstensi .htm atau .html. Untuk menulis HTML tidak dibutuhkan

perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad

(pada Microsoft Windows) atau beragam text editor yang ada di platform Linux dan

Apple Mac OS, seperti vi, nano, joe, gedit, leafpad, notepad++, editplus dan lainlain.

Ada juga perangkat lunak yang membantu dalam pembuatan halaman HTML

seperti macromedia dreamweaver, adobe dreamweaver dll.

Page 6: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

6

D. Struktur dokumen HTML

E. Contoh HTML

1. Contoh Script

<HTML>

<HEAD>

<TITLE>Homepage</TITLE>

</HEAD>

<BODY>

Ini halaman index pertamaku

</BODY>

Page 7: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

7

</HTML>

2. Hasilnya

Tag <TITLE> digunakan untuk memberi judul dokumen HTML dan judul ini dapat

dilihat pada pojok kiri atas (title bar) Browser

Page 8: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

8

F. Soal Latihan

1. Apa yang dimaksud dengan HTML?

Page 9: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

9

BAB II : PENGOLAHAN BACKGROUND

A. Background Warna

Untuk membuat Latar belakang (Background) menggunakan atribut BGCOLOR

pada tag <BODY>. Nilai atribut BGCOLOR berupa kode heksadesimal RGB atau

bisa nama warna yang disediakan. Seperti pada contoh dibawah ini :

a. Contoh Script

<html>

<head>

<title>Body_atribut Bgcolor</title>

</head>

<body bgcolor="#00FF00">

</body>

</html>

b. Hasilnya

B. Background Gambar

Latar belakang dengan menggunakan gambar kita menambahkan atribut

BACKGROUND pada tag <BODY> nilai atribut BACKGROUND berupa file gambar

(*.gif, *.jpg, *.png dan lainnya). Seperti pada contoh dibawah ini:

Page 10: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

10

a. Contoh Script

<html>

<head>

<title>Body_atribut background</title>

</head>

<body background="petadunia.jpg">

</body>

</html>

b. Hasilnya :

BAB III : PENGOLAHAN HURUF

C. Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam

sebuah dokumen HTML. HTML menyediakan enam tingkatan heading, dimana

Page 11: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

11

heading level 1 (<H1>) adalah yang terbesar dan heading level 6 ( <H6>)

adalah yang terkecil.

Seperti pada contoh dibawah ini:

D. Paragraf

Paragraf dalam HTML dibuat dengan tag<P>. Tag ini akan membuat baris baru

dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit oleh <P> dan

</P>. Pengaturan posisi paragraf dapat dilakukan dengan atribut ALIGN yang

diikuti dengan posisi yang diinginkan, yaitu left untuk rata kiri, center untuk rata

tengah horisontal dan right untuk rata kanan.

Seperti pada contoh dibawah ini:

Page 12: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

12

E. Preformatted Text

Tag <PRE>, membuat tampilan dokumen HTML pada browser sama dengan

tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> jadi

tidak diperlukan lagi.

a. Contoh Script

<HTML>

<HEAD>

<TITLE> pre </TITLE>

</HEAD>

<BODY>

<PRE>

Tampilan Ini sama dengan yang ada ditext editor

Team main Menang Seri kalah

=============================================================

=

Team A 3 2 1 0

Team B 3 2 0 1

Team c 3 1 1 1

Page 13: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

13

=============================================================

==

</BODY>

</HTML>

b. Hasilnya

Output Document Html memakai tag <PRE>

Output Document Html tidak pakai tag <PRE>

F. Blockquote

Perintah tag<BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan

Perintah <BLOCKQUOTE> browser akan menampilkan teks menjorok kedalam.

a. Contoh Script

Page 14: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

14

<HTML>

<HEAD>

<TITLE> Penggunaan Blockquote </TITLE>

</HEAD>

<BODY>

<PRE>

Definisi Sistem menurut Steven B Shop adalah :

<BLOCKQUOTE>Sistem adalah kumpulan dari komponen-komponen

saling bekerjasama untuk mencapai suatu tujuan.

</BLOCKQUOTE>

</BODY>

</HTML>

b. Hasilnya

E. BR (Break)

Break digunakan untuk menuliskan teks pada baris berikutnya. Break dibuat

dengan tag tunggal <BR>. Tag ini akan membuat baris baru tanpa memberi

baris kosong sebagaimana pada tag <P>

Page 15: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

15

a. Contoh script

<html>

<head>

<title>break</title>

</head>

<body>

Selamat Datang di<br>

smk negeri 2 <br>

Tangerang Selatan

<p>jl. Pondok Aren</p>

</body>

</html>

b. Hasilnya

F. FONT

Page 16: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

16

HTML menyediakan fasilitas pengaturan huruf yang ditampilkan dalam

document pengaturan ini dilakukan dengan tag berpasangan <FONT> dan

</FONT>. Tag ini memiliki beberapa atribut untuk mengatur ukuran, jenis

dan warna huruf yang digunakan. Diantarnya:

3. Atribut SIZE untuk mengatur ukuran huruf. Dimana nilai 1 untuk huruf

terkecil dan nilai 7 untuk huruf terbesar.

4. Atribut FACE untuk mengatur jenis huruf yang diinginkan. Dimana nilainya

berupa string nama font seperti Arial, Tahoma dll.

5. Atribut COLOR untuk mengatur warna teks yang dikehendaki, dimana

nilainya dapat diisi dengan 2 cara dengan menyebut warna dalam

bahasa Inggris seperti Red, Blue, dan Green atau dengan menggunakan

nilai RGB (Red Blue Green) seperti #FF0000 untuk Merah

a. Contoh Script

<html>

<head>

<title>font</title>

</head>

<body>

<font size=3>XI Multimedia</font><br>

<font size=5 face="umpush">XI Multimedia</font><br>

<font size=7 face="purisa" color="#ff0000">XI Multimedia</font>

</body>

</html

b. Hasilnya

Page 17: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

17

G. Garis Pemisah Horisontal

Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan

garis horizontal dengan tag <HR>. Tag <HR> mempunyai atribut SIZE untuk

menentukan ketebalan garis, atribut WIDTH untuk menentukan lebar garis,

Atribut ALIGN untuk menentukan letak teks dalam garis, dan atribut

NOSHADE untuk mengatur agar garis tidak disertai bayangan.

a. Contoh Script

<html>

<head>

<title>horizontal line</title>

</head>

<body>

<h1 align="center">WELCOME</h1>

<hr align="center" width="30%" size="5"><br>

<font size=5 face="umpush">Ini adalah kelas XI Multimedia</font><br>

<font size=5 face="purisa" color="#ff0000">XI Multimedia</font>

Page 18: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

18

<hr align="left" width="40%" size="5" noshade>

</body>

</html

b. Hasilnya

Page 19: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

19

c. List/Daftar

Jenis List Atribut Fungsi

Ordered list TYPE=I Daftar berurutan

dengan angka

romawi

besar (I,II,III,...)

TYPE=i Daftar berurutan

dengan angka

romawi

kecil (i,ii,iii,...)

TYPE=A Daftar berurutan

dengan abjad

besar

(A,B,C,...)

TYPE=a Daftar berurutan

dengan abjad

kecil

(a,b,c,...)

Unordered list TYPE=Circle Daftar dengan

tanda lingkaran

Page 20: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

20

TYPE=Square Daftar dengan

tanda tanda kotak

TYPE=Disk Daftar dengan

tanda cakram

HTML menyediakan 2 cara untuk membuat daftar atau list, yaitu:

1. Ordered list

Ordered list digunakan untuk membuat daftar dimana setiap bagian memiliki

nomor secara berurutan. Ordered list dimulai dengan tag <OL> dan diakhiri

dengan tag </OL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag

penutup. Tag ini menggunakan angka sebagai urutan secara default, tapi bisa

dirubah dengan merubah nilai atribut TYPE

a. Contoh Script

<html>

<head>

<title>OL</title>

</head>

<body>

Daftar Program Keahlian SMK TI

<OL>

<LI>Teknik Komputer Jaringan

<LI>Rekayasa Perangkat Lunak

<LI>Multimedia

<LI>Animasi

<LI>Broadcast

</OL>

</body>

Page 21: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

21

</html>

b. Hasilnya

Contoh OL dengan Angka

Contoh OL dengan Huruf Romawi

Page 22: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

22

2. Unordered list

Unordered list digunakan untuk membuat daftar yang disajikan tanpa nomor

urut, melainkan dengan secara default dengan tanda bulatan utuh (bullet).

Tanda ini bisa dirubah dengan merubah nilai atribut TYPE untuk unordered

list. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>,

sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup. Tipe lain

dari list yang termasuk Unordered list adalah Directory list dan Menu list.

Directory list merupakan daftar tak bernomor yang digunakan untuk

menangani direktori. Tag yang digunakan adalah <DIR> ... </DIR>. Menu list

umumnya digunakan untuk menu pilihan. Tag yang digunakan adalah

<MENU> ... </MENU>. Baik Direktori list maupun Menu list menghasilkan

tampilan yang sama dengan Unordered list. Berikut type-type dari Ordered list

dan Unordered list.

a. Contoh Script UL

<html>

<head>

<title>UL</title>

</head>

<body>

Page 23: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

23

Daftar Program Keahlian SMK TI

<UL>

<LI>Teknik Komputer Jaringan

<LI>Rekayasa Perangkat Lunak

<LI>Multimedia

<LI>Animasi

<LI>Broadcast

</UL>

</body>

</html>

b. Hasilnya

c. Link

Link merupakan acuan untuk membuka atau memanggil halaman web

atau file tertentu. Link merupakan tag yang sangat penting dalam

penggunaan HTML, karena disinilah letak perbedaan antara dokumen

HTML dengan dokumen teks yang lain. Link dapat dibuat dengan

memberi perintah tag anchor <A>. Anchor memiliki beberapa atribut,

diantaranya

Page 24: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

24

1. HREF yang berfungsi untuk membuat link ke dokumen HTML

tertentu. HREF dapat juga kita gunakan untuk memanggil halaman

lain diluar sistem kita atau memanggil situs-situs lain di internet.

Caranya dengan mengetikkan alamat URL situs yang akan kita

panggil.

2. TITLE yang berfungsi untuk memberi tanda/nama titik tertentu pada

dokumen HTML yang sama.

a. Contoh Script

<html>

<head><title>Link</title>

</head>

<body>

<h1 align="center">Daftar Link</h1>

<hr align="center" width="80%" size="2">

<ul disc>

<li><a href="www.google.com" title="google">situs google</a>

<li><a href="www.detik.com" title="detik">situs detik</a>

<li><a href="smkn2.html" title="smkn2">situs sekolah</a>

</ul>

</body>

</html>

b. Hasilnya

Page 25: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

25

d. Image (gambar)

Tag yang digunakan untuk menampilkan gambar pada halaman website.

1. Atribut SRC digunakan untuk menentukan sumber file gambar yang akan

ditampilkan.

2. Atribut ALT berfungsi untuk memberi tulisan pengganti, apabila gambar

tidak ditampilkan.

Untuk pengaturan gambar yang lebih baik, tag IMG menyediakan

beberapa atribut, antara lain:

1. Atribut ALIGN untuk mengatur penempatan teks pada gambar.

2. Atribut BORDER untuk memberi bingkai pada gambar.

Page 26: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

26

3. Atribut HEIGHT dan WIDTH untuk mengatur tinggi dan lebar gambar.

c. Contoh Script

<html>

<head><title>tag gambar</title></head>

<body>

<h1 align="center">Daftar logo OS</h1>

<hr align="center" width="70%" size="3" noshade>

<ul>

<li>logo gambar linux <img src="image/logo.png" alt="logo linux"

align="bottom" height="100" width="200" border="2">

<li>logo gambar Windows <img src="/image/logo.png" alt="logo

Windows" align="middle" height="100" weight="80" border="2">

</ul>

<br>

<center>&copy; Copyright by rlan7</center>

</body>

</html>

d. Hasilnya

Page 27: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

27

Page 28: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

28

BAB IV PENGOLAHAN TABEL

A. Bagian-Bagian pada Tabel

1. Tag TR dan TD

e. Tag TR (Table Row) = tag untuk membuat baris.

f. Tag TD (Table Data)= tag untuk membuat kolom/cell.

2. Contoh Tag TR dan TD

g. Contoh Script

<html >

<head>

<title>tag tr dan td</title>

</head>

<body>

<table border="1">

<tr> <td>1</td>

<td>2</td>

</tr>

<tr><td>3</td>

<td>4</td>

</tr></table>

</body>

</html>

h. Hasilnya

Page 29: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

29

B. Atribut Tabel

1. Border

Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut. Kita dapat

menambahkan garis dengan menggunakan atribut border. Seperti pada contoh

dibawah ini :

a. Contoh Script

<html >

<head>

<title>tag tr dan td</title>

</head>

<body>

<table border=“5">

<tr> <td>1</td>

<td>2</td>

</tr>

<tr><td>3</td>

Page 30: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

30

<td>4</td>

</tr></table>

</body>

</html>

b. Hasilnya

2. Align

Pengaturan tabel (rata tengah,kanan atau kiri) Seperti pada contoh dibawah ini :

a. Contoh Script

<html >

<head>

<title>tag tr dan td</title>

</head>

<body>

<table border="1">

Page 31: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

31

<tr> <td>1</td>

<td>2</td>

</tr>

<tr><td>3</td>

<td>4</td>

</tr></table>

</body>

</html>

b. Hasilnya

3. Width & Height

Width digunakan untuk mengatur lebar tabel pada halaman sedangkan height

digunakan untuk mengatur tinggi tabel pada halaman. Kita dapat menggunakan

satuan persen (%) atau pixel (px). Seperti pada contoh dibawah ini :

a. Contoh Script

<html>

<head>

<title>table_atribut height dan width</title>

</head>

Page 32: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

32

<body>

<table width="200" height="100" border="1">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

</body>

</html>

b. Hasilnya

Page 33: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

33

4. Bgcolor & Background

Bgcolor digunakan untuk memberikan Warna background tabel,baris atau cell

sedangkan atribut background digunakan untuk memberikan background

gambar pada tabel. Seperti pada contoh :

a. Contoh Script

<html>

<head>

<title>table_atribut bgcolor dan background</title>

</head>

<body>

<table width="200" height="100" border="1" bgcolor="#00FF33">

<tr>

<td>1</td>

<td background="Image_39.jpg">2</td>

</tr>

<tr>

<td bgcolor="#FFFF33">3</td>

<td>4</td>

</tr>

</table>

</body>

</html>

Page 34: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

34

b. Hasilnya

5. Colspan

Digunakan untuk menggabungkan kolom pada tabel. Seperti contoh dibawah ini :

a. Contoh Script

<html>

<head>

<title>table_atribut colspan</title>

</head>

<body>

<table width="200" height="100" border="1">

<tr>

<td colspan="2">1dan 2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

Page 35: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

35

</table>

</body>

</html>

b. Hasilnya

Tampilan dibrowser sebelum menggunakan colspan

Tampilan dibrowser sesudah menggunakan colspan

6. Rowspan

Digunakan untuk menggabungkan Baris pada tabel

a. Contoh Script

<html>

<head>

Page 36: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

36

<title>table_atribut rowspan</title>

</head>

<body>

<table width="200" height="100" border="1">

<tr>

<td rowspan="2">1dan 3</td>

<td>2</td>

</tr>

<tr>

<td>4</td>

</tr>

</table>

</body>

</html>

b. Hasilnya

Tampilan dibrowser sebelum menggunakan rowspan

Page 37: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

37

Tampilan dibrowser sesudah menggunakan rowspan

7. Bordercolor

Digunakan untuk memberikan warna pada garis atribut border. Seperti pada

contoh dibawah ini:

a. Contoh Script

<html>

<head>

<title>table_atribut bordercolor</title>

</head>

<body>

<table width="200" height="100" border="1" bordercolor="#FF0000">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

Page 38: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

38

</body>

</html>

b. Hasilnya

8. Cellpadding & Cellspasing

Cellpadding digunakan untuk menentukan jarak antara teks dan tepi kiri sebuah

sel. Sedangkan Cellspasing digunakan untuk menentukan jarak bagian sel

terhadap tepi dalam bingkai tabel. Seperti pada contoh dibawah ini :

a. Contoh Script

<html>

<head>

<title>table_atribut cellpadding dan cellpasing</title>

</head>

<body>

<table width="200" height="100" border="1" cellpadding="10"

cellspacing="10">

<tr>

Page 39: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

39

<td>ABC</td>

<td>BCA</td>

</tr>

<tr>

<td>CAB</td>

<td>CBA</td>

</tr>

</table>

</body>

</html>

b. Hasilnya

Page 40: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

40

BAB V : PENGOLAHAN FORM

A. Pengertian Form

Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user

untuk kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan

menggunakan script yang bersifat server-side.

Untuk membuat sebuah form, tag-tag yang diperlukan adalah

1. Tag <FORM>

2· Tag <INPUT>

3· Tag <TEXTAREA>

4· Tag <SELECT>

1. Tag <FORM>

Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah

form. Tag ini mempunyai dua atribut, yaitu METHOD dan ACTION.

ATRIBUT KETERANGAN

METHOD Untuk menentukan metode

pengolahan form

ACTION Untuk menentukan URL atau

direktori dari file yang digunakan

untuk mengolah form tersebut

2. Tag <INPUT>

Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan

untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan

lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa

atribut, yaitu :

Page 41: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

41

ATRIBUT KETERANGAN

NAME Mendefinisikan nama dari objek input. Atribut ini

harus dituliskan kecuali untuk tipe submit dan clear

SIZE Menentukan ukuran kotak teks

MAXLENG

TH

Menentukan jumlah maksimum karakter yang dapat

dimasukkan pada kotak teks

VALUE Untuk kotak teks, menentukan teks yang tertulis.

Untuk check box atau radio, menentukan nilai item

yang dipilih. Untuk Submit dan Reset,menentukan

teks yang tertulis pada tombol.

CHECKED Hanya digunakan untuk check box atau radio.

Menentukan pilihan yang terpilih secara default.

TYPE Menentukan tipe input yang dibuat

Tipe input yang dapat dibuat adalah :

1. Text, digunakan untuk membuat kotak teks

2. Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan

ditampilkan dengan tanda *.

3. Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih

lebih dari satu.

4. Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat

dipilih satu saja.

5. Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus

semua isian form yang telah diberikan.

6. Submit, digunakan untuk membuat tombol yang fungsinya untuk

mengirimkan data form agar diolah.

Page 42: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

42

a. Contoh Script

<HTML>

<HEAD><TITLE>Belajar Form</TITLE></HEAD>

<BODY><FORM>

<PRE>

Silakan masukkan data pribadi Anda :

Nama :<INPUT TYPE=text NAME=txtnama>

Alamat :<INPUT TYPE=text NAME=txtalamat SIZE=50>

No Telpon :<INPUT TYPE=text NAME=txttelpon SIZE=10>

Masukkan Password Anda : <INPUT TYPE=password MAXLENGTH=6>

Hobby Anda (boleh lebih dari satu) :

<INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca

<INPUT TYPE=checkbox NAME=hobby VALUE=ORaga> Olah Raga

<INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film

<INPUT TYPE=checkbox NAME=hobby VALUE=travel> Travelling

<!--perhatikan bahwa untuk satu kelompok pilihan yang sama nilai atribut

NAME haru ssama-->

Jenis Kelamin :

<INPUT TYPE=radio NAME=jk VALUE=pria> Laki-laki

<INPUT TYPE=radio NAME=jk VALUE=wanita> Perempuan

<HR>

<INPUT TYPE=submit VALUE=kirim> <INPUT TYPE=Reset VALUE=hapus>

</FORM></BODY></HTML>

Page 43: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

43

b. Hasilnya

3. Tag <TEXTAREA>

Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag

ini mempunyai beberapa atribut, yaitu :

ATRIBUT KETERANGAN

NAME Mendefinisikan nama objek

textarea

ROWS Menentukan jumlah baris textarea

Page 44: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

44

COLS Menentukan lebar textarea

a. Contoh Script

<HTML>

<HEAD>

<TITLE>form_Text Area</TITLE>

</HEAD>

<BODY>

<FORM>

<TEXTAREA NAME=teksarea1 ROWS=10 COLS=40>

Teks ini akan tertulis di dalam textarea

</TEXTAREA>

</FORM>

</BODY>

</HTML>

b. Hasilnya

Page 45: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

45

4. Tag <SELECT>

Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini

memiliki beberapa atribut, yaitu :

ATRIBUT KETERANGAN

NAME Mendefinisikan nama dari objek select

SIZE Menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak

disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai

dropdown list. Jika diberi nilai 2 atau lebih, pilihan akan ditampilkan

sebagai scroll box. Jika nilai SIZE lebih besar dari jumlah pilihan yang

ada pada <SELECT>, pilihan kosong akan ditambahkan. Jika user

memilih pilihan ini maka nilainya adalah kosong.

MULTIPLE Mengizinkan untuk memilih lebih dari satu

Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>.

Tag <OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan

untuk memberi nama item pilihan dan SELECTED yang menunjukkan pilihan

yang terpilih secara deafult. Tag <OPTION> tidak perlu ditutup dengan

</OPTION>.

a. Contoh Script

<HTML>

<HEAD><TITLE>SELECT</TITLE></HEAD>

<BODY>

Umur Anda :

<FORM>

<SELECT NAME=”Umur”>

<OPTION VALUE=”Umur TH”>Umur th

<OPTION VALUE=”22 TH”>22 TH

Page 46: HTML (HYPERTEXT MARKUP LANGUAGE) · PDF fileHTML menyediakan enam tingkatan heading, dimana . 11 ... 4. Atribut FACE untuk ... melainkan dengan secara default dengan tanda bulatan

46

<OPTION VALUE=”24 TH”>24 TH

<OPTION VALUE=”28 TH”>28 TH

<OPTION VALUE=”30 TH”>30 TH

</SELECT>

</FORM>

</BODY>

</HTML>

b. Hasilnya

Daftar Pustaka

1. Gustiawan, Ferry, Modul Internet dan HTML

2. Mulyanto, Ainur Rofiq, Rekayasa Perangkat Lunak