Senin, 10 September 2012
HTML <!--...--> Tag
Definisi dan Penggunaan
• Tag komentar digunakan untuk menyisipkan komentar dalam kode sumber. Komentar tidak ditampilkan dalam browser.
• Anda dapat menggunakan komentar untuk menjelaskan kode Anda, yang dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Hal ini sangat berguna jika Anda memiliki banyak kode.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag komentar digunakan untuk menyisipkan komentar dalam kode sumber. Komentar tidak ditampilkan dalam browser.
• Anda dapat menggunakan komentar untuk menjelaskan kode Anda, yang dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Hal ini sangat berguna jika Anda memiliki banyak kode.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <doctype> Tag
Definisi dan Penggunaan
• The <DOCTYPE!> Deklarasi harus menjadi hal pertama dalam dokumen HTML Anda, sebelum tag <html>.
• Deklarasi bukanlah tag HTML <DOCTYPE!>, Itu adalah instruksi ke browser web tentang apa versi HTML halaman yang ditulis masuk
• Dalam HTML 4.01, yang <DOCTYPE!> Deklarasi mengacu pada DTD, karena HTML 4.01 didasarkan pada SGML. DTD menetapkan aturan untuk bahasa markup, sehingga browser membuat konten dengan benar.
• HTML5 tidak didasarkan pada SGML, dan karenanya tidak memerlukan referensi ke DTD.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
« Mencoba Sendiri »
• The <DOCTYPE!> Deklarasi harus menjadi hal pertama dalam dokumen HTML Anda, sebelum tag <html>.
• Deklarasi bukanlah tag HTML <DOCTYPE!>, Itu adalah instruksi ke browser web tentang apa versi HTML halaman yang ditulis masuk
• Dalam HTML 4.01, yang <DOCTYPE!> Deklarasi mengacu pada DTD, karena HTML 4.01 didasarkan pada SGML. DTD menetapkan aturan untuk bahasa markup, sehingga browser membuat konten dengan benar.
• HTML5 tidak didasarkan pada SGML, dan karenanya tidak memerlukan referensi ke DTD.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
« Mencoba Sendiri »
HTML <a> Tag
Definisi dan Penggunaan
• Tag <a> mendefinisikan jangkar. Jangkar dapat digunakan dalam dua cara:
° Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
° Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama
• Unsur <a> biasanya disebut sebagai link atau hyperlink.
• Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.
• Secara default, link akan muncul sebagai berikut di semua browser:
° Link belum dikunjungi digarisbawahi dan biru
° Sebuah link dikunjungi digarisbawahi dan ungu
° Link aktif digarisbawahi dan merah
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
</body>
</html>
« Mencoba Sendiri »
• Tag <a> mendefinisikan jangkar. Jangkar dapat digunakan dalam dua cara:
° Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
° Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama
• Unsur <a> biasanya disebut sebagai link atau hyperlink.
• Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.
• Secara default, link akan muncul sebagai berikut di semua browser:
° Link belum dikunjungi digarisbawahi dan biru
° Sebuah link dikunjungi digarisbawahi dan ungu
° Link aktif digarisbawahi dan merah
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
</body>
</html>
« Mencoba Sendiri »
HTML <abbr> Tag
Definisi dan Penggunaan
• Tag <abbr> menjelaskan frase disingkat.
• Dengan menandai singkatan Anda dapat memberikan informasi yang berguna untuk browser, mantra catur sistem penerjemahan, dan search engine-pengindeks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body>
</html>
« Mencoba Sendiri »
• Tag <abbr> menjelaskan frase disingkat.
• Dengan menandai singkatan Anda dapat memberikan informasi yang berguna untuk browser, mantra catur sistem penerjemahan, dan search engine-pengindeks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body>
</html>
« Mencoba Sendiri »
HTML <acronym> Tag
Definisi dan Penggunaan
• Tag <acronym> mendefinisikan akronim.
• Akronim dapat berbicara seolah-olah itu adalah sebuah kata, misalnya NATO, NASA, ASAP, GUI.
• Dengan menandai singkatan Anda dapat memberikan informasi yang berguna untuk browser, mantra catur sistem penerjemahan, dan search engine-pengindeks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
</body>
</html>
« Mencoba Sendiri »
• Tag <acronym> mendefinisikan akronim.
• Akronim dapat berbicara seolah-olah itu adalah sebuah kata, misalnya NATO, NASA, ASAP, GUI.
• Dengan menandai singkatan Anda dapat memberikan informasi yang berguna untuk browser, mantra catur sistem penerjemahan, dan search engine-pengindeks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
</body>
</html>
« Mencoba Sendiri »
HTML <address> Tag
Definisi dan Penggunaan
• Tag <address> mendefinisikan informasi kontak untuk penulis atau pemilik dokumen. Dengan cara ini, pembaca dapat menghubungi pemilik dokumen.
• Unsur <address> biasanya ditambahkan ke header atau footer dari halaman web.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
« Mencoba Sendiri »
• Tag <address> mendefinisikan informasi kontak untuk penulis atau pemilik dokumen. Dengan cara ini, pembaca dapat menghubungi pemilik dokumen.
• Unsur <address> biasanya ditambahkan ke header atau footer dari halaman web.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
« Mencoba Sendiri »
HTML <applet> Tag
Definisi dan Penggunaan
• Tag <applet> mendefinisikan sebuah applet tertanam.
• Contoh Penggunaan :
<applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.
</applet>
• Tag <applet> mendefinisikan sebuah applet tertanam.
• Contoh Penggunaan :
<applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.
</applet>
HTML <area> Tag
Definisi dan Penggunaan
• Tag <area> mendefinisikan daerah dalam peta gambar-(gambar-peta adalah gambar dengan area yang dapat diklik).
• Unsur <area> selalu bersarang di dalam tag <map>.
• Contoh Penggunaan
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
« Mencoba Sendiri »
HTML <b> Tag
Definisi dan Penggunaan
• Tag <b> mendefinisikan untuk penghitaman text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<b>This text is bold</b><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <b> mendefinisikan untuk penghitaman text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<b>This text is bold</b><br />
</body>
</html>
« Mencoba Sendiri »
HTML <base> Tag
Definisi dan Penggunaan
• Tag <base> menentukan URL dasar / target untuk semua URL relatif dalam dokumen.
• Tag <base> masuk ke dalam elemen <head>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<base href="http://www.w3schools.com/images/" target="_blank" />
</head>
<body>
<img src="stickman.gif" width="24" height="39" /> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif"
<br /><br />
<a href="http://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
</body>
</html>
« Mencoba Sendiri »
• Tag <base> menentukan URL dasar / target untuk semua URL relatif dalam dokumen.
• Tag <base> masuk ke dalam elemen <head>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<base href="http://www.w3schools.com/images/" target="_blank" />
</head>
<body>
<img src="stickman.gif" width="24" height="39" /> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif"
<br /><br />
<a href="http://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
</body>
</html>
« Mencoba Sendiri »
HTML <basefont> Tag
Definisi dan Penggunaan
• Tag <basefont> menentukan default font-warna, font-size, atau font-family untuk semua teks dalam dokumen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<basefont color="red" size="5" />
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
<p>The basefont element was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <basefont> menentukan default font-warna, font-size, atau font-family untuk semua teks dalam dokumen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<basefont color="red" size="5" />
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
<p>The basefont element was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <bdo> Tag
Definisi dan Penggunaan
• bdo singkatan Bi-Directional Override.
• Tag <bdo> digunakan untuk mengesampingkan arah teks saat ini. Atau bisa juga dibilang membalikkan bacaan text dari kanan ke kiri.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<bdo dir="rtl">Here is some Hebrew text that should be written from right-to-left!</bdo>
</body>
</html>
« Mencoba Sendiri »
• bdo singkatan Bi-Directional Override.
• Tag <bdo> digunakan untuk mengesampingkan arah teks saat ini. Atau bisa juga dibilang membalikkan bacaan text dari kanan ke kiri.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<bdo dir="rtl">Here is some Hebrew text that should be written from right-to-left!</bdo>
</body>
</html>
« Mencoba Sendiri »
HTML <big> Tag
Definisi dan Penggunaan
• Tag <big> mendefinisikan pembesaran text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami merencanakan liburan tahun baru.<br/>
<br/>
<big>Ke Kota Bali 90%</big>
</body>
</html>
« Mencoba Sendiri »
• Tag <big> mendefinisikan pembesaran text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami merencanakan liburan tahun baru.<br/>
<br/>
<big>Ke Kota Bali 90%</big>
</body>
</html>
« Mencoba Sendiri »
HTML <blockquote> Tag
Definisi dan Penggunaan
• Tag <blockquote> mendefinisikan kutipan panjang.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
Notice that a browser inserts white space before and after a blockquote element. It also inserts margins for the blockquote element.
</body>
</html>
« Mencoba Sendiri »
• Tag <blockquote> mendefinisikan kutipan panjang.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
Notice that a browser inserts white space before and after a blockquote element. It also inserts margins for the blockquote element.
</body>
</html>
« Mencoba Sendiri »
HTML <body> Tag
Definisi dan Penggunaan
• Tag <body> mendefinisikan tubuh dokumen.
• Unsur <body> berisi semua isi dari dokumen HTML, seperti teks, hyperlink, gambar, tabel, daftar, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
Bagian Body
</body>
</html>
« Mencoba Sendiri »
• Tag <body> mendefinisikan tubuh dokumen.
• Unsur <body> berisi semua isi dari dokumen HTML, seperti teks, hyperlink, gambar, tabel, daftar, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
Bagian Body
</body>
</html>
« Mencoba Sendiri »
HTML <br> Tag
Definisi dan Penggunaan
• Tag <br> menyisipkan satu baris tunggal.
• Tag <br> adalah tag kosong yang berarti bahwa ia tidak memiliki tag akhir.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br element.
</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <br> menyisipkan satu baris tunggal.
• Tag <br> adalah tag kosong yang berarti bahwa ia tidak memiliki tag akhir.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br element.
</p>
</body>
</html>
« Mencoba Sendiri »
HTML <button> Tag
Definisi dan Penggunaan
• Tag <button> mendefinisikan sebuah tombol.
• Di dalam elemen <button> Anda dapat menempatkan konten, seperti teks atau gambar. Ini adalah perbedaan antara elemen dan tombol dibuat dengan elemen <input>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>
« Mencoba Sendiri »
• Tag <button> mendefinisikan sebuah tombol.
• Di dalam elemen <button> Anda dapat menempatkan konten, seperti teks atau gambar. Ini adalah perbedaan antara elemen dan tombol dibuat dengan elemen <input>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>
« Mencoba Sendiri »
HTML <caption> Tag
Definisi dan Penggunaan
• Tag <caption> mendefinisikan judul tabel.
• Tag <caption> harus dimasukkan segera setelah tag table.
• Anda dapat menentukan hanya satu caption per tabel.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag <caption> mendefinisikan judul tabel.
• Tag <caption> harus dimasukkan segera setelah tag table.
• Anda dapat menentukan hanya satu caption per tabel.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
HTML <center> Tag
Definisi dan Penggunaan
• Tag <center> digunakan untuk membuat teks berada ditegah halaman.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Satu</p>
<center>Tengah</center>
<p>Dua</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <center> digunakan untuk membuat teks berada ditegah halaman.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Satu</p>
<center>Tengah</center>
<p>Dua</p>
</body>
</html>
« Mencoba Sendiri »
HTML <cite> Tag
Definisi dan Penggunaan
• Tag <cite> mendefinisikan kutipan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <cite> mendefinisikan kutipan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <code> Tag
Definisi dan Penggunaan
• Tag <code> mendefinisikan sepotong kode komputer.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <code> mendefinisikan sepotong kode komputer.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <col> Tag
Definisi dan Penggunaan
• Tag <col> mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel.
• Tag <col> berguna untuk menerapkan gaya untuk kolom keseluruhan, bukannya mengulangi gaya untuk setiap sel, untuk setiap baris.
• Tag <col> hanya dapat digunakan di dalam table atau elemen <colgroup>.
• Contoh Penggunaan :
<!DOCTYPE html>
<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>
« Mencoba Sendiri »
• Tag <col> mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel.
• Tag <col> berguna untuk menerapkan gaya untuk kolom keseluruhan, bukannya mengulangi gaya untuk setiap sel, untuk setiap baris.
• Tag <col> hanya dapat digunakan di dalam table atau elemen <colgroup>.
• Contoh Penggunaan :
<!DOCTYPE html>
<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>
« Mencoba Sendiri »
HTML <colgroup> Tag
Definisi dan Penggunaan
• Tag <colgroup> digunakan untuk kolom kelompok di meja untuk format.
• Tag <colgroup> berguna untuk menerapkan gaya untuk kolom keseluruhan, bukannya mengulangi gaya untuk setiap sel, untuk setiap baris.
• Tag <colgroup> hanya dapat digunakan di dalam elemen table.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="1">
<colgroup span="2" style="background-color:#FF0000;"></colgroup>
<colgroup style="background-color:#0000FF;"></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>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag <colgroup> digunakan untuk kolom kelompok di meja untuk format.
• Tag <colgroup> berguna untuk menerapkan gaya untuk kolom keseluruhan, bukannya mengulangi gaya untuk setiap sel, untuk setiap baris.
• Tag <colgroup> hanya dapat digunakan di dalam elemen table.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="1">
<colgroup span="2" style="background-color:#FF0000;"></colgroup>
<colgroup style="background-color:#0000FF;"></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>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
HTML <dd> Tag
Definisi dan Penggunaan
• Tag <dd> digunakan untuk menggambarkan item dalam daftar definisi.
• Tag <dd> digunakan dalam hubungannya dengan <dl> (mendefinisikan daftar definisi) dan <dt> (mendefinisikan item dalam daftar).
• Di dalam tag <dd> Anda dapat menempatkan paragraf, line break, gambar, link, daftar, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
• Tag <dd> digunakan untuk menggambarkan item dalam daftar definisi.
• Tag <dd> digunakan dalam hubungannya dengan <dl> (mendefinisikan daftar definisi) dan <dt> (mendefinisikan item dalam daftar).
• Di dalam tag <dd> Anda dapat menempatkan paragraf, line break, gambar, link, daftar, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
HTML <del> Tag
Definisi dan Penggunaan
• Tag <del> mendefinisikan teks yang telah dihapus dari dokumen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <dfn> Tag
Definisi dan Penggunaan
• Tag <dfn> mendefinisikan sebuah istilah definisi.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <dfn> mendefinisikan sebuah istilah definisi.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <dir> Tag
Definisi dan Penggunaan
• Tag <dir> digunakan untuk daftar judul direktori.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
</body>
</html>
« Mencoba Sendiri »
• Tag <dir> digunakan untuk daftar judul direktori.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
</body>
</html>
« Mencoba Sendiri »
HTML <div> Tag
Definisi dan Penggunaan
• Tag <div> mendefinisikan sebuah divisi atau bagian dalam dokumen HTML.
• Tag <div> digunakan untuk kelompok blok-elemen untuk memformat mereka dengan gaya.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
« Mencoba Sendiri »
• Tag <div> mendefinisikan sebuah divisi atau bagian dalam dokumen HTML.
• Tag <div> digunakan untuk kelompok blok-elemen untuk memformat mereka dengan gaya.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
« Mencoba Sendiri »
HTML <dl> Tag
Definisi dan Penggunaan
• Tag <dl> mendefinisikan daftar definisi.
• Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam daftar) dan <dd> (menjelaskan item dalam daftar).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
• Tag <dl> mendefinisikan daftar definisi.
• Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam daftar) dan <dd> (menjelaskan item dalam daftar).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
HTML <dt> Tag
Definisi dan Penggunaan
• Tag <dt> mendefinisikan item dalam daftar definisi.
• Tag <dt> digunakan dalam hubungannya dengan <dl> (mendefinisikan daftar definisi) dan <dd> (menjelaskan item dalam daftar).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
• Tag <dt> mendefinisikan item dalam daftar definisi.
• Tag <dt> digunakan dalam hubungannya dengan <dl> (mendefinisikan daftar definisi) dan <dd> (menjelaskan item dalam daftar).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
« Mencoba Sendiri »
HTML <em> Tag
Definisi dan Penggunaan
• Tag <em> mendefinisikan penekanan text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <em> mendefinisikan penekanan text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <fieldset> Tag
Definisi dan Penggunaan
• Tag <fieldset> digunakan untuk elemen kelompok terkait dalam bentuk.
• Tag <fieldset> menggambar sebuah kotak sekitar unsur-unsur terkait.
• Tip: Tag <legend> mendefinisikan keterangan untuk elemen <fieldset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>
</body>
</html>
« Mencoba Sendiri »
• Tag <fieldset> digunakan untuk elemen kelompok terkait dalam bentuk.
• Tag <fieldset> menggambar sebuah kotak sekitar unsur-unsur terkait.
• Tip: Tag <legend> mendefinisikan keterangan untuk elemen <fieldset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>
</body>
</html>
« Mencoba Sendiri »
HTML <font> Tag
Definisi dan Penggunaan
• Tag <font> menentukan font, ukuran font, dan warna font teks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
</body>
</html>
« Mencoba Sendiri »
• Tag <font> menentukan font, ukuran font, dan warna font teks.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
</body>
</html>
« Mencoba Sendiri »
HTML <form> Tag
Definisi dan Penggunaan
• Tag <form> digunakan untuk membuat bentuk HTML untuk input pengguna.
• Unsur <form> dapat berisi satu atau lebih elemen form berikut:
° <input>
° <textarea>
° <button>
° <select>
° <option>
° <optgroup>
° <fieldset>
° <label>
• Sebuah bentuk HTML digunakan untuk melewatkan data ke server.
• Tip: Elemen <form> adalah elemen tingkat blok, dan browser membuat baris istirahat sebelum dan setelah form.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <form> digunakan untuk membuat bentuk HTML untuk input pengguna.
• Unsur <form> dapat berisi satu atau lebih elemen form berikut:
° <input>
° <textarea>
° <button>
° <select>
° <option>
° <optgroup>
° <fieldset>
° <label>
• Sebuah bentuk HTML digunakan untuk melewatkan data ke server.
• Tip: Elemen <form> adalah elemen tingkat blok, dan browser membuat baris istirahat sebelum dan setelah form.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p>
</body>
</html>
« Mencoba Sendiri »
HTML <frame> Tag
Definisi dan Penggunaan
• Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah <frameset>.
• Setiap <frame> di <frameset> dapat memiliki atribut yang berbeda, seperti perbatasan, bergulir, kemampuan untuk mengubah ukuran, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
« Mencoba Sendiri »
• Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah <frameset>.
• Setiap <frame> di <frameset> dapat memiliki atribut yang berbeda, seperti perbatasan, bergulir, kemampuan untuk mengubah ukuran, dll.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
« Mencoba Sendiri »
HTML <frameset> Tag
Definisi dan Penggunaan
• Tag <frameset> mendefinisikan sebuah frameset.
• Unsur <frameset> memegang satu atau lebih elemen <frame>. Setiap elemen <frame> dapat memegang dokumen terpisah.
• Unsur <frameset> menentukan BERAPA BANYAK kolom atau baris akan ada di frameset, dan berapa banyak ruang persentase / pixel akan ditempati masing-masing.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
« Mencoba Sendiri »
• Tag <frameset> mendefinisikan sebuah frameset.
• Unsur <frameset> memegang satu atau lebih elemen <frame>. Setiap elemen <frame> dapat memegang dokumen terpisah.
• Unsur <frameset> menentukan BERAPA BANYAK kolom atau baris akan ada di frameset, dan berapa banyak ruang persentase / pixel akan ditempati masing-masing.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
« Mencoba Sendiri »
HTML <h1> to <h6> Tag
Definisi dan Penggunaan
• Tag <h1> sampai <h6> digunakan untuk mendefinisikan judul HTML.
• <h1> mendefinisikan posisi yang paling penting. <h6> mendefinisikan pos yang paling tidak penting.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>
Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.
</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <h1> sampai <h6> digunakan untuk mendefinisikan judul HTML.
• <h1> mendefinisikan posisi yang paling penting. <h6> mendefinisikan pos yang paling tidak penting.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>
Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.
</p>
</body>
</html>
« Mencoba Sendiri »
HTML <head> Tag
Definisi dan Penggunaan
• Elemen <head> merupakan wadah untuk semua elemen kepala.
• Unsur <head> harus memasukkan judul untuk dokumen, dan dapat termasuk script, gaya, informasi meta, dan banyak lagi.
• Unsur-unsur berikut ini dapat masuk ke dalam elemen <head>:
° <title> (elemen ini diperlukan di bagian head)
° <style>
° <base>
° <link>
° <meta>
° <script>
° <noscript>
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
</head>
<body>
Bagian Body
</body>
</html>
« Mencoba Sendiri »
• Elemen <head> merupakan wadah untuk semua elemen kepala.
• Unsur <head> harus memasukkan judul untuk dokumen, dan dapat termasuk script, gaya, informasi meta, dan banyak lagi.
• Unsur-unsur berikut ini dapat masuk ke dalam elemen <head>:
° <title> (elemen ini diperlukan di bagian head)
° <style>
° <base>
° <link>
° <meta>
° <script>
° <noscript>
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
</head>
<body>
Bagian Body
</body>
</html>
« Mencoba Sendiri »
HTML <hr> Tag
Definisi dan Penggunaan
• Tag <hr> menciptakan garis horizontal di halaman HTML.
• Unsur <hr> dapat digunakan untuk konten terpisah dalam sebuah halaman HTML.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr />
<p>This is some text.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <hr> menciptakan garis horizontal di halaman HTML.
• Unsur <hr> dapat digunakan untuk konten terpisah dalam sebuah halaman HTML.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr />
<p>This is some text.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <html> Tag
Definisi dan Penggunaan
• Tag <html> memberitahu browser bahwa ini adalah dokumen HTML.
• Unsur <html> juga dikenal sebagai elemen root.
• Tag <html> adalah wadah untuk semua elemen HTML lainnya (kecuali untuk tag <DOCTYPE!>).
• Tag <html> memberitahu browser bahwa ini adalah dokumen HTML.
• Unsur <html> juga dikenal sebagai elemen root.
• Tag <html> adalah wadah untuk semua elemen HTML lainnya (kecuali untuk tag <DOCTYPE!>).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>HTML 4.01 Tag Reference</title>
</head>
<body>
<p>The content of the body element is displayed in the browser.</p>
<p>The content of the title element is displayed in the browser's title.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <i> Tag
Definisi dan Penggunaan
• Tag <i> mendefenisikan text miring.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Aku sangat ingin <i>hidup</i> bebas
</body>
</html>
« Mencoba Sendiri »
• Tag <i> mendefenisikan text miring.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Aku sangat ingin <i>hidup</i> bebas
</body>
</html>
« Mencoba Sendiri »
HTML <iframe> Tag
Deskripsi dan Penggunaan
• Tag <iframe> menentukan kerangka inline.
• Sebuah bingkai inline digunakan untuk menanamkan dokumen lain dalam dokumen HTML saat ini.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
« Mencoba Sendiri »
• Tag <iframe> menentukan kerangka inline.
• Sebuah bingkai inline digunakan untuk menanamkan dokumen lain dalam dokumen HTML saat ini.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
« Mencoba Sendiri »
HTML <img> Tag
Deskripsi dan Penggunaan
• Tag <img> mendefinisikan gambar dalam sebuah halaman HTML.
• Tag <img> memiliki dua atribut yang diperlukan: src dan alt.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42" />
</body>
</html>
« Mencoba Sendiri »
• Tag <img> mendefinisikan gambar dalam sebuah halaman HTML.
• Tag <img> memiliki dua atribut yang diperlukan: src dan alt.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42" />
</body>
</html>
« Mencoba Sendiri »
HTML <input> Tag
Deskripsi dan Penggunaan
• Tag <input> digunakan untuk memilih informasi pengguna.
• Elemen <input> digunakan dalam elemen <form> untuk menyatakan kontrol input yang memungkinkan pengguna untuk input data.
• Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <input> digunakan untuk memilih informasi pengguna.
• Elemen <input> digunakan dalam elemen <form> untuk menyatakan kontrol input yang memungkinkan pengguna untuk input data.
• Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p>
</body>
</html>
« Mencoba Sendiri »
HTML <ins> Tag
Definisi dan Penggunaan
• Tag <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <kbd> Tag
Deskripsi dan Penggunaan
• Tag <kbd> mendefinisikan inputan keyboard.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <kbd> mendefinisikan inputan keyboard.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <label> Tag
Deskripsi dan Penggunaan
• Tag <label> mendefinisikan sebuah label untuk sebuah elemen <input>.
• Unsur <label> tidak membuat sebagai sesuatu yang istimewa bagi pengguna. Namun, ia menyediakan peningkatan kegunaan untuk pengguna mouse, karena jika pengguna mengklik pada teks dalam elemen <label>, ia mengubah kontrol.
• Untuk atribut dari tag <label> harus sama dengan atribut id dari elemen terkait untuk mengikat mereka bersama-sama.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>
« Mencoba Sendiri »
• Tag <label> mendefinisikan sebuah label untuk sebuah elemen <input>.
• Unsur <label> tidak membuat sebagai sesuatu yang istimewa bagi pengguna. Namun, ia menyediakan peningkatan kegunaan untuk pengguna mouse, karena jika pengguna mengklik pada teks dalam elemen <label>, ia mengubah kontrol.
• Untuk atribut dari tag <label> harus sama dengan atribut id dari elemen terkait untuk mengikat mereka bersama-sama.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>
« Mencoba Sendiri »
HTML <legend> Tag
Deskripsi dan Penggunaan
• Tag <legend> mendefinisikan keterangan untuk elemen <fieldset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>
</body>
</html>
« Mencoba Sendiri »
• Tag <legend> mendefinisikan keterangan untuk elemen <fieldset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>
</form>
</body>
</html>
« Mencoba Sendiri »
HTML <li> Tag
Deskripsi dan Penggunaan
• Tag <li> mendefinisikan sebuah item daftar.
• Tag <li> digunakan dalam kedua memerintahkan (<ol>) dan unordered (<ul>) list.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>An ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
« Mencoba Sendiri »
• Tag <li> mendefinisikan sebuah item daftar.
• Tag <li> digunakan dalam kedua memerintahkan (<ol>) dan unordered (<ul>) list.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>An ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
« Mencoba Sendiri »
HTML <link> Tag
Deskripsi dan Penggunaan
• Tag <link> mendefinisikan hubungan antara dokumen dan sumber daya eksternal.
• Tag <link> paling digunakan untuk link ke style sheet.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <link> mendefinisikan hubungan antara dokumen dan sumber daya eksternal.
• Tag <link> paling digunakan untuk link ke style sheet.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
« Mencoba Sendiri »
HTML <map> Tag
Deskripsi dan Penggunaan
• Tag <map> digunakan untuk mendefinisikan klien-sisi gambar-peta. Sebuah gambar-peta adalah gambar dengan daerah yang dapat diklik.
• Atribut nama elemen <map> diperlukan dan hal ini terkait dengan atribut usemap yang <img> 's dan menciptakan hubungan antara gambar dan peta.
• Elemen <map> berisi sejumlah elemen <area>, yang mendefinisikan daerah yang dapat diklik dalam peta gambar.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
« Mencoba Sendiri »
• Tag <map> digunakan untuk mendefinisikan klien-sisi gambar-peta. Sebuah gambar-peta adalah gambar dengan daerah yang dapat diklik.
• Atribut nama elemen <map> diperlukan dan hal ini terkait dengan atribut usemap yang <img> 's dan menciptakan hubungan antara gambar dan peta.
• Elemen <map> berisi sejumlah elemen <area>, yang mendefinisikan daerah yang dapat diklik dalam peta gambar.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
« Mencoba Sendiri »
HTML <menu> Tag
Deskripsi dan Penggunaan
• Tag <menu> digunakan untuk membuat daftar pilihan menu.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<menu>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</menu>
</body>
</html>
« Mencoba Sendiri »
• Tag <menu> digunakan untuk membuat daftar pilihan menu.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<menu>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</menu>
</body>
</html>
« Mencoba Sendiri »
HTML <meta> Tag
Deskripsi dan Penggunaan
• Metadata adalah data (informasi) tentang data.
• Tag <meta> menyediakan metadata tentang dokumen HTML. Metadata tidak akan ditampilkan pada halaman, tetapi akan parsable mesin.
• Meta elemen biasanya digunakan untuk menentukan deskripsi halaman, kata kunci, penulis dokumen, terakhir diubah, dan metadata lainnya.
• Tag <meta> selalu masuk ke dalam elemen <head>.
• Metadata dapat digunakan oleh browser (bagaimana menampilkan konten atau halaman reload), mesin pencari (kata kunci), atau layanan web lainnya.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>
« Mencoba Sendiri »
• Metadata adalah data (informasi) tentang data.
• Tag <meta> menyediakan metadata tentang dokumen HTML. Metadata tidak akan ditampilkan pada halaman, tetapi akan parsable mesin.
• Meta elemen biasanya digunakan untuk menentukan deskripsi halaman, kata kunci, penulis dokumen, terakhir diubah, dan metadata lainnya.
• Tag <meta> selalu masuk ke dalam elemen <head>.
• Metadata dapat digunakan oleh browser (bagaimana menampilkan konten atau halaman reload), mesin pencari (kata kunci), atau layanan web lainnya.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>
« Mencoba Sendiri »
HTML <noframes> Tag
Deskripsi dan Penggunaan
• Tag <noframes> adalah tag fallback untuk browser yang tidak mendukung frame. Hal ini dapat berisi semua elemen HTML yang dapat Anda temukan di dalam elemen <body> halaman HTML normal.
• Unsur <noframes> dapat digunakan untuk link ke versi non-frameset dari situs web atau untuk menampilkan pesan kepada pengguna bahwa frame diperlukan.
• Unsur <noframes> masuk ke dalam elemen <frameset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes><body>Sorry, your browser does not handle frames!</body></noframes>
</frameset>
</html>
« Mencoba Sendiri »
• Tag <noframes> adalah tag fallback untuk browser yang tidak mendukung frame. Hal ini dapat berisi semua elemen HTML yang dapat Anda temukan di dalam elemen <body> halaman HTML normal.
• Unsur <noframes> dapat digunakan untuk link ke versi non-frameset dari situs web atau untuk menampilkan pesan kepada pengguna bahwa frame diperlukan.
• Unsur <noframes> masuk ke dalam elemen <frameset>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes><body>Sorry, your browser does not handle frames!</body></noframes>
</frameset>
</html>
« Mencoba Sendiri »
HTML <noscript> Tag
Deskripsi dan Penggunaan
• Tag <noscript> digunakan untuk menyediakan konten alternatif bagi pengguna yang telah menonaktifkan script dalam browser mereka atau memiliki browser yang tidak mendukung client-side scripting.
• Unsur <noscript> dapat berisi semua elemen yang dapat Anda temukan di dalam elemen <body> halaman HTML normal.
• Isi dalam elemen <noscript> hanya akan ditampilkan jika script tidak didukung, atau dinonaktifkan di browser pengguna.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the noscript element.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <noscript> digunakan untuk menyediakan konten alternatif bagi pengguna yang telah menonaktifkan script dalam browser mereka atau memiliki browser yang tidak mendukung client-side scripting.
• Unsur <noscript> dapat berisi semua elemen yang dapat Anda temukan di dalam elemen <body> halaman HTML normal.
• Isi dalam elemen <noscript> hanya akan ditampilkan jika script tidak didukung, atau dinonaktifkan di browser pengguna.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the noscript element.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <object> Tag
Definisi dan Penggunaan
• Tag <object> mendefinisikan obyek tertanam dalam dokumen HTML. Gunakan elemen ini untuk menanamkan multimedia (seperti audio,, video applet Java, ActiveX, PDF, dan Flash) di halaman web Anda.
• Anda juga dapat menggunakan tag <object> untuk menanamkan halaman web lain ke dalam dokumen HTML Anda.
• Anda dapat menggunakan tag <param> untuk melewatkan parameter ke plugin yang telah tertanam dengan tag <object>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<object width="400" height="400" data="helloworld.swf">
</object>
</body>
</html>
« Mencoba Sendiri »
• Tag <object> mendefinisikan obyek tertanam dalam dokumen HTML. Gunakan elemen ini untuk menanamkan multimedia (seperti audio,, video applet Java, ActiveX, PDF, dan Flash) di halaman web Anda.
• Anda juga dapat menggunakan tag <object> untuk menanamkan halaman web lain ke dalam dokumen HTML Anda.
• Anda dapat menggunakan tag <param> untuk melewatkan parameter ke plugin yang telah tertanam dengan tag <object>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<object width="400" height="400" data="helloworld.swf">
</object>
</body>
</html>
« Mencoba Sendiri »
HTML <ol> Tag
Definisi dan Penggunaan
• Tag <ol> mendefinisikan ordered list.
• Ordered list dapat numerik atau abjad.
• Gunakan tag <li> untuk menentukan daftar item.
• Tag <ol> mendefinisikan ordered list.
• Ordered list dapat numerik atau abjad.
• Gunakan tag <li> untuk menentukan daftar item.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
« Mencoba Sendiri »
HTML <optgroup> Tag
Definisi dan Penggunaan
• Tag <optgroup> digunakan untuk pilihan kelompok terkait dalam daftar drop-down.
• Jika Anda memiliki daftar panjang pilihan, kelompok pilihan yang terkait lebih mudah untuk menangani untuk pengguna.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
« Mencoba Sendiri »
• Tag <optgroup> digunakan untuk pilihan kelompok terkait dalam daftar drop-down.
• Jika Anda memiliki daftar panjang pilihan, kelompok pilihan yang terkait lebih mudah untuk menangani untuk pengguna.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
« Mencoba Sendiri »
HTML <option> Tag
Definisi dan Penggunaan
• Tag <option> mendefinisikan pilihan dalam daftar pilih.
• Elemen <option> masuk ke dalam elemen <select>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
« Mencoba Sendiri »
• Tag <option> mendefinisikan pilihan dalam daftar pilih.
• Elemen <option> masuk ke dalam elemen <select>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
« Mencoba Sendiri »
HTML <p> Tag
Definisi dan Penggunaan
• Tag <p> mendefinisikan sebuah paragraf.
• Browser secara otomatis menambahkan beberapa ruang (margin) sebelum dan sesudah setiap elemen <p>. Margin dapat diubah dengan CSS (dengan sifat marjin).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>paragraph 1.</p><p>paragraph 2.</p><p>paragraph 3.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <p> mendefinisikan sebuah paragraf.
• Browser secara otomatis menambahkan beberapa ruang (margin) sebelum dan sesudah setiap elemen <p>. Margin dapat diubah dengan CSS (dengan sifat marjin).
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>paragraph 1.</p><p>paragraph 2.</p><p>paragraph 3.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <param> Tag
Definisi dan Penggunaan
• Tag <param> digunakan untuk menentukan parameter untuk plugin tertanam dengan elemen <object>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<object data="horse.wav">
<param name="autoplay" value="false" />
</object>
</body>
</html>
« Mencoba Sendiri »
• Tag <param> digunakan untuk menentukan parameter untuk plugin tertanam dengan elemen <object>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<object data="horse.wav">
<param name="autoplay" value="false" />
</object>
</body>
</html>
« Mencoba Sendiri »
HTML <pre> Tag
Definisi dan Penggunaan
• Tag <pre> mendefinisikan teks terformat.
• Teks dalam elemen <pre> ditampilkan dalam font fixed-width (biasanya Courier), dan mempertahankan kedua ruang dan jeda baris.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>The pre element is often used to display computer code:</p>
<pre>for i = 1 to 10
print i
next i
</pre>
</body>
</html>
« Mencoba Sendiri »
• Tag <pre> mendefinisikan teks terformat.
• Teks dalam elemen <pre> ditampilkan dalam font fixed-width (biasanya Courier), dan mempertahankan kedua ruang dan jeda baris.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>The pre element is often used to display computer code:</p>
<pre>for i = 1 to 10
print i
next i
</pre>
</body>
</html>
« Mencoba Sendiri »
HTML <q> Tag
Definisi dan Penggunaan
• Tag <q> mendefinisikan kutipan singkat.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to:
<q>build a future where people live in harmony with nature</q>.
We hope they succeed.</p>
<p>Notice that the browser inserts quotation marks around the quotation.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <q> mendefinisikan kutipan singkat.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to:
<q>build a future where people live in harmony with nature</q>.
We hope they succeed.</p>
<p>Notice that the browser inserts quotation marks around the quotation.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <s> Tag
Definisi dan Penggunaan
• Tag <s> digunakan untuk mencoret suatu tulisan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Buku Komik Conan Edisi 49 <s>belum terbit!</s> telah terbit!
</body>
</html>
« Mencoba Sendiri »
• Tag <s> digunakan untuk mencoret suatu tulisan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Buku Komik Conan Edisi 49 <s>belum terbit!</s> telah terbit!
</body>
</html>
« Mencoba Sendiri »
HTML <samp> Tag
Definisi dan Penggunaan
• Tag <samp> mendefinisikan contoh keluaran dari program komputer.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
• Tag <samp> mendefinisikan contoh keluaran dari program komputer.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<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><br />
<cite>Citation</cite><br />
</body>
</html>
« Mencoba Sendiri »
HTML <script> Tag
Definisi dan Penggunaan
• Tag <script> digunakan untuk mendefinisikan script sisi klien, misalnya JavaScript a.
• Unsur <script> baik berisi pernyataan scripting, atau menunjuk ke sebuah file script eksternal melalui atribut src.
• Jenis atribut yang dibutuhkan menentukan tipe MIME dari script.
• Penggunaan umum untuk JavaScript adalah manipulasi gambar, validasi form, dan perubahan dinamis konten.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Test script!")
</script>
</body>
</html>
« Mencoba Sendiri »
• Tag <script> digunakan untuk mendefinisikan script sisi klien, misalnya JavaScript a.
• Unsur <script> baik berisi pernyataan scripting, atau menunjuk ke sebuah file script eksternal melalui atribut src.
• Jenis atribut yang dibutuhkan menentukan tipe MIME dari script.
• Penggunaan umum untuk JavaScript adalah manipulasi gambar, validasi form, dan perubahan dinamis konten.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Test script!")
</script>
</body>
</html>
« Mencoba Sendiri »
HTML <select> Tag
Definisi dan Penggunaan
• Tag <select> digunakan untuk membuat daftar drop-down.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<select>
Test
</select>
</body>
</html>
« Mencoba Sendiri »
• Tag <select> digunakan untuk membuat daftar drop-down.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<select>
Test
</select>
</body>
</html>
« Mencoba Sendiri »
HTML <small> Tag
Definisi dan Penggunaan
• Tag <small> digunakan untuk mengecilkan tulisan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami adalah mahasiswa teladan<br/>
<small>Kami juga baik hati</small>
</body>
</html>
« Mencoba Sendiri »
• Tag <small> digunakan untuk mengecilkan tulisan.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami adalah mahasiswa teladan<br/>
<small>Kami juga baik hati</small>
</body>
</html>
« Mencoba Sendiri »
HTML <span> Tag
Definisi dan Penggunaan
• Tag <span> digunakan untuk kelompok inline-elemen dalam dokumen.
• Tag <span> tidak menyediakan perubahan visual dengan sendirinya.
• Tag <span> menyediakan cara untuk menambahkan hook ke bagian dari teks atau bagian dari dokumen.
• Ketika teks dihubungkan dalam elemen <span> Anda dapat menambahkan styles ke konten, atau memanipulasi isi dengan misalnya JavaScript.
• Contoh Penggunaannya :
<!DOCTYPE html>
<html>
<body>
<p>Ibuku memiliki mata <span style="color:lightblue;font-weight:bold">biru terang</span> dan ayahku memiliki mata <span style="color:darkolivegreen;font-weight:bold">hijau gelap</span>.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <span> digunakan untuk kelompok inline-elemen dalam dokumen.
• Tag <span> tidak menyediakan perubahan visual dengan sendirinya.
• Tag <span> menyediakan cara untuk menambahkan hook ke bagian dari teks atau bagian dari dokumen.
• Ketika teks dihubungkan dalam elemen <span> Anda dapat menambahkan styles ke konten, atau memanipulasi isi dengan misalnya JavaScript.
• Contoh Penggunaannya :
<!DOCTYPE html>
<html>
<body>
<p>Ibuku memiliki mata <span style="color:lightblue;font-weight:bold">biru terang</span> dan ayahku memiliki mata <span style="color:darkolivegreen;font-weight:bold">hijau gelap</span>.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <strike> Tag
Definisi dan Penggunaan
• Tag <strike> digunakan untuk mencoret suatu text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami sangat <strike>tidak</strike> baik!
</body>
</html>
« Mencoba Sendiri »
• Tag <strike> digunakan untuk mencoret suatu text.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Kami sangat <strike>tidak</strike> baik!
</body>
</html>
« Mencoba Sendiri »
HTML <strong> Tag
Definisi dan Penggunaan
• Tag <strong>merupakan tag frase. Namun ada kemungkinan untuk mencapai efek yang lebih kaya dengan CSS.
• Text yang ditampilkan akan terlihat lebih tebal daripada yang lain.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<strong>Strong text</strong>
</body>
</html>
• Tag <strong>merupakan tag frase. Namun ada kemungkinan untuk mencapai efek yang lebih kaya dengan CSS.
• Text yang ditampilkan akan terlihat lebih tebal daripada yang lain.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<strong>Strong text</strong>
</body>
</html>
« Mencoba Sendiri »
HTML <style> Tag
Definisi dan Penggunaan
• Tag <style> digunakan untuk mendefinisikan informasi style untuk dokumen HTML.
• Di dalam elemen style Anda menentukan bagaimana elemen HTML harus membuat dalam browser.
• Jenis atribut yang dibutuhkan mendefinisikan isi dari elemen <style>. Satu-satunya nilai yang mungkin adalah "text / css".
• Unsur <style> selalu masuk ke dalam bagian head.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
• Tag <style> digunakan untuk mendefinisikan informasi style untuk dokumen HTML.
• Di dalam elemen style Anda menentukan bagaimana elemen HTML harus membuat dalam browser.
• Jenis atribut yang dibutuhkan mendefinisikan isi dari elemen <style>. Satu-satunya nilai yang mungkin adalah "text / css".
• Unsur <style> selalu masuk ke dalam bagian head.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <sub> Tag
Definisi dan Penggunaan
• Tag <sub> mendefinisikan teks subscript. Teks subscript muncul setengah karakter bawah baseline. Subskrip teks dapat digunakan untuk formula kimia, seperti H2O.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This text contains <sub>subscript</sub> text.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <sub> mendefinisikan teks subscript. Teks subscript muncul setengah karakter bawah baseline. Subskrip teks dapat digunakan untuk formula kimia, seperti H2O.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This text contains <sub>subscript</sub> text.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <sup> Tag
Definisi dan Penggunaan
• Tag <sup> mendefinisikan teks superscript. Teks superscript muncul setengah karakter di atas baseline. Superscript teks dapat digunakan untuk catatan kaki, seperti Omega².
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>
« Mencoba Sendiri »
• Tag <sup> mendefinisikan teks superscript. Teks superscript muncul setengah karakter di atas baseline. Superscript teks dapat digunakan untuk catatan kaki, seperti Omega².
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>
« Mencoba Sendiri »
HTML <table> Tag
Definisi dan Penggunaan
• Tag table mendefinisikan sebuah tabel HTML.
• Sebuah tabel HTML terdiri dari elemen table dan satu atau lebih <tr>, <th>, dan elemen <td>.
• Elemen <tr> mendefinisikan baris tabel, elemen <th> mendefinisikan header tabel, dan elemen <td> mendefinisikan sebuah sel tabel.
• Sebuah tabel HTML lebih kompleks juga dapat mencakup <caption>, <col>, <colgroup>, <thead>, <tfoot>, dan elemen <tbody>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag table mendefinisikan sebuah tabel HTML.
• Sebuah tabel HTML terdiri dari elemen table dan satu atau lebih <tr>, <th>, dan elemen <td>.
• Elemen <tr> mendefinisikan baris tabel, elemen <th> mendefinisikan header tabel, dan elemen <td> mendefinisikan sebuah sel tabel.
• Sebuah tabel HTML lebih kompleks juga dapat mencakup <caption>, <col>, <colgroup>, <thead>, <tfoot>, dan elemen <tbody>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
HTML <tbody> Tag
Definisi dan Penggunaan
• Tag <tbody> digunakan untuk mengelompokkan isi tubuh dalam sebuah tabel HTML.
• Unsur <tbody> digunakan dalam hubungannya dengan unsur-unsur <thead> dan <tfoot> untuk menentukan setiap bagian dari tabel (body, header, footer).
• Browser dapat menggunakan elemen-elemen untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
• Tag <tbody> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, <colgroup>, dan elemen <thead>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
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>
« Mencoba Sendiri »
• Tag <tbody> digunakan untuk mengelompokkan isi tubuh dalam sebuah tabel HTML.
• Unsur <tbody> digunakan dalam hubungannya dengan unsur-unsur <thead> dan <tfoot> untuk menentukan setiap bagian dari tabel (body, header, footer).
• Browser dapat menggunakan elemen-elemen untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
• Tag <tbody> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, <colgroup>, dan elemen <thead>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
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>
« Mencoba Sendiri »
HTML <td> Tag
Definisi dan Penggunaan
• Tag <td> mendefinisikan sel standar dalam tabel HTML.
• Sebuah tabel HTML memiliki dua jenis sel :
° Sel header - berisi informasi header (dibuat dengan elemen <th>)
° Sel standar - berisi data (dibuat dengan elemen <td>)
• Teks dalam elemen <th> yang berani dan berpusat secara default.
• Teks dalam elemen <td> teratur dan kiri-blok secara default.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag <td> mendefinisikan sel standar dalam tabel HTML.
• Sebuah tabel HTML memiliki dua jenis sel :
° Sel header - berisi informasi header (dibuat dengan elemen <th>)
° Sel standar - berisi data (dibuat dengan elemen <td>)
• Teks dalam elemen <th> yang berani dan berpusat secara default.
• Teks dalam elemen <td> teratur dan kiri-blok secara default.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
HTML <textarea> Tag
Definisi dan Penggunaan
• Tag <textarea> mendefinisikan multi-line kontrol input teks.
• Sebuah area teks dapat menampung jumlah karakter yang tidak terbatas, dan teks membuat dalam font fixed-width (biasanya Courier).
• Ukuran area teks ditentukan oleh atribut cols dan baris.
• Contoh Penggunaan :
Belajar Pemrograman Web
Text Area Test
• Tag <textarea> mendefinisikan multi-line kontrol input teks.
• Sebuah area teks dapat menampung jumlah karakter yang tidak terbatas, dan teks membuat dalam font fixed-width (biasanya Courier).
• Ukuran area teks ditentukan oleh atribut cols dan baris.
• Contoh Penggunaan :
HTML <tfoot> Tag
Definisi dan Penggunaan
• Tag <tfoot> digunakan untuk konten grup footer dalam sebuah tabel HTML.
• Unsur <tfoot> digunakan dalam hubungannya dengan <thead> dan elemen <tbody> untuk menentukan setiap bagian dari tabel (footer, header, body).
• Browser dapat menggunakan elemen-elemen untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
• Tag <tfoot> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, <colgroup>, dan elemen <thead> dan sebelum <tbody> dan elemen <tr>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
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>
« Mencoba Sendiri »
HTML <th> Tag
Definisi dan Penggunaan
• Tag <th> mendefinisikan sel header dalam sebuah tabel HTML.
• Sebuah tabel HTML memiliki dua jenis sel :
° Sel header - berisi informasi header (dibuat dengan elemen <th>)
° Sel standar - berisi data (dibuat dengan elemen <td>)
• Teks dalam elemen <th> yang berani dan berpusat secara default.
• Teks dalam elemen <td> teratur dan kiri-blok secara default.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag <th> mendefinisikan sel header dalam sebuah tabel HTML.
• Sebuah tabel HTML memiliki dua jenis sel :
° Sel header - berisi informasi header (dibuat dengan elemen <th>)
° Sel standar - berisi data (dibuat dengan elemen <td>)
• Teks dalam elemen <th> yang berani dan berpusat secara default.
• Teks dalam elemen <td> teratur dan kiri-blok secara default.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
Minggu, 09 September 2012
HTML <thead> Tag
Definisi dan Penggunaan
• Tag <thead> digunakan untuk konten grup header di tabel HTML.
• Unsur <thead> digunakan dalam hubungannya dengan unsur-unsur <tbody> dan <tfoot> untuk menentukan setiap bagian dari tabel (header, body, footer).
• Browser dapat menggunakan elemen-elemen ini untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
• Tag <thead> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, dan elemen <colgroup>, dan sebelum <tbody>, <tfoot>, dan <tr> elemen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
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>
« Mencoba Sendiri »
• Tag <thead> digunakan untuk konten grup header di tabel HTML.
• Unsur <thead> digunakan dalam hubungannya dengan unsur-unsur <tbody> dan <tfoot> untuk menentukan setiap bagian dari tabel (header, body, footer).
• Browser dapat menggunakan elemen-elemen ini untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
• Tag <thead> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, dan elemen <colgroup>, dan sebelum <tbody>, <tfoot>, dan <tr> elemen.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
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>
« Mencoba Sendiri »
HTML <title> Tag
Definisi dan Penggunaannya
• Tag <title> diperlukan dalam semua dokumen HTML dan mendefinisikan judul dokumen.
• <title> element:
° Mendefinisikan judul di toolbar browser.
° Memberikan judul untuk halaman ketika ditambahkan ke favorit.
° Menampilkan judul untuk halaman pada hasil mesin pencari.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
Belajar membuat web
</body>
</html>
« Mencoba Sendiri »
• Tag <title> diperlukan dalam semua dokumen HTML dan mendefinisikan judul dokumen.
• <title> element:
° Mendefinisikan judul di toolbar browser.
° Memberikan judul untuk halaman ketika ditambahkan ke favorit.
° Menampilkan judul untuk halaman pada hasil mesin pencari.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
Belajar membuat web
</body>
</html>
« Mencoba Sendiri »
HTML <tr> Tag
Definisi dan Penggunaan
• Tag <tr> mendefinisikan baris dalam sebuah tabel HTML.
• Unsur <tr> mengandung satu atau lebih unsur <th> atau <td>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Nama Barang</th>
<th>Harga</th>
</tr>
<tr>
<td>Roti Tawar</td>
<td>Rp. 5.000</td>
</tr>
<tr>
<td>Roti Isi Coklat</td>
<td>Rp. 8.000</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
• Tag <tr> mendefinisikan baris dalam sebuah tabel HTML.
• Unsur <tr> mengandung satu atau lebih unsur <th> atau <td>.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Nama Barang</th>
<th>Harga</th>
</tr>
<tr>
<td>Roti Tawar</td>
<td>Rp. 5.000</td>
</tr>
<tr>
<td>Roti Isi Coklat</td>
<td>Rp. 8.000</td>
</tr>
</table>
</body>
</html>
« Mencoba Sendiri »
HTML <tt> Tag
Definisi dan Penggunaan
• <tt> tag merupakan salah 1 Font-Style tag.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<tt>Suatu hari yang indah </tt>
</body>
</html>
• <tt> tag merupakan salah 1 Font-Style tag.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<tt>Suatu hari yang indah </tt>
</body>
</html>
« Mencoba Sendiri »
HTML <u> Tag
Definisi dan Penggunaan
• <u> tag mendefinisikan text yang digaris bawahi.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Di ruangan ini <u>tidak boleh</u> merokok!
</body>
</html>
« Mencoba Sendiri »
• <u> tag mendefinisikan text yang digaris bawahi.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
Di ruangan ini <u>tidak boleh</u> merokok!
</body>
</html>
« Mencoba Sendiri »
HTML <ul> Tag
Definisi dan Penggunaan
• Tag <ul> mendefinisikan daftar yang tak berurut.
• Gunakan tag <ul> bersama-sama dengan tag <li> untuk membuat daftar tak berurut.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Air</li>
<li>Udara</li>
<li>Tanah</li>
</ul>
</body>
</html>
• Gunakan tag <ul> bersama-sama dengan tag <li> untuk membuat daftar tak berurut.
• Contoh Penggunaan :
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Air</li>
<li>Udara</li>
<li>Tanah</li>
</ul>
</body>
</html>
« Mencoba Sendiri »
Langganan:
Postingan (Atom)