Anda di halaman 1dari 113

Hyper Text Markup Language

Disusun oleh:
Kelompok 1
1.
2.
3.
4.
5.
6.

Sari Dewi Budiwati


Achmad Sahil Ansori
Armin
Iwan Sutedi
Muhammad Ridzal
Haryando Anil

(23207135)
(23207041)
(23207042)
(23207116)
(23207086)
(23207xxx)

Magister Chief Information Officer


Teknik Elektro
Institut Teknologi Bandung

Chief Information Officer

Daftar Isi
Bab 1 Pendahuluan.....................................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
A. Pengertian HTML.............................................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
B. Perbedaan HTML dengan XHTML..................................................................................................................................7
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
C. Rangkuman Tag HTML .................................................................................................................................................. 8
Bab 2 Rincian Penjelasan Tag................................................................................................................................................. 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
A. Basic Tags...................................................................................................................................................................... 23
1. Tag <!--...-->.............................................................................................................................................................. 23
2. Tag <!DOCTYPE>....................................................................................................................................................23
3. Tag <html>................................................................................................................................................................ 24
4. Tag <body>................................................................................................................................................................25
5. Tag <h1> - <h6> .......................................................................................................................................................27
6. Tag <p>......................................................................................................................................................................27
6.Tag <br> ................................................................................................................................................................... 29
8. Tag <hr>.................................................................................................................................................................... 30
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
B. Format Char ................................................................................................................................................................... 31
9. Tag <tt> <i> <b> <big> <small> ............................................................................................................................. 31
10. Tag <font> ............................................................................................................................................................. 31
12. Tag <sub> and <sup> ............................................................................................................................................. 33
13. Tag <bdo> ..............................................................................................................................................................34
14. Tag <u>...................................................................................................................................................................35
C. Output............................................................................................................................................................................. 35
C. Output............................................................................................................................................................................. 35
C. Output............................................................................................................................................................................. 35
Chief Information Officer

C. Output............................................................................................................................................................................. 35
C. Output............................................................................................................................................................................. 35
C. Output............................................................................................................................................................................. 35
C. Output............................................................................................................................................................................. 35
15. Tag <pre> ...............................................................................................................................................................35
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
D. Blocks............................................................................................................................................................................. 38
16. Tag <acronym>.......................................................................................................................................................38
17. Tag <abbr>..............................................................................................................................................................39
18. Tag <address>.........................................................................................................................................................39
19. Tag <blockquote>................................................................................................................................................... 40
20. Tag <center>........................................................................................................................................................... 41
21. Tag <q>...................................................................................................................................................................42
22. Tag <ins>................................................................................................................................................................ 42
23. Tag <del> ...............................................................................................................................................................43
24. Tag <s> dan <strike>.............................................................................................................................................. 44
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
E. Links............................................................................................................................................................................... 45
25. Tag <a> ..................................................................................................................................................................45
26. Tag <link> ............................................................................................................................................................. 47
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
F. Frames............................................................................................................................................................................. 50
27. Tag <frame> .......................................................................................................................................................... 50
28. Tag <frameset>....................................................................................................................................................... 51
29. Tag <iframe> .......................................................................................................................................................... 52
30. Tag <noframes> .....................................................................................................................................................53
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
G. Input ...............................................................................................................................................................................54
31. Tag <form>.............................................................................................................................................................54
32. Tag <input>............................................................................................................................................................ 56
33. Tag <textarea> ....................................................................................................................................................... 59
34. Tag <button>.......................................................................................................................................................... 60
36. Tag <optgroup> ..................................................................................................................................................... 62
38. Tag <label> ............................................................................................................................................................ 64
40. Tag <legend> ......................................................................................................................................................... 66
H. List.................................................................................................................................................................................. 67
Chief Information Officer

H. List.................................................................................................................................................................................. 67
H. List.................................................................................................................................................................................. 67
H. List.................................................................................................................................................................................. 67
H. List.................................................................................................................................................................................. 67
H. List.................................................................................................................................................................................. 67
H. List.................................................................................................................................................................................. 67
41. Tag <ul>...................................................................................................................................................................67
42. Tag <ol>..................................................................................................................................................................68
</html>....................................................................................................................................................69
43. Tag <li>.................................................................................................................................................................. 69
44. Tag <dir>................................................................................................................................................................. 71
45. Tag <dl>..................................................................................................................................................................71
46. Tag <dt>...................................................................................................................................................................72
47. Tag <dd> ...............................................................................................................................................................73
48. Tag <menu>............................................................................................................................................................73
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
I. Images.............................................................................................................................................................................. 74
49. Tag <img>............................................................................................................................................................... 74
50. Tag <map> ..............................................................................................................................................................76
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
J. Tables...............................................................................................................................................................................80
52. Tag <table>.............................................................................................................................................................. 80
53. Tag <caption>.......................................................................................................................................................... 81
54. Tag <tfoot> ............................................................................................................................................................. 82
55. Tag <th> ..................................................................................................................................................................84
56. Tag <tr>................................................................................................................................................................... 86
58. Tag <thead>............................................................................................................................................................. 89
59. Tag <tbody>.............................................................................................................................................................91
60. Tag <col> ................................................................................................................................................................93
61. Tag <colgroup> ...................................................................................................................................................... 96
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
K. Styles.............................................................................................................................................................................. 97
63. Tag <div>.................................................................................................................................................................99
64. Tag <span> ........................................................................................................................................................... 100
L. Meta Info.......................................................................................................................................................................100
L. Meta Info.......................................................................................................................................................................100
L. Meta Info.......................................................................................................................................................................100
L. Meta Info.......................................................................................................................................................................100
L. Meta Info.......................................................................................................................................................................100
L. Meta Info.......................................................................................................................................................................100
Chief Information Officer

L. Meta Info.......................................................................................................................................................................100
65. Tag <head> ........................................................................................................................................................... 100
66. Tag <title> ............................................................................................................................................................ 102
67. Tag <meta>ss.........................................................................................................................................................103
68. Tag <base> ............................................................................................................................................................105
69. Tag <basefont> .................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
M. Programming............................................................................................................................................................... 106
70. Tag <applet> ......................................................................................................................................................... 106
71. Tag <noscript> .....................................................................................................................................................108
72. Tag <object> ........................................................................................................................................................ 110
Daftar Pustaka........................................................................................................................................................................ 113

Chief Information Officer

Chief Information Officer

Bab 1 Pendahuluan
A. Pengertian HTML
HTML merupakan singkatan dari Hyper Text Markup Language. Sebuah file HTML merupakan sebuah file
text yang terdiri dari tag-tag penanda (markup tags) dimana markup tags tersebut akan memberitahukan browser tentang
bagaimana menampilkan sebuah halaman HTML. File HTML harus memiliki ekstensi file berjenis htm atau html.
Sedangkan pembuatan file HTML sendiri bisa menggunakan text editor yang sederhana, misalnya Notepad jika anda
menggunakan Windows atau SmartText jika anda menggunakan Mac sebagai sistem operasinya.

B. Perbedaan HTML dengan XHTML


Saat ini HTML sedang digantikan dengan XHTML. Perbedaannya sangatlah sedikit, namun hasil yang
diberikan dari XHTML akan sangat berbeda. Keuntungan dari penggunaan XHTML adalah biasanya XHTML lebih
diterima di peralatan-peralatan yang non-komputer, misalnya cell phone, palm dan browser yang berskala kecil. Hal ini
biasanya disebut dengan portabilitas antar peralatan.
XHTML juga biasa disebut dengan perluasan (extensible), atau dengan kata lain kita

bisa

menambahkan tag-tag baru tanpa membuat Document Type Declaration (DTD).


Perbedaan antara HTML dengan XHTML:
1.

Tag yang digunakan, HARUS lah menggunakan huruf kecil, misal


di HTML:
<IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat">
di XHTML
<img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" />

2. Semua tag yang menggunakan percabangan, penulisannya haruslah baik (properly). Misalnya, jika anda memiliki
tag awal a kemudian tag awal lain yaitu b, maka anda harus menutup tag b terlebih dahulu, baru kemudian
tag a
<a>
<b>
</b>
</a>
3.

semua tag harus di tutup, baik menggunakan tag penutup yang memiliki garis miring, misalnya <p> </p>, atau
yang langsung menggunakan garis miring (self closing tag), misalnya <br />

4.

semua atribut harus menggunakan huruf kecil

5.

semua nilai atribut harus menggunakan tanda kutip, baik single atau double quote

6.

semua atribut tidak boleh disingkat, misalnya di XHTML disabled=true atau DISABLED di HTML

7.

Struktur harus dipisahkan dari isi. Contohnya tag <p> adalah tag isi atau paragraf, maka anda tidak bisa
memasukkan tabel ke dalamnya, karena tabel merupakan sebuah format konstruksi. Namun, anda bisa menyimpan
tag <p> di dalam <td> </td> tanpa ada masalah.

Chief Information Officer

8.

Ada beberapa tag yang tidak digunakan lagi (deprecated)


Deprecated Tag

Pengganti

<applet>

<object>

<basefont>

font style sheets

<center>

<div style="text-align:center"> (W3C help)

<dir>

<ul>

<font>

font style sheets

<isindex>

<form>

<menu>

<ul>

<s>

text style sheets

<strike>

text style sheets

<u>

text style sheets

C. Rangkuman Tag HTML


Tag HTML diawali dengan tanda kurang dari (<) dan ditutup dengan tanda lebih besar dari (>), dan biasanya tag
HTML selalu berpasangan, misalnya <b> dengan </b>. Tag pertama (<b>) disebut dengan tag awal sedangkan tag kedua
(</b>) disebut tag akhir. Ciri dari tag HTML adalah tag-tag tersebut tidak bersifat case sensitive, jadi <b> memiliki arti
yang sama dengan <B>. Namun W3C (World Web Consortium) menyarankan untuk menggunakan huruf kecil, karena
standar tersebut akan digunakan pada teknologi selanjutnya, yaitu XHTML.
Setiap tag memiliki atribut yang menjelaskan informasi tambahan tentang element HTML dan atribut tersebut
selalu di tuliskan di tag awal. Atribut dalam tag HTML terbagi menjadi 4 kategori, yaitu:
1.

Atribut yang dibutuhkan (Required Attribute)

2.

Atribut pilihan (Option Attribute)

3.

Atribut standar (Standard Attribute)

4.

Atribut Event (Event Attribute)


Berikut ini merupakan rangkuman tag-tag beserta atributnya yang terdapat dalam HTML dan dikategorikan

berdasarkan fungsi-fungsinya yaitu:


1.

Basic Tags

2.

Char Format

3.

Output

4.

Blocks

5.

Links

6.

Frames

7.

Input

8.

Lists

9.

Images

10. Tables

Chief Information Officer

11. Styles
12. Meta Info
13. Programming
Sedangkan penjelasan rinci akan tag-tag ini dapat dilihat di bab selanjutnya.

Atribut
No

Nama Tag

Required

Option

Standar

Event

Basic Tags
1.

<!-- -->

2.

<!DOCTYPE>

3.

<html>

xmlns

dir, lang, xml:lang

4.

<body>

alink,
bgcolor,
vlink

5.

<h1> - <h6>

align

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

6.

<p>

align

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

7.

<br>

id, class, title, style

8.

<hr>

align, noshade, size, id, class, title, style, onclick,


ondblclick,
width
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

background, id, class, title, style, onload,


onunload,
link, text, dir, lang, xml:lang
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

Format Char

Chief Information Officer

9.

<b>

id, class, title, style, onclick,


ondblclick,
dir, lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup

10.

<font>

color,face,size

id, class, title, style, dir, lang, xml:lang

11.

<i>

id, class, title, style, onclick,


ondblclick,
dir, lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup

12.

<em>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

13.

<big>

id, class, title, style, onclick,


ondblclick,
dir, lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup

14.

<strong>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

15.

<small>

id, class, title, style, onclick,


ondblclick,
dir, lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup

16.

<sub>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,

Chief Information Officer

10

onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
17.

<sup>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

18.

<bdo>

dir

id, class, title, style, dir, lang, xml:lang

19.

<u>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

20.

<pre>

width

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang, onmousedown,
xml:space
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

21.

<code>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

22.

<tt>

id, class, title, style, onclick,


ondblclick,
dir, lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown onkeyup

23.

<kbd>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,

Output

Chief Information Officer

11

onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
24.

<var>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

25.

<dfn>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

26.

<samp>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

27.

<acronym>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

28.

<abbr>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

29.

<address>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,

Blocks

Chief Information Officer

12

onkeypress,
onkeydown, onkeyup
30.

<blockquote>

cite

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

31.

<center>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

32.

<q>

cite

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

33.

<cite>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

34.

<ins>

cite, datetime

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

35.

<del>

cite, datetime

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

36.

<s>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,

Chief Information Officer

13

onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
37.

<strike>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

Links
38.

<a>

charset, coords, href, id, class, title, style, onfocus,


onblur,
hreflang, name, rel, dir, lang, xml:lang, onclick,
ondblclick,
rev, shape , target, type tabindex, accesskey onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

39.

<link>

charset, href, hreflang, id, class, title, style, onclick,


ondblclick,
media, rel, rev, target, dir, lang, xml:lang
onmousedown,
type
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

40.

<frame>

frameborder, londesc, id, class, title, style


marginheight,
marginwidth,
name,
noresize, scrolling, src

41.

<frameset>

cols, rows

id, class, title, style

42.

<noframes>

id, class, title, style, dir, lang, xml:lang

43.

<iframe>

align,
frameborder, id, class, title, style
height,
longdesc,
marginheight,
marginwidth,
name,
scrolling, src, width

<form>

action

accept, accept-charset, id, class, title, style, onsubmit,


enctype,
method, dir, lang, xml:lang
onclick,

Frames

Input
44.

Chief Information Officer

14

onreset,
ondblclick,

name, target

onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
tabindex,
accesskey,
onfocus,
onblur,
onselect,
onchange,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

45.

<input>

accept,
align,
alt, id, class, title, style,
checked,
disabled, dir, lang, xml:lang
maxlength,
name,
readonly, size, src,
type, value,

46.

<textarea>

cols, rows

disabled,
readonly

47.

<button>

disabled, name, type, id, class, title, style, onfocus,


onblur,
value
dir, lang, xml:lang, onclick,
ondblclick,
accesskey, tabindex onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

48.

<select>

disabled,
name, size

49.

<optgroup>

label

disabled

50.

<option>

disabled,
selected, value

Chief Information Officer

15

name, id, class, title, style, onfocus,


onblur,
dir, lang, xml:lang, onselect,
onchange,
tabindex, accesskey onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

multiple, id, class, title, style, onfocus,


dir, lang, xml:lang, onchange
accesskey, tabindex

onblur,

id, class, title, style, tabindex,


onclick,
dir, lang, xml:lang
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
label, id, class, title, style, onclick,
ondblclick,
dir, lang, xml:lang, onmousedown,
tabindex
onmouseup,
onmouseover,

onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
51.

<label>

for

id, class, title, style, accesskey,


onfocus,
dir, lang, xml:lang
onblur,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

52.

<fieldset>

id, class, title, style, accesskey,


onclick,
dir, lang, xml:lang
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

53.

<legend>

align

id, class, title, style, accesskey,


onclick,
dir, lang, xml:lang
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

54.

<ul>

compact, type

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

55.

<ol>

compact, start, type

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

56.

<li>

type, value

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,

Lists

Chief Information Officer

16

onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
57.

<dir>

compact

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onfocus,
onblur,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

58.

<dl>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

59.

<dt>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

60.

<dd>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

61.

<menu>

compact

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onfocus,
onblur,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

<img>

alt, src

align, border, height, id, class, title, style, onclick,


ondblclick,
hspace,
ismap, lang, xml:lang
onmousedown,
longdesc,
usemap,
onmouseup,

Images
62.

Chief Information Officer

17

vspace, width

onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

63.

<map>

id

name

class, title, style, dir, tabindex,


accesskey,
lang, xml:lang
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup,
onfocus, onblur

64.

<area>

alt

coords , href, nohref, id, class, title, style, onclick,


ondblclick,
shape, target
dir, lang, xml:lang, onmousedown,
tabindex, accesskey onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup,
onfocus, onblur

65.

<table>

align, bgcolor, border, id, class, title, style,


cellpadding,
dir, lang, xml:lang
cellspacing,
frame,
rules, summary, width

66.

<caption>

align

67.

<tfoot>

align, charoff, char, id, class, title, style, onclick,


ondblclick,
valign
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

68.

<th>

abbr,
align,
axis, id, class, title, style, onclick,
ondblclick,
bgcolor, char, charoff, dir, lang, xml:lang
onmousedown,
colspan,
headers,
onmouseup,

Tables

Chief Information Officer

onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

18

height,
nowrap,
rowspan,
scope,
valign, width

onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

69.

<tr>

align, bgcolor, char, id, class, title, style, onclick,


ondblclick,
charoff, valign
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

70.

<td>

abbr,
align,
axis, id, class, title, style,
bgcolor, char, charoff, dir, lang, xml:lang
colspan,
headers,
height,
nowrap,
rowspan,
scope,
valign, width

71.

<thead>

align, char, charoff, id, class, title, style, onclick,


ondblclick,
valign
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

72.

<tbody>

align, char, charoff, id, class, title, style, onclick,


ondblclick,
valign
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

73.

<col>

align,
char,charoff,span,
valign, width

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

align,
char,charoff,span,
valign, width

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

74.
<colgroup>

Chief Information Officer

19

onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

Styles
75.

<style>

type

media

title,
dir,
xml:space

lang, -

76.

<div>

align

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

77.

<span>

id, class, title, style, onclick,


ondblclick,
dir, lang, xml:lang
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

Meta Info
78.

<head>

profile

dir, lang, xml:lang

79.

<title>

id, class, dir, lang, style, xml:lang

80.

<meta>

content

http-equiv,
scheme

81.

<base>

href

target

82.

<basefont>

color , face, size

id, class, title, style, dir, lang, xml:lang

name, dir, lang, xml:lang

Programming
83.

<applet>

height, width

align, alt, archive, id, class, title, style,


code,
codebase, dir, lang, xml:lang
hspace, name, object,
title, vspace

84.

<noscript>

85.

<object>

align, archive, border, id, class, title, style,


classid,
codebase, dir, lang, xml:lang
codetype,
data,
declare,
height,
hspace, name, standby,
type, usemap, vspace,
width

Chief Information Officer

accesskey,
tabindex,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

id, class, title, style, dir, lang, xml:lang

20

accesskey,
tabindex,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup

86.

<param>

name

type, value, valuetype

87.

<script>

type

charset,
language, src

Chief Information Officer

21

id

defer, xml:space

Chief Information Officer

22

Bab 2 Rincian Penjelasan Tag


A. Basic Tags
1. Tag <!--...-->
a. Definisi dan Penggunaan
Tag komentar digunakan untuk memasukkan komentar di dalam source code. Komentar tidak akan diproses oleh
browser. Anda bisa menggunakan komentar untuk menjelaskan kode yang anda buat, dimana komentar tersebut akan
membantu anda ketika mengedit source code nantinya.
Anda juga bisa menyimpan informasi tentang program di dalam komentar. Dengan cara ini, komentar tidak akan
ditampilkan, tapi akan tetap ada di dalam program.
b. Contoh
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
2. Tag <!DOCTYPE>
a. Definisi dan Penggunaan
Deklarasi <!DOCTYPE> merupakan hal pertama yang harus dituliskan di dalam dokumen, sebelum tag <html>. Tag
ini akan memberitahukan browser spesifikasi HTML atau XHTML mana yang akan digunakan.
b. Tips dan Catatan
Catatan : tag <!DOCTYPE> tidak memiliki tag penutup
c. HTML
HTML 4.01 Menspesifikasikan tiga jenis tipe dokumen : Strict, Transitional dan Frameset
1. HTML Strict DTD
Gunakan strict DTD jika tidak ingin menggunakan tag HTML versi lama. Gunakan strict DTD bersamaan dengan
CSS (Cascading Style Sheet):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

2. HTML Transitional DTD


Chief Information Officer

23

DTD transitional termasuk atribut presentasi dan elemen-elemen yang akan dipindahkan dengan menggunakan
style sheet. Gunakan transitional DTD jika anda ingin memerlukan feature HTML karena browser anda tidak
mendukung Cascading Style Sheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

3. DTD Frameset
DTD frameset harus digunakan dengan menggunakan frame. DTD Frameset sama dengan DTD Transitional kecuali
element frameset digantikan dengan element body
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
d. XHTML
HTML 4.01 Menspesifikasikan tiga jenis tipe dokumen : Strict, Transitional dan Frameset
1. XHTML Strict DTD
Gunakan strict DTD jika tidak ingin menggunakan tag HTML versi lama. Gunakan strict DTD bersamaan dengan
CSS (Cascading Style Sheet):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. XHTML Transitional DTD
Gunakan transitional DTD jika anda memerlukan feature XHTML karena browser anda tidak mendukung Cascading
Style Sheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. XHTML Frameset DTD
Gunakan DTD ini jika anda ingin menggunakan frame
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Untuk mengecek apakah anda menulis dokumen XHTML dengan DTD yang valid, anda dapat menghubungkan
halaman anda dengan validator XHTML
e. Attribute-atribut
Tidak ada
3. Tag <html>
a. Definisi dan Penggunaan

Chief Information Officer

24

Element ini akan memberitahukan ke browser bahwa halaman tersebut adalah dokumen HTML
b. Perbedaan antara HTML dan XHTML
atribut xmlns dibutuhkan di XHTML tapi tidak HTML. Namun, validator di w3.org tidak akan mempermasalahkan
jika atribut ini tidak ada dari tag <html> di dokumen XHTML. Hal ini dikarenakan
"xmlns=http://www.w3.org/1999/xhtml" merupakan nilai yang tetap dan akan ditambahkan ke tag <html> walaupun
anda tidak memasukkannya
c. Contoh
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
...
...
...
</body>
</html>
d. Atribut-atribut
1. Required Attributes
DTD mengindikasikan atribut DTD mana yang akan digunakan. S=Strict, T=Transitional, dan F=FrameSet
Attribute

Value

Description

DTD

xmlns

http://www.w3.org/1999/xhtml

Mendefinisikan atribut XML namespace

STF

2. Standard Attributes

4. Tag <body>
a. Definisi dan penggunaan
Element body mendefinisikan isi dokumen. Terdiri dari semua isi dokumen (misalnya text, gambar, warna, grafik, dll)
b. Perbedaan antara HTML dan XHTML

Semua atribut presentasi dari element body sudah tidak digunakan lagi (deprecated) di HTML 4.01

Semua atribut presentasi dari element body tidak didukung di XHTML 1.0 Strict DTD
c. Contoh

<html>
Chief Information Officer

25

<head>
</head>
<body>
The content of the document......
</body>
</html>
d. Atribut-atribut
1. Optional Attributes
DTD mengindikasikan atribut DTD mana yang akan digunakan. S=Strict, T=Transitional, dan F=FrameSet
Attribute

Value

Description

DTD

alink

rgb(x,x,x)

Menspesifikasikan warna dari link yang sedang aktif di

TF

#xxxxxx

dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang

colorname

menggunakan styles

file_name

Sebuah gambar menggunakan latarbelakang (background).

background

TF

Sudah tidak digunakan lagi (deprecated). Sekarang


menggunakan styles.
bgcolor

link

text

rgb(x,x,x)

Warna latar belakang (background) yang digunakan di

TF

#xxxxxx

dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang

colorname

menggunakan sytles.

rgb(x,x,x)

Menspesifikasikan warna semua link di dalam dokumen.

#xxxxxx

Sudah tidak digunakan lagi (deprecated). Sekarang

colorname

menggunakan sytles.

rgb(x,x,x)

Menspesifikasikan warna text di dalam dokumen. Sudah tidak TF

#xxxxxx

digunakan lagi (deprecated). Sekarang menggunakan sytles.

TF

colorname
vlink

rgb(x,x,x)

Menspesifikasikan warna link yang dikunjungi di dalam

#xxxxxx

dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang

colorname

menggunakan sytle..

2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup
Chief Information Officer

26

TF

5. Tag <h1> - <h6>


a. Definisi dan Kegunaan
Tag <h1> sanpai dengan <h6> menjelaskan ukuran huruf, <h1> untuk huruf terbesar, <h6> untuk huruf terkecil
b. Perbedaan antara HTML dan XHTML

Atribut align sudah digantikan di HTML 4.01

Atribut align tidak didukung di XHTML 1.0 Strict DTD

27c. Contoh
Kode Sumber

Keluaran

<h1>This is header 1</h1>

This is header 1

<h2>This is header 2</h2>

This is header 2

<h3>This is header 3</h3>

This is header 3
This is header 4

<h4>This is header 4</h4>


<h5>This is header 5</h5>

This is header 5
This is header 6

<h6>This is header 6</h6>

d. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

align

left

Penjelasan
spesifik letak tulisan

center
right
justify

1. Atribut Standar
6. Tag <p>
a. Definisi dan Kegunaan
Tag <p> menjelaskan paragraf baru
b. Perbedaan antara HTML dan XHTML

Semua "presentation Atributs" pada elemen p telah digantikan di HTML 4.01.

Semua "presentation Atributs" pada elemen p tidak didukung di XHTML 1.0 Strict DTD.

c. Contoh

Chief Information Officer

27

DTD
TF

Kode Sumber

Kelauran

<p>This is some text in a very short paragraph</p>

This is some text in a very short paragraph

d. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Align

left

Penjelasan
spesifik letak barisan di dalam paragraph.

right
center
justify

2 Atribut Standar
id, class, title, style, dir, lang, xml:lang

Chief Information Officer

28

DTD
TF

6.Tag <br>
a. Definisi dan Kegunaan
Tag <br> memasukan satu baris pemisah.
Tag <br> adalah tag kosong (dalam artian tidak memiliki tag penutup berikut penulisan yang salah : <br></br>).
b. Perbedaan antara HTML dan XHTML
Di dalam HTML tag <br> tidak mempunyai tag penutup.
Di dalam XHTML tag <br> harus mempunyai tag penutup, seperti ini : <br />.
c. Tip dan Catatan
Catatan : Gunakan tag <br> untuk memasukan barisan kosong , tidak untuk memisahkan paragraf.
d. Contoh
Kode Sumber

Keluaran

This text contains<br />a line break

This text contains


a line break

e. Atribut-atribut

1. Atribut Standar
id, class, title, style

Chief Information Officer

29

8. Tag <hr>
a. Defenisi dan Kegunaan
Tag <hr> memasukkan garis horizontal.
b. Perbedaan antara HTML dan XHTML
Di dalam HTML teg <hr> tidak mempunyao tag penutup.
Di dalam tag <hr> harus mempunyao tag penutup.
Semua "presentation Atributs" pada elemen hr telah digantikan di HTML 4.01.
Semua "presentation Atributs" pada elemen hr tidak didukung di XHTML 1.0 Strict DTD.
c. Contoh
Kode Sumber

Keluaran

This is some text <hr /> This is some text

This is some text

This is some text


d. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

align

center

Spesifik letak garis horizontal rule

TF

Jika di set true garis akan berubah menjadi tanpa

TF

left
right
noshade

noshade

bayanyan, JIka di set falsegaris akan menjadi dua warna


beralur instead
size

pixels

Spesifik ketebalan garis (ketinggian) garis horizontal.

TF

Spesifik panjang garis horizontal

TF

%
width

pixels
%

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

Chief Information Officer

30

B. Format Char
9. Tag <tt> <i> <b> <big> <small>
a. Definisi dan Kegunaan
Elemen berikut ini adalah elemen font style.elemen ini belum kedaluarsa, tetapi masih mungkin dipakai untuk
memperkaya efek pada style sheets.
<tt>

Menjadikan teks teletype atau mono spaced

<i>

Menjadikan teks italic

<b>

Menjadikan teks tebal

<big>

Menjadikan teks lebih besar

<small>

Menjadikan teks lebih kecil

b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML


Tidak ada
c. Contoh
Sumber
<tt>Teletype text</tt><br />

Luaran

Teletype text

<i>Italic text</i><br />

Italic text

<b>Bold text</b><br />

Bold text

<big>Big text</big><br />

Big text

<small>Small text</small><br />

Small text

d. Atribut-atribut
1.

Atribut Standar

id, class, title, style, dir, lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown onkeyup

10. Tag <font>


a. Definisi dan Kegunaan
<font> tag menentukan font muka, font ukuran, dan font warna dari teks
b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML

elemen font tidak digunakan lagi/kedaluarsa dalam HTML 4.01.

elemen font tidak didukung/disediakan oleh XHTML 1.0 Strict DTD.

Chief Information Officer

31

c. Tip dan Catatan


Tip: Pakai styles (sebagai ganti tag <font>) untuk mendefiniskan font muka, font ukuran, dan font warna
d. Contoh
Sumber

Luaran

<font size="3" color="red">

This is some text! This is some text! This is some text!

This is some text!


</font>
<font size="1" color="blue">
This is some text!
</font>
<font face="arial" color="red">
This is some text!
</font>

e. Atribut-atribut
1. Atribut Pilihan/Optional
DTD menandakan bahwa atribut dibawah telah disediakan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

Color

rgb(x,x,x)

Menentukan warna dari teks dalam elemen

TF

#xxxxxx

font.Kedaluarsa. gunakan styles sebagai gantinya

colorname
face

list_of_fontnames

Menentukan muka dari teks dalam elemen

TF

font.Kedaluarsa. gunakan styles sebagai gantinya


size

A number from 1 to 7. Menentukan ukuran dari teks dalam elemen

TF

If basefont is specified font.Kedaluarsa. gunakan styles sebagai gantinya


you can specify a
number from -6 to 6

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
Tidak ada
11. Tag <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>
a. Definisi dan Kegunaan
Elemen berikut ini adalah elemen phrase.elemen ini belum kedaluarsa, tetapi masih mungkin dipakai untuk
memperkaya efek pada style sheets.

Chief Information Officer

32

<em>

Menjadikan penekanan pada teks

<strong>

Menjadikan penekanan lebih kuat pada teks

<dfn>

Menentukan definition term

<code>

Menentukan teks kode komputer

<samp>

Menentukan contoh kode komputer

<kbd>

Menentukan teks keyboard

<var>

Menentukan variabel

<cite>

Menentukan kutipan,petikan,penyebutan

b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML


Tidak ada

c. Contoh
Sumber

Luaran

<em>Emphasized text</em><br />

Emphasized text

<strong>Strong text</strong><br />

Strong text

<dfn>Definition term</dfn><br />

Definition term

<code>Computer code text</code><br />

Computer code text

<samp>Sample computer code text</samp><br />

Sample computer code text

<kbd>Keyboard text</kbd><br />

Keyboard text

<var>Variable</var><br />

Variable

<cite>Citation</cite>

Citation

d. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

12. Tag <sub> and <sup>


a. Definisi dan Kegunaan
Tag <sub> menentukan teks subscript. Tag <sup> menentukan teks superscript
b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML

Tidak ada
c. Contoh

Chief Information Officer

33

Sumber

Luaran

This text contains <sub>subscript</sub> This text contains

subscript

This text contains

superscript

This text contains

<sup>superscript</sup>

d. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

13. Tag <bdo>


a. Definisi dan Kegunaan
Elemen bdo dapat mengesampingkan perintah teks default
b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML
Tidak ada
c. Contoh
Sumber

Luaran

<bdo dir="rtl">Here is some Hebrew

Here is some Hebrew text

text</bdo>

d. Atribut-atribut
1. Atribut yang diperlukan
DTD menandakan bahwa atribut dibawah telah disediakan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

dir

ltr

Menentukan arah teks

STF

rtl

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

Chief Information Officer

34

14. Tag <u>


a. Definisi dan Kegunaan
Tag <u> menentukan teks yang digaris bawah
b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML

elemen u tidak digunakan lagi/kedaluarsa dalam HTML 4.01.


elemen u tidak didukung/disediakan oleh XHTML 1.0 Strict DTD.
c. Tip dan Catatan
Tip: Jangan menggaris bawahi teks- akan membingungkan user karena dianggap hyperlink!!
d. Contoh
Sumber

Luaran

A new version is <u>now available!</u>

A new version is now available!

e. Atribut-atribut

1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

C. Output
15. Tag <pre>
a. Definisi dan Kegunaan

elemen pre menentukan teks preformatted. Teks yang dilampirkan dalam elemen pre memelihara spaces dan line
breaks. Teks dijadikan dalam bentuk fixed-pitch font.
b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML

Atribut "width" dari elemen pre tidak digunakan lagi/kedaluarsa dalam HTML 4.01.
Atribut "width" dari elemen pre tidak didukung/disediakan oleh XHTML 1.0 Strict DTD.
c. Catatan untuk <pre>
Tidak banyak artinya ketika <xmp> tidak digunakan lagi/kedaluarsa. tag <pre> tidak dapat menampailakan semua
fungsi dari <xmp>:
<pre><b>Hello</b></pre> displays Hello

<xmp><b>Hello</b></xmp> displays <b>Hello</b>

Chief Information Officer

35

d. Contoh
Sumber

Luaran

<pre>

This text is

This text is

in a fixed-pitch

in a fixed-pitch
font, and it preserves

font, and it preserves

both

both

spaces and

line breaks

spaces and

line breaks

</pre>

e. Atribut-atribut
1. Atribut Pilihan/Optional
DTD menandakan bahwa atribut dibawah telah disediakan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

width

number

Menentukan angka maksimum karakter per baris (biasanya TF


40, 80, or 132)

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang, xml:space

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

4. Atribut Standar HTML


Tag HTML dapat memiliki atribut. atribut spesial dari tiap tag dilampirkan dibawah penjelasan tag terkait. atribut
dilampirkan disini Atribut inti/core dan Atribut bahasa yang menjadi standar bagi semua tag (dengan sedikit
pengecualian /exceptions).
5. Atribut Inti/Core
Tidak valid pada elemen base, head, html, meta, param, script, style, dan title
Atribut

Nilai

Penjelasan

class

class_rule or style_rule

Kelas dari elemen

id

id_name

Id unik dari elemen

style

style_definition

Definisi inline style

title

tooltip_text

Teks yang ditampilkan pada tool tip

6. Atribut bahasa
Tidak valid pada elemen base, br, frame, frameset, hr, iframe, param, dan script
Atribut

Nilai

Penjelasan

dir

ltr | rtl

Menseting arah teks

lang

language_code

Menseting kode bahasa

Chief Information Officer

36

7. Atribut Keyboard
Atribut

Nilai

Penjelasan

accesskey

character

Menseting keyboard shortcut untuk mengakses


elemen

tabindex

number

Menseting urutan tab dari elemen

8. Atribut HTML Event


Hal yang baru dari HTML 4.0 adalah kemampuan untuk memicu event di browser, seperti memulai (starting)
JavaScript ketika pengguna mengeklik elemen. Dibawahnya adalah daftar dari atribut yang dapat dimasukkan pada
tag HTML untuk mendefinikan aksi event.
Event Window
Hanya valid pada elemen body dan frameset
Atribut

Nilai

Penjelasan

onload

script

Script yang dijalankan ketika mengeload dokumen

onunload

script

Script yang dijalankan ketika mengunload dokumen

Event Elemen Form


Hanya valid pada elemen form.
Atribut

Nilai

Penjelasan

onchange

script

Script yang dijalankan ketika perubahan elemen

onsubmit

script

Script to be run when the form is submitted

onreset

script

Script to be run when the form is reset

onselect

script

Script to be run when the element is selected

onblur

script

Script to be run when the element loses focus

onfocus

script

Script to be run when the element gets focus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.
Attribute

Value

Description

onkeydown

script

What to do when key is pressed

onkeypress

script

What to do when key is pressed and released

onkeyup

script

What to do when key is released

Chief Information Officer

37

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.
Attribute

Value

Description

onclick

script

What to do on a mouse click

ondblclick

script

What to do on a mouse doubleclick

onmousedown

script

What to do when mouse button is pressed

onmousemove

script

What to do when mouse pointer moves

onmouseover

script

What to do when mouse pointer moves over an element

onmouseout

script

What to do when mouse pointer moves out of an element

onmouseup

script

What to do when mouse button is released

D. Blocks
16. Tag <acronym>
a. Definisi dan Penggunaan
Tag <acronym> berguna untuk menyatakan awal dari akronim, seperti "NATO". Dengan menggunakan akronim
Anda dapat memberikan informasi yang berguna kepada browser, mengecek ejaan, sistem penerjemahan dan index
dari search-engine.
b. Perbedaan antara HTML dan XHTML
Tidak Ada
c. Tip dan Catatan
Tip: Pada beberapa browser, atribut title dapat digunakan untuk menampilkan secara lengkap ekspresi yang ada jika
Anda mengarahkan mouse pada akronim.
d. Contoh
Kode Sumber
<acronym title="World Wide
Web">WWW</acronym>

Output
WWW

e. Atribut-atribut
1. Atribut Standard
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup

Chief Information Officer

38

17. Tag <abbr>


a. Definisi dan Penggunaan
Menandai format singkatan, seperti "Inc.", "etc.". Dengan menggunakan singkatan Anda dapat memberikan informasi
yang berguna kepada browser, seperti pengecek ejaan, sistem perterjemahan dan pengindex search-engine (mesin
pencari).
b. Perbedaan antara HTML dan XHTML
Tidak Ada
c. Tip dan Catatan
Tip: Pada beberapa browser, atribut title dapat digunakan untuk menampilkan secara lengkap ekspresi yang ada jika
Anda mengarahkan mouse pada singkatan.
d. Contoh
Source

Output

<abbr title="et

etc.

cetera">etc.</abbr>

e. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

18. Tag <address>


a. Definitisi dan Penggunaan
Tag <address> berguna untuk menyatakan permulaan alamat. Anda dapat menggunakannya untuk menyatakan
alamat, tanda tangan, atau dokumen-dokumen kepengarangan.
b. Perbedaan antara HTML dan XHTML
Tidak Ada
c. Tip dan Catatan
Catatan: Alamat biasanya ditampilkan dengan cetak miring. Kebanyakan browser akan menambahkan line-break
sebelum dan sesudah elemen alamat, tetap line-break di dalam teks harus Anda tambahkan sendiri.
d. Contoh

Chief Information Officer

39

Kode Sumber

Output

<address>

Donald Duck

Donald Duck<br />

Box 555

Box 555<br />

Disneyland

Disneyland
</address>

e. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

19. Tag <blockquote>


a. Definisi dan Penggunaan
Tag <blockquote> berguna untuk menyatakan awal dari sebuah kutipan panjang.
b. Perbedaan Antara HTML and XHTML
Tag <blockquote> dibuat mengandung hanya elemen-elemen block-level, dan itu hanya plain text.
Untuk memastikan sebuah halaman benar-benar XHTML, Anda harus menambahkan elemen block-level di antara
teks di dalam tag <blockquote> tag, seperti berikut:
<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>
c. Tip dan Catatan
Note: Elemen blockquote menghasilkan spasi di kedua sisi teks.
d. Contoh
Kode Source

Output

Here comes a long quotation:

Here comes a long quotation:

<blockquote> here is a long quotation


here is a long quotation here is a long
quotation here is a long quotation here is
a long quotation here is a long quotation
here is a long quotation here is a long

Chief Information Officer

here is a long quotation here is a long quotation here is a long


quotation here is a long quotation here is a long quotation here
is a long quotation here is a long quotation here is a long
quotation here is a long quotation here is a long quotation here

40

quotation here is a long quotation here is


a long quotation here is a long quotation is a long quotation
</blockquote>

e. Atribut-atribut
1. Atribut Pilihan
DTD menyatakan dimana atribut DTD dibolehkan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

cite

URL

URL dari quote, jika diambil dari web

STF

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

20. Tag <center>


a. Definisi dan Penggunaan
Untuk menengakan teks secara horizontal.
b. Perbedaan Antara HTML dan XHTML
Elemen center diperkenalkan pada HTML Versi 4.01.
Elemen center tidak didukung pada XHTML 1.0 Strict DTD.
c. Tip dan Catatan
Tip: Gunakan CSS styles untuk menengahkan teks.
d. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

Chief Information Officer

41

21. Tag <q>


a. Definisi dan Penggunaan
Tag <q> berguna untuk menyatakan awal dari kutipan singkat.
b. Perbedaan Antara HTML dan XHTML
Tidak Ada
c. Tip dan Catatan
Catatan: Menyesuaikan dengan spesifikasi HTML 4.01, elemen q akan menampilkan pembatasan kutipan. Elemen
ini bekerja pada browser Mozilla (Firefox) dan Opera. Tetapi Internet Explorer mengabaikannya.
d. Contoh
Kode Source

Output

Here comes a short quotation:

Here comes a short quotation: here is a short quotation here is a

<q>here is a short quotation here short quotation


is a short quotation</q>

e. Atribut-atribut
1. Atribut Pilihan
DTD menandai dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

Cite

citation

Menyatakan catatan dari sebuah kutipan

STF

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

22. Tag <ins>


a. Definisi dan Penggunaan
Berguna untuk menyatakan teks yang disisipkan.
b. Perbedaan Antara HTML dan XHTML
Tidak Ada
c. Tip dan Catatan
Chief Information Officer

42

Tip: Gunakan tag ini bersama dengan tag <del> untuk menjelaskan pembaruan dan modifikasi yang telah dilakukan
pada sebuah dokumen..
d. Contoh
Kode Sumber

Output

a dozen is <del>20</del> <ins>12</ins> pieces!

a dozen is 12 pieces!

e. Atribut=atribut
1. Atribut Pilihan
DTD menyatakan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

Cite

URL

Sebuyah URL dari dokumen yang lain yang menjelaskan

STF

alasan teks tersebut disisipkan.


Datetime

YYYYMMDD

Menyatakan tanggal dan waktu saat teks disisipkan

STF

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

23. Tag <del>


a. Definisi dan Penggunaan
Untuk menyatakan teks yang sudah dihapus dalam sebuah dokumen.
b. Perbedaan Antara HTML dan XHTML
Tidak ada
c. Tip dan Catatan
Tip: Gunakan tag ini bersama tag <ins> untuk menjelaskan pembaruan dan perubahana yang telah dilakukan pada
sebuah dokumen.
d. Contoh
Kode Source

Output

a dozen is <del>20</del> 12 pieces

a dozen is 12 pieces

e. Atribut-atribut
1. Atribut Pilihan
DTD menyatakan dimana atribut DTD dibolehkan. S=Strict, T=Transitional, and F=Frameset.
Chief Information Officer

43

Attribute

Value

Description

DTD

Cite

URL

Menyatakan URL dari dokumen lain yang menjelaskan alasan

STF

teks tersebut disisipkan


Datetime

YYYYMMDD

Menyatakan tanggal dan waktu saat teks dihapus

STF

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

24. Tag <s> dan <strike>


a. Definisi dan Penggunaan
Tag <s> dan <strike> menyatakan teks yang dicoret.
b. Perbedaan Antara HTML dan XHTML
Elemen <s> dan <strike> dideprecated pada HTML 4.01.
Elemen <s> dan <strike> tidak didukung pada XHTML 1.0 Strict DTD.
c. Tip dan Catatan
Tip: Alternatif penggunaan tag <del>
d. Example
Kode Source

Output

A new version is <s>not yet available.</s>

A new version is not yet available. now available!

now available!
<br />

A new version is not yet available. now available!

<br />
A new version is <strike>not yet
available.</strike> now available!

e. Atribut-atribut
1. Atrinbut Standar
id, class, title, style, dir, lang, xml:lang

2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

Chief Information Officer

44

E. Links
25. Tag <a>
a. Definisi dan Penggunaan
Tag <a> mendefinisikan sebuah taut. Taut bisa digunakan dengan dua cara:
1. Untuk membuat sebuah taut ke dokumen yang lain bisa menggunakan atribut href
2. Untuk membuat sebuah bookmark didalam dokumen bisa menggunakan atribut name atau id
b. Perbedaan antara HTML dan XHTML
Tidak ada perbedaan
c. Tips dan catatan
Catatan: Sebuah halaman yang ditautkan normalnya ditampilkan pada jendela browser yang sedang aktif kecuali di
spesifikasikan pada target yang lain
d. Contoh
Kode HTML

Keluaran

<p>Linking to W3Schools:

Linking to W3Schools: W3Schools

<a href="http://www.w3schools.com">

Opening W3Schools a new browser window:

W3Schools</a>

W3Schools

</p>
<p>
Opening W3Schools a new browser window:
<a href="http://www.w3schools.com"
target="_blank">W3Schools</a>
</p>

e. Atribut-atribut
1. Atribut Pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan F=frameset
Atribut

Value

Deskripsi

DTD

charset

character_encoding

Menentukan encoding karakter dari URL target

STF

coords

if shape="rect" then

Menentukan koordinat yang tepat dari atribut shape

STF

coords="left,top,right,bottom"

untuk mendefinisikan bagian image dari sebuah image

if shape="circ" then

maps

coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"

Chief Information Officer

45

href

URL

URL target dari taut

STF

hreflang

language_code

Menentukan bahasa dari target URL

STF

name

section_name

Memberi nama dari sebuah taut. Atribut ini digunakan STF


untuk membuat sebuah bookmark pada dokumen.

Pada versi XHTML yang akan datang atribut name ini


akan diganti dengan atribut id.
rel

alternate

Menentukan hubungan dokumen yang sedang dibuka STF

designates

dengan target URL

stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
rev

alternate

Menentukan hubungan dokumen yang sedang dibuka STF

designates

dengan target URL

stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
shape

rect

Chief Information Officer

Mendefinisikan type dari bagian untuk mapping pada STF

46

rectangle

tag area. Digunakan dengan atribut coords

circ
circle
poly
polygon
target

_blank

Kemana target URL akan dibuka.

_parent

5.

_self

TF

_blank Target URL akan dibuka pada


window / jendela yang baru

_top
6.

_self Target URL akan dibuka pada frame


yang sama dengan dokumen yang di klik

7.

_parent Target URL akan dibuka pada


frameset parent

8.

_top - Target URL akan dibuka pada seluruh


body dari window

type

mime_type

Menentukan type MIME (Multipurpose Internet Mail


Extensions) dari target URL

2. Atribut standard
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

3. Atribut event
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup

26. Tag <link>


a. Definisi dan Penggunaan
Elemen ini mendefinisikan hubungan antara dua dokumen yang ditautkan.
b. Perbedaan antara HTML dan XHTML
Pada HTML tag <link> tidak mempunyai tag penutup </link>
Pada XHTML tag <link> harus ditutup dengan tag penutup </link>
c. Tips dan catatan
Note: Elemen link adalah elemen kosong yang hanya terdiri dari atribut saja.
Note: Elemen ini diletakan hanya dibagian head, tapi bisa tampil beberapa kali.

d. Contoh
How to use the <link> tag to link to an external style sheet:

Chief Information Officer

47

STF

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

e. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

charset

charset

Menentukan karakter encoding dari target URL. Defaultnya STF


adalah ISO-8859-1

href

URL

Target URL dari taut

STF

hreflang

language_code

Menentukan bahasa dari target URL

STF

media

screen

Menentukan pada device apa dokumen tersebut akan

STF

tty

ditampilkan

tv
projection

screen
tty

handheld
print
braille

tv

aural
all

projection Untuk projector


handheld Untuk peralatan handheld (layar kecil, bandwidth
yang terbatas)
print
Untuk halaman atau dokumen yang dilihat di
layar dengan mode print preview
braille
Untuk peralatan braile
aural
all

rel

Untuk monitor yang non-pages


Untuk media yang menggunakan fixed-pitch
character grid (seperti teletypes, terminals, atau
devices yang memiliki kemampuan layar yang
terbatas)
Untuk peralatan type TV (resolusi rendah,
scrollability yang terbatas)

Untuk speech synthesizers


Untuk seluruh peralatan

alternate

Menentukan hubungan antara dokumen yang sedang

appendix

dibuka dengan dokumen target.

bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section

Chief Information Officer

48

STF

start
stylesheet
subsection
rev

alternate

Menentukan hubungan antara dokumen yang sedang

appendix

dibuka dengan dokumen target.

STF

bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
target

_blank
_self
_top
_parent

Kemana target URL akan dibuka.


9.

TF

_blank Target URL akan dibuka pada window /


jendela yang baru

10. _self Target URL akan dibuka pada frame yang


sama dengan dokumen yang di klik
11. _parent Target URL akan dibuka pada frameset
parent
12. _top - Target URL akan dibuka pada seluruh body
dari window
type

MIME_type like:

Menentukan type MIME (Multipurpose Internet Mail

text/css

Extensions) dari target URL

STF

text/javascript
image/gif

2. Atribut Standard
id, class, title, style, dir, lang, xml:lang

3. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

Chief Information Officer

49

F. Frames
27. Tag <frame>
a. Definisi dan Penggunaan
Mendefinisikan sebuah frame (sub window).
b. Perbedaan antara HTML dan XHTML
Pada HTML tag <frame> tidak memerlukan tag penutup </frame>.
Pada XHTML tag <frame> harus ditutup dengan tag penutup </frame>.
c. Tips dan catatan
Catatan: Jika akan menggunakan halaman yang memuat frame, maka harus dipastikan DTD di set ke DTD
Frameset pada type dokumen (Doctype)
Penting: Tag <body </body> tidak bisa digunakan bersama-sama dengan tag <frameset> </framset>!.
Akan tetapi jika ditambahkan tag <noframes> yang berisi teks untuk browser yang tidak mendukung frames
maka kita harus meletakan teks tersebut didalam tag <body> </body>

d. Example
Kode HTML

Keluaran

<a href="planets.htm" target="_blank">View this


page for the result</a>
The source code in "planets.htm":
<html>
<frameset cols = "25%, 25%,*">
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
</html>

e. Atribut-atribut
1. Atribut Pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

frameborder

Menentukan apakah frame tersebut akan memakai border

ataukah tidak

URL

Sebuah URL ke deskripsi yang panjang dari isi frame. Biasa F

longdesc

Chief Information Officer

50

digunakan untuk browser yang tidak mendukung frames


marginheight

pixels

Menentukan margin atas dan bawah frame

marginwidth

pixels

Menentukan margin kiri dan kanan frame

name

frame_name

Menentukan nama untuk frame (untuk digunakan didalam

scripts)
noresize

noresize

Apabila di set to noresize maka user tidak bisa merubah

ukuran dari frame


scrolling

yes

Menentukan scroll bars

Menentukan URL dari file untuk di tampilkan pada frame

no
auto
src

URL

2. Atribut standard
Hanya bisa pada XHTML 1.0 dengan type DTD Frameset
id, class, title, style

28. Tag <frameset>


a. Definisi dan Penggunaan
Tag <Frameset> digunakan untuk membagi window kedalam beberapa frame. Masingmasing frame bisa dibuat berdasarkan pembagian row (baris) dan cols (kolom) dalam frameset.
Apabila digunakan tag <frameset> maka kita tidak bisa lagi menggunakan tag <body> karena tag <frameset>
digunakan ditempat tag <body>. Tag-tag yang bisa digunakan didalam <frameset> diantaranya adalah frame, head,
dan noframes.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Tips and Notes
Catatan: Jika akan menggunakan halaman yang memuat frame, maka harus dipastikan DTD di set ke DTD
Frameset pada type dokumen (Doctype)
Penting: Tag <body </body> tidak bisa digunakan bersama-sama dengan tag <frameset> </framset>!. Akan tetapi
jika ditambahkan tag <noframes> yang berisi teks untuk browser yang tidak mendukung frames maka kita harus
meletakan teks tersebut didalam tag <body> </body>
d. Contoh
Kode HTML

Chief Information Officer

Keluaran

51

<a href="planets.htm" target="_blank">View this


page for the result</a>
The source code in "planets.htm":
<html>
<frameset cols = "25%, 25%,*">
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
</html>

e. Atribut-atribut
1. Atribut Pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan F=frameset
Atribut

Value

Deskripsi

DTD

cols

pixels

Menentukan ukuran colom pada frameset

Menentukan ukuran row pada frameset

%
*
rows

pixels
%
*

2. Atribut standard
Hanya bisa pada XHTML 1.0 dengan type DTD Frameset
id, class, title, style

29. Tag <iframe>


a. Definisi dan Penggunaan
Tag <iframe> digunakan untuk mendefinisikan frame didalam body html dokumen. Tidak seperti frameset, frame,
dan noframes, tag iframe bisa digunakan didalam tag <body> dan tidak harus meletakan tag <iframe> didalam tag
<frameset>. Tag <iframe> menampilkan content seperti forms, images, frames yang lain, tables dan lain-lain. Yang
perlu dimengerti adalah bahwa cara untuk menghubungkan content kepada <iframe> dengan menggunakan atribut
src.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh

Chief Information Officer

52

Kode HTML

Keluaran

<iframe
src ="/default.asp"
width="100%">
</iframe>

d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

align

left

Menentukan tata letak dari teks yang ada pada iframe

TF

Menentukan apakah frame tersebut akan menggunakan

TF

border ataukah tidak

pixels

Menentukan ukuran tinggi dari iframe

right
top
middle
bottom
frameborder

height

TF

%
longdesc

URL

Sebuah URL ke deskripsi yang panjang dari isi frame. Biasa TF


digunakan untuk browser yang tidak mendukung frames

marginheight

pixels

Menentukan margin atas dan bawah frame

TF

marginwidth

pixels

Menentukan margin kiri dan kanan frame

TF

name

frame_name

Menentukan nama untuk frame (untuk digunakan didalam

TF

scripts)
scrolling

yes

Menentukan scroll bars

TF

no
auto
src

URL

Menentukan URL dari file untuk di tampilkan pada frame

TF

width

pixels

Menentukan lebar dari iframe

TF

2. Atribut standard
id, class, title, style

30. Tag <noframes>


a. Definisi dan Penggunaan
Tag <noframes> digunakan untuk menampilkan text ataupun informasi pada browser yang tidak bisa membuka atau
Chief Information Officer

53

tidak mendukung frame. Biasanya text yang ditampilkan merupakan informasi bagi users yang membuka halaman
tersebut bahwa halaman tersebut menggunakan frame dan browser yang dipakai oleh users tersebut tidak mendukung
frame. Sedangkan bagi users yang menggunakan browser yang sudah mendukung frame maka text tersebut tidak
akan ditampilkan.
Tag <noframes> biasanya ditempatkan setelah tag pembuka <frameset> dan text yang akan ditampilkan di simpan
pada tag <body> setelah tag <noframes>
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Tips dan catatan
Catatan: Jika browser yang dipakai mendukung frames, maka tidak akan menampilkan teks yang ada pada elemen
<noframes>
Penting: Jika digunakan elemen <noframes> pada sebuah frameset, maka teks yang akan ditampilkan harus
diletakan pada tag <body></body>
Catatan: Jika akan menggunakan halaman yang memuat frame, maka harus dipastikan DTD di set ke DTD
Frameset pada type dokumen (Doctype)
Catatan: Tag <noframes> tidak bisa dipakai pada XHTML 1.0 dengan type dokumen DTD Strict
d. Contoh
<frameset cols = "25%, 25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>

e. Atribut-atribut
1. Atribut standard
id, class, title, style, dir, lang, xml:lang

G. Input
31. Tag <form>
a. Definisi dan Penggunaan
Elemen form membuat semacam formulir untuk diisi oleh user. Form tersebut dapat berisi textfields, checkboxes,
Chief Information Officer

54

radio-buttons dan yang lainnya. Forms digunakan untuk mengirimkan data user ke URL tertentu.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Kode HTML

Keluaran

<form action="form_action.asp"

First name:

method="get">

Last name:

First name:
<input type="text" name="fname" value="Mickey"
/>

If you click the "Submit" button, you will send your


input to a new page called form_action.asp.

<br />
Last name:
<input type="text" name="lname" value="Mouse"
/>
<br />
<input type="submit" value="Submit" />
</form>
<p>
If you click the "Submit" button, you will send your
input to a new page called form_action.asp.
</p>

d. Atribut-atribut
1. Atribut yang dibutuhkan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

action

URL

Menentukan URL yang akan dituju ketika data dikirimkan

STF

dengan menekan tombol submit.

2. Atribut pilihan
Atribut

Value

Deskripsi

DTD

accept

list of contenttypes

A comma separated list of content types that the server

STF

that processes this form will handle correctly


accept-charset

charset_list

A comma separated list of possible character sets for the


form data. The default value is "unknown"

Chief Information Officer

55

STF

enctype

mimetype

The mime type used to encode the content of the form

STF

method

get

Menentukan metoda HTTP dalam mengirimkan data ke URL STF

post

tujuan. Defaultnya adalah get


method="get": Metoda ini mengirimkan isi form pada
URL: URL?name=value&name=value. Catatan: Jika isi
form mengandung karakter non-ASCII atau lebih dari 100
karakter maka harus digunakan metoda:post
method="post": Metoda ini digunakan untuk mengirim isi
form pada body permintaan. Catatan: Hampir semua
browser tidak bisa melakukan bookmark permintaan post

name

form_name

Menentukan nama untuk form

TF

target

_blank

Kemana target URL akan dibuka.

TF

_self
_parent

13. _blank Target URL akan dibuka pada window /


jendela yang baru

_top

14. _self Target URL akan dibuka pada frame yang


sama dengan dokumen yang di klik
15. _parent Target URL akan dibuka pada frameset
parent
16. _top - Target URL akan dibuka pada seluruh body
dari window

3. Atribut standard
id, class, title, style, dir, lang, xml:lang

4. Atribut event
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup

32. Tag <input>


a. Definisi dan Penggunaan
Tag <input> digunakan untuk meminta masukan berupa teks, password, penekanan tombol dan lain-lain.
b. Perbedaan antara HTML dan XHTML
Pada HTML tag <input> tidak memerlukan tag penutup </input>
Pada XHTML tag <input> harus ditutup dengan tag penutup </input>
c. Tips dan catatan
Catatan: Elemen input adalah elemen kosong, elemen tersebut hanya berisi atribut.
Chief Information Officer

56

Tips: Gunakan elemen label untuk membuat label bagi form control
d. Example
sssKode HTML

Keluaran

<form action="form_action.asp"

First name:

method="get">

Last name:

First name:

If you click the "Submit" button, you will send

<input type="text" name="fname" value="Mickey" />

your input to a new page called form_action.asp.

<br />
Last name:
<input type="text" name="lname" value="Mouse" />
<br />
<input type="submit" value="Submit" />
</form>
<p>
If you click the "Submit" button, you will send your input
to a new page called form_action.asp.
</p>

e. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan F=frameset
Atribut

Value

Deskripsi

DTD

accept

list_of_mime_types

A comma-separated list of MIME types that indicates the

STF

MIME type of the file transfer.


Catatan: Hanya digunakan pada type="file"
align

left
right
top

Mendefinisikan letak teks pada image

TF

Catatan: hanya digunakan pada type="image"

texttop
middle
absmiddle
baseline
bottom
absbottom
alt

text

Mendefinisikan alternate teks pada image


Catatan: Hanya digunakan pada type="image"

Chief Information Officer

57

STF

checked

checked

Hanya untuk type checkbox dan radio untuk menentukan

STF

pilihan yang terpilih secara otomatis (default)


Catatn: Digunakan pada type="checkbox" dan
type="radio"
disabled

disabled

Mendisable kotak input sehingga user tidak dapat

STF

menuliskan teks didalamnya

Catatan: Tidak bisa digunakan pada type="hidden"


maxlength

number

menentukan panjang karakter maksimum yang bisa

STF

dimasukkan
Catatan: hanya digunakan pada type="text"
name

field_name

Mendefinisikan objek input. Musti di berikan kecuali untuk

STF

type Submit dan reset


Catatan: Atribut ini dibutuhkan dengan type="button",
type="checkbox", type="file", type="hidden",
type="image", type="password", type="text", dan
type="radio"
readonly

readonly

Mengindikasikan bahwa nilai dari field tidak bisa di

STF

modifikasi atau dirubah

Catatan: Hanya digunakan pada type="text"


size

number_of_char

Menentukan panjang kotak input dalam karakter

STF

Catatan: Tidak bisa digunakan pada type="hidden"


src

URL

Mendefinisikan URL dari image yang akan ditampilkan

STF

Catatan: Hanya digunakan pada type="image"


type

button

Mengindikasikan type dari elemen input. Defaultnyanya

checkbox

adalah text

file
hidden

STF

Catatan: Tidak termasuk atribut yang dibutuhkan

image
password
radio
reset
submit
text
value

value

Untuk buttons, reset buttons and submit buttons:


Mendefinisikan teks pada buttons

Chief Information Officer

58

STF

Untuk image buttons: Mendefinisikan hasil symbolic dari


field yang dikirim ke script.
Untuk checkboxes and radio buttons: Mendefinisikan
hasil dari input elemen ketika di klik. Hasil tersebut dikirim
ke form URL
Untuk hidden, password, and text fields:
Mendefinisikan value default dari elemen
Catatan: Tidak bisa digunakan pada type="file"
Catatan: Atribut ini dibutuhkan pada type="checkbox" and
type="radio"

2. Atribut standard
id, class, title, style, dir, lang, xml:lang

3. Event Attributes
tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

33. Tag <textarea>


a. Definisi dan Penggunaan
Digunakan untuk membuat sebuah kotak teks multi baris dan user bisa menulis dengan jumlah karakter yang tidak
terbatas. Font default untuk textarea adalah fixed pitch.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Kode HTML

Keluaran

<textarea rows="2" cols="20">


The cat was playing in the garden. Suddenly a dog
showed up.....
</textarea>

d. atribut=atribut
1.

Atribut yang dibutuhkan

DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Chief Information Officer

Deskripsi

DTD

59

cols

number

Menentukan jumlah kolom yang bisa terlihat didalam text- STF


area

rows

number

Menentukan jumlah row yang bisa terlihat didalam text-

STF

area

2. Atribut pilihan
Atribut

Value

Deskripsi

DTD

disabled

disabled

Mendisable text-area ketika pertama kali dimunculkan

STF

name

name_of_textarea

Menentukan nama dari text-area

STF

readonly

readonly

Mengindikasikan bahwa user tidak bisa memodifikasi isi dari STF


text-area

3. Atribut standard
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

4. Atribut event
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

34. Tag <button>


a. Definisi dan Penggunaan
Mendefinisikan sebuah tombol tekan. Didalam elemen tombol tersebut bisa disimpan content (isi), seperti teks atau
image. Inilah perbedaan antara elemen <button> dengan tombol yang dibuat dengan elemen input.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Kode HTML

Keluaran

<button>Click Me!</button>

Click Me!

d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

disabled

disabled

Mendisable tombol

STF

name

button_name

Menetapkan nama untuk tombol

STF

type

button

Mendefinisikan type tombol

STF

reset

Chief Information Officer

60

submit
value

some_value

Menetapkan nilai inisial untuk tombol. Nilai ini bisa dirubah STF
dengan script.

2. Atribut standard
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

3. Atribut event
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup

35. Tag <select>


a. Definisi dan Penggunaan
Elemen <select> membuat list drop-down.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Tips dan catatan
Tip: Gunakan tag ini didalam elemen form untuk menerima masukan dari user

d. Contoh
Kode HTML

Keluaran

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel">Opel</option>
<option value ="audi">Audi</option>
</select>

e. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

disabled

disabled

Ketika diset pada disable, maka hal ini akan mendisable list STF
drop-down

multiple

multiple

Ketika diset pada mode ini, maka hal tersebut akan


menentukan bahwa bisa memilih lebih dari satu item pada
saat yang bersamaan.

Chief Information Officer

61

STF

name

unique_name

Mendefinisikan nama untuk list drop-down

STF

size

number

Mendefinisikan jumlah item yang bisa dilihat pada list drop- STF
down.

2. Atribut standard
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

3. Atribut event
onfocus, onblur, onchange

36. Tag <optgroup>


a. Definisi dan Penggunaan
Mendefinisikan sebuah pilihan group. Elemen ini digunakan untuk memberikan pilihan group item. Ketika data yang
dimiliki berupa list pilihan yang panjang maka membuat pilihan group lebih memudahkan untuk mengatasi data
tersebut.
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Kode HTML

Keluaran

<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>

d. Atribut-atribut
1. Atribut yang dibutuhkan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut

Value

Deskripsi

DTD

label

text_label

Mendefinisikan nama untuk pilihan group

STF

Chief Information Officer

62

2. Atribut pilihan
Atribut

Value

Deskripsi

DTD

disabled

disabled

Mendisable option-group pada saat pertama kali diload

STF

3. Atribut standard
id, class, title, style, dir, lang, xml:lang

4. Atribut event
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup

37. Tag <option>


a. Definisi dan Penggunaan
Elemen <option> mendefinisikan sebuah pilihan didalam list drop-down.
b. Perbedaan antara HTML dan XHTML
Pada HTML, tag <option> tidak memerlukan tag penutup </option>
Pada XHTML, tag <option> harus ditutup dengan tag penutup </option>.
c. Tips dan catatan
Catatan: Tag <option> dapat digunakan tanpa memakai atribut, akan tetapi biasanya memerlukan atribut value yang
mengindikasikan apa yang dikirim ke server.
Catatan: Tag ini diletakan pada tag <select>, dan apabila diletakan ditempat selainnya maka tidak akan ada artinya
sama sekali.
d. Contoh
Kode HTML

Keluaran

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel" selected="selected">Opel</option>
<option value ="audi">Audi</option>
</select>

e. Atribut-atribut
1. Atribut Pilihan
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan F=frameset
Atribut

Value

Chief Information Officer

Deskripsi

DTD

63

disabled

disabled

Menetapkan bahwa pilihan harus didisable pada saat

STF

pertama kali di load


label

text

Mendefinisikan label yang akan digunakan ketika memakai STF


<optgroup>

selected

selected

Menetapkan bahwa pilihan harus nampak terpilih (akan

STF

ditampilkan pada list yang pertama.


value

text

Mendefinisikan isi dari pilihan yang akan dikirim ke server. STF

2. Atribut standard
id, class, title, style, dir, lang, xml:lang, tabindex

3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

38. Tag <label>


a. Definisi dan Pemakaian
Untuk mendefinisikan sebuah label yang berfungsi sebagai pengendali. Jika text didalam label elemen itu kita klik,
pengendali atau control dijalankan.
b. Perbedaan antara HTML dan XHTML
Tidak ada.
c. Tips dan Catatan
Catatan: Atribut "for" binds / membatasi sebuah label terhadap elemen lain. Samakan nilai atribut "for" terhadap nilai
atribut "id" dari elemen yang berkaitan.
d. Contoh
Sumber

Hasil

<p>Try clicking on the text labels:</p>

Coba klik pada label text:

<form name="input" action="">

Pria

<input type="radio" name="sex" id="pria" />

Wanita

<label for="pria">Pria</label>
<br />
<input type="radio" name="sex" id="wanita" />
<label for="wanita">Wanita</label>
</form>

Chief Information Officer

64

e. Atribut-atribut
1. Atribut pilihan
DTD menunjukkan dimana atribut DTD diijinkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

for

id_of_another_field

Mendefinisikan peruntukkan elemen form dari label. Dibuat

STF

ke sebuah ID dari element form.


Catatan: Jika atribut ini tidak ditentukan, label
diasosiasikan dengan isinya.
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut Event
accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup

39. HTML <fieldset> tag


a. Definisi dan Pemakaian
Element fieldset menggambarkan suatu kotak mengililingi elemen isinya.
b. Perbedaaan Antara HTML dan XHTML
Tidak ada
c. Contoh
Sumber

Hasil

<fieldset>

Height Weight

Height <input type="text" size="3" />


Weight <input type="text" size="3" />
</fieldset>
d. Atribut-atribut
1. Atribut standar
id, class, title, style, dir, lang, xml:lang
2. Atribut event
accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,

Chief Information Officer

65

onkeydown, onkeyup

40. Tag <legend>


a. Definisi dan Pemakaian
Element legend mendefinisikan suatu caption atau tangkapan untuk suatu fieldset.
b. Perbedaaan Antara HTML dan XHTML
Atribut align tidak dipakai dalam HTML 4.01.
Atribut align tidak didukung dalam XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Hasil

<fieldset>

Health information: Height Weight

<legend>Health information:</legend>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana DTD atribut diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

top

Mendefinisikan batas untuk isi didalam fieldset. Top adalah

TF

bottom

default-nya.

left
right
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

Chief Information Officer

66

H. List
41. Tag <ul>
a. Definisi dan Penggunaan:
Tag ini mendefinisikan daftar yang tidak tersusun (unordered list)
b. Perbedaan antara HTML dan XHTML
- atribut compact dan type sudah di gantikan (deprecated) di HTML 4.01
- atribut compact dan type tidak didukung di XHTML 1.0 Strict DTD
c. Tips dan Catatan
Tip : gunakan styles untuk mendefinisikan tipe list
d. Contoh:
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
output:

Coffee

Tea ss

e. Atribut-atribut
1. Optional atribut
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Nilai

Penjelasan

DTD

compact

compact_rendering

Tidak digunakan lagi (Deprecated). Sekarang menggunakan

TF

style
type

disc

Memilih jenis list. Tidak digunakan lagi (deprecated).

square

Sekarang menggunakan style

TF

circle
2. Standard atribut
id, class, title, style, dir, lang, xml:lang
3. Event atribut
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

Chief Information Officer

67

42. Tag <ol>


a. Definisi dan Penggunaan
Tag <ol> menjelaskan awal mula dari list yang berurutan (ordered list)
b. Perbedaan antara HTML dan XHTML
- atribut compact, start dan type sudah di gantikan (deprecated) di HTML 4.01
- atribut compact, start dan type tidak didukung di XHTML 1.0 Strict DTD
c. Tips and Notes
Tip: Gunakan styles untuk mendefinisikan tipe list
d. Contoh
Source

Output

<ol>
<li>Coffee</li>

1.

Coffee

2.

Tea

<li>Tea</li>
</ol>
e. Atribut-atribut
1. Optional atribut
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

compact

compact_rendering

Tidak digunakan lagi (Deprecated). Sekarang menggunakan

TF

style
start

start_on_number

Menspesifikasikan angka awal. Tidak digunakan lagi

TF

(deprecated). Sekarang menggunakan style


type

Menspesifikasikan tipe list. Tidak digunakan lagi

(deprecated). Sekarang menggunakan style

I
i
1

2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes

Chief Information Officer

68

TF

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,


onkeyup

f. Contoh
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
43. Tag <li>
a. Definisi dan penggunaan
Tag <li> mendefinisikan permulaan dari item list. Tag <li> bisa digunakan dalam keadaan terurut (ordered=<ol>) dan
tidak terurut(unordered=<ul>)
b. Perbedaan antara HTML dan XHTML
- atribut type dan value dari elemen li tidak digunakan lagi (deprecated) di HTML 4.0.1
- atribut type dan value dari element li tidak didukung di XHTML 1.0 Strict DTD
c. Tip dan catatan
Tip : Gunakan styles untuk mendefinisikan tipe list
d. Contoh
Source
<ol>
<li>Coffee</li>

Output
2.

Coffee

3.

Tea

9.

Coffee

<li>Tea</li>
</ol>

Chief Information Officer

69

<ul>

10. Tea

<li>Coffee</li>
<li>Tea</li>
</ul>

e. Atribut-atribut
1. Optional atribut
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

typeF

Menspesifikasikan tipe list. Tidak digunakan lagi

TF

(Deprecated). Sekarang menggunakan style

I
i
1
disc
square
circle
value

number_of_list_item

Tidak digunakan lagi (Deprecated). Sekarang menggunakan

TF

style

2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

Chief Information Officer

70

44. Tag <dir>


a. Definisi dan Penggunaan
kosong, cari euy
b. Perbedaan antara HTML dan XHTML

element dir tidak digunakan lagi di HTML 4.0.1

element dir tidak didukung di XHTML 1.0 Strict DTD

c. Tips dan Notes


Tip: Gunakan styles CSS untuk mendefinisikan tipe list
d. Contoh
Source

Output

<dir>
<li>html</li>

html

xhtml

<li>xhtml</li>
</dir>
e. Atribut-atribut
1. Optional Attributes
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

compact

compact_rendering

Tidak digunakan lagi (deprecated). Sekarang menggunakan

TF

styles.
2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

45. Tag <dl>


a. Definisi dan Penggunaan
tag <dl> digunakan untuk definisi daftar (list)
b. Perbedaan antara HTML dan XHTML
Chief Information Officer

71

Tidak ada
c. Contoh
Source

Output

<dl>

Coffee

<dt>Coffee</dt>

Black hot drink

<dd>Black hot drink</dd>


<dt>Milk</dt>

Milk
White cold drink

<dd>White cold drink</dd>


</dl>
d. Atribut-atribut
1. Standard Attributes
id, class, title, style, dir, lang, xml:lang
2. Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,


onkeyup

46. Tag <dt>


a. Definisi dan Penggunaan
tag <dt> mendefinisikan awal term di dalam definisi list
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Source

Output

<dl>

Coffee

<dt>Coffee</dt>

Black hot drink

<dd>Black hot drink</dd>


<dt>Milk</dt>
<dd>White cold drink</dd>

Milk
White cold drink

</dl>

d. Atribut-atribut

Chief Information Officer

72

1. Standard Attributes
id, class, title, style, dir, lang, xml:lang
2. Event Attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

47. Tag <dd>


a. Definisi dan Penggunaan
tag <dd> mendefinisikan deskripsi dari sebuah term dalam list
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Contoh
Source

Output

<dl>

Coffee

<dt>Coffee</dt>

Black hot drink

<dd>Black hot drink</dd>


<dt>Milk</dt>

Milk
White cold drink

<dd>White cold drink</dd>


</dl>
d. Atribut-atribut
1. Standard Attributes
id, class, title, style, dir, lang, xml:lang
2. Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,


onkeyup

48. Tag <menu>


a. Definisi dan Penggunaan
tag <menu> mendefinisikan daftar menu (menu list)
b. Perbedaan antara HTML dan XHTML

Chief Information Officer

73

Element menu telah digantikan di HTML 4.0.1

Element menu tidak didukung di XHTML 1.0 Strict DTD

c. Tips and Notes


Tip: Gunakan sytle CSS untuk mendefinisikan tipe list
d. Contoh
Source

Output

<menu>

html

xhtml

<li>html</li>
<li>xhtml</li>
</menu>
e. Atribut-atribut
1. Optional atribut

DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

compact

compact_rendering

Tidak digunakan lagi (Deprecated). Sekarang menggunakan

TF

styles
2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup

I. Images

49. Tag <img>


a. Definisi dan Pemakaian
Elemen img mendefinisikan sebuah image.
b. Perbedaaan Antara HTML dan XHTML
Dalam HTML tag <img> tidak punya tag akhir.
Dalam XHTML tag <img> harus ditutup
Chief Information Officer

74

Atribut elemen gambar yaitu "align", "border", "hspace", dan "vspace" tidak ada dalam HTML 4.01.
Atribut elemen gambar yaitu "align", "border", "hspace", dan "vspace" tidak didukung dalam XHTML 1.0 Strict
DTD.
Mozilla Firefox dan Atribut alt
Jika memakai atribut alt pada gambar dan image map, teks tidak akan ditampilkan pada gerakan mouse
sebagaimana pada browser lain.
Firefox memakai atribut alt sesuai dengan peruntukkannya, seperti teks alternative jika gambar tidak muncul, bukan
karena mouse menutupi text.
Firefox tidak mendukung komentar pergerakan mouse pada gambar atau image map jika menggunaka atribut kecil
dalam tag <img>.
Misalnya <img src="image.gif" alt="bla" title="bla bla bla"
c. Contoh
Sumber

Hasil

<img src="angry.gif" alt="Angry" />


d. Atribut-atribut
1. Atribut Yang Dibutuhkan
DTD mengindikasikan DTD dimana atribut diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

alt

text

Mendefinisikan deskripsi singkat dari gambar

STF

src

URL

Menampilkan URL gambar

STF

Atribut

Nilai

Deskripsi

DTD

align

top

Menetapkan bagaimana membatasi gambar sesuai dengan teks

TF

bottom

disekililingnya. Tidak dipakai lagi. Lebih memakai styles.

2. Atribut pilihan

middle
left
right
border

pixels

Mendefinisikan batas sekililing gambar. Tidak dipakai lagi.

TF

Pakai styles saja


height

pixels

Mendefinisikan tinggi gambar

Chief Information Officer

75

STF

hspace

pixels

Mendefinisikan space putih dikiri-kanan gambar. Tidak dipakai

TF

lagi. Pakai styles saja


ismap

URL

Mendefinisikan gambar sebagai suatu image map dari sisi server STF

longdesc

URL

URL suatu dokumen yang mengandung deskripsi panjang dari

STF

gambar
usemap

URL

Mendefinisikan gambar sebagai image map dari sisi client. Lihat STF
pada tag <map> dan tag <area> untuk melihat bagaimana
kerjanya

vspace

pixels

Mendefinisikan space putih diatas dan bawah gambar. Tidak

TF

dipakai lagi. Pakai styles saja


width

pixels

Mengatur lebar image

STF

%
3. Atribut standar
id, class, title, style, lang, xml:lang
4. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup
50. Tag <map>
a. Definisi dan Pemakaian
Mendefinisikan gambar sebagai image map dari sisi client. Suatu image map adalah sebuah gambar dengan wilayah
yang dapat diklik.
b. Perbedaaan Antara HTML dan XHTML
Tidak ada.
c. Tips dan Catatan
Catatan: Elemen area selalu terdapat dalam elemen peta. Elemen area mendefinisikan wilayah dalam image map.
Catatan: Atribut usemap dalam tag <img> dimaksudkan untuk atribut id atau name (tergantung browser) dalam
tag <map>, makanya kita harus menambahkan atribut id dan name ke dalam tag <map>.
d. Contoh
Sumber

Chief Information Officer

Hasil

76

Click on one of the planets:

<p>Click on one of the planets:</p>


<img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
e. Atribut-atribut
1. Required Atribut

DTD mengindikasikan DTD dimana atribut diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

id

unique_name

Mendefinisikan sebuah nama unik untuk tag map

STF

2. Atribut pilihan
Atribut

Nilai

Deskripsi

DTD

name

unique_name

Mendefinisikan sebuah nama unik untuk tag map (untuk

STF

perbandingan selanjutnya)
3. Atribut standar
class, title, style, dir, lang, xml:lang
4. Atribut event
tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup, onfocus, onblur

Chief Information Officer

77

51. Tag <area>


a. Definisi dan Pemakaian
Mendefinisikan suatu wilayah dalam image map.
b. Perbedaaan Antara HTML dan XHTML
Di dalam HTML tag <area> tidak punya tag penutup.
Di dalam XHTML tag <area> ditutup sesuai kebutuhan.
c. Tips dan Catatan
Elemen ini selalu terdapat dalam tag <map>.
Catatan: Atribut usemap didalam tag <image> mewakili atribut id atau name (tergantung browser) di dalam tag
<map>, oleh karena kedua atribut id dan name ditambahkan ke dalam tag <map>.
d. Contoh
Sumber

Hasil

<p>Click on one of the planets:</p>

Click on one of the planets:

<img src ="planets.gif"


width="145" height="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
e. Atribut-atribut
1. Required Atribut
Chief Information Officer

78

DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut Nilai

Deskripsi

DTD

alt

Menspesifikasikan suatu text alternative utk area

STF

text
2. Atribut pilihan

Atribut

Nilai

Deskripsi

DTD

coords

if shape="rect" then

Menspesifikasikan koordinat untuk bagian yang dapat

STF

coords="left,top,right,bottom"

di klik

if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"
href

URL

Menspesifikasikan target URL dari suatu bagian

STF

nohref

true

Bagian luar dari image map

STF

Mendefinisikan bentuk area

STF

Lokasi dibukanya URL target.

TF

false
shape

rect
rectangle
circ
circle
poly
polygon

target

_blank
_parent
_self

_blank - URL target dibuka pada window


baru

_top

_self - URL target dibuka pada frame yang


sama pada waktu di klik

_parent URL target dibuka pada parent


frameset

_top - URL target dibuka pada semua bagian


dari window

3. Atribut standar
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
4. Atribut event

Chief Information Officer

79

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,


onkeyup, onfocus, onblur

J. Tables
52. Tag <table>
a. Definisi dan Pemakaian
Tag <table> mendefinisikan sebuah table. Didalam sebuah tag <table> dapat diletakkan table headers, table rows,
table cells, dan table lainnya.
b. Perbedaaan Antara HTML dan XHTML
Atribut "align" dan "bgcolor" dari elemen table tidak dipakai lagi in HTML 4.01.
Atribut "align" dan "bgcolor" dari elemen table tidak didukung in XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Hasil

<table border = "1">

Cell A

Cell B

<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana atribut DTD is diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

left

Membatasi table. Tidak dipakai lagi. Pakai styles saja.

TF

center
right
bgcolor

rgb(x,x,x)

Menspesifikasikan warna background table. Tidak dipakai TF

#xxxxxx

lagi. Pakai styles saja.

colorname
border

pixels

Menspesifikasikan lebar border.


Tip: Set border="0" menampilkan table tanpa

Chief Information Officer

80

STF

border!
cellpadding

pixels

Menspesifikasikan space antara cell walls dan contents

STF

Menspesifikasikan space antara cells

STF

void

Menspesifikasikan sisi mana dari border pada table yang

STF

above

dapat terlihat

%
cellspacing

pixels
%

frame

below
hsides
lhs
rhs

Catatan: Atribut "border" dapat digabungkan


dengan atribut "frame" untuk menspesifikasikan border

vsides
box
border
rules

Tidak ada
groups
rows
cols

Menspesifikasikan garis pembagi horizontal/vertical.

STF

Catatan: harus dipakai bersama dengan


atribut border

all
summary

text

Menspesifikasikan rangkuman table untuk browser

STF

speech-synthesizing/non-visual
width

Menspesifikasikan lebar tabel

STF

pixels
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

53. Tag <caption>


a. Definisi dan Pemakaian
Elemen ini mendefinisikan sebuah table caption. Tag <caption> harus disisipi segera setelah tag <table>. Dapat
dispesifikasi hanya satu caption per table. Biasanya caption akan berada diatas table.
Chief Information Officer

81

b. Perbedaaan Antara HTML dan XHTML


Atribut "align" dari elemen caption sudah tidak dipakai lagi pada HTML 4.01.
Atribut "align" dari elemen caption tidak didukung dalam XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Hasil

<table border="1">

This is a caption
Cell 1
Cell 2

<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
d. Atribut-atribut
1. Atribut pilihan

DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

left

Bagaimana membatasi caption. Tidak dipakai lagi. Pakai

TF

right

styles saja.

top
bottom
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

54. Tag <tfoot>


a. Definisi dan Pemakaian
Mendefinisikan footer dari sebuah tabel.
Elemen-elemen thead, tfoot dan tbody memungkinkan dibuatnya suatu grup baris pada tabel. Ketika table dibuat,
mungkin kita ingin ada header baris, beberapa baris dengan data, dan sebuah baris yang berisikan angka total di

Chief Information Officer

82

paling bawah. Pembagian ini memungkinkan browser dapat menggulung bodi sendiri terpisah dari header dan footer.
Jika yang di cetak adalah table yang panjang, informasi pada table header dan footer akan berulang pada setiap
halaman yang memuat data table.
b. Perbedaaan Antara HTML dan XHTML
Tidak ada.
c. Tips dan Catatan
Catatan: Tag <tfoot> harus punya sebuah tag <tr> di dalamnya!
Catatan: Jika memakai elemen-elemen thead, tfoot dan tbody, setiap elemen harus dipakai. Elemen-elemen tersebut
akan tampil dengan urutan sbb: <thead>, <tfoot> dan <tbody>, maka browsers dapat me-render footer sebelum
menerima semua data. Semua tags harus dipakai diantara elemen table.
Catatan: Elemen-elemen <thead>,<tbody> dan <tfoot> elements are seldom usejarang dipakai, karena dukungan
browser kurang. Semoga di versi XHTML yang nanti sudah bisa. Jika memakai I.E. 5.0 atau yang lebih baru, dapat
dilihat sebuah contoh dalam XML tutorial.
d. Contoh
Sumber

Hasil

<table border = "1">

This text is in the THEAD


This text is in the TFOOT
This text is in the TBODY

<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>This text is in the TBODY</td>
</tr>
</tbody>
</table>
e. Atribut-atribut
1. Atribut pilihan
Chief Information Officer

83

DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

right

Mendefinisikan text alignment dalam cells

STF

Menspesifikasikan karakter mana utk align text on.

STF

left
center
justify
char
char

character

Catatan: Only used if align="char"!


charoff

pixels

Menspesifikasikan alignment offset terhadap huruf pertama

untuk mengaktifkan align

STF

Catatan: Only used if align="char"!


valign

top

Menspesifikasikan vertical text alignment dalam cells

STF

middle
bottom
baseline
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

55. Tag <th>


a. Definisi dan Pemakaian
Mendefinisikan sebuah table header cell dalam suatu table. Text diantara elemen th biasanya dengan huruf tebal.
b. Perbedaaan Antara HTML dan XHTML
Atribut "bgcolor", "height", "width", dan "nowrap" dari elemen th tidak dipakai lagi in HTML 4.01.
Atribut "bgcolor", "height", "width", dan "nowrap" dari elemen th tidak didukung in XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Chief Information Officer

Hasil

84

<table border = "1">


<tr>

Header 1 Header 2
Cell A
Cell B

<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

abbr

abbr_text

Menspesifikasikan suatu abbreviated version dari isi suatu cell

STF

align

left

Menspesifikasikan horizontal alignment dari cell content

STF

right
center
justify
char
axis

category_names

Mendefinisikan nama untuk suatu cell

STF

bgcolor

rgb(x,x,x)

Menspesifikasikan background color dari sebuah table cell.

TF

#xxxxxx

Tidak dipakai lagi. Pakai styles saja.

colorname
char

character

Menspesifikasikan character karakter mana utk mengaktifkan

STF

align text.
Catatan: Only used if align="char"!
charoff

pixels

Menspesifikasikan alignment offset thd karakter pertama utk

diaktifkan alignnya.

STF

Catatan: Only used if align="char"!


colspan

number

Mengindikasikan jumlah kolom dari cell yang dispan

STF

headers

header_cells'_id

Space terpisah dari daftar cell IDs yang menyediakan info

STF

header utk suatu cell. Atribut ini hanya utk browser text yang

Chief Information Officer

85

bisa merender info header utk cell yang telah ditentukan


height

pixels

Menspesifikasikan tinggi cell tabel. Tidak dipakai lagi. Pakai

TF

styles saja.
nowrap

nowrap

Dipakai atau tidaknya text wrapping otomatis di dalam cell.

TF

Tidak dipakai lagi. Pakai styles saja.


rowspan

number

Mengindikasikan jumlah baris dari cell yang di-span

STF

scope

col

Menspesifikasikan jika cell ini menyediakan info header untuk

STF

colgroup

baris akhir yang memuat baris (row), atau kolom akhir (col),

row

atau row group akhir yang memuatnya (rowgroup), atau column

rowgroup

group akhir yang memuatnya

top

Menspesifikasikan vertical alignment dari isi cell

STF

pixels

Menspesifikasikan lebar cell dari table. Tidak dipakai lagi.

TF

Pakai styles saja.

valign

middle
bottom
baseline
width

2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

56. Tag <tr>


a. Definisi dan Pemakaian
Mendefinisikan suatu baris dalam table.
b. Perbedaaan Antara HTML dan XHTML
Atribut "bgcolor" dari elemen tr tidak dipakai lagi dalam HTML 4.01.
Atribut "bgcolor" dari elemen tr tidak didukung dalam XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Hasil

<table border = "1">

Cell A

Chief Information Officer

Cell B
86

<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

right

Mendefinisikan text alignment dalam cells

STF

rgb(x,x,x)

Menspesifikasikan background color dari cell tabel. Tidak

TF

#xxxxxx

dipakai lagi. Pakai styles saja.

left
center
justify
char
bgcolor

colorname
char

Character

Menspesifikasikan karakter mana untuk mengaktifkan align text STF


Catatan: hanya dipakai jika align="char"!

charoff

pixels

Menspesifikasikan alignment offset pada karakter awal untuk

mengaktifkan align

STF

Catatan: hanya dipakai jika align="char"!


valign

top

Menspesifikasikan vertical text alignment dalam cells

STF

middle
bottom
baseline
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

Chief Information Officer

87

57. Tag <td>


a. Definisi dan Pemakaian
Mendefinisikan suatu cell dalam suatu table.
b. Perbedaaan Antara HTML dan XHTML
Atribut "bgcolor", "height", "width", dan "nowrap" dari elemen td tidak dipakai lagi dalam HTML 4.01.
Atribut "bgcolor", "height", "width", dan "nowrap" dari elemen td tidak didukung dalam XHTML 1.0 Strict DTD.
c. Contoh
Sumber

Hasil

<table border = "1">

Cell A

Cell B

<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

abbr

abbr_text

Menspesifikasikan suatu abbreviated version dari isi dalam

STF

suatu cell
align

left

Menspesifikasikan horizontal alignment dari isi cell

STF

right
center
justify
char
axis

category_names

Mendefinisikan nama untuk suatu cell

STF

bgcolor

rgb(x,x,x)

Menspesifikasikan background color dari table cell. Tidak

TF

#xxxxxx

dipakai lagi. Pakai styles saja.

colorname
char

character

Menspesifikasikan karakter mana untuk mengaktifkan align


text
Catatan: hanya dipakai jika align="char"!

Chief Information Officer

88

STF

charoff

pixels

Menspesifikasikan alignment offset pada karakter awal untuk

mengaktifkan align

STF

Catatan: hanya dipakai jika align="char"!


colspan

number

Mengindikasikan jumlah kolom dari cell yang di-span

STF

headers

header_cells'_id

Suatu list spasi terpisah dari ID cell yang menyediakan info

STF

header untuk cell. Atribut ini memungkinkan browser format


text untuk me-render info header untuk cell yang telah
ditentukan
height

pixels

Menspesifikasikan tinggi suatu cell table. Tidak dipakai lagi.

TF

Pakai styles saja.


nowrap

nowrap

Untuk mengaktifkan atau menonaktifkan automatic text

TF

wrapping di dalam cell. Tidak dipakai lagi. Pakai styles saja.


rowspan

number

Mengindikasikan jumlah baris pada cell yang di-span

STF

scope

col

Menspesifikasikan apakah cell ini menyediakan info header

STF

colgroup

untuk baris tersisa yang berisikan baris itu sendiri (row), atau

row

kolom tersisa (col), atau row group tersisa yang berisikan grup

rowgroup

baris itu sendiri (rowgroup), atau column group tersisa yang


berisikan dia sendiri

valign

top

Menspesifikasikan vertical text alignment dalam cells

STF

pixels

Menspesifikasikan lebar table cell. Tidak dipakai lagi. Pakai

TF

styles saja.

middle
bottom
baseline
width

2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

58. Tag <thead>


a. Definisi dan Pemakaian
Chief Information Officer

89

Mendefinisikan suatu table header.


Elemen-elemen thead, tfoot dan tbody memungkinkan dibuatnya suatu grup baris pada tabel. Ketika table dibuat,
mungkin kita ingin ada header baris, beberapa baris dengan data, dan sebuah baris yang berisikan angka total di
paling bawah. Pembagian ini memungkinkan browser dapat menggulung bodi sendiri terpisah dari header dan footer.
Jika yang di cetak adalah table yang panjang, informasi pada table header dan footer akan berulang pada setiap
halaman yang memuat data table.
b. Perbedaaan Antara HTML dan XHTML
Tidak ada
c. Tips dan Catatan
Catatan: Tag <thead> harus punya sebuah tag <tr> di dalamnya!
Catatan: Jika memakai elemen-elemen thead, tfoot dan tbody, setiap elemen harus dipakai. Elemen-elemen tersebut
akan tampil dengan urutan sbb: <thead>, <tfoot> dan <tbody>, maka browsers dapat me-render footer sebelum
menerima semua data. Semua tags harus dipakai diantara elemen table.
Catatan: Elemen-elemen <thead>,<tbody> dan <tfoot> elements are seldom usejarang dipakai, karena dukungan
browser kurang. Semoga di versi XHTML yang nanti sudah bisa. Jika memakai I.E. 5.0 atau yang lebih baru, dapat
dilihat sebuah contoh dalam XML tutorial.
d. Contoh
Sumber

Hasil

<table border = "1">

This text is in the THEAD


This text is in the TFOOT
This text is in the TBODY

<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>This text is in the TBODY</td>
</tr>
</tbody>
Chief Information Officer

90

</table>
d. Atribut-atribut
1. Atribut pilihan
DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

right

Mendefinisikan text alignment dalam cells

STF

Menspesifikasikan karakter mana untuk mengaktifkan align

STF

left
center
justify
char
char

character

text
Catatan: hanya dipakai jika align="char"!
charoff

pixels

Menspesifikasikan alignment offset pada karakter awal untuk STF

mengaktifkan align
Catatan: hanya dipakai jika align="char"!

valign

top

Menspesifikasikan vertical text alignment dalam cells

STF

middle
bottom
baseline
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

59. Tag <tbody>


a. Definisi dan Pemakaian
Mendefinisikan suatu body table.
Elemen-elemen thead, tfoot dan tbody memungkinkan dibuatnya suatu grup baris pada tabel. Ketika table dibuat,
mungkin kita ingin ada header baris, beberapa baris dengan data, dan sebuah baris yang berisikan angka total di
paling bawah. Pembagian ini memungkinkan browser dapat menggulung bodi sendiri terpisah dari header dan footer.
Chief Information Officer

91

Jika yang di cetak adalah table yang panjang, informasi pada table header dan footer akan berulang pada setiap
halaman yang memuat data table.
b. Perbedaaan Antara HTML dan XHTML
Tidak ada.
c. Tips dan Catatan
Catatan: Tag <tbody> harus punya sebuah tag <tr> di dalamnya!
Catatan: Jika memakai elemen-elemen thead, tfoot dan tbody, setiap elemen harus dipakai. Elemen-elemen tersebut
akan tampil dengan urutan sbb: <thead>, <tfoot> dan <tbody>, maka browsers dapat me-render footer sebelum
menerima semua data. Semua tags harus dipakai diantara elemen table.
Catatan: Elemen-elemen <thead>,<tbody> dan <tfoot> elements are seldom usejarang dipakai, karena dukungan
browser kurang. Semoga di versi XHTML yang nanti sudah bisa. Jika memakai I.E. 5.0 atau yang lebih baru, dapat
dilihat sebuah contoh dalam XML tutorial.

d. Contoh
Sumber

Hasil

<table border = "1">

This text is in the THEAD


This text is in the TFOOT
This text is in the TBODY

<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> This text is in the TBODY</td>
</tr>
</tbody>
</table>
e. Atribut-atribut
1. Atribut pilihan
Chief Information Officer

92

DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut

Nilai

Deskripsi

DTD

align

right

Mendefinisikan text alignment dalam cells

STF

Menspesifikasikan karakter mana untuk mengaktifkan align text

STF

left
center
justify
char
char

character

Catatan: hanya dipakai jika align="char"!


charoff

pixels

Menspesifikasikan alignment offset pada karakter awal untuk

mengaktifkan align

STF

Catatan: hanya dipakai jika align="char"!


valign

top

Menspesifikasikan vertical text alignment dalam cells

STF

middle
bottom
baseline
2. Atribut standar
id, class, title, style, dir, lang, xml:lang
3. Atribut event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup

60. Tag <col>


a. Defenisi dan Kegunaan
Mendefenisikan jumlah dari satu atau lebih kolom di dalam satua table. Hanya bisa digunakan di dalam table dan
colgroup.
b. Perbedaan antara HTML dan XHTML
Di dalam HTML tag <col> tidak mempunyai tag penutup.
Di dalam XHTML tag <col> harus mempunyai tag penutup.
c. Tip dan Catatan
Catatan: Elemen col adalah elemen kosong yang hanya berisi atribut element is an empty element that contains
Atributs only. To create columns, you must specify td elements within a tr element.
Chief Information Officer

93

Tip: Gunakan elemen ini jikan anda ingin menjelaskan perbedaan secara spesifik nilai atribut di dalam sebuah
colomn atau colgroup. Tanpa sebuah col elemen column akan mengikuti semua nilai atribut dari colgroup.
d. Contoh
Kode Sumber

Keluaran

This Example shows a colgroup that has three columns This Example shows a colgroup that has three
of different widths:

columns of different widths:

<table border="1">

1 2 3 4

<colgroup span="3">
<col width="20"></col>
<col width="50"></col>
<col width="80"></col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

e. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

align

right

Menjelaskan letak horizontal isi di dalam table dan kolom

STF

Menjelaskan karakter yang digunakan dalam tulisan

STF

left
center
justify
char
char

character

(digunakan dengan align="char")


charoff

pixels

Menjelaskan fungsi penutup dari karakter yang telah

digunakan

STF

span

number

Menjelasjan jumlah kolom <col> yang harus disediakan

valign

top

Menjelaskan letak vertical dari isi di dalam table dan kolom STF

STF

middle
bottom
baseline
width

Chief Information Officer

Menjelaskan lebar kolum.

94

STF

pixels

Catatan: tidak mempengaruhi pengaturan lebar pada

relative_length

<colgroup>

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

Chief Information Officer

95

61. Tag <colgroup>


a. Defenisi dan Kegunaan
Menjelaskan kelompok dari kolom pada table. Dengan elemen ini anda bisa mengelompokan kolom sesuai
format. Elemen ini hanya berfungsi di dalam tag <table>.
b. Perbedaan antara HTML dan XHTML
TIDAK ADA
c. Tip dan Catatan
Catatan: Elemen colgroup adalah elemen kosong hanya berisi atribut. Untuk membuat kolom anda harus
menjelaskan secara spesifik lemen td didalam elemen tr.
d. Contoh
Contoh ini membuat sebuah table dengan empat kolom, dengan tiga kolom pertama didalam satu colgroup, dan
sisanya didalam colgroup kedua :
Kode Sumber

Keluaran

<table border="1">

1 2 3 4

<colgroup span="3"
style="color:#FF0000;">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

e. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

align

right

Menjelaskan letak horizontal di dalam kelompok kolom

STF

Menjelaskan karakter yang digunakan dalam tulisan

STF

left
center
justify
char
char

character

(digunakan dengan align="char")

Chief Information Officer

96

charoff

span

pixels

Menjelaskan fungsi penutup dari karakter yang telah

digunakan

number

Menjelaskan jumlah kolom pada <colgroup> yang akan

STF

STF

digunakan.
valign

top

Menjelaskan letak vertical dari isi di dalam kelompok

middle

kolom

STF

bottom
baseline
width

%
pixels
relative_length

Menjelaskan lebar dari kelompok kolom


Catatan: atribut width tidak mempengaruhi pengaturan di dalam <col>!

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

K. Styles
62. Tag <style>
a. Defenisi dan Kegunaan
Menjelaskan gaya yang digunkan di dalam sebuah dokumen.
Elemen style diletakkan didalam tag <head>.
b. Perbedaan antara HTML dan XHTML
TIDAK AdA
c. Tip dan Catatan
Tip: untuk mengetahui lebih lanjut mengenai style sheets, kunjungi CSS Tutorial.
d. Contoh
Kode Sumber
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>

e. Atribut-atribut
1. Required Atributs
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.

Chief Information Officer

97

STF

Atribut

Nilai

Penjelasan

DTD

type

text/css

Menjelaskan tipe isi

STF

Atribut

Nilai

Penjelasan

DTD

media

screen

Menjelaskan media yang digunakan untuk informasi style STF

2. Atribut Pilihan

tty
tv
projection
handheld
print
braille
aural
all

3. Atribut Standar
title, dir, lang, xml:space

Chief Information Officer

98

63. Tag <div>


a. Defenisi dan Kegunaan
Tag <div> mendefenisikan sebuah bagian
b. Perbedaan antara HTML dan XHTML
Atribut "align" pada elemen div sudah digantikan di HTML 4.01.
Atribut "align" pada elemen div tidak didukun di XHTML 1.0 Strict DTD.
c. Tip dan Catatan
Catatan: biasanya digunkan pada baris baru dan setelah elemen div.
Tip: Gunakan tag <div> untuk mengelompokan suatu blok elemen.
d. Contoh
Kode Sumber

Keluaran

This is some text <div

This is some text

style="color:#FF0000;">
<h4>This is a header in a div section</h4>
<p>This is a paragraph in a div

This is a header in a div section


This is a paragraph in a div section

section</p>
</div>

e. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

align

left

Bagaimana meletakan tulisan didalam elemen div

TF

right
center
justify

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

Chief Information Officer

99

64. Tag <span>


a. Defenisi dan Kegunaan
Tag <span> tag is used to group inline-elements in a document.
b. Perbedaan antara HTML dan XHTML
NONE
c. Tip dan Catatan
Tip: gunakan tag <span> untuk menendai sebuah elemen
d. Contoh
Kode Sumber

Keluaran

<p>This is a paragraph <span

This is a paragraph This is a paragraph This is a para-

style="color:#0000FF;">This is a

graph

paragraph</span> This is a paragraph</p>

This is another paragraph

<p>
<span style="color:#00DD45;">
This is another paragraph
</span>
</p>

e. Atribut-atribut
1. Atribut Standar
id, class, title, style, dir, lang, xml:lang

L. Meta Info
65. Tag <head>
a. Defenisi dan Kegunaan
Elemen head bias berisikan informasi dari sebuah dokumen. "head information" tidak untuk ditampilkan. Didalam
bisa diikuti oleh tag : <base>, <link>, <meta>, <script>, <style>, and <title>.
b. Perbedaan antara HTML dan XHTML
TIDAK ADA
c. Tip dan Catatan
Selalu memberikan judul dari setiap dokumen

Chief Information Officer

100

d. Contoh
Kode Sumber
<html>
<head>
<title>Title of the document</title>
</head>
<body>
...
...
...
</body>
</html>

e. Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

profile

URL

A space separated list of URL's that contains meta data

STF

information about the page

2. Atribut Standar
dir, lang, xml:lang

Chief Information Officer

101

66. Tag <title>


a. Defenisi dan Kegunaan
Elemen ini mendefinisikan judul dari sebuah dokumen.
b. Perbedaan antara HTML dan XHTML
TIDAK ADA
c. Contoh
<html>
<head>
<title>XHTML Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>

d.

Atribut-atribut

1. Atribut Standar
id, class, dir, lang, style, xml:lang

Chief Information Officer

102

67. Tag <meta>ss


a. Defenisi dan Kegunaan
Elemen <meta> menampilkan informasi meta halaman anda, seperti Penjelasans dan kata kunci untuk mesin
pencari.
b. Perbedaan antara HTML dan XHTML
Di dalam HTML tag <meta> tidak mempunyai tag penutup.
Di dalam XHTML tag <meta> harus mempunyai tag penutup.
c. Tip dan Catatan
Catatan: Tag <meta> selalu diletakan di dalam elemen head.
d. Contohs
Mendefenisikan kata kunci pada mesin pencari:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />

Memberi Penjelasan dari halaman web anda:


<meta name="Penjelasan" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

Menjelaskan revisi terakhir halaman anda :


<meta name="revised" content="Hege Refsnes, 6/10/99" />

Merefresh wed anda setiap 5 detik:


<meta http-equiv="refresh" content="5" />

e. Atribut-atribut
1. Atribut yang dibutuhkan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

content

some_text

Defines meta information to be associated with http-equiv STF


or name

2. Atribut Pilihan
Atribut

Nilai

Penjelasan

DTD

http-equiv

content-type

Connects the content Atribut to an HTTP header

STF

expires
refresh
set-cookie

Chief Information Officer

103

name

author

Connects the content Atribut to a name

STF

Defines a format to be used to interpret the Nilai of the

STF

keywords
generator
revised
others
scheme

some_text

content Atribut

3. Atribut Standar
dir, lang, xml:lang

Chief Information Officer

104

68. Tag <base>


a. Defenisi dan Kegunaan
Elemen base menjelaskan secara spesifik URL untuk semua links di dalam sebuah halaman.
b. Perbedaan antara HTML dan XHTML
Di dalam HTML tag <base> tidak mempunyai tag penutup.
Di dalam XHTML tag <base> harus mempunyai tag penutup.
c. Tip dan Catatan
Catatan: tag <base> harus diletakkan pada elemen head.
d. Contoh
Misalkan alamat dari sebuah gambar adalah :
<img src="http://www.w3schools.com/images/smile.gif" />

Sekarang kita masukan tag <base> ,dengan spesifik URL untuk membuat links di dalam subuah halaman, di
dalam sesi head dari sebuah halaman:
<head>
<base href="http://www.w3schools.com/images/" />
</head>

Jika memasukan gambar kedalam sebuah halaman seperti Contoh di bawah, kita hanya menjelaskan secara spesifik
alamatnya, dan para browser akan melihat bahwa file dimaksud digunakan pada URL ,
"http://www.w3schools.com/images/smile.gif":
<img src="smile.gif" />

e.Atribut-atribut
1. Atribut yang dibutuhkan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.
Atribut

Nilai

Penjelasan

DTD

href

URL

Spesifik URL yang digunakan sebagai dasar URL untuk

STF

menyambungkan sebuah halaman

2. Atribut Pilihan
Atribut

Nilai

Penjelasan

DTD

target

_blank

Dimana untuk membuka semua links didalam satu halaman. Atribut

TF

_parent

ini akan terabaikan dengan menggunakan atribut tujuan di dalam

_self

setiap link.

_top

Chief Information Officer

3.

_blank semua links akan terbuka didalam windows baru

105

4.

_self semua links akan terbuka di dalam frame yang


sama dengan yang diklik

5.

_parent semua links akan terbuka didalam frame induk

6.

_top semua links akan terbuka dalam satu jendela

3. Atribut Standar and Events


TIDAK ADA
69. Tag <basefont>
a. Defenisi dan Kegunaan
Mendefenisikan Font dasar.
b. Perbedaan antara HTML dan XHTML
Elemen basefont sudah digantikan di HTML 4.01.
Elemen basefont tidak didukun di XHTML 1.0 Strict DTD.
c.

Atribut-atribut
1. Atribut Pilihan
DTD indicates in which DTD the Atribut is allowed. S=Strict, T=Transitional, and F=Frameset.

Atribut

Nilai

Penjelasan

DTD

color

rgb(x,x,x)

Spesifik warna tulisan.

TF

#xxxxxx
colorname
face

list_of_fontnames

Spesifik font yang digunakan

TF

size

default_text_size

Ukuran font

TF

(a number from 1 to 7)

2. Atribut Standar
id, class, title, style, dir, lang, xml:lang

M. Programming
70. Tag <applet>
a. Definisi dan Penggunaan
Mendefinisikan applet yang embedded
b. Perbedaan antara HTML dan XHTML

element applet tidak digunakan lagi (deprecated) di HTML 4.0.1

Chief Information Officer

106

element applet tidak didukung di XHTML 1.0 Strict DTD

c. Tips and Notes


Catatan: untuk memasukkan applet, gunakan element object jika dimungkinkan (karena tag <applet> tidak
didukung di XHTML 1.0 strict DTD)
d. Atribut-atribut
1. Required Attributes
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

height

pixels

Mendefinisikan tinggi applet

TF

width

pixels

Mendefinisikan lebar object

TF

2. Optional Attributes
Attribute

Value

Description

DTD

align

left

Mendefinisikan alignment text applet

TF

right
top
bottom
middle
baseline
texttop
absmiddle
absbottom
alt

text

Text alternatif yang akan ditampilkan jika browser mendukung TF


applet tapi tidak bisa menjalankan applet ini

archive

URL

Sebuah URL ke applet ketika disimpan di Java Archive atau

TF

file ZIP

code

URL

Sebuah URL yang menunjuk ke class applet

TF

codebase

URL

Mengindikasikan URL dasar dari applet jika kode atribut

TF

merupakan pilihan

Chief Information Officer

107

hspace

pixels

Mendefinisikan garis horizontal di sekitar applet

TF

name

unique_name

Mendefinisikan sebuah nama unik untuk applet (yang akan

TF

digunakan di script)

object

name

Mendefinisikan nama sumber yang terdiri dari representasi

TF

serial dari applet

title

text

Informasi tambahan yang akan ditampilkan di tooltip

TF

vspace

pixels

Mendefinisikan garis vertikal sekitar applet

TF

3. Standard Attributes
id, class, title, style, dir, lang, xml:lang
4. Event Attributes
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup

71. Tag <noscript>


a. Definisi dan Penggunaan
Element noscript digunakan untuk mendefinisikan alternatif isi (text) jika script TIDAK di eksekusi. Tag ini
digunakan oleh browser yang mengenali tag <script>, tapi tidak mendukung script didalamnya
b. Perbedaan antara HTML dan XHTML
Tidak ada
c. Tip dan Catatan
Catatan: Jika browser mendukung scripting, maka tag ini tidak akan menampilkan text di element noscript
Tip: Browser yang tidak mengenali tag <script> akan menampilkan isi tag sebagai text di dalam sebuah halaman.
Untuk mencegah hal ini, maka anda harus menyembunyikan script di tag komentar. Browser lama (browser yang
tidak mengenali tag <script>) akan mengacuhkan komentar dan tidak akan menuliskan isi tag ke dalam sebuah
halaman, sementara browser yang lebih baru biasanya akan mengenal bahwa script tersebut seharusnya di eksekusi,
Chief Information Officer

108

walaupun menggunakan tag komentar.


d. Examples
JavaScript:
<body>
...
...
<script type="text/javascript">
<!-document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
...
...
</body>
VBScript:
<body>
...
...
<script type="text/vbscript">
<!-document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
...
...
</body>
e. Atribut-atribut
1. Standard Attributes
id, class, title, style, dir, lang, xml:lang
2. Event Attributes
Tidak ada

Chief Information Officer

109

72. Tag <object>


a. Definisi dan penggunaan
Mendefinisikan object embedded. Gunakan element ini untuk menambah media ke halaman XHTML anda. Element
ini bisa digunakan untuk menspesifikasikan data dan parameter untuk object yang dimasukkan ke dalam dokumen
HTML, dan kode yang bisa digunakan untuk menampilkan/memanipulasi data tersebut.
b. Perbedaan antara HTML dan XHTML
- Tidak ada
c. Tip dan Catatan
Note: element object dapat muncul di dalam head atau element body. Text antara <object> dan </object> merupakan
text alternatif yang digunakan oleh browser yang tidak mendukung tag ini.
Tip: untuk gambar, gunakan <img> daripda menggunakan tag <object>
d. Contoh
Source

Output

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1"


width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
e. Atribut-atribut
1. Optional Attributes
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset
Attribute

Value

Description

DTD

align

left

Mendefinisikan alignment text sekitar object

TF

Sebuah ruang arsip URL. Arsip terdiri dari sumber yang

STF

right
top
bottom
archive

URL

berhubungan dengan object.


border

Chief Information Officer

pixels

Mendefinisikan batas sekitar object

110

TF

classid

class ID

Mendefinisikan sebuah nilai id class sebagai set di Window

STF

Registry atau sebuah URL.


codebase

URL

Mendefinisikan letak code sebuah object

STF

codetype

MIME type

Tipe media internet dari code yang diacu ke atribut classid

STF

data

URL

Mendefinisikan sebuah URL yang mengacu ke data object.

STF

declare

declare

Mendefinisikan bahwa object hanya bisa di deklarasikan, tidak STF


dibuat atau di instansiasi sampai diperlukan.

height

pixels

Mendefinisikan tinggi object

STF

hspace

pixels

Mendefinisikan garis horizontal di sekitar object

TF

name

unique_name

Mendefinisikan sebuag nama yang unik untuk object (yang

STF

digunakan di script)
standby

text

Mendefinisikan sebuag text untuk menampilkan ketika object

STF

sedang loading
type

MIME_type

Mendefinisikan tipe data MIME di atribut data

STF

usemap

URL

Menspesifikasikan sebuah URL client-side image map yang

STF

akan digunakan dnegan object.


vspace

pixels

Mendefinisikan garis vertikal disekitar object

TF

width

pixels

Mendefinisikan lebar dari object

STF

2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup

73. Tag <param>


a. Definisi dan Penggunaan
Element param bisa digunakan untuk mensetting run-time untuk sebuah object yang dimasukkan ke dalam dokumen
XHTML
b. Perbedaan antara HTML dan XHTML

Di HTML, tag <param> tidak memiliki tag akhir (end tag)

di XHTML, tag <param> harus menggunakan tag akhir (end tag)

Chief Information Officer

111

c. Contoh
Source

Output

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1"


width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
d.

Atribut-atribut
1. Required Attributes
DTD mengindikasikan dimana atribut DTD boleh digunakan. S=Strict, T=Transitional, dan F=Frameset

Attribute

Value

Description

DTD

name

unique_name

Mendefinisikan sebuah nama yang unik untuk parameter

STF

2. Optional Attributes
Attribute

Value

Description

DTD

type

MIME type

Menspesifikasikan tipe media internet untuk parameter

STF

value

value

Menspesifikasikan nilai dari parameter

STF

valuetype

data

Menspesifikasikan nilai tipe MIME

STF

ref
object
3. Standard Attributes
id

Chief Information Officer

112

Daftar Pustaka
1.

http://www.w3schools.com/tags/default.asp. 05 Oktober 2007

2.

http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml. 22 Oktober
2007

3.

http://www.codehelp.co.uk/html/deprecated.html. 23 Oktober 2007

Chief Information Officer

113