MODUL

FORMAT TABEL, LIST, DAN SIMBOL

A. Tujuan
1. Menentukan penerapan format tabel dalam web
2. Menentukan prosedur pembuatan tabel dalam web
3. Merancang daftar tampilan dalam halaman web
4. Membuat program halaman web yang menampilkan teks dengan berbagai format
5. Menguji program tampilan tabel dalam halaman web
6. Menguji hasil tampilan halaman web dengan berbagai format teks

B. Dasar Teori
Mengatur Warna Latar (Background) Sel Di Dalam Tabel
Masing-masing baris dan sel yang terdapat pada suatu tabel dapat dipercantik dengan
memberi warna latar belakang (background). Caranya sederhana, hanya dengan memberi
nilai pada atribut bgColor pada tag <tr> (untuk baris) maupun
<th> atau <td> (untuk sel). Nilai warna yang digunakan untuk mengisi atribut bgColor
dapat berupa red, green, blue, violet, aqua, skyblue, purple, pink, silver, maroon, dsb
(nama warna dalam Bahasa Inggris) atau halaman bentuk notasi heksadesimal, seperti:
#000000, #FFFFFF, #FF22AA, #00FF1112, dsb. Warna- warna tersebut dapat kita peroleh
dari internet maupun dari Adobe Photoshop.
Berikut ini cara mudah mendapatkan identitas warna menggunakan bentuk notasi
heksadesimal di dalam Adobe Photoshop:

1
SMK NEGERI 1 SUKOREJO
 Gambar 4.1 Bentuk Notasi Heksadesimal Warna

2
SMK NEGERI 1 SUKOREJO
 Contoh penerapan warna latar di dalam suatu tabel adalah pada saat kita ingin memberi
warna latar yang berbeda untuk baris ganjil dan genap. Harapannya adalah agar tampilan tabel
tampak lebih menarik dan mudah dibaca.

Menyertakan Gambar Ke Dalam Tabel

Visualisasi atau gambar yang terdapat pada suatu tabel digunakan untuk memperjelas
isi/informasi atau baris data yang disampaikan di dalam tabel. Dalam HTML, kita
diizinkan untuk memasukkan gambar ke dalam tabel. Caranya sederhana, yaitu dengan
menempatkan tag <img> di antara tag <td> dan </td>.

Mengatur Nilai Atribut CELLSPACING dan CELLPADDING

Tag <table> memiliki dua atribut yang cukup berguna dalam pembuatan tabel, yaitu
CELLSPACING dan CELLPADDING. Kedua atribut ini dapat digunakan secara terpisah
maupun bersama-sama.
Atribut CELLSPACING digunakan untuk mengatur jarak atau spasi antarsel (dalam
satuan piksel). Dalam keadaan default, nilai dari atribut ini dianggap 0 (nol). Berbeda
dengan CELLSPACING, atribut CELLPADDING digunakan untuk menentukan jarak
antara data atau teks yang ada dalam suatu sel dengan border atau bingkai dari sel
bersangkutan. Dalam keadaan default, atribut ini juga bernilai 0 (nol).

Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok
atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list bisa berupa
daftar dari makanan dan minuman beserta harganya. List juga bisa berupa prosedur (runtunan
langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan mulai
dari langkah pertama sampai langkah terakhir.
HTML menyediakan beberapa tag khusus yang dapat digunakan untuk menangani
kasus pembuatan list dengan beraneka ragam bentuk, bahkan untuk daftar bersarang
(nested list).

3
SMK NEGERI 1 SUKOREJO
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu:
 Daftar terurut (ordered list)
Daftar yang terurut biasanya ditandai dengan penggunaan aturan penomoran tertentu.
Penomoran ini bisa menggunakan angka (1, 2, 3, ...) maupun karakter alfabet tertentu
(a, b, c, ... atau i, ii, iii, ...). Daftar yang terurut pada umumnya digunakan untuk item-
item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-
langkah atau prosedur dari kegiatan tertentu yang tidak dapat dilakukan secara acak.
Contoh daftar yang terurut adalah seperti pada cara membuat dokumen HTML,
misalnya:

Langkah-langkah membuat dokumen HTML:

1. Jalankan aplikasi Text Editor
2. Isikan kode HTML ke dalam Text Editor
3. Simpan file dengan ekstensi .htm atau .html
4. Jalankan file HTML menggunakan aplikasi web browser untuk
menampilkan hasilnya

 Daftar tidak terurut (unordered list)

Daftar yang tidak terurut adalah daftar yang item-item-nya dapat diubah
posisinya secara acak. Daftar seperti ini tidak menggunakan penomoran seperti di
atas, melainkan hanya dengan menggunakan tanda atau simbol tertentu, misalnya
gambar kotak atau bulat (bullet).
Contoh:

Daftar Produsen Mobil:

 BMW
 Chevrolet
 Daihatsu
 Ford
 Hyundai
 Mazda
 Mercedes Benz

4
SMK NEGERI 1 SUKOREJO
  Daftar definisi (definition list)
Daftar definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah
(term) tertentu, misalnya daftar definisi dari kumpulan kata mutiara atau
peribahasa tertentu.
Contoh:

Ada gula ada semut

Menampilkan Karakter Khusus (Simbol)
Di mana ada tempat yang bagus, biasanya banyak dikunjungi orang
Pada saat-saat tertentu mungkin Anda perlu untuk menampilkan karakter- karakter
Berakit-rakit ke hulu berenang-renang ke tepian
khusus atau simbol seperti &, <, >, ®, ©, ±, dan lain-lain ke dalam halaman web. Untuk
Bersusah-susah dahulu, bersenang-senang kemudian
melakukan hal tersebut, Anda perlu menggunakan entitas karakter yang sudah disediakan
Besar pasak daripada tiang
oleh HTML.
Pengeluaran (uang) lebih besar daripada penghasilan; boros
Berikut ini adalah daftar entitas karakter yang sering dijumpai dalam halaman
web:
Simbol Entitas Karakter Keterangan
& &amp; Ampersand
< &lt; Lebih kecil
> &gt; Lebih besar
® &reg; Registered trademark
© &copy; Copyright
± &plusmn; Plus-minus
º &deg; Derajat
™ &trade; Trademark
¼ &frac14; Seperempat
½ &frac12; Setengah
¾ &frac34; Tiga Perempat
÷ &divide; Tanda bagi

5
SMK NEGERI 1 SUKOREJO
C. Latihan
Latihan 4.1 (Memberi Warna Latar Baris)

6
SMK NEGERI 1
Latihan 4.2 (Memasukkan Gambar ke dalam Tabel)

7
SMK NEGERI 1
Latihan 4.3 (Mengatur Nilai CELLSPACING dalam Tabel)

8
SMK NEGERI 1
Latihan 4.4 (Mengatur Nilai CELLPADDING dalam Tabel)

9
SMK NEGERI 1
Latihan 4.5 (Penomoran dalam Daftar Terurut)

1
SMK NEGERI 1
Latihan 4.6 (Daftar Tidak Terurut)

1
SMK NEGERI 1
Latihan 4.7 (Daftar Definisi)

1
SMK NEGERI 1
Latihan 4.8 (Menampilkan Karakter Khusus)

1
SMK NEGERI 1
D. Tugas Mandiri
1. Buatlah sebuah halaman website yang berisikan beberapa resep makanan ringan
(brownis), makanan berat (nasi pecel goreng) dan minuman ! (Resep makanan
atau minuman tidak boleh sama satu sama lain)
2. Halaman website resep makanan berisi: langkah-langkah dari resepnya dan juga
terdapat gambar hasil makanannya.
3. Dalam pembuatan website resep makanan boleh memanfaatkan modul- modul
sebelumnya sampai modul sekarang.
4. Desain yang menarik akan menjadi prioritas penilaian.

E. Tugas Berkelompok
1. Gabungkan dari tugas mandiri di atas dalam anggota kelompok yang sudah
ditentukan menjadi satu yang dapat di-link-an satu sama lain !
2. Desain yang menarik akan menjadi prioritas penilaian.

Mutiara Kehidupan :
### SELAMAT MENGERJAKAN ###

Tantangan terbesar bukan saat kita menghadapi kesulitan tetapi saat kita
melawan kemalasan diri kita sendiri

1
SMK NEGERI 1