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:
Gambar 4.1 Bentuk Notasi Heksadesimal Warna
SMK SYAUM BANJARATMA 2
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).
SMK SYAUM BANJARATMA 3
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
SMK SYAUM BANJARATMA 4
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
Di mana ada tempat yang bagus, biasanya banyak dikunjungi orang
Berakit-rakit ke hulu berenang-renang ke tepian
Bersusah-susah dahulu, bersenang-senang kemudian
Besar pasak daripada tiang
Pengeluaran (uang) lebih besar daripada penghasilan; boros
Menampilkan Karakter Khusus (Simbol)
Pada saat-saat tertentu mungkin Anda perlu untuk menampilkan karakter-
karakter khusus atau simbol seperti &, <, >, ®, ©, ±, dan lain-lain ke dalam halaman
web. Untuk melakukan hal tersebut, Anda perlu menggunakan entitas karakter yang
sudah disediakan oleh HTML.
Berikut ini adalah daftar entitas karakter yang sering dijumpai dalam halaman
web:
Simbol Entitas Karakter Keterangan
& & Ampersand
< < Lebih kecil
> > Lebih besar
® ® Registered trademark
© © Copyright
± ± Plus-minus
o ° Derajat
TM ™ Trademark
1⁄4 ¼ Seperempat
1⁄2 ½ Setengah
3⁄4 ¾ Tiga Perempat
÷ ÷ Tanda bagi
SMK SYAUM BANJARATMA 5
C. Latihan
Latihan 4.1 (Memberi Warna Latar Baris)
SMK SYAUM BANJARATMA 6
Latihan 4.2 (Memasukkan Gambar ke dalam Tabel)
SMK SYAUM BANJARATMA 7
Latihan 4.3 (Mengatur Nilai CELLSPACING dalam Tabel)
SMK SYAUM BANJARATMA 8
Latihan 4.4 (Mengatur Nilai CELLPADDING dalam Tabel)
SMK SYAUM BANJARATMA 9
Latihan 4.5 (Penomoran dalam Daftar Terurut)
SMK SYAUM BANJARATMA 10
Latihan 4.6 (Daftar Tidak Terurut)
SMK SYAUM BANJARATMA 11
Latihan 4.7 (Daftar Definisi)
SMK SYAUM BANJARATMA 12
Latihan 4.8 (Menampilkan Karakter Khusus)
SMK SYAUM BANJARATMA 13
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 :
Tantangan terbesar bukan saat kita menghadapi kesulitan tetapi saat
kita melawan kemalasan diri kita sendiri
### SELAMAT MENGERJAKAN ###
