Universitas Komputer Indonesia List & Table Donny Reza, S.Kom Aplikasi IT-1 Teknik Informatika Universitas Komputer Indonesia
List Unordered List (bullets) Ordered List (numbering)
Ordered List Ordered list merupakan list/daftar yang beraturan/berurutan. Biasanya ditandai dengan adanya urutan nomor atau abjad. Urutan bisa berarti juga sebagai sebuah skala prioritas. Contoh: sila-sila dalam pancasila. Dalam aplikasi seperti Microsoft Office, ordered list dikenal dengan istilah numbering dengan icon seperti gambar di bawah ini Pancasila Ketuhanan Yang Maha Esa Kemanusiaan yang Adil dan Beradab Persatuan Indonesia Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan Keadilan sosial bagi seluruh rakyat Indonesia
Ordered List Dalam website, struktur HTML yang digunakan untuk membuat sebuah blok ordered list adalah sebagai berikut: <ol> <li>Ketuhanan Yang Maha Esa</li> <li>Kemanusiaan yang adil dan beradab</li> </ol> <ol> = ordered list <li> = list item
Ordered List Atribut <ol> Atribut Nilai/Value Keterangan start angka Menentukan angka awal pada list. Contoh: <ol start=“3”> type 1 A a I i Jenis simbol yang digunakan. 1 = angka, A = Huruf Besar (Kapital), a = huruf kecil, I=angka romawi kapital, i=angka romawi kecil. Default menggunakan 1. Contoh: <ol type=“a”>
Unordered List Unordered List merupakan kebalikan dari ordered list. Artinya, poin-poin yang terdapat dalam sebuah list (daftar) tidak berurutan, juga bisa diartikan tidak memiliki skala prioritas. Di dalam aplikasi seperti Microsoft Word, dikenal dengan istilah bullets. Icon yang digunakan biasanya seperti gambar di bawah ini:
Unordered List Struktur HTML untuk membuat sebuah blok unordered list adalah sebagai berikut: <ul> <li>Kopi</li> <li>Teh Manis</li> </ul> <ul> = unordered list <li> = list item
Unordered List Atribut <ul> square = Atribut Nilai/Value Keterangan type disc square circle Jenis simbol yang digunakan. disc = square = circle = Default menggunakan 1. Contoh: <ul type=“a”>
List Item Atribut <li> Atribut Nilai/Value Keterangan value angka Menentukan nomor list. Contoh: <li value=“3”> type 1 A a I i disc square circle Contoh: <li type=“a”>
Definition List Definition list merupakan list yang setiap itemnya memiliki deskripsi. <dl> <dt>Healthy Juice</dt> <dd>Jus kesehatan campuran dari buah-buahan dan sayuran segar</dd> <dt>Soda Gembira</dt> <dd>Susu yang disajikan dengan soda</dd> </dl>
Latihan <h2>Soft Drink</h2> <ul> <html> <head> <title>List</title> </head> <body> <h2>Menu Utama</h2> <ol> <li>Soto Ayam</li> <li>Soto Betawi</li> <li>Nasi Goreng <ul> <li>Nasi Goreng Ayam</li> <li>Nasi Goreng Kambing</li> <li>Nasi Goreng Telor</li> </ul> </li> <li>Mie Goreng</li> </ol> <h2>Soft Drink</h2> <ul> <li>Teh Manis</li> <li>Kopi Susu</li> <li>Bajigur</li> </ul> <h2>Menu Tambahan</h2> <dl> <dt>Chicken Wing</dt> <dd>5 potong sayap ayam pilihan. </dd> <dt>Surabi</dt> <dd>Makanan khas Jawa Barat, dibuat dari tepung beras.</dd> </dl> </body> </html> Simpan dengan nama list.html
Tabel Tabel di dalam website dapat digunakan untuk menyusun teks, gambar, link atau form ke dalam bentuk kolom dan baris. (Introduction to tables, http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1)
Struktur Tabel <table width=“100%” border=“1”> <caption>Pemain Timnas Indonesia 2011</caption> <tr> <th>No.</th> <th>Nama</th> </tr> <td>1.</td> <td>Bambang Pamungkas</td> <td>2.</td> <td>Christian Gonzalez</td> </table>
<th> atau <td> <caption> <table> Data Penjualan <tr> <th> atau <td>
<caption> <caption> digunakan untuk memberi judul/keterangan pada tabel Atribut: Atribut Nilai/Value Keterangan align top bottom Menentukan rataan teks Contoh: <caption align=“bottom”>
<tr> <tr> digunakan untuk mendefinisikan baris tabel. Atribut: Atribut Value Keterangan align right, left, center <tr align=“right”> valign top, bottom, middle <tr valign=“bottom”> bgcolor nama warna <tr bgcolor=“green”>
<td> dan <th> Tabel HTML memiliki 2 jenis cell Header Cells, berisi informasi header. Tag yang digunakan adalah <th>. Standar Cells, berisi data. Tag yang digunakan adalah <td>. Secara visual, <th> dan <td> dapat dibedakan. <th> biasanya ditampilkan dengan teks tebal, dan menggunakan rataan (align) tengah. Sementara <td> ditampilkan dengan teks biasa dan rataan kiri.
<td> dan <th> Atribut: Atribut Value Contoh align right, left, center <td align=“right”> valign top, bottom, middle <td valign=“bottom”> bgcolor nama warna <td bgcolor=“green”> rowspan angka <td rowspan=“2”> colspan <td colspan=“2”> width pixel <td width=“100”> height <td height=“30”>
<td> dan <th> rowspan, digunakan untuk menggabungkan (merge) 2 cells ke bawah (baris). colspan, digunakan untuk menggabungkan 2 cells ke samping (kolom).
Simpan dengan menggunakan tabel.html Latihan <html> <head> <title>Tabel</title> </head> <body> <table border=“1”> <caption>Daftar Mahasiswa</caption> <tr> <th>No.</th><th>NIM</th><th>Nama</th> </tr> <td>1.</td><td>10100101</td><td>Asep Rojali</td> <td>2.</td><td>10100102</td><td>Jeri Lasut</td> <td>3.</td><td>10100103</td><td>Jeri Lasut</td> <td colspan=“2”>Jumlah</td><td>3 Orang</td> </table> </body> </html> Simpan dengan menggunakan tabel.html