Senin, 10 September 2012

HTML Tags


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 »

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 »

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 »

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 »

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 »

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 »

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>

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>

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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>

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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

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

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

HTML <ol> Tag

Definisi dan Penggunaan

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

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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>


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>


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 »

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 »

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 »

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 »

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 »

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 :



<html> <head> <title> Belajar Pemrograman Web </title> </head> <body> Text Area Test <textarea cols="20" rows="2"> Ini adalah Text Area </textarea> </body> </html>

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 »

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 »

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 »

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 »

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>

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 »

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>

HTML <var> Tag

Definisi dan Penggunaan

• Mendefinisikan variabel.

• Contoh Penggunaan :


<!DOCTYPE html>
<html>
<body>


<var>Sebuah Variable</var>


</body>
</html>