03. list & table
DESCRIPTION
03. List & TableTRANSCRIPT
List & Table
Donny Reza, S.KomAplikasi IT-1
Teknik InformatikaUniversitas Komputer Indonesia
List
Unordered List(bullets)
Ordered List(numbering)
Ordered ListOrdered 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
Pancasila1. Ketuhanan Yang Maha Esa2. Kemanusiaan yang Adil dan Beradab3. Persatuan Indonesia4. Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam
permusyawaratan/perwakilan5. 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>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 Keteranganvalue 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<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>
Simpan dengan nama list.html
<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>
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>
<tr> <td>1.</td> <td>Bambang Pamungkas</td> </tr>
<tr> <td>2.</td> <td>Christian Gonzalez</td> </tr></table>
<table>
<tr>
<th> atau <td>
Data Penjualan
<caption>
<caption>
<caption> digunakan untuk memberi judul/keterangan pada tabel
Atribut:Atribut Nilai/Value Keteranganalign 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
1. Header Cells, berisi informasi header. Tag yang digunakan adalah <th>.
2. 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 angka <td colspan=“2”>
width pixel <td width=“100”>
height pixel <td height=“30”>
rowspan, digunakan untuk menggabungkan (merge) 2 cells ke bawah (baris).
colspan, digunakan untuk menggabungkan 2 cells ke samping (kolom).
<td> dan <th>
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> <tr> <td>1.</td><td>10100101</td><td>Asep Rojali</td> </tr> <tr> <td>2.</td><td>10100102</td><td>Jeri Lasut</td> </tr> <tr> <td>3.</td><td>10100103</td><td>Jeri Lasut</td> </tr> <tr> <td colspan=“2”>Jumlah</td><td>3 Orang</td> </tr></table></body></html>
Simpan dengan menggunakan tabel.html