HTML Lanjut
Latihan Membuat Web Untuk Pemula

Elemen HTML Lanjut

► List

     Untuk mengelompokkan data baik secara berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang dapat digunakan dalam HTML, yaitu:

  1. Ordered List

         Ordered list digunakan untuk mengelompokkan data dimana tiap datanya memiliki nomor secara berurut. Ordered List dinilai dengan menggunakan tag <ol> dan diakhiri </ol>. Untuk menyatakan bagiannya (list item) digunakan tag <li> dan diakhiri </li> namun juga tag ini bisa tidak menggunakan penutup.

         Ketika menggunakan perintah ordered list maka default penomorannya adalah 1, 2, 3, ... Untuk mengubah penomoran tersebut menggunakan atribut TYPE pada tag <ol>.

Tabel atribut ordered list
TagAtributNilaiDeskripsi
<ol>typeII, II, III, IV, ...
ii, ii, iii, iv, ...
AA, B, C, D, E, ...
aa, b, c, d, e, ...
<ol>startnNilai awal

Untuk latihan ketikkan script berikut dan simpan dengan nama "ordered_list.html"

<html>
     <head>
          <title>Ordered List</title>
     </head>

     <body>
          <p>Ordered List Angka : <br />
               <ol>
                    <li>Urutan Pertamaxxx</li>
                    <li>Urutan Keduaxxx</li>
                    <li>Urutan Ketigaxxx</li>
               </ol>
          </p>
          <p>Ordered List Huruf :<br />
               <ol type="A">
                    <li>Urutan Pertamaxxx</li>
                    <li>Urutan Keduaxxx</li>
                    <li>Urutan Ketigaxxx</li>
               </ol>
          </p>
          <p>Ordered List Angka Romawi :<br />
               <ol type="I">
                    <li>Urutan Pertamaxxx</li>
                    <li>Urutan Keduaxxx</li>
                    <li>Urutan Ketigaxxx</li>
               </ol>
          </p>
     </body>
</html>

Hasil dari script di atas :

  1. Unordered List

         Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Untuk memulianya menggunakan tag <ul> dan diakhiri dengan </ul>, untuk menyatakan tiap bagiannya (list item) menggunakan tag <li> sama seperti ordered list.

Tabel atribut unordered list
TagAtributNilaiDeskripsi
<ul>typediscBullet Titik (•)
squareBullet Kotak (■)
circleBullet Lingkaran (○)

Untuk latihan ketikkan script berikut dan simpan dengan nama "unordered_list.html"

<html>
     <head>
          <title>Unordered List</title>
     </head>

     <body>
          <p>Unordered List Disc : <br />
               <ul>
                    <li>Urutan Pertamaxxx</li>
                    <li>Urutan Keduaxxx</li>
                    <li>Urutan Ketigaxxx</li>
               </ul>
          </p>
          <p>Unordered List Square :<br />
               <ul type="square">
                    <li>Urutan Pertamaxxx</li>
                    <li>Urutan Keduaxxx</li>
                    <li>Urutan Ketigaxxx</li>
               </ul>
          </p>
     </body>
</html>

Hasil dari script di atas :

  1. Definition List

         Definition list digunakan untuk mendefinisikan atau menjelaskan istilah istilah, sering juga disebut juga sebagai daftar istilah. Definition list dinyatakan dengan tag awal <dl> dan diakhiri </dl>. Dalam tag tersebut terdapat dua bagian, yaitu :
    1. Istilah yang didefinisikan, dinyatakan dengan tag <dt> atau Definition Term.
    2. Definisi dari istilah tersebut, dinyatakan dengan tag <dd> atau Definition Data
Untuk latihan ketikkan script berikut dan simpan dengan nama "definition_list.html"

<html>
     <head>
          <title>Definition List</title>
     </head>

     <body>
          <p>
               <dl>
                    <dt>Wahyudi Blog!</dt>
                    <dd>Blog gado gado yang berisi tutorial, tips trik komputer, software, internet juga berisi ragam info, permainan online dan hal hal yang keren, antik, unik, lucu, gila dan sebagainya</dd>
               </dl>
         </p>
     </body>
</html>

Hasil dari script di atas :


► Tabel

     Untuk menyajikan data dalam bentuk kolom dan baris. Tabel digunakan agar informasi yang kita berikan dapat lebih mudah dimengerti oleh orang lain. Umumnya kolom menunjukkan data yang sejenis dan setiap baris terdiri atas kolom kolom yang menunjukkan kelompok data dalam satu kesatuan.

ElemenPenjelasan
<table>...</table>Mendefinisikan sebuah tabel dalam dokumen HTML. Atribut : border, background, cellpadding, cellspacing, dll.
<caption>...</caption>Mendefinisikan judul tabel
<tr>...</tr>Mendefinisikan baris dalam tabel. Atribut : align (left, center, right), valign (top, middle, bottom), dll
<th>...</th>Membuat judul kolom
<td>...</td>Mendefinisikan kolom dalam tabel. Atribut : bgcolor, align (left, center, right), dll.
Colspan=nAtribut dari tag <td> untuk mamperlebar sel kolom n kolom (menggabungkan beberapa sel dalam satu baris)
Rowspan=nAtribut dari tag <td> untuk memperlebar ser baris n baris (menggabungkan beberapa baris sel)


Untuk latihan ketikkan script berikut dan simpan dengan nama "tabel 1.html"

<html>
     <head>
          <title>Tabel 1</title>
     </head>

     <body>
        <p>Contoh tabel 1
          <table border="1">
               <tr>
                    <td>Baris 1, kolom 1</td>
                    <td>Baris 1, kolom 2</td>
               </tr>
               <tr>
                    <td>Baris 2, kolom 1</td>
                    <td>Baris 2, kolom 2</td>
               </tr>
          </table>
        </p>
     </body>
</html>

Hasil dari script di atas :


Untuk latihan ketikkan script berikut dan simpan dengan nama "tabel 2.html"

<html>
   <head>
      <title>Tabel 2</title>
   </head>

   <body>
      <p>Contoh tabel 2
         <table border="1" align="center">
            <tr align="center">
               <td rowspan="3" bgcolor="cyan">rowspan 3</td>
               <td colspan="2" bgcolor="gray">colspan 2</td>
            </tr>
            <tr align="center">
               <td rowspan="2" bgcolor="yellow">rowspan 2</td>
               <td bgcolor="red">baris 2, kolom 4</td>
            </tr>
            <tr align="center">
               <td bgcolor="orange">baris 3, kolom 4</td>
            </tr>
            <tr align="center">
               <td colspan="2" bgcolor="magenta">colspan 2</td>
               <td bgcolor="maroon">baris 4, kolom 4</td>
            </tr>
         </table>
      </p>
   </body>
</html>

Hasil dari script di atas :









Visit Wahyudi Blog !