belajar html

(1)

Hyper Text Markup Language

Disusun oleh:

Kelompok 1

1. Sari Dewi Budiwati

(23207135)

2. Achmad Sahil Ansori

(23207041)

3. Armin

(23207042)

4. Iwan Sutedi

(23207116)

5. Muhammad Ridzal

(23207086)

6. Haryando Anil

(23207xxx)

Magister Chief Information Officer

Teknik Elektro

(2)

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

(3)

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

(4)

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

(5)

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

(6)

(7)

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

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”

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.

(8)

8. Ada beberapa tag yang tidak digunakan lagi (deprecated)

Deprecated Tag Pengganti

<basefont> font style sheets

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

<font> font style sheets <isindex> <form>

<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

(9)

11. Styles 12. Meta Info 13. Programming

Sedangkan penjelasan rinci akan tag-tag ini dapat dilihat di bab selanjutnya.

No Nama Tag

Atribut

Required Option Standar Event

Basic Tags

1.  - - -

-2. <!DOCTYPE> - - -

-3. <html> xmlns - dir, lang, xml:lang

-4. <body> - alink, background,

bgcolor, link, text, vlink

id, class, title, style,

dir, lang, xml:lang onload,onclick, ondblclick, onunload, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 5. <h1> - <h6> - align id, class, title, style,

dir, lang, xml:lang

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

6. <p> - align id, class, title, style,

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

7. <br> - - id, class, title, style

-8. <hr> - align, noshade, size,

width id, class, title, style, dir, lang, xml:lang onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Format Char

(10)

9. <b> - - id, class, title, style,

dir, lang onclick, ondblclick, 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,

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

12. <em> - - id, class, title, style,

13. <big> - - id, class, title, style,

14. <strong> - - id, class, title, style,

15. <small> - - id, class, title, style,

(11)

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

17. <sup> - - id, class, title, style,

dir, lang, xml:lang

18. <bdo> dir - id, class, title, style,

dir, lang, xml:lang

-19. <u> - - id, class, title, style,

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

20. <pre> - width id, class, title, style,

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

21. <code> - - id, class, title, style,

22. <tt> - - id, class, title, style,

23. <kbd> - - id, class, title, style,

dir, lang, xml:lang

onclick, ondblclick, onmousedown,

(12)

onmouseover, onmousemove, onmouseout, onkeypress,

onkeydown, onkeyup

24. <var> - - id, class, title, style,

25. <dfn> - - id, class, title, style,

26. <samp> - - id, class, title, style,

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

27. <acronym> - - id, class, title, style,

dir, lang, xml:lang

28. <abbr> - - id, class, title, style,

dir, lang, xml:lang

29. <address> - - id, class, title, style,

dir, lang, xml:lang

onmouseup, onmouseover,

(13)

onkeypress,

onkeydown, onkeyup

30. <blockquote> - cite id, class, title, style,

31. <center> - - id, class, title, style,

32. <q> - cite id, class, title, style,

33. <cite> - - id, class, title, style,

34. <ins> - cite, datetime id, class, title, style,

35. <del> - cite, datetime id, class, title, style,

36. <s> - - id, class, title, style,

dir, lang, xml:lang

(14)

37. <strike> - - id, class, title, style,

dir, lang, xml:lang

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

38. <a> charset, coords, href,

hreflang, name, rel, rev, shape , target, type

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

39. <link> - charset, href, hreflang,

media, rel, rev, target, type

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

40. <frame> - frameborder, londesc,

marginheight,

marginwidth, name, noresize, scrolling, src

id, class, title, style

-41. <frameset> - cols, rows id, class, title, style

-42. <noframes> - - id, class, title, style,

dir, lang, xml:lang

-43. <iframe> - align, frameborder,

height, longdesc, marginheight,

marginwidth, name, scrolling, src, width

(15)

name, target onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

45. <input> - accept, align, alt,

checked, disabled, maxlength, name, readonly, size, src, type, value,

dir, lang, xml:lang tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 46. <textarea> cols, rows disabled, name,

readonly

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 47. <button> - disabled, name, type,

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

48. <select> - disabled, multiple,

name, size

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

onfocus, onblur, onchange

49. <optgroup> label disabled id, class, title, style,

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

50. <option> - disabled, label,

selected, value id, class, title, style, dir, lang, xml:lang, tabindex

onmouseup, onmouseover,

(16)

onmousemove, onmouseout, onkeypress,

onkeydown, onkeyup

51. <label> - for id, class, title, style,

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

52. <fieldset> - - id, class, title, style,

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

53. <legend> - align id, class, title, style,

dir, lang, xml:lang

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

54. <ul> - compact, type id, class, title, style,

dir, lang, xml:lang

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 55. <ol> - compact, start, type id, class, title, style,

dir, lang, xml:lang

(17)

57. <dir> - compact id, class, title, style,

dir, lang, xml:lang

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

58. <dl> - - id, class, title, style,

dir, lang, xml:lang

59. <dt> - - id, class, title, style,

dir, lang, xml:lang

60. <dd> - - id, class, title, style,

dir, lang, xml:lang

61. <menu> - compact id, class, title, style,

dir, lang, xml:lang

onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Images

62. <img> alt, src align, border, height, hspace, ismap, longdesc, usemap,

lang, xml:lang onclick, ondblclick, onmousedown, onmouseup,

(18)

vspace, width onmouseover, onmousemove, onmouseout, onkeypress,

onkeydown, onkeyup

63. <map> id name class, title, style, dir,

lang, xml:lang tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur 64. <area> alt coords , href, nohref,

shape, target

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

65. <table> - align, bgcolor, border, cellpadding,

cellspacing, frame, rules, summary, width

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

66. <caption> - align id, class, title, style,

dir, lang, xml:lang

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 67. <tfoot> - align, charoff, char,

valign

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 68. <th> - abbr, align, axis, id, class, title, style, onclick, ondblclick,

(19)

height, nowrap, rowspan, scope, valign, width onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

69. <tr> - align, bgcolor, char,

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

70. <td> - abbr, align, axis,

bgcolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width

dir, lang, xml:lang onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 71. <thead> - align, char, charoff,

valign id, class, title, style, dir, lang, xml:lang onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 72. <tbody> - align, char, charoff,

valign id, class, title, style, dir, lang, xml:lang onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 73. <col> - align, char,charoff,span, valign, width

dir, lang, xml:lang onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 74. <colgroup> - align, char,charoff,span, valign, width

(20)

Styles

75. <style> type media title, dir, lang,

xml:space

-76. <div> - align id, class, title, style,

77. <span> - - id, class, title, style,

dir, lang, xml:lang onclick, ondblclick, 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, name,

scheme dir, lang, xml:lang

-81. <base> href target -

-82. <basefont> - color , face, size id, class, title, style, dir, lang, xml:lang

-Programming

83. <applet> height, width align, alt, archive, code, codebase, hspace, name, object, title, vspace

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

84. <noscript> - - id, class, title, style,

dir, lang, xml:lang -85. <object> - align, archive, border,

classid, codebase, codetype, data, declare, height, hspace, name, standby, type, usemap, vspace, width

accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,

(21)

86. <param> name type, value, valuetype id

-87. <script> type charset, defer,

(22)

(23)

-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>

<p>This is a regular paragraph</p> </body>

</html> 2. Tag <!DOCTYPE>

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"

(24)

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>

(25)

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

(26)

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

alink rgb(x,x,x)

#xxxxxx colorname

Menspesifikasikan warna dari link yang sedang aktif di dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan styles

TF

background file_name Sebuah gambar menggunakan latarbelakang (background). Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan styles.

TF

bgcolor rgb(x,x,x)

#xxxxxx colorname

Warna latar belakang (background) yang digunakan di dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan sytles.

TF

link rgb(x,x,x)

#xxxxxx colorname

Menspesifikasikan warna semua link di dalam dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan sytles.

TF

text rgb(x,x,x)

#xxxxxx colorname

Menspesifikasikan warna text di dalam dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan sytles.

TF

vlink rgb(x,x,x)

#xxxxxx colorname

Menspesifikasikan warna link yang dikunjungi di dalam dokumen. Sudah tidak digunakan lagi (deprecated). Sekarang menggunakan sytle..

TF

2. Standard Attributes

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

(27)

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> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6>

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 Penjelasan DTD

align left

center right justify

spesifik letak tulisan TF

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.

(28)

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

Align left

right center justify

spesifik letak barisan di dalam paragraph. TF

2 Atribut Standar

(29)

6.Tag <br>

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

This text contains<br />a line break This text contains a line break e. Atribut-atribut

1. Atribut Standar id, class, title, style

(30)

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

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

This is some text d. Atribut-atribut

1. Atribut Pilihan

align center

left right

Spesifik letak garis horizontal rule TF

noshade noshade Jika di set “true” garis akan berubah menjadi tanpa bayanyan, JIka di set “false”garis akan menjadi dua warna “beralur” instead

TF

size pixels

%

Spesifik ketebalan garis (ketinggian) garis horizontal. TF

width pixels

%

Spesifik panjang garis horizontal TF

2. Atribut Standar

(31)

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 Luaran <tt>Teletype text</tt><br /> <i>Italic text</i><br /> <b>Bold text</b><br /> <big>Big text</big><br /> <small>Small text</small><br /> Teletype text Italic text Bold text Big text 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>

<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.

(32)

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!

</font>

<font size="1" color="blue"> This is some text!

</font>

<font face="arial" color="red"> This is some text!

</font>

This is some text!

This is some text!This is some text!

e. Atribut-atribut

1. Atribut Pilihan/Optional

DTD menandakan bahwa atribut dibawah telah disediakan. S=Strict, T=Transitional, and F=Frameset.

Color rgb(x,x,x)

#xxxxxx colorname

Menentukan warna dari teks dalam elemen font.Kedaluarsa. gunakan styles sebagai gantinya

TF

face list_of_fontnames Menentukan muka dari teks dalam elemen font.Kedaluarsa. gunakan styles sebagai gantinya

TF

size A number from 1 to 7.

If basefont is specified you can specify a number from -6 to 6

Menentukan ukuran dari teks dalam elemen font.Kedaluarsa. gunakan styles sebagai gantinya

TF

2. Atribut Standar

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.

(33)

<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 /> <strong>Strong text</strong><br /> <dfn>Definition term</dfn><br /> <code>Computer code text</code><br />

<samp>Sample computer code text</samp><br /> <kbd>Keyboard text</kbd><br /> <var>Variable</var><br /> <cite>Citation</cite> Emphasized text Strong text Definition term

Computer code text

Sample computer code text

Keyboard text

Variable Citation d. Atribut-atribut

1. Atribut Standar

2. Atribut Event

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

(34)

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

This text contains <sup>superscript</sup>

This text contains subscript This text contains superscript

d. Atribut-atribut 1. Atribut Standar

2. Atribut Event

13. Tag <bdo>

Elemen bdo dapat mengesampingkan perintah teks default b. Perbedaan penggunaan Tag diatas antara HTML dan XHTML

Tidak ada c. Contoh

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

Here is some Hebrew text

d. Atribut-atribut

1. Atribut yang diperlukan

dir ltr

rtl

Menentukan arah teks STF

2. Atribut Standar

(35)

14. Tag <u>

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

A new version is <u>now available!</u> A new version is now available! e. Atribut-atribut

1. Atribut Standar

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

(36)

d. Contoh

<pre> This text is in a fixed-pitch font, and it preserves both spaces and line breaks

</pre>

This text is in a fixed-pitch

font, and it preserves both spaces and line breaks

e. Atribut-atribut

1. Atribut Pilihan/Optional

width number Menentukan angka maksimum karakter per baris (biasanya

40, 80, or 132)

TF

2. Atribut Standar

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

3. Atribut Event

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

(37)

7. Atribut Keyboard

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

onload script Script yang dijalankan ketika mengeload dokumen

onunload script Script yang dijalankan ketika mengunload dokumen

Event Elemen Form

Hanya valid pada elemen form.

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

(38)

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>

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 Output

<acronym title="World Wide

Web">WWW</acronym> WWW

e. Atribut-atribut 1. Atribut Standard

2. Atribut Event

(39)

17. Tag <abbr>

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).

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 cetera">etc.</abbr> etc. e. Atribut-atribut 1. Atribut Standar

2. Atribut Event

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.

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

(40)

Kode Sumber Output <address> Donald Duck<br /> Box 555<br /> Disneyland </address> Donald Duck Box 555 Disneyland e. Atribut-atribut 1. Atribut Standar

2. Atribut Event

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:

<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:

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

Here comes 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

(41)

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

is a long quotation

e. Atribut-atribut 1. Atribut Pilihan

DTD menyatakan dimana atribut DTD dibolehkan. S=Strict, T=Transitional, and F=Frameset.

cite URL URL dari quote, jika diambil dari web STF

2. Atribut Standar

3. Atribut Event

20. Tag <center>

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

2. Atribut Event

(42)

21. Tag <q>

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

Here comes a short quotation: <q>here is a short quotation here is a short quotation</q>

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

e. Atribut-atribut 1. Atribut Pilihan

DTD menandai dimana atribut DTD diperbolehkan. S=Strict, T=Transitional, and F=Frameset.

Cite citation Menyatakan catatan dari sebuah kutipan STF

2. Atribut Standar

3. Atribut Event

22. Tag <ins>

Berguna untuk menyatakan teks yang disisipkan. b. Perbedaan Antara HTML dan XHTML

(43)

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.

Cite URL Sebuyah URL dari dokumen yang lain yang menjelaskan

alasan teks tersebut disisipkan.

STF

Datetime YYYYMMDD Menyatakan tanggal dan waktu saat teks disisipkan STF

2. Atribut Standar

3. Atribut Event

23. Tag <del>

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

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

(44)

Cite URL Menyatakan URL dari dokumen lain yang menjelaskan alasan

teks tersebut disisipkan

STF

Datetime YYYYMMDD Menyatakan tanggal dan waktu saat teks dihapus STF

2. Atribut Standar

3. Atribut Event

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

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

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

A new version is not yet available. now available! A new version is not yet available. now available!

e. Atribut-atribut 1. Atrinbut Standar

2. Atribut Event

(45)

E. Links

25. Tag <a>

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> </p> <p>

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

Linking to W3Schools: W3Schools

Opening W3Schools a new browser window: W3Schools

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

coords="left,top,right,bottom" if shape="circ" then

coords="centerx,centery,radius" if shape="poly" then

coords="x1,y1,x2,y2,..,xn,yn"

Menentukan koordinat yang tepat dari atribut shape untuk mendefinisikan bagian image dari sebuah image maps

(46)

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 untuk membuat sebuah bookmark pada dokumen.

Pada versi XHTML yang akan datang atribut name ini akan diganti dengan atribut id.

STF rel alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark

Menentukan hubungan dokumen yang sedang dibuka dengan target URL

STF rev alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help

Menentukan hubungan dokumen yang sedang dibuka dengan target URL

(47)

rectangle circ circle poly polygon

tag area. Digunakan dengan atribut coords

target _blank

_parent _self _top

Kemana target URL akan dibuka.

5. _blank – Target URL akan dibuka pada window / jendela yang baru

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

TF

type mime_type Menentukan type MIME (Multipurpose Internet Mail Extensions) dari target URL

STF

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>

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

(48)

<head>

e. Atribut-atribut 1. Atribut pilihan

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

charset charset Menentukan karakter encoding dari target URL. Defaultnya adalah “ISO-8859-1”

STF

href URL Target URL dari taut STF

hreflang language_code Menentukan bahasa dari target URL STF

media screen tty tv projection handheld print braille aural all

Menentukan pada device apa dokumen tersebut akan ditampilkan

screen Untuk monitor yang non-pages

tty Untuk media yang menggunakan fixed-pitch character grid (seperti teletypes, terminals, atau devices yang memiliki kemampuan layar yang terbatas)

tv Untuk peralatan type TV (resolusi rendah, scrollability yang terbatas)

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 Untuk speech synthesizers all Untuk seluruh peralatan

STF rel alternate appendix bookmark chapter contents copyright glossary help home index next

Menentukan hubungan antara dokumen yang sedang dibuka dengan dokumen target.

(49)

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

Menentukan hubungan antara dokumen yang sedang dibuka dengan dokumen target.

STF

target _blank

_self _top _parent

Kemana target URL akan dibuka.

9. _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

TF

type MIME_type like:

text/css text/javascript image/gif

Menentukan type MIME (Multipurpose Internet Mail Extensions) dari target URL

STF

2. Atribut Standard

3. Atribut Event

(50)

F. Frames

27. Tag <frame>

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

frameborder 0

1

Menentukan apakah frame tersebut akan memakai border ataukah tidak

(51)

digunakan untuk browser yang tidak mendukung frames

marginheight pixels Menentukan margin atas dan bawah frame F

marginwidth pixels Menentukan margin kiri dan kanan frame F

name frame_name Menentukan nama untuk frame (untuk digunakan didalam

scripts)

F

noresize noresize Apabila di set to noresize maka user tidak bisa merubah ukuran dari frame

F

scrolling yes

no auto

Menentukan scroll bars F

src URL Menentukan URL dari file untuk di tampilkan pada frame F

2. Atribut standard

Hanya bisa pada XHTML 1.0 dengan type DTD Frameset id, class, title, style

28. Tag <frameset>

Tag <Frameset> digunakan untuk membagi window kedalam beberapa frame. Masing-masing 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

(52)

<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

cols pixels

% *

Menentukan ukuran colom pada frameset F

rows pixels

% *

Menentukan ukuran row pada frameset F

2. Atribut standard

Hanya bisa pada XHTML 1.0 dengan type DTD Frameset

29. Tag <iframe>

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.

(53)

Kode HTML Keluaran <iframe src ="/default.asp" width="100%"> </iframe> d. Atribut-atribut 1. Atribut pilihan

align left

right top middle bottom

Menentukan tata letak dari teks yang ada pada iframe TF

frameborder 1

0

Menentukan apakah frame tersebut akan menggunakan border ataukah tidak

TF

height pixels

%

Menentukan ukuran tinggi dari iframe TF

longdesc URL Sebuah URL ke deskripsi yang panjang dari isi frame. Biasa digunakan untuk browser yang tidak mendukung frames

TF

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

scripts)

TF

scrolling yes

no auto

Menentukan scroll bars TF

src URL Menentukan URL dari file untuk di tampilkan pada frame TF

width pixels

%

Menentukan lebar dari iframe TF

2. Atribut standard

30. Tag <noframes>

(54)

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>

c. Tips dan catatan

Catatan: Jika browser yang dipakai mendukung frames, maka tidak akan menampilkan teks yang ada pada elemen

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

<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