Professional Documents
Culture Documents
Disusun oleh:
Kelompok 1
1.
2.
3.
4.
5.
6.
(23207135)
(23207041)
(23207042)
(23207116)
(23207086)
(23207xxx)
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
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.
bisa
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.
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.
8.
Pengganti
<applet>
<object>
<basefont>
<center>
<dir>
<ul>
<font>
<isindex>
<form>
<menu>
<ul>
<s>
<strike>
<u>
2.
3.
4.
Basic Tags
2.
Char Format
3.
Output
4.
Blocks
5.
Links
6.
Frames
7.
Input
8.
Lists
9.
Images
10. Tables
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
4.
<body>
alink,
bgcolor,
vlink
5.
<h1> - <h6>
align
6.
<p>
align
7.
<br>
8.
<hr>
Format Char
9.
<b>
10.
<font>
color,face,size
11.
<i>
12.
<em>
13.
<big>
14.
<strong>
15.
<small>
16.
<sub>
10
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
17.
<sup>
18.
<bdo>
dir
19.
<u>
20.
<pre>
width
21.
<code>
22.
<tt>
23.
<kbd>
Output
11
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
24.
<var>
25.
<dfn>
26.
<samp>
27.
<acronym>
28.
<abbr>
29.
<address>
Blocks
12
onkeypress,
onkeydown, onkeyup
30.
<blockquote>
cite
31.
<center>
32.
<q>
cite
33.
<cite>
34.
<ins>
cite, datetime
35.
<del>
cite, datetime
36.
<s>
13
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
37.
<strike>
Links
38.
<a>
39.
<link>
40.
<frame>
41.
<frameset>
cols, rows
42.
<noframes>
43.
<iframe>
align,
frameborder, id, class, title, style
height,
longdesc,
marginheight,
marginwidth,
name,
scrolling, src, width
<form>
action
Frames
Input
44.
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>
48.
<select>
disabled,
name, size
49.
<optgroup>
label
disabled
50.
<option>
disabled,
selected, value
15
onblur,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
51.
<label>
for
52.
<fieldset>
53.
<legend>
align
54.
<ul>
compact, type
55.
<ol>
56.
<li>
type, value
Lists
16
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
57.
<dir>
compact
58.
<dl>
59.
<dt>
60.
<dd>
61.
<menu>
compact
<img>
alt, src
Images
62.
17
vspace, width
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
63.
<map>
id
name
64.
<area>
alt
65.
<table>
66.
<caption>
align
67.
<tfoot>
68.
<th>
abbr,
align,
axis, id, class, title, style, onclick,
ondblclick,
bgcolor, char, charoff, dir, lang, xml:lang
onmousedown,
colspan,
headers,
onmouseup,
Tables
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
18
height,
nowrap,
rowspan,
scope,
valign, width
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
69.
<tr>
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>
72.
<tbody>
73.
<col>
align,
char,charoff,span,
valign, width
align,
char,charoff,span,
valign, width
74.
<colgroup>
19
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
Styles
75.
<style>
type
media
title,
dir,
xml:space
lang, -
76.
<div>
align
77.
<span>
Meta Info
78.
<head>
profile
79.
<title>
80.
<meta>
content
http-equiv,
scheme
81.
<base>
href
target
82.
<basefont>
Programming
83.
<applet>
height, width
84.
<noscript>
85.
<object>
accesskey,
tabindex,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
20
accesskey,
tabindex,
onclick,
ondblclick,
onmousedown,
onmouseup,
onmouseover,
onmousemove,
onmouseout,
onkeypress,
onkeydown, onkeyup
86.
<param>
name
87.
<script>
type
charset,
language, src
21
id
defer, xml:space
22
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
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
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)
TF
#xxxxxx
colorname
menggunakan styles
file_name
background
TF
link
text
rgb(x,x,x)
TF
#xxxxxx
colorname
menggunakan sytles.
rgb(x,x,x)
#xxxxxx
colorname
menggunakan sytles.
rgb(x,x,x)
#xxxxxx
TF
colorname
vlink
rgb(x,x,x)
#xxxxxx
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
27c. Contoh
Kode Sumber
Keluaran
This is header 1
This is header 2
This is header 3
This is header 4
This is header 5
This is header 6
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 tidak didukung di XHTML 1.0 Strict DTD.
c. Contoh
27
DTD
TF
Kode Sumber
Kelauran
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
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
e. Atribut-atribut
1. Atribut Standar
id, class, title, style
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
Nilai
Penjelasan
DTD
align
center
TF
TF
left
right
noshade
noshade
pixels
TF
TF
%
width
pixels
%
2. Atribut Standar
id, class, title, style, dir, lang, xml:lang
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>
<i>
<b>
<big>
<small>
Luaran
Teletype text
Italic text
Bold text
Big text
Small text
d. Atribut-atribut
1.
Atribut Standar
2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown onkeyup
31
Luaran
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)
TF
#xxxxxx
colorname
face
list_of_fontnames
TF
TF
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.
32
<em>
<strong>
<dfn>
<code>
<samp>
<kbd>
<var>
Menentukan variabel
<cite>
Menentukan kutipan,petikan,penyebutan
c. Contoh
Sumber
Luaran
Emphasized text
Strong text
Definition term
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
Tidak ada
c. Contoh
33
Sumber
Luaran
subscript
superscript
<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
Luaran
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
STF
rtl
2. Atribut Standar
id, class, title, style, dir, lang, xml:lang
34
Luaran
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
35
d. Contoh
Sumber
Luaran
<pre>
This text is
This text is
in a fixed-pitch
in a fixed-pitch
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
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
Nilai
Penjelasan
class
class_rule or style_rule
id
id_name
style
style_definition
title
tooltip_text
6. Atribut bahasa
Tidak valid pada elemen base, br, frame, frameset, hr, iframe, param, dan script
Atribut
Nilai
Penjelasan
dir
ltr | rtl
lang
language_code
36
7. Atribut Keyboard
Atribut
Nilai
Penjelasan
accesskey
character
tabindex
number
Nilai
Penjelasan
onload
script
onunload
script
Nilai
Penjelasan
onchange
script
onsubmit
script
onreset
script
onselect
script
onblur
script
onfocus
script
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
onkeypress
script
onkeyup
script
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
ondblclick
script
onmousedown
script
onmousemove
script
onmouseover
script
onmouseout
script
onmouseup
script
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
38
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
39
Kode Sumber
Output
<address>
Donald Duck
Box 555
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
Output
40
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
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
2. Atribut Event
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
41
Output
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
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
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 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
STF
YYYYMMDD
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
Output
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
STF
YYYYMMDD
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
Output
now available!
<br />
<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
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:
<a href="http://www.w3schools.com">
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
STF
coords
if shape="rect" then
STF
coords="left,top,right,bottom"
if shape="circ" then
maps
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"
45
href
URL
STF
hreflang
language_code
STF
name
section_name
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
rev
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
shape
rect
46
rectangle
circ
circle
poly
polygon
target
_blank
_parent
5.
_self
TF
_top
6.
7.
8.
type
mime_type
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
d. Contoh
How to use the <link> tag to link to an external style sheet:
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
href
URL
STF
hreflang
language_code
STF
media
screen
STF
tty
ditampilkan
tv
projection
screen
tty
handheld
print
braille
tv
aural
all
rel
alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
48
STF
start
stylesheet
subsection
rev
alternate
appendix
STF
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
target
_blank
_self
_top
_parent
TF
MIME_type like:
text/css
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
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
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
ataukah tidak
URL
longdesc
50
pixels
marginwidth
pixels
name
frame_name
scripts)
noresize
noresize
yes
no
auto
src
URL
2. Atribut standard
Hanya bisa pada XHTML 1.0 dengan type DTD Frameset
id, class, title, style
Keluaran
51
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
%
*
rows
pixels
%
*
2. Atribut standard
Hanya bisa pada XHTML 1.0 dengan type DTD Frameset
id, class, title, style
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
TF
TF
pixels
right
top
middle
bottom
frameborder
height
TF
%
longdesc
URL
marginheight
pixels
TF
marginwidth
pixels
TF
name
frame_name
TF
scripts)
scrolling
yes
TF
no
auto
src
URL
TF
width
pixels
TF
2. Atribut standard
id, class, title, style
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"
/>
<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
STF
2. Atribut pilihan
Atribut
Value
Deskripsi
DTD
accept
list of contenttypes
STF
charset_list
55
STF
enctype
mimetype
STF
method
get
post
name
form_name
TF
target
_blank
TF
_self
_parent
_top
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
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:
<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
STF
left
right
top
TF
texttop
middle
absmiddle
baseline
bottom
absbottom
alt
text
57
STF
checked
checked
STF
disabled
STF
number
STF
dimasukkan
Catatan: hanya digunakan pada type="text"
name
field_name
STF
readonly
STF
number_of_char
STF
URL
STF
button
checkbox
adalah text
file
hidden
STF
image
password
radio
reset
submit
text
value
value
58
STF
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
Keluaran
d. atribut=atribut
1.
DTD mengindikasikan pada DTD mana atribut tersebut bisa dipakai. S=strict, T=Transitional, dan
F=frameset
Atribut
Value
Deskripsi
DTD
59
cols
number
rows
number
STF
area
2. Atribut pilihan
Atribut
Value
Deskripsi
DTD
disabled
disabled
STF
name
name_of_textarea
STF
readonly
readonly
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
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
STF
type
button
STF
reset
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
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
61
STF
name
unique_name
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
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
STF
62
2. Atribut pilihan
Atribut
Value
Deskripsi
DTD
disabled
disabled
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
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
Deskripsi
DTD
63
disabled
disabled
STF
text
selected
selected
STF
text
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
Hasil
Pria
Wanita
<label for="pria">Pria</label>
<br />
<input type="radio" name="sex" id="wanita" />
<label for="wanita">Wanita</label>
</form>
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
STF
Hasil
<fieldset>
Height Weight
65
onkeydown, onkeyup
Hasil
<fieldset>
<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
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
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
TF
style
type
disc
square
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
67
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
TF
style
start
start_on_number
TF
I
i
1
2. Standard Attributes
id, class, title, style, dir, lang, xml:lang
3. Event Attributes
68
TF
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>
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
TF
I
i
1
disc
square
circle
value
number_of_list_item
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
70
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
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
71
Tidak ada
c. Contoh
Source
Output
<dl>
Coffee
<dt>Coffee</dt>
Milk
White cold drink
Output
<dl>
Coffee
<dt>Coffee</dt>
Milk
White cold drink
</dl>
d. Atribut-atribut
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
Output
<dl>
Coffee
<dt>Coffee</dt>
Milk
White cold drink
73
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
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
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
Nilai
Deskripsi
DTD
alt
text
STF
src
URL
STF
Atribut
Nilai
Deskripsi
DTD
align
top
TF
bottom
2. Atribut pilihan
middle
left
right
border
pixels
TF
pixels
75
STF
hspace
pixels
TF
URL
Mendefinisikan gambar sebagai suatu image map dari sisi server STF
longdesc
URL
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
TF
pixels
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
Hasil
76
DTD mengindikasikan DTD dimana atribut diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut
Nilai
Deskripsi
DTD
id
unique_name
STF
2. Atribut pilihan
Atribut
Nilai
Deskripsi
DTD
name
unique_name
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
77
Hasil
78
DTD mengindikasikan dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, dan F=Frameset.
Atribut Nilai
Deskripsi
DTD
alt
STF
text
2. Atribut pilihan
Atribut
Nilai
Deskripsi
DTD
coords
if shape="rect" then
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
STF
nohref
true
STF
STF
TF
false
shape
rect
rectangle
circ
circle
poly
polygon
target
_blank
_parent
_self
_top
3. Atribut standar
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
4. Atribut event
79
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
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
TF
center
right
bgcolor
rgb(x,x,x)
#xxxxxx
colorname
border
pixels
80
STF
border!
cellpadding
pixels
STF
STF
void
STF
above
dapat terlihat
%
cellspacing
pixels
%
frame
below
hsides
lhs
rhs
vsides
box
border
rules
Tidak ada
groups
rows
cols
STF
all
summary
text
STF
speech-synthesizing/non-visual
width
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
81
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
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
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
<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
STF
STF
left
center
justify
char
char
character
pixels
STF
top
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
Hasil
84
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
STF
align
left
STF
right
center
justify
char
axis
category_names
STF
bgcolor
rgb(x,x,x)
TF
#xxxxxx
colorname
char
character
STF
align text.
Catatan: Only used if align="char"!
charoff
pixels
diaktifkan alignnya.
STF
number
STF
headers
header_cells'_id
STF
header utk suatu cell. Atribut ini hanya utk browser text yang
85
pixels
TF
styles saja.
nowrap
nowrap
TF
number
STF
scope
col
STF
colgroup
baris akhir yang memuat baris (row), atau kolom akhir (col),
row
rowgroup
top
STF
pixels
TF
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
Hasil
Cell A
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
STF
rgb(x,x,x)
TF
#xxxxxx
left
center
justify
char
bgcolor
colorname
char
Character
charoff
pixels
mengaktifkan align
STF
top
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
87
Hasil
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
STF
suatu cell
align
left
STF
right
center
justify
char
axis
category_names
STF
bgcolor
rgb(x,x,x)
TF
#xxxxxx
colorname
char
character
88
STF
charoff
pixels
mengaktifkan align
STF
number
STF
headers
header_cells'_id
STF
pixels
TF
nowrap
TF
number
STF
scope
col
STF
colgroup
untuk baris tersisa yang berisikan baris itu sendiri (row), atau
row
kolom tersisa (col), atau row group tersisa yang berisikan grup
rowgroup
valign
top
STF
pixels
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
89
Hasil
<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
STF
STF
left
center
justify
char
char
character
text
Catatan: hanya dipakai jika align="char"!
charoff
pixels
mengaktifkan align
Catatan: hanya dipakai jika align="char"!
valign
top
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
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
<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
STF
STF
left
center
justify
char
char
character
pixels
mengaktifkan align
STF
top
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
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:
<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
STF
STF
left
center
justify
char
char
character
pixels
digunakan
STF
span
number
valign
top
Menjelaskan letak vertical dari isi di dalam table dan kolom STF
STF
middle
bottom
baseline
width
94
STF
pixels
relative_length
<colgroup>
2. Atribut Standar
id, class, title, style, dir, lang, xml:lang
95
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
STF
STF
left
center
justify
char
char
character
96
charoff
span
pixels
digunakan
number
STF
STF
digunakan.
valign
top
middle
kolom
STF
bottom
baseline
width
%
pixels
relative_length
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.
97
STF
Atribut
Nilai
Penjelasan
DTD
type
text/css
STF
Atribut
Nilai
Penjelasan
DTD
media
screen
2. Atribut Pilihan
tty
tv
projection
handheld
print
braille
aural
all
3. Atribut Standar
title, dir, lang, xml:space
98
Keluaran
style="color:#FF0000;">
<h4>This is a header in a div section</h4>
<p>This is a paragraph in a div
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
TF
right
center
justify
2. Atribut Standar
id, class, title, style, dir, lang, xml:lang
99
Keluaran
style="color:#0000FF;">This is a
graph
<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
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
STF
2. Atribut Standar
dir, lang, xml:lang
101
d.
Atribut-atribut
1. Atribut Standar
id, class, dir, lang, style, xml:lang
102
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
2. Atribut Pilihan
Atribut
Nilai
Penjelasan
DTD
http-equiv
content-type
STF
expires
refresh
set-cookie
103
name
author
STF
STF
keywords
generator
revised
others
scheme
some_text
content Atribut
3. Atribut Standar
dir, lang, xml:lang
104
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
STF
2. Atribut Pilihan
Atribut
Nilai
Penjelasan
DTD
target
_blank
TF
_parent
_self
setiap link.
_top
3.
105
4.
5.
6.
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)
TF
#xxxxxx
colorname
face
list_of_fontnames
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
106
Value
Description
DTD
height
pixels
TF
width
pixels
TF
2. Optional Attributes
Attribute
Value
Description
DTD
align
left
TF
right
top
bottom
middle
baseline
texttop
absmiddle
absbottom
alt
text
archive
URL
TF
file ZIP
code
URL
TF
codebase
URL
TF
merupakan pilihan
107
hspace
pixels
TF
name
unique_name
TF
digunakan di script)
object
name
TF
title
text
TF
vspace
pixels
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
108
109
Output
Value
Description
DTD
align
left
TF
STF
right
top
bottom
archive
URL
pixels
110
TF
classid
class ID
STF
URL
STF
codetype
MIME type
STF
data
URL
STF
declare
declare
height
pixels
STF
hspace
pixels
TF
name
unique_name
STF
digunakan di script)
standby
text
STF
sedang loading
type
MIME_type
STF
usemap
URL
STF
pixels
TF
width
pixels
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
111
c. Contoh
Source
Output
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
STF
2. Optional Attributes
Attribute
Value
Description
DTD
type
MIME type
STF
value
value
STF
valuetype
data
STF
ref
object
3. Standard Attributes
id
112
Daftar Pustaka
1.
2.
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml. 22 Oktober
2007
3.
113