Kumpulan Kode HTML 4.01

JENIS-JENIS DOCTYPE
HTML 5
<!DOCTYPE html>
Note: HTML5 tidak memerlukan referensi untuk DTD.
HTML 4.01 Strict

DTD ini mencakup semua elemen HTML dan atributnya, tapi tidak termasuk yang telah dikurangi
(deprecated) seperti font dan framesets tidak diperbolehkan.
Contoh Sintaks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
DTD ini mencakup semua elemen HTML dan atributnya, termasuk yang telah dikurangi (deprecated)
seperti font. Tetapi framesets tidak diperbolehkan.
Contoh Sintaks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

DTD ini sama dengan HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.
Contoh Sintaks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict

DTD ini mencakup semua elemen HTML dan atributnya, tapi tidak termasuk yang telah dikurangi
(deprecated) seperti font dan framesets tidak diperbolehkan. Markup juga harus ditulis sebagai wellformed XML.
Contoh Sintaks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional

DTD ini mencakup semua elemen HTML dan atributnya, termasuk yang telah dikurangi (deprecated)
seperti font. Tetapi framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed
XML.
Contoh Sintaks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

DTD ini sama dengan XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.
Contoh Sintaks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
DTD ini sama dengan XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul
(misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).
Contoh Sintaks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Note: - Deklarasi <!DOCTYPE> berfungsi untuk memberi tahu browser mengenai versi HTML apa
yang digunakan dalam dokumen HTML.
- Gunakan W3C's Validator untuk memvalidasi penulisan dokumen HTML / XHTML.
<html>
<head>
<title>...............</title>
</head>
<body>
...............
...............
...............
</body>
</html>
<html>
<head>
<title>
</title>
STYLESHEET EKSTERNAL
<link rel=stylesheet type=text/css href=contoh1.css>
STYLESHEET INTERNAL
<style type=text/css>
hr {color: red;}
</style>
STYLESHEET INLINE
<p style=font-size: 11pt;>
Note: Diletakkan di dalam tag <body>
Note: Elemen link digunakan untuk mendefinisikan relasi antara dua dokumen yang terhubung.
<base target="_blank | _self | _parent | _top">
Note: - Value _self mempunyai efek default.
- Value _parent dan _top hanya bekerja pada frame.
<meta http-equiv="refresh" content="30">

Note: Digunakan untuk merefresh dokumen setiap 30 detik.
<meta http-equiv="refresh" content=5 ; url=
>
Note: Digunakan untuk mengalihkan seorang pemakai secara otomatis apabila alamat telah berubah.
<meta name="keywords" content=HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript>
Note: Berfungsi menentukan kata kunci untuk mesin pencari.
<meta name="description" content="free web tutorials on HTML, CSS, XML and XHTML">
Note: Berfungsi untuk mendeskripsikan halaman web.
<meta name="author" content="Hege Refsnes">
Note: Berfungsi untuk mendefinisikan penulis halaman.
Note: Elemen meta digunakan untuk menyediakan informasi tentang dokumen.
</head>
<body>
<p>...........</p>
<br>
Note: - Dalam HTML, tag <br> tidak memiliki tag akhir.
Dalam XHTML, tag <br> harus ditutup dengan cara seperti ini: <br />.
<h1>..........</h1>
<h6>..........</h6>
Note: - Tag <h1> sampai <h6> digunakan untuk menentukan heading HTML.
- <h1> mendefinisikan judul yang paling penting. Dan <h6> mendefinisikan judul yang paling
tidak penting.
<hr>
Note: - Dalam HTML5, tag <hr> mendefinisikan perubahan topik dalam sebuah halaman HTML.
Dalam HTML 4.01, tag <hr> merupakan garis horizontal.
- Dalam HTML, tag <hr> tidak memiliki tag akhir.
Dalam XHTML, tag <hr> harus ditutup dengan cara seperti ini: <hr />.

Note: - Tag komentar digunakan untuk menyisipkan komentar dalam source code yang mana dapat
berfungsi untuk menjelaskan source code sehingga mempermudah dalam mengedit source
code di kemudian hari.
- Tag komentar juga dapat digunakan untuk "menyembunyikan" script dari browser yang tidak
mendukung script tersebut.
- Tag komentar tidak ditampilkan dalam browser.
<b>........</b>
Note: - Menurut spesifikasi HTML 5, tag <b> harus digunakan sebagai pilihan TERAKHIR bila tidak
ada tag lain yang lebih sesuai. Spesifikasi HTML 5 menyatakan bahwa judul harus
dilambangkan dengan tag <h1> sampai <h6>, penekanan teks harus dilambangkan dengan
tag <em>, teks penting harus dilambangkan dengan tag <strong> dan teks yang ditandai /
disorot harus menggunakan tag <mark>.
<em>............</em>
Digunakan untuk mendefinisikan teks yang ditekankan.
<strong>.............</strong>
Note: - Dalam HTML 4.01, tag <strong> mendefinisikan penekanan teks yang kuat, tetapi dalam
HTML5 mendefinisikan teks penting.
<dfn>..............</dfn>
<code>..............</code>
<samp>..............</samp>
<kbd>............</kbd>
<var>.............</var>
Digunakan untuk mendefinisikan istilah.

Digunakan untuk mendefinisikan kode komputer.
Mendefinisikan contoh output dari program komputer.
Digunakan untuk mendefinisikan keyboard input.
Digunakan untuk mendefinisikan variabel.
File HTML
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
Output
<big>............</big>
Contoh Output:
Note: - Tag <big> digunakan untuk mendefinisikan teks yang lebih besar.
- Gunakan CSS untuk menentukan ukuran teks.
- Tag <big> tidak didukung di HTML5, tetapi didukung dalam HTML 4.01.
<small>............</small>
Contoh Output:
Note: - Tag <small> digunakan untuk mendefinisikan teks yang lebih kecil.
<i>...............</i>
Note: - Dalam HTML 4.01, tag <i> digunakan untuk membuat teks dalam huruf miring. Namun, hal ini
tidak selalu terjadi dengan HTML5. Style sheet dapat digunakan untuk memformat teks dalam
elemen <i>.
- Tag <i> dapat digunakan untuk menunjukkan istilah teknis, seperti sebuah kalimat dari
bahasa lain dan lain-lain.
- Gunakan elemen <i> hanya ketika tidak ada unsur semantik yang lebih tepat, seperti:
<em> (teks ditekankan)
<strong> (teks penting)
<mark> (teks yang ditandai/disorot)
<cite> (judul karya)
<dfn> (sebuah istilah definisi)
<sub>..........</sub>
Contoh Output: Teks ini berisi
subscript
<sup>..........</sup>
Contoh Output: Teks ini berisi
superscript
<pre>...............</pre>
Tag <pre> mendefinisikan teks terformat.
<tt>.............</tt>
Note: - Tag <tt> mendefinisikan teks teletype.
- Tag <tt> tidak didukung di HTML5, tetapi didukung dalam HTML 4.01.
<address>...............</address>
Contoh Output: Komplek Hankam slipi
Jl.Beo G.57
Jakarta barat 11480
Note: - Tag <address> mendefinisikan informasi kontak penulis / pemilik dokumen atau artikel.
- Jika elemen <address> di dalam elemen <article>, itu merupakan informasi kontak untuk
artikel tersebut.
- Elemen <address> biasanya akan disertakan bersama dengan informasi lain dalam elemen
<footer>.
<abbr title="............">............</abbr>
Contoh sintaks: <abbr title="dan lain-lain">dll</abbr>
Output:
Note: - Tag <abbr> digunakan untuk mendefinisikan singakatan.
- Menandai singkatan dapat digunakan untuk pengindeksan search-engine.
<acronym title=".............">............</acronym>
Contoh sintaks: <acronym title="World Wide Web">WWW</acronym>
Output:
Note: - Tag <abbr> digunakan untuk mendefinisikan singakatan.
- Menandai singkatan dapat digunakan untuk pengindeksan search-engine.
- Tag <acronym> tidak didukung di HTML5, tetapi didukung dalam HTML 4.01.
<bdo dir=ltr | rtl>..............</bdo>
Digunakan untuk mengubah arah teks.
<blockquote>............</blockquote>
Sintaks:
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United
States and close to 5 million globally.
</blockquote>
Output:
Note: - Dalam HTML 4.01, tag <blockquote> mendefinisikan sebuah kutipan panjang.
Dalam HTML5, tag <blockquote> menentukan bagian yang dikutip dari sumber lain.
- Untuk memvalidasi elemen <blockquote> sebagai XHTML, harus seperti ini:
<blockquote>
<p>Berikut ini adalah kutipan panjang di sini adalah kutipan panjang.</ p>
</ blockquote>
- Atribut cite digunakan untuk menentukan sumber kutipan
<q>...............</q>
Sintaks:
<p>WWF's goal is to:
<q cite="http://www.wwf.org">Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
Contoh Output:
Note: - Tag <q> mendefinisikan kutipan pendek.

- Browser biasanya menyisipkan tanda kutip disekitar kutipan.
- Atribut cite digunakan untuk menentukan sumber kutipan
<cite>.............</cite>
Sintaks:
<img src="img_the_scream.jpg">
<p>
<cite>The Scream</cite>
by Edward Munch. Painted in 1893.</p>
Output:
Note: - Di HTML5 untuk mendefinisikan judul karya (misalnya buku, lagu, film, acara TV, lukisan,
patung, dll). Sebuah nama seseorang bukanlah judul karya.

- Di HTML 4.01 untuk mendefinisikan kutipan.
<del>..........</del>
Contoh Output: Dua puluh
Note: - Tag <del> digunakan untuk menandai teks yang telah dihapus/diganti dalam dokumen.
<s>............</s>
Note: - Tag <s> menspesifikasikan teks yang tidak lagi benar, tidak akurat atau tidak relevan.
<strike>..........</strike>
Note: - Tidak support di HTML 5 dan ditinggalkan di HTML 4.01.

<ins>..........</ins>
Contoh Output: Dua belas
Note: - Tag <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen.
<u>..............</u>
Dalam HTML 4.01 elemen <u> sudah ditinggalkan.
Contoh Output: Dua belas

Note: - Dalam HTML 4.01, elemen <u> digunakan untuk menentukan teks yang digarisbawahi
- Dalam HTML 5, elemen <u> mendefinisikan teks yang harus memiliki Gaya yang berbeda dari
teks biasa, seperti kata yang salah eja atau kata benda dalam bahasa Cina.
<center>...........</center>
&#nomor;
Entitas karakter HTML.
Contoh sintaks: &
&
<
<
=
>
<a href=...........>...............</a>
Contoh Sintaks: <a href=file2.html>Klik di sini</a>
<a href= http://www.w3schools.com> W3Schools.com </a>
Note: - Secara default, link akan muncul sebagai berikut di semua browser:
~ Link belum dikunjungi berwarna biru
~ Sebuah link telah dikunjungi berwarna ungu
~ Link aktif berwarna merah
LINK PADA LOKASI DI HALAMAN YANG SAMA

<a id=NamaBagian>............</a>
<a href=#NamaBagian>............</a>
Contoh Sintaks: <a id="atas"> 1 </a>
<a href="#bawah">Ke Nomor 10</a>
<a id="bawah"> 10 </a>

<a href="#atas">Ke Nomor 1</a><br>
<a hreflang="en" href="http://www.w3schools.com">W3Schools.com</a></p>
Note: - Atribut hreflang menspesifikasikan bahasa pada dokumen yang di link.
<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>
Note: - Browser tidak menindak lanjuti atribut rel dengan cara apapun. Namun, mesin pencari dapat
menggunakan atribut rel untuk mendapatkan informasi lebih lanjut tentang link.
- Atribut rel menspesifikasikan hubungan antara dokumen saat ini dan dokumen terkait.
Sintaks: <a rel=" alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetc |
prev | search | tag">
Penjelasan Value:
alternate
Link ke versi lain dari dokumen, contoh: Halaman Cetak (Print Page)
author
Link ke penulis dokumen
bookmark
URL permanen yang digunakan untuk bookmark
help
Link ke dokumen bantuan
license
Link ke informasi hak cipta untuk dokumen
next
Dokumen berikutnya dalam seleksi
nofollow
Link ke dokumen tidak sah, seperti link dibayar.
("Nofollow" digunakan oleh Google, untuk menentukan bahwa laba-laba pencarian Google tidak
harus mengikuti link tersebut)
noreferrer
Menentukan bahwa browser tidak harus mengirim header HTTP jika pengguna mengikuti hyperlink
prefetc
Menentukan bahwa dokumen target harus di-cache
prev
Dokumen sebelumnya dalam seleksi
search
Link ke alat pencarian (search tool) untuk dokumen
tag
Sebuah tag (kata kunci) untuk dokumen saat ini
<a rev="nofollow" href="http://www.functravel.com/">Cheap Flights</a>
Note: - Atribut rev tidak didukung di HTML5.

- Atribut rev adalah kebalikan dari atribut rel.
- Browser tidak menindak lanjuti atribut rev dengan cara apapun. Namun, mesin pencari dapat
menggunakan atribut rev untuk mendapatkan informasi lebih lanjut tentang link.
- Atribut rev menspesifikasikan hubungan antara dokumen terkait dan dokumen saat ini.
Sintaks: <a rev="alternate | stylesheet | start | next | prev | contents | index | glossary | copyright |
chapter | section | subsection | appendix | help | bookmark | nofollow | licence | tag
| friend">
Penjelasan Value:
alternate
Sebuah versi lain dari dokumen, contoh: Halaman Cetak (Print Page)
stylesheet
Sebuah style sheet eksternal untuk dokumen
start
Dokumen pertama dalam seleksi
next
Dokumen berikutnya dalam seleksi
prev
Dokumen sebelumnya dalam seleksi
contents
Sebuah daftar isi untuk dokumen
index
Indeks untuk dokumen
glosarium
Sebuah glossary/ daftar kata-kata (penjelasan) dari kata yang digunakan dalam dokumen
copyright
Sebuah dokumen yang berisi informasi hak cipta
chapter
Sebuah bab dari dokumen
section
Sebuah bagian dari dokumen
subsection
Sebuah ayat dari dokumen
appendix
Lampiran untuk dokumen
help
Sebuah dokumen bantuan
bookmark
Sebuah dokumen terkait
nofollow
"nofollow" digunakan oleh Google, untuk menentukan bahwa pencarian laba-laba Google tidak harus
mengikuti bahwa link (banyak digunakan untuk link dibayar)
licence
tag
friend
<a href=www.google.co.id target=_blank>Google</a>
<a href=www.google.co.id style="text-decoration:none">Google</a>
Note: - Untuk link yang tidak digarisbawahi.
<a href=mailto:info@piksi.itb.ac.id?Subject=Tanya Jadwal Kursus!>
Kirim e-mail! </a>
<ol>
<li>.........</li>
<li>.........</li>
<li>.........</li>
</ol>
mailto apa fungsinya???
Ordered List.
<ol type=1 | a | A | i | I start=7>

<li>.........</li>
<li>.........</li>
<li>.........</li>
</ol>
Note: - Atribut start dan type ditinggalkan dalam HTML 4.01, tetapi didukung di HTML5.
- Gunakan CSS untuk daftar gaya (style).
<ul>
<li>.........</li>
<li>.........</li>
<li>.........</li>
</ul>
Unordered List.
<ul >
<li>.........</li>
<li>.........</li>
<li>.........</li>
</ul>
Note: - Gunakan CSS untuk daftar gaya (style).
<ol>
<li>Kopi</li>
<li>Teh</li>
<ol>
<li>Kopi</li>
Nested List (List Bercabang).
<li>Teh</li>
</ol>
<li>Susu</li>
</ol>
<dl>
<dt>..........</dt>
<dd>.........</dd>
<dt>..........</dt>
<dd>......... </dd>
</dl>
Untuk mendefinisikan daftar (list) definisi.

Untuk mendefinisikan istilah definisi.
Untuk mendefinisikan deskripsi definisi.
Contoh Sintaks: <dl>

<dt>Coffee</dt>
<dd>Black hot drink </dd>
<dt>Milk</dt>
<dd>White cold drink </dd>
</dl>
Contoh Output: Coffee
Black hot drink
Milk
White cold drink
Note: - Tag <dl>
Dalam HTML 4.01, tag <dl> mendefinisikan daftar definisi.
Dalam HTML 5, tag <dl> mendefinisikan daftar deskripsi.
- Tag <dt>
Dalam HTML 4.01, tag <dt> mendefinisikan item dalam daftar definisi.
Dalam HTML5, tag <dt> mendefinisikan istilah / nama dalam daftar deskripsi.
- Tag <dd>
Dalam HTML 4.01, tag <dd> digunakan untuk menggambarkan item dalam daftar definisi.
Dalam HTML5, tag <dd> digunakan untuk menjelaskan istilah / nama dalam daftar deskripsi.
Di dalam tag <dd> Anda dapat menempatkan paragraf, baris baru (line breaks), gambar, link,
daftar (list), dll
<dir>..........</dir>
<menu>..........</menu>

Belum didukung browser
<img src="http://www.example.com/image.gif">
<img src="adis1.jpg" alt="Foto Adis" width="200" height="300">
Note: - Atribut alt menspesifikasikan sebuah teks alternatif untuk
gambar, jika gambar tidak dapat
ditampilkan.
- Untuk membuat tooltip pada sebuah gambar, gunakan
atribut title.
- Selalu tentukan atribut height dan width untuk gambar.
- Dalam HTML 4.01, atribut height dan width didefinisikan
dalam pixel atau %. Dalam HTML5,
atribut height dan width harus dalam piksel.
- Dalam HTML tag <img> tidak memiliki tag akhir.
Dalam XHTML tag <img> harus ditutup dengan baik.
- Pelajari lagi fungsi IMAGE MAP
TABEL
<table border="1" cellpadding="10">
<caption>TABEL MENGGUNAKAN CELLPADDING</caption>
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
<br>
<table border="1" cellspacing="10">
<caption>TABEL MENGGUNAKAN CELLSPACING</caption>
<tr>
<td>Baris</td>
<td>Pertama</td>
</tr>
<tr>
<td>Baris</td>
<td>Kedua</td>
</tr>
</table>
Sintaks: <table border=" 1 | ">
<table cellpadding="pixels">
<table cellspacing="pixels">
<table width="pixels | %">

Note: - Dalam HTML5, atribut border digunakan untuk menunjukkan jika tabel adalah untuk tujuan
layout atau tidak, dan nilai atribut yang diperbolehkan hanya "" atau "1".
- Atribut cellpadding tidak didukung di HTML5.
- Lebih baik gunakan CSS untuk menentukan cellpadding.
- Atribut cellpadding menentukan ruang dalam piksel, antara dinding sel dan isi sel.
- Atribut cellspacing tidak didukung di HTML5.
- Atribut cellspacing menentukan ruang dalam piksel, antara sel-sel.
<table border="1">
<caption>MY CAPTION</caption>
<tr>
<th>JUDUL 1</th>
<th>JUDUL 1</th>
<th>JUDUL 1</th>
</tr>
<tr>
<td>BARIS 1</td>
<td>BARIS 1</td>
<td>BARIS 1</td>
</tr>
<tr>
<td>BARIS 2</td>
<td>BARIS 2</td>
<td>BARIS 2</td>
</tr>
</table>
<table>........</table>
<caption>........</caption>
<tr>..........</tr>
<th>.........</th>
<td>.........</td>
Mendefinisikan sebuah tabel dalam HTML.

Mendefinisikan judul tabel. Posisi default dari judul adalah ditengah.
Mendefinisikan sebuah baris dalam table.
Mendefinisikan sel header tabel. Default teks ditebalkan dan posisi
ditengah.
Mendefinisikan sebuah sel data tabel.
<table border="1" width="400">

<caption>MY CAPTION</caption>
<tr>
<th>JUDUL 1</th>
<th>JUDUL 1</th>
<th>JUDUL 1</th>
</tr>
<tr align="center">
<td>BARIS 1</td>
<td>BARIS 1</td>
<td rowspan="2">BARIS 1</td>
</tr>
<tr>
<td colspan="2">BARIS 2</td>
</tr>
</table>
Sintaks: <tr align="left | right | center | justify">
<tr valign="top | middle | bottom | baseline">
<td align="left | right | center | justify">
<td valign="top | middle | bottom | baseline">

<th align="left | right | center | justify">
<th valign="top | middle | bottom | baseline">
Note: - Atribut width menentukan lebar tabel
- Atribut width tidak didukung di HTML5
- Lebih baik gunakan CSS untuk menentukan lebar
(width)
- Hanya satu caption per tabel.
- Secara default, caption diletakkan ditengah pada atas
tabel. Namun,
CSS properties "textalign" dan "caption-side" dapat digunakan untuk menjajarkan dan menempatkan caption.
- Atribut align pada tag <tr>, <th> dan <td> tidak didukung di HTML5. Gunakan CSS sebagai
gantinya.
- Atribut valign pada tag <tr>, <th> dan <td> tidak
didukung di
HTML5. Gunakan CSS sebagai
gantinya.
- Ilustrasi dibawah ini adalah bottom vs. baseline dalam
ukuran font yang
berbeda:
Value collapse dari Properti visibility (CSS)

File CSS
tr.collapse {visibility:collapse;}
File HTML
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
Note: - Value collapse hanya untuk elemen tabel.
- Value collapse menghapus baris atau kolom, tetapi tidak mempengaruhi tata letak (layout)
tabel. Ruang (space) yang diambil oleh baris atau kolom akan tersedia untuk konten lainnya.
- Jika collapse digunakan pada elemen lain, akan menjadikan sebagai "hidden".
TAG DI DALAM SUATU TABEL

<table border="3">
<caption>TAG DI DALAM SUATU TABEL</caption>
<tr>
<td>
<p> This is a paragraph</p>
<p> This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Pepaya</li>
</ul>
</td>
<td>&#160</td>
</tr>
</table>
TABEL DI DALAM TABEL

<table border="1">
<caption>TABEL DI DALAM TABEL</caption>
<tr>
<td>TABEL PERTAMA</td>
<td>
<table border="1">
<tr>
<td>TABEL KE DUA</td>
<td>
<table border="1">
<tr>
<td>TABEL KE TIGA</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>
<colgroup> dan <col>

<html>
<body>
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
<colgroup>........</colgroup>
Note: - Tag <colgroup> menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel
untuk pemformatan.
- Tag <colgroup> berguna untuk menerapkan gaya ke seluruh kolom, bukan menerapkan gaya
untuk setiap sel atau setiap baris.
- Tag <colgroup> harus menjadi anak dari elemen <table>, setelah setiap elemen <caption>
dan sebelum <thead>, <tbody>, <tfoot>, dan <tr> elemen.
- Untuk menentukan sifat yang berbeda untuk kolom dalam <colgroup>, gunakan tag <col>
dalam tag <colgroup>.
<col>
Note: - Tag <col> menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>.
- Tag <col> berguna untuk menerapkan gaya ke seluruh kolom, bukan menerapkan gaya untuk
setiap sel atau setiap baris.
- Dalam HTML, tag <col> tidak memiliki tag akhir.
Dalam XHTML, tag <col> harus ditutup dengan cara.
<thead>, <tfoot> dan <tbody>

<html>
<head>
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
<thead>, <tfoot> dan <tbody>

Note: - Unsur <thead> digunakan dalam hubungannya dengan elemen <tfoot> dan <tbody> untuk
Menentukan pemformatan setiap bagian dari tabel (header, body, footer).
- Tag <thead> harus digunakan sebagai anak dari elemen <table>, lalu diletakkan sesudah
elemen <caption> dan <colgroup>, dan sebelum elemen <tfoot>, <tbody> dan <tr>.
- Tag <tfoot> harus digunakan sebagai anak dari elemen <table>, lalu diletakkan sesudah
elemen <caption>, <colgroup> dan elemen <thead>, dan sebelum elemen <tbody>.
- Tag <tbody> harus digunakan sebagai anak dari elemen <table>, lalu diletakkan sesudah
elemen <caption>, <colgroup> dan elemen <thead>.
LAYOUT HTML MENGGUNAKAN TABEL

<html>
<body>
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
Ini teks kolom pertama. Ini teks kolom pertama. Ini teks kolom pertama. Ini teks kolom pertama. Ini
teks kolom pertama. Ini teks kolom pertama.
Ini teks kolom pertama. Ini teks kolom pertama. Ini teks kolom pertama. Ini teks kolom pertama. Ini
teks kolom pertama. Ini teks kolom pertama.
</td>
<td width="50%" valign="top">
Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks
kolom ke dua. Ini teks kolom ke dua.
Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks kolom ke dua. Ini teks
kolom ke dua. Ini teks kolom ke dua.
</td>
</tr>
</table>
</body>
</html>
<frameset>.......</frameset> dan <frame>........<frame>

<html>
<frameset cols="25%,50%,25%">
<frame src="6.html">
</frameset>
</html>
<frameset rows="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
<html>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
Sintaks: <frameset cols="pixels | % | *">

<frameset rows="pixels | % | *">
<frame frameborder="1 | 0">
Note: - Tag <frameset> tidak didukung di HTML5.
- Value * pada atribut cols dan rows menyatakan sisa ruang yang tersedia harus diberikan ke
kolom ini
- Ganti atribut frameborder dengan mengggunakan CSS properties "border styles" dan "color".
<frame src="frame_a.htm" marginwidth="50">
<frame src="frame_b.htm" marginwidth="0">
</frameset>
Sintaks: <frame marginheight="pixels">
Note: - Atribut marginheight menentukan ketinggian antara isi dan bagian atas dan bawah frame,
dalam piksel.
<frame src="frame_a.htm" marginheight="50">
<frame src="frame_b.htm" marginheight="0">
</frameset>
Sintaks: <frame marginwidth="pixels">
Note: - Atribut marginwidth menentukan lebar antara isi dan sisi kiri dan kanan dari frame, dalam
piksel.
<frame src="frame_a.htm" name="frame_a">
</frameset>
Sintaks: <frame name="text">
Note: - Atribut name menentukan nama elemen <frame>.
- Atribut name digunakan untuk referensi elemen dalam JavaScript, atau bertindak sebagai
target untuk link.
- Dalam XHTML, atribut name pada tag <frame> sudah ditinggalkan dan akan dihapus.
Gunakan atribut id sebagai gantinya.
<frame src="frame_a.htm" noresize="noresize">
</frameset>
Note: - Atribut noresize menentukan bahwa elemen <frame> tidak dapat diubah ukurannya oleh
pengguna.
Iframe
<html>
<body>
<iframe src="http://www.kaskus.co.id" width="200" height="200"></iframe>
</body>
</html>
Note: Iframe digunakan untuk menampilkan halaman web di dalam halaman web.
<html>
<body>
<iframe src="http://www.kaskus.co.id" frameborder="0"></iframe>
</body>
</html>
Note: - Atribut frameborder="0" digunakan untuk membuat Iframe tanpa border.
<html>
<body>
<iframe src="http://www.kaskus.co.id" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
</body>
</html>
Note: - Iframe dapat digunakan sebagai frame target

untuk link.
<noframes>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>
</html>
Note: - Tag <noframes> tidak support di HTML 5.
- Tag <noframes> dapat digunakan untuk menampilkan pesan kepada pengguna bahwa
browser tidak mendukung frame.
HTML Forms
HTML Forms digunakan untuk melewatkan data ke server.
Contoh Sintaks:
<form>
...............
input elements
...............
</form>
HTML <input> Atribut name

Atribut name menentukan nama pada elemen <input>.
Atribut name digunakan untuk referensi elemen dalam JavaScript atau untuk referensi data form
setelah form di submit
Catatan: Hanya elemen form dengan atribut name yang mana nilai-nilai disisispkan ketika form di
submit.
HTML <input> Attribute value

Atribut value menentukan nilai pada elemen <input>.
Atribut value digunakan berbeda pada input type yang berbeda:
- "button", "reset" dan "submit" digunakan untuk mendefinisikan teks pada tombol
- "text", "password" dan "hidden" digunakan untuk mendefinisikan nilai awal pada kotak masukan
(field input)
- "checkbox", "radio" dan "image" digunakan untuk mendefinisikan nilai yang terkait dengan
masukan/input (ini juga termasuk nilai yang dikirimkan oleh submit)
HTML <input> Attribute size

Atribut size digunakan untuk menentukan lebar elemen <input>.
Atribut size bekerja dengan input type: text, search, tel, url, email, and password.
HTML <input> Attribute maxlength

Atribut maxlength digunakan untuk menentukan jumlah maksimal karakter yang diperbolehkan dalam
elemen <input>.
TEXT FIELDS
<form>
Nama Depan: <input type="text" name="firstname" size="3" maxlength="4">
<br><br>
Nama Keluarga: <input type="text" name="lastname">
</form>
Note: - Atribut name menentukan nama pada elemen <input>.

- Atribut name digunakan untuk referensi elemen dalam JavaScript atau untuk referensi data
form setelah form di submit.
- Hanya elemen form dengan atribut name yang mana nilai-nilai disisispkan ketika form di
submit.
- Atribut size digunakan untuk menentukan lebar elemen <input>.
- Atribut maxlength digunakan untuk menentukan jumlah maksimal karakter yang
diperbolehkan dalam elemen <input>.
PASSWORD
<form>
Password: <input type="password" name="kode" value=" " size="6" maxlength="4">
<br><br>
Confirm Password: <input type="password" name="kode">
</form>
BUTTON
<form>
<input type="button" value="OK">
</form>
RADIO
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" checked>Female
</form>
Note: - Hanya satu pilihan yang bisa dipilih.
- Atribut checked membuat radio terpilih secara otomatis.
- Atribut checked juga dapat diatur dengan JavaScript, setelah halaman di load.
- Dalam XHTML, atribut checked harus didefinisikan sebagai berikut:
<input checked="checked" />.
- Atribut value mendefinisikan nilai yang terkait dengan masukan/input (ini juga termasuk nilai
yang dikirimkan oleh submit)
- Atribut value diperlukan pada <input type="checkbox"> dan <input type="radio">.
CHECKBOX
<form>
<input type="checkbox" name="kendaraan" value="mobil">Mobil<br>
<input type="checkbox" name="kendaraan" value="motor">Motor
</form>
<form>
<input type="checkbox" name="kendaraan" value="mobil">Mobil<br>
<input type="checkbox" name="kendaraan" value="motor" checked>Motor
</form>
Note: - Bisa lebih dari satu pilihan yang dipilih.
- Pengguna dapat memilih atau membatalkan pilihan dari checkbox.
- Atribut checked membuat checkbox terpilih secara otomatis.
- Atribut checked juga dapat diatur dengan JavaScript, setelah halaman di load.
- Dalam XHTML, atribut checked harus didefinisikan sebagai berikut:
<input checked="checked" />.
- Atribut value mendefinisikan nilai yang terkait dengan masukan/input (ini juga termasuk nilai
yang dikirimkan oleh submit)
- Atribut value diperlukan pada <input type="checkbox"> dan <input type="radio">.
TEXT AREA
<html>
<body>
<textarea rows="10" cols="30">
Ini contoh menggunakan text area untuk memasukkan
data berupa komentar atau pun catatan lainnya, bersifat
mirip artikel.
</textarea>
</body>
</html>
Note: - Tag <textarea> mendefinisikan kontrol input teks multi-line.
- Gunakan CSS property width dan height sebagai pengganti atribut HTML rows dan cols
untuk mengatur ukuran Text Area
<html>
<body>
<textarea readonly>
Dalam Text Area read-only, konten tidak dapat
diubah namun pengguna menyalin konten
tersebut.
</textarea>
</body>
</html>
Note: - Atribut readonly membuat Text Area menjadi read-only.
- Dalam Text Area read-only, konten tidak dapat diubah namun pengguna menyalin konten
tersebut.
- Dalam XHTML, atribut readonly harus didefinisikan sebagai berikut:
<textarea readonly="readonly">.
DROP - DOWN LIST

<html>
<body>
Merek mobil yang anda suka :
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="Audi">Audi
</select>
</form>
</body>
</html>
Note: - Atribut selected membuat dropdown list dengan sebuah nilai yang ditentukan sebelumnya.
<html>
<body>
Merek mobil yang anda suka :
<form>
<select name="cars" size=4 multiple>
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
<option value="honda">Honda
</select>
</form>
</body>
</html>
Note: - Atribut size digunakan untuk menentukan lebar list yang terlihat.
- Atribut multiple digunakan untuk membuat beberapa pilihan dapat dipilih sekaligus.
Defaultnya hanya satu pilihan yang bisa dipilih.
<optgroup>.........</optgroup>
<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>
Note: - <optgroup> digunakan untuk membuat list yang memiliki daftar panjang dan berkelompokkelompok.
<label>..........</label>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="Submit">
</form>
Note: - Tag <label> mendefinisikan sebuah label untuk sebuah elemen <input>.
- Tag <label> tidak membuat sebagai sesuatu yang istimewa bagi pengguna. Namun,
menyediakan peningkatan kegunaan mouse pengguna, karena pengguna dapat mengklik
pada teks dalam elemen <label>.
- Atribut for digunakan untuk menentukan elemen form yang terikat label. Atribut for dari tag
<label> harus sama dengan atribut id dari elemen terkait supaya agar saling terikat.
FIELDSET
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Note: - Tag <fieldset> digunakan untuk mengelompokkan elemen-elemen yang saling terkait di
dalam form.
- Tag <fieldset> menggambar sebuah kotak di sekitar elemen-elemen yang saling terkait.
- Tag <legend> mendefinisikan keterangan untuk elemen <fieldset>.
Input type: submit

<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Note: - Tombol Submit digunakan untuk mengirim form.
Input type: reset

Email: <input type="text" name="email"><br>
Pin: <input type="text" name="pin" maxlength="4"><br>
<input type="reset" value="Reset">
</form>
Note: - Tombol Reset akan mereset semua nilai form menjadi nilai default.
Input type: file

<form>
Pilih file: <input type="file" name="data">
</form>
Note: - Digunakan untuk memilih file (Upload File).
Input type: image

<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form>
Note: - Digunakan untuk membuat gambar menjadi
tombol submit/kirim.
method="get"
<form name="myForm" action="demo_form_method.asp" method="get" target="_blank">
</form>
Note: - Atribut name digunakan untuk menentukan nama form.

- Atribut name digunakan untuk referensi elemen dalam JavaScript atau untuk referensi data
form setelah form di submit.
- Dalam XHTML, atribut name sudah ditinggalkan. Gunakan atribut id sebagai gantinya.
- Atribut action digunakan untuk menentukan kemana form-data dikirimkan ketika form
disubmit/dikirimkan.
- Dalam HTML5, atribut action tidak lagi diperlukan.
- Atribut method menentukan cara mengirim form-data (form-data dikirim ke halaman yang
ditentukan dalam atribut action).
- Atribut target didukung di HTML5. Atribut target ditinggalkan dalam HTML 4.01.
- Tombol submit, mengirim form-data ke file di dalam atribut action, untuk memproses input.
- Form-data dapat dikirim sebagai variabel URL (dengan method="get") atau sebagai HTTP
post transaction (dengan method="post").
method="post"
<form action="demo_form_method_post.asp" method="post" target="_blank">
</form>
Perbedaan method="get" dan method="post"

- Metode GET digunakan untuk pengiriman data yang tidak membutuhkan keamanan (datanya tidak
rahasia). Sedangkan metode POST digunakan untuk pengiriman data yang membutuhkan
keamanan (datanya bersifat rahasia).
- Data yang dimasukkan dengan metode GET akan tampil pada address bar browser. Sedangkan
data yang dimasukkan dengan metode POST tidak tampil pada address bar browser.
- Pengiriman form dengan GET dapat di bookmark. Sedangkan pengiriman form dengan POST tidak
dapat di bookmark
Atribut enctype
<form action="demo_post_enctype.asp" method="post"
enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
</form>
Note: - Atribut enctype menentukan bagaimana formdata harus dikodekan ketika mengirim ke
server.
- Atribut enctype hanya dapat digunakan jika method="post".
Attribute Values
application/x-www-form-urlencoded
Default. Semua karakter dikodekan sebelum dikirim (spasi dikonversi ke simbol "+" dan karakter
khusus dikonversi ke nilai ASCII HEX).
multipart/form-data
Tidak ada karakter yang dikodekan. Nilai ini diperlukan bila menggunakan form yang memiliki kendali
file upload (file upload control).
text/plain
Spasi dikonversi ke simbol "+", tapi tidak ada karakter khusus dikodekan
Mengirim Mail dari Form

<html>
<body>
<form action="MAILTO:rizalug@yahoo.co.id" method="post" enctype="text/plain">
<h3>Form ini akan mengirim email kepada Email rizalug@yahoo.co.id</h3>
Nama Lengkap: <input type="text"
name="nama">
<br><br>
Alamat: <input type="text" name="alamat">
<br><br>
Email: <input type="text" name="email">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Note: - Contoh di atas mendemonstrasikan bagaimana mengirim sebuah mail dari form.
Form dengan checkboxes

<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
</form>
Form dengan radio buttons

<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
</form>
<font>...........</font>
<basefont>........</basefont>

<div>............</div>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
Note: - Tag <div> digunakan untuk membuat Layout HTML.
- Tag <div> mengelompokkan divisi atau bagian elemen dalam dokumen HTML.
- Tag <div> digunakan untuk mengelompokkan blok-elemen lalu memformatnya dengan CSS.
- Secara default, browser selalu menempatkan satu baris sebelum dan sesudah elemen <div>.
<span>...........</span>
<html>
<body>
<p>My mother has
<span style="color:blue;font-weight:bold">blue</span>
eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
</body>
</html>
Note: - Tag <span> digunakan untuk mengelompokkan bagian terkecil di dalam elemen dokumen
HTML.
<script>..........</script>
<html>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
Note: - Tag <script> digunakan untuk mendefinisikan script client-side, seperti JavaScript.
- Tag <script> bisa berisi pernyataan scripting atau menunjuk ke suatu file script eksternal
melalui atribut src.
- Jika terdapat atribut src, tag <script> harus dikosongkan.
- Atribut type diperlukan dalam HTML 4, tapi opsional di HTML5.
- Atribut: xml: space digunakan pada HTML 4.01, tetapi tidak didukung di HTML5.
<noscript>...........</noscript>
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Note: - Tag <noscript> digunakan untuk menampilkan pesan kepada pengguna bahwa browser
tidak mendukung script.
- Dalam HTML 4.01, tag <noscript> hanya dapat digunakan di dalam elemen body.
Dalam HTML5, tag <noscript> dapat digunakan baik di dalam head dan body.
<object>........</object>
<object width="400" height="400" data="helloworld.swf">.......</object>
Note: -Tag <object> mendefinisikan obyek tertanam dalam dokumen HTML. Gunakan elemen ini
untuk menanamkan multimedia (seperti audio, video, applet Java, ActiveX, PDF dan Flash)
dalam halaman web.
- Anda juga dapat menggunakan tag <object> untuk menanamkan halaman web lain ke dalam
dokumen HTML Anda.
- Teks antara <object> dan </object> adalah teks alternatif, digunakan untuk browser yang
tidak mendukung tag ini.
- Untuk gambar gunakan tag <img>, bukan tag <object>.
<param>
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
Note: Mengatur parameter "autoplay" ke "true",

sehingga suara akan mulai bermain setelah
halaman di load.
Note: - Tag <param> digunakan untuk menentukan parameter plugin yang tertanam di elemen
<object>.
- Atribut type and valuetype didukung pada HTML 4.01, tidak didukung di HTML5.
- Dalam HTML tag <param> tidak memiliki tag akhir.
Dalam XHTML tag <param> harus ditutup dengan cara seperti ini <param />.
Atribut style
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
Note: - Atribut style menspesifikasikan inline style untuk sebuah elemen.
- Atribut style akan menimpa style yang ditetapkan secara global, misalnya spesifikasi style
dalam tag <style> atau dalam style sheet eksternal.
- Dalam HTML5, atribut style dapat digunakan pada setiap elemen HTML (akan memvalidasi
pada setiap elemen HTML. Namun, belum tentu berguna).
- Dalam HTML 4.01, atribut style tidak dapat digunakan dengan: <base>, <head>, <html>,
<meta>, <param>, <script>, <style> dan <title>.
Atribut title
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>
Note: - Atribut title menspesifikasikan informasi tambahan mengenai suatu elemen.

- Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas
elemen.
- Dalam HTML5, atribut title dapat digunakan pada setiap elemen HTML (akan memvalidasi
Dalam HTML 4.01, atribut title tidak dapat digunakan dengan: <base>, <head>, <html>,
<meta>, <param>, <script>, <style>, dan <title>.
Atribut accesskey
<a href="http://www.w3schools.com/html5" accesskey="h">HTML tutorial
</a><br>
<a href="http://www.w3schools.com/css3" accesskey="c">CSS tutorial </a>
Note: - Tekan tombol (Alt+h) untuk link HTML tutorial atau
Tekan tombol (Alt+c) untuk link CSS tutorial
Note: - Atribut accesskey digunakan untuk membuat tombol cepat pada suatu elemen.
- Gunakan tombol (Alt + accessKey) atau (Shift + Alt + accessKey) untuk mengakses elemen
yang diberikan accesskey.
- Dalam HTML5, atribut accesskey dapat digunakan pada setiap elemen HTML (akan
memvalidasi pada setiap elemen HTML. Namun, belum tentu berguna).
- Dalam HTML 4.01, atribut accesskey dapat digunakan dengan: <a>, <area>, <button>,
<input>, <label>, <legend> dan <textarea>.
Atribut dir
<p dir="rtl">Teks ini ditulis dari kanan ke kiri !!!</p>
Note: - Atribut dir menspesifikasikan arah teks.
- Dalam HTML5, atribut dir dapat digunakan pada setiap elemen HTML (akan memvalidasi
Dalam HTML 4.01, atribut dir tidak dapat digunakan dengan: <base>, <br>, <frame>,
<frameset>, <hr>, <iframe>, <param> dan <script>.
Atribut lang
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
Note: Artinya Ini adalah sebuah paragraf.
Note: - Atribut lang menspesifikasikan bahasa pada isi elemen.
- Alamat daftar kode bahasa
- Dalam HTML5, atribut lang dapat digunakan pada setiap elemen HTML (akan memvalidasi
- Dalam HTML 4.01, atribut lang tidak dapat digunakan dengan: <base>, <br>, <frame>,
<frameset>, <hr>, <iframe>, <param> dan <script>.
HTML atribut lang digunakan untuk menyatakan bahasa pada halaman Web atau sebagian dari
halaman Web. Hal ini dimaksudkan untuk membantu mesin pencari dan browser.
Menurut rekomendasi W3C, Anda harus menyatakan bahasa utama untuk setiap halaman Web
dengan atribut lang dalam tag html, seperti ini: <html lang="en"> ........</html>
Selector CSS :lang

Selector :lang digunakan untuk memilih elemen dengan atribut lang yang value-nya telah ditentukan.
File HTML:
p:lang(fr) {background:yellow;}
File CSS:
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
Atribut tabindex
<a href="http://www.w3schools.com/" tabindex="2">W3Schools</a><br>
<a href="http://www.google.com/" tabindex="1">Google</a><br>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
Note: - Atribut tabindex menentukan urutan tab elemen (ketika "tab" tombol digunakan untuk
navigasi).
- Dalam HTML5, atribut tabindex dapat digunakan pada setiap elemen HTML (akan
memvalidasi pada setiap elemen HTML. Namun, belum tentu berguna).
- Dalam HTML 4.01, atribut tabindex dapat digunakan dengan: <a>, <area>, <button>, <input>,
<object>, <select> dan <textarea>.
Layout HTML Menggunakan <div>

<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright W3Schools.com</div>
</div>
XHTML
XHTML adalah HTML yang penulisannya seperti XML.
Apa itu XHTML?
XHTML adalah singkatan dari EXtensible HyperText Markup Language.
XHTML hampir identik dengan HTML 4.01.
XHTML adalah versi yang lebih ketat dan bersih dari HTML 4.01.
XHTML adalah HTML yang didefinisikan sebagai aplikasi XML.
XHTML didukung oleh semua browser utama.
XML adalah markup language di mana dokumen harus ditandai dengan benar dan "well-formed".
XML didesain untuk mendeskripsikan data, sedangkan HTML didesain untuk menampilkan data.
Pasar saat ini terdiri dari teknologi browser yang berbeda. Beberapa browser berjalan pada komputer,
dan beberapa browser berjalan pada ponsel atau perangkat kecil lainnya. Perangkat yang lebih kecil
sering kekurangan sumber daya atau kekuatan untuk menafsirkan markup language yang "buruk".
Oleh karena itu dengan menggabungkan kekuatan dari HTML dan XML, XHTML dikembangkan.
XHTML dapat dibaca pada peralatan yang men-support XML.
Penulisan Wajib XHTML

Struktur Dokumen
- XHTML DOCTYPE
- Attribute XML namespace dalam <html>.
Note: - Berfungsi untuk menyesuaikan konten dengan XHTML.
Sintaksnya: <html xmlns="http://www.w3.org/1999/xhtml">
- <html>, <head>, <title> dan <body>
Contoh minimal sebuah dokumen XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
......
</body>
</html>
Elemen XHTML
- Elemen XHTML harus selalu ditutup
Contoh Sintaks: <p>This is a paragraph</p>
<br />
<hr />
<img src="happy.gif" alt="Happy face" />
- Elemen XHTML harus dalam huruf kecil
- Elemen XHTML harus tersarang (diulang) dengan benar
- Dokumen XHTML harus memiliki satu root elemen. Semua elemen XHTML harus bersarang di
antara elemen root <html>.
Atribut XHTML
- Nama atribut harus dalam huruf kecil.
- Nilai atribut harus menggunakan tanda petik (".....").
- Atribut name diganti dengan atribut id
- Atribut tidak boleh disederhanakan. Atribut tidak boleh disederhanakan dengan menghilangkan nilai
atributnya.
Contoh skrip salah:
<input checked>
<input readonly>
<input disabled>
<option selected>
Contoh skrip benar:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
Entitas Karakter HTML

Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti
awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Jika kita menginginkan
browser untuk menampilkan karakter-karakter tersebut, kita harus menyisipkan entitas karakter ke
dalam source HTML.
Contoh Entitas Karakter:
&entity_name;
ATAU
&#entity_number;
Keuntungan menggunakan entity_name daripada entity_number adalah bahwa nama lebih mudah
untuk diingat. Namun, kelemahannya adalah bahwa browser mungkin tidak mendukung semua nama
entitas (dukungan untuk nomor entitas sangat baik).
Non-breaking Space
Sebuah entitas karakter yang umum digunakan dalam HTML adalah non-breaking space ( ).
Browser akan selalu memotong space pada halaman HTML. Jika Anda menulis 10 space dalam teks
Anda, browser akan menghapus 9 dari mereka, sebelum menampilkan halaman. Untuk
menambahkan space untuk teks Anda, Anda dapat menggunakan entitas karakter.
5 Karakter Reserved dalam HTML dan XHTML
Character
Entity Number
Entity Name
Description
"
"
"
quotation mark
'
'
'
apostrophe
&
&
&
ampersand
<
<
<
less-than
>
>
>
greater-than
NAMA
_blank
_self
_parent
_top
_open
FUNGSI
Browser akan menampilkan suatu jendela baru untuk menampilkan
dokumen dari link yang diinginkan
Browser akan menampilkan pada jendela yang sama dengan jendela
pemanggilnya
Dokumen akan ditampilkan pada jendela sebelumnya.
Nilai _top akan bertindak seperti _self jika dokumen sudah berada di
jendela utama browser
Akan membuka dokumen pada seluruh jendela utama browser, tanpa
tergantung pada struktur frame saat ini.
<a href ="newframe.html" target=_parent>

Ini akan menggantikan dokumen tata letak yang sekarang dengan newframe.
_blank, ini akan membuka window baru dan menampilkan alamat yang dipanggil
disana.
_top, akan menampilkan alamat yang dipanggil di window yang sama full satu
window- tidak peduli sebelumnya ada frame atau tidak.
_self, menampilkan alamat yang dipanggil di tempat yang sama. Kalau yang
memanggil adalah sebuah frame, maka halaman yang dipanggil akan ditampilkan di
frame itu.
_parent, ini akan menampilkan alamat yang dipanggil di frameset satu tingkat lebih
tinggi dari frame yang memanggil.
ASCII Characters
ASCII Character
HTML Entity Code
Description

space
!
exclamation mark
"
"
quotation mark
#
number sign
$
dollar sign
%
percent sign
&
&
ampersand
'
'
apostrophe
(
left parenthesis
)
right parenthesis
*
asterisk
+
plus sign
,
comma
-
hyphen
.
period
/
slash
0
digit 0
1
digit 1
2
digit 2
3
digit 3
4
digit 4
5
digit 5
6
digit 6
7
digit 7
8
digit 8
9
digit 9
:
colon
;
semicolon
<
<
less-than
=
equals-to
>
>
greater-than
?
question mark
@
at sign
A
uppercase A
B
uppercase B
C
uppercase C
D
uppercase D
E
uppercase E
F
uppercase F
G
uppercase G
H
uppercase H
I
uppercase I
J
uppercase J
K
uppercase K
L
uppercase L
M
uppercase M
N
uppercase N
O
uppercase O
P
uppercase P
Q
uppercase Q
R
uppercase R
S
uppercase S
T
uppercase T
U
uppercase U
V
uppercase V
W
uppercase W
X
uppercase X
Y
uppercase Y
Z
uppercase Z
[
left square bracket
\
backslash
]
right square bracket
^
caret
_
underscore
`
grave accent
a
lowercase a
b
lowercase b
c
lowercase c
d
lowercase d
e
lowercase e
f
lowercase f
g
lowercase g
h
lowercase h
i
lowercase i
j
lowercase j
k
lowercase k
l
lowercase l
m
lowercase m
n
lowercase n
o
lowercase o
p
lowercase p
q
lowercase q
r
lowercase r
s
lowercase s
t
lowercase t
u
lowercase u
v
lowercase v
w
lowercase w
x
lowercase x
y
lowercase y
z
lowercase z
{
left curly brace
|
vertical bar
}
right curly brace
~
tilde
Entitas Simbol ISO 8859-1

Character
Entity Number
Entity Name
Description

non-breaking space
¡
¡
inverted exclamation mark
¢
¢
cent
£
£
pound
¤
¤
currency
¥
¥
yen
¦
¦
broken vertical bar
§
§
section
¨
¨
spacing diaeresis
©
©
copyright
ª
ª
feminine ordinal indicator
«
«
angle quotation mark (left)
¬
¬
negation

soft hyphen
®
®
registered trademark
¯
¯
spacing macron
°
°
degree
±
±
plus-or-minus
²
²
superscript 2
³
³
superscript 3
´
´
spacing acute
µ
µ
micro
¶
¶
paragraph
·
·
middle dot
¸
¸
spacing cedilla
¹
¹
superscript 1
º
º
masculine ordinal indicator
»
»
angle quotation mark (right)
¼
¼
fraction 1/4
½
½
fraction 1/2
¾
¾
fraction 3/4
¿
¿
inverted question mark
×
×
multiplication
÷
÷
division
Entitas Karakter (ISO 8859-1)

Character
Entity Number
Entity Name
Description
À
À
capital a, grave accent
Á
Á
capital a, acute accent
Â
Â
capital a, circumflex accent
Ã
Ã
capital a, tilde
Ä
Ä
capital a, umlaut mark
Å
Å
capital a, ring
Æ
Æ
capital ae
Ç
Ç
capital c, cedilla
È
È
capital e, grave accent
É
É
capital e, acute accent
Ê
Ê
capital e, circumflex accent
Ë
Ë
capital e, umlaut mark
Ì
Ì
capital i, grave accent
Í
Í
capital i, acute accent
Î
Î
capital i, circumflex accent
Ï
Ï
capital i, umlaut mark
Ð
Ð
capital eth, Icelandic
Ñ
Ñ
capital n, tilde
Ò
Ò
capital o, grave accent
Ó
Ó
capital o, acute accent
Ô
Ô
capital o, circumflex accent
Õ
Õ
capital o, tilde
Ö
Ö
capital o, umlaut mark
Ø
Ø
capital o, slash
Ù
Ù
capital u, grave accent
Ú
Ú
capital u, acute accent
Û
Û
capital u, circumflex accent
Ü
Ü
capital u, umlaut mark
Ý
Ý
capital y, acute accent
Þ
Þ
capital THORN, Icelandic
ß
ß
small sharp s, German
à
à
small a, grave accent
á
á
small a, acute accent
â
â
small a, circumflex accent
ã
ã
small a, tilde
ä
ä
small a, umlaut mark
å
å
small a, ring
æ
æ
small ae
ç
ç
small c, cedilla
è
è
small e, grave accent
é
é
small e, acute accent
ê
ê
small e, circumflex accent
ë
ë
small e, umlaut mark
ì
ì
small i, grave accent
í
í
small i, acute accent
î
î
small i, circumflex accent
ï
ï
small i, umlaut mark
ð
ð
small eth, Icelandic
ñ
ñ
small n, tilde
ò
ò
small o, grave accent
ó
ó
small o, acute accent
ô
ô
small o, circumflex accent
õ
õ
small o, tilde
ö
ö
small o, umlaut mark
ø
ø
small o, slash
ù
ù
small u, grave accent
ú
ú
small u, acute accent
û
û
small u, circumflex accent
ü
ü
small u, umlaut mark
ý
ý
small y, acute accent
þ
þ
small thorn, Icelandic
ÿ
ÿ
small y, umlaut mark
HTTP Status Messages

Ketika browser meminta layanan dari web server, kesalahan mungkin terjadi. Ini adalah daftar pesan
status HTTP yang mungkin dikembalikan:
1xx: Information
Message:
Description:
100 Continue
The server has received the request headers, and the client should
proceed to send the request body
101 Switching Protocols
The requester has asked the server to switch protocols
103 Checkpoint
Used in the resumable requests proposal to resume aborted PUT or

POST requests
2xx: Successful
Message:
Description:
200 OK
The request is OK (this is the standard response for successful HTTP

requests)
201 Created
The request has been fulfilled, and a new resource is created
202 Accepted
The request has been accepted for processing, but the processing has
not been completed
203 Non-Authoritative Information
The request has been successfully processed, but is returning

information that may be from another source
204 No Content
The request has been successfully processed, but is not returning any
content
205 Reset Content
The request has been successfully processed, but is not returning any
content, and requires that the requester reset the document view
206 Partial Content
The server is delivering only part of the resource due to a range

header sent by the client
3xx: Redirection
Message:
Description:
300 Multiple Choices
A link list. The user can select a link and go to that location.
Maximum five addresses
301 Moved Permanently
The requested page has moved to a new URL
302 Found
The requested page has moved temporarily to a new URL
303 See Other
The requested page can be found under a different URL
304 Not Modified
Indicates the requested page has not been modified since last
requested
306 Switch Proxy
No longer used
307 Temporary Redirect
The requested page has moved temporarily to a new URL
308 Resume Incomplete
Used in the resumable requests proposal to resume aborted PUT or

POST requests
4xx: Client Error

Message:
Description:
400 Bad Request
The request cannot be fulfilled due to bad syntax
401 Unauthorized
The request was a legal request, but the server is refusing to respond
to it. For use when authentication is possible but has failed or not yet
been provided
402 Payment Required
Reserved for future use
403 Forbidden
The request was a legal request, but the server is refusing to respond
to it
404 Not Found
The requested page could not be found but may be available again in
the future
405 Method Not Allowed
A request was made of a page using a request method not supported

by that page
406 Not Acceptable
The server can only generate a response that is not accepted by the
client
407 Proxy Authentication Required
The client must first authenticate itself with the proxy
408 Request Timeout
The server timed out waiting for the request
409 Conflict
The request could not be completed because of a conflict in the

request
410 Gone
The requested page is no longer available
411 Length Required
The "Content-Length" is not defined. The server will not accept the
request without it
412 Precondition Failed
The precondition given in the request evaluated to false by the server
413 Request Entity Too Large
The server will not accept the request, because the request entity is
too large
414 Request-URI Too Long
The server will not accept the request, because the URL is too long.
Occurs when you convert a POST request to a GET request with a
long query information
415 Unsupported Media Type
The server will not accept the request, because the media type is not
supported
416 Requested Range Not Satisfiable
The client has asked for a portion of the file, but the server cannot
supply that portion
417 Expectation Failed
The server cannot meet the requirements of the Expect requestheader field
5xx: Server Error
Message:
Description:
500 Internal Server Error
A generic error message, given when no more specific message is

suitable
501 Not Implemented
The server either does not recognize the request method, or it lacks
the ability to fulfill the request
502 Bad Gateway
The server was acting as a gateway or proxy and received an invalid

response from the upstream server
503 Service Unavailable
The server is currently unavailable (overloaded or down)
504 Gateway Timeout
The server was acting as a gateway or proxy and did not receive a
timely response from the upstream server
505 HTTP Version Not Supported
The server does not support the HTTP protocol version used in the
request
511 Network Authentication Required
The client needs to authenticate to gain network access

Kumpulan Kode HTML 4.01

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kumpulan Kode HTML 4.01

Diunggah oleh

Hak Cipta:

Format Tersedia

JENIS-JENIS DOCTYPE

Note: HTML5 tidak memerlukan referensi untuk DTD.

HTML 4.01 Strict

HTML 4.01 Frameset

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

<link rel=stylesheet type=text/css href=contoh1.css>

Note: Diletakkan di dalam tag <body>

<meta http-equiv="refresh" content="30">

Digunakan untuk mendefinisikan teks yang ditekankan.

Digunakan untuk mendefinisikan istilah.

Tag <pre> mendefinisikan teks terformat.

Digunakan untuk mengubah arah teks.

Note: - Tag <q> mendefinisikan kutipan pendek.

patung, dll). Sebuah nama seseorang bukanlah judul karya.

Note: - Tidak support di HTML 5 dan ditinggalkan di HTML 4.01.

Contoh Output: Dua puluh

Dalam HTML 4.01 elemen <u> sudah ditinggalkan.

Contoh Output: Dua belas

Note: - Tidak support di HTML 5 dan ditinggalkan di HTML 4.01.

LINK PADA LOKASI DI HALAMAN YANG SAMA

<a id="bawah"> 10 </a>

Note: - Atribut rev tidak didukung di HTML5.

mailto apa fungsinya???

<ol type=1 | a | A | i | I start=7>

Nested List (List Bercabang).

Untuk mendefinisikan daftar (list) definisi.

Contoh Sintaks: <dl>

Note: - Tidak support di HTML 5 dan ditinggalkan di HTML 4.01.

<table width="pixels | %">

Mendefinisikan sebuah tabel dalam HTML.

<table border="1" width="400">

<td valign="top | middle | bottom | baseline">

Value collapse dari Properti visibility (CSS)

TAG DI DALAM SUATU TABEL

TABEL DI DALAM TABEL

<colgroup> dan <col>

<thead>, <tfoot> dan <tbody>

<thead>, <tfoot> dan <tbody>

LAYOUT HTML MENGGUNAKAN TABEL

<frameset>.......</frameset> dan <frame>........<frame>

Sintaks: <frameset cols="pixels | % | *">

Note: - Atribut frameborder="0" digunakan untuk membuat Iframe tanpa border.

Note: - Iframe dapat digunakan sebagai frame target

HTML <input> Atribut name

HTML <input> Attribute value

HTML <input> Attribute size

HTML <input> Attribute maxlength

Note: - Atribut name menentukan nama pada elemen <input>.

DROP - DOWN LIST

Input type: submit

Input type: reset

Input type: file

Input type: image

Note: - Atribut name digunakan untuk menentukan nama form.

Perbedaan method="get" dan method="post"

Mengirim Mail dari Form

Form dengan checkboxes

Form dengan radio buttons

Note: - Tidak support di HTML 5 dan ditinggalkan di HTML 4.01.

Note: Mengatur parameter "autoplay" ke "true",

Note: - Atribut title menspesifikasikan informasi tambahan mengenai suatu elemen.

Selector CSS :lang