Bab-3 Tag-Tag Daftar & Tabel

Created using Click to Convert Trial - http://www.clicktoconvert.com

Bab-3 Tag-Tag Daftar & Tabel Didalam bab 2 telah dijelaskan tentang penggunaan tag-tag dasar dari HTML untuk membuat halaman web, yaitu meliputi format halaman dan style dari teks yang digunakan. Untuk selanjutnya dibahas mengenai tag-tag yang lain dimana melibatkan penggunaan bullet, yaitu untuk membuat daftar/ list dari satu teks. Didalam Bab ini juga dijelaskan tentang bagaimana cara membuat table, dimana table ini banyak digunakan pada pembuatan halaman web yang memerlukan pengaturan posisi kolom, seperti halnya pada halaman web suatu portal,

seperti

pada

halaman

web

dari

homepage

www.eepis-its.edu,

www.jawapos.com, www.telkom.net, www.kompas.com dan sebagainya. Kemudian untuk memperindah tampilah halaman web, maka dapat pula disisipkan suatu gambar pada halaman web yang dibuat, dimana akan menambah keindahan seni dari halaman web yang dibuat, sehingga akan dapat menarik banyak pengunjung untuk melihat apa saja gambar yang ditampilan pada homepage tersebut.

3.1 Membuat Daftar HTLM telah menyediakan tag-tag untuk pembuatan daftar, yaitu tag untuk membuat daftar tanpa nomor (Unordered List ) dan tag untuk membuat daftar dengan nomor (Ordered List ).

3.1.1 Tag Daftar Tanpa Nomor Sesuai dengan namanya maka implementasinya adalah pembuatan daftar tanpa menggunakan nomor baris, contohnya misalkan dibuat suatu daftar negaranegara yang kesebelasannya termasuk 5 besar dalam pertandingan sepak bola piala dunia 2002 di Jepang dan Korea. Berikut diberikan contoh daftar seperti yang telah disebutkan diatas:

21


<TITLE>UnOrdered List with tag
&

ENAM BESAR KESEBELASAN
PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

Gambar 3.1 UnOrdered List menggunakan tag
dan

Default dari bullet adalah titik, sedangkan bila diinginkan untuk mengganti bullet dapat ditambahkan atribut TYPE, dengan pilihan “DISC”, “CIRCLE” dan “SQUARE” sehingga tag
menjadi
TYPE=”CIRCLE”>, dimana akan

menampilkan bullet berupa lingkaran (0), yang merupakan kebalikan dari bullet default-nya.

22


3.1.2 Tag Daftar Dengan Nomor Apabila diinginkan pemberian nomor pada daftar, maka dapat dilakukan dengan mengganti tag
menjadi tag
, sedangkan tag lainnya tetap. Berikut disajikan bentuk perubahan dari HTML pada Sub Bab 3.1.1 diatas.

<TITLE>Ordered List with tag
&


BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

Gambar 3.2 Ordered List menggunakan tag
dan

23


Default penomoran daftar adalah menggunakan angka desimal, dan apabila diinginkan untuk menampilkan penomoran daftar menggunakan selain desimal (misalkan menggunakan huruf), maka dapat dilakukan dengan menambahkan atribut TYPE, dimana dapat diberikan format “A” atau “a” (untuk abjad) serta “I” atau “i” (untuk rowawi) seperti pada contoh dibawah ini:

<TITLE>Ordered List with TYPE="I"

BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

Gambar 3.3 Ordered List menggunakan TYPE=”I”

24


3.1.3 Tag Daftar Bersarang (Nested) Sesuai dengan namanya bersarang yang berarti didalam daftar ada daftar lagi, ini dapat dilakukan dengan melakukan penulisan tag
didalam tag
sehingga didapatkan daftar bersarang sebagai berikut:

<TITLE>Ordered List with TYPE="I"
DAFTAR KESEBELASAN

Grup A

DENMARK

SENEGAL

URUGUAY

FRANCE

Grup B

SPAIN

PARAGUAY

SOUTH AFRICA

SLOVENIA

25


Gambar 3.4 Daftar dalam daftar (nested list)

3.2 Tag Tabel Seperti yang telah dijelaskan diatas bahwa table banyak digunakan pada pembuatan halaman web dan dapat memisahkan teks menjadi beberapa kolom sehingga penempatan teks lebih mudah pengaturannya. Misalkan diinginkan membuat website portal dimana bagian tengah berisi informasi-informasi penting dan actual sedangkan bagian tepi (kiri dan kanan) berisi informasi-infomasi yang lalu atau informasi yang mempunyai durasi waktu lama dan berkesinambungan, misalkan informasi score sepak bola, kurs dollar, cuaca dan temperatur, donwload file program dan lainnya. Untuk membuat table maka diperlukan tag dan ditutup dengan tag
, karena table melibatkan banyak

pengaturan dan pilihan untuk

pembuatan bentuk table, maka guna mendukung keperluan pembuatan table, telah disediakan atribut-atribut yang khusus disediakan untuk keperluan pembuatan table, adapun atribut-ataribut tersebut seperti pada table dibawah ini:

26


Tabel 3.1 Atribut-atribut pada tag Atribut

Nilai

border

0 s/ 15

Arti Meniadakan atau menampilkan ketebalan garis-garis pada tabel

-

Membuat baris table, pengaturan semua teks dapat dilakukan disini

align

LEFT | CENTER | RIGHT

Mengatur horizontal alignment

valign

TOP | MIDDLE | BOTTOM

Mengatur vertical alignment

nowrap

-

Meniadakan pindah baris baru pada saat table ditampilkan pada jendela broser yang tidak mencukupi.

rowspan

Menggabungkan baris table menjadi satu

n

(merge cells)

colspan

Manggabungkan kolom table menjadi

n

satu (merge cells)

Berikut contoh script HTML untuk pembuatan table sederhana yang terdiri dari 3 kolom dan 3 baris sebagai berikut:

<TITLE>Simple Table 3x4

-

Membuat kolom judul

-

Membuat kolom table isi

NRP NAMA NILAI

7401.040.001 ABEL DOLOK SARIBU 80

7401.040.005 CERAVINA SUSANTI K 76

7401.040.014 M. JARWANTO 90

27


Gambar 3.5 Tabel nilai sederhana 3x4

Contoh kedua yaitu tabel yang lebih besar lagi yaitu 7x5 berisi informasi mengenai klasemen pertandingan sepak bola piala dunia 2002. <TITLE>Tabel Klasemen Piala Dunia 2002
KLASEMEN PENYISIHAN GRUP

GRUP C

NEGARA M M S K GOL SKOR

Brazil 3 3 0 0 11-3 9

Turki 3 1 1 1 5-2 4

Kosta Rika 3 1 1 1 5-6 4

China 3 0 0 3 0-9 0

Gambar 3.6 Tabel Klasemen Penyisihan Grup

28


3.2.1 Atribut ROWSPAN Atribut ini digunakan untuk menggabungkan beberapa baris dalam satu kolom menjadi satu baris (merge cell) seperti contoh dibawah ini:

<TITLE>Rowspan on Table 4x4

DOSEN NRP NAMA NILAI

Ir. Sigit Wasista 7401.040.001 ABEL DOLOK SARIBU 80


7401.040.014 M. JARWANTO 90

Rowspan=3

Gambar 3.7 Tabel 4x4 menggunakan Atribut ROWSPAN

3.2.2 Atribut COLSPAN Atribut ini digunakan untuk menggabungkan beberapa kolom dalam satu baris menjadi satu kolom (merge cell), dimana atribut ini juga dapat digabungkan dengan atribut sebelumnya yaitu ROWSPAN seperti contoh dibawah ini:

29


<TITLE>Colspan on Table 4x4

DAFTAR MAHASISWA SEMESTER GENAP 2001/ 2002

Ir. Sigit Wasista 7401.040.001 ABEL DOLOK SARIBU 80

7401.040.014 M. JARWANTO 90

Colspan=4

Gambar 3.8 Colspan pada Tabel 4x4

3.2.3 Atribut Latar Belakang Tabel Untuk memberikan warna latar belakang didalam table maka dapat digunakan atribut bgcolor disertai dengan latar yang diinginkan, misalkan latar belakang table akan diisi dengan warna biru, maka dapat dilakukan BGCOLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat dilakukan

dengan BACKGROUND=”namafile.jpg”,

file

yang

digunakan untuk latar belakang adalah *.JPG, *.GIF, *.BMP dan *.PNG.

30

dapat


<TITLE>BgColor & Background on Table

DAFTAR MAHASISWA SEMESTER GENAP 2001/ 2002

WASISTA 7401.040.001 ABEL DOLOK SARIBU 80


7401.040.014 M. JARWANTO 90

Warna Hijau

Teks “WASISTA” dengan latar belakang logo ITS

Gambar 3.9 Warna dan latar belakang table

3.2.4 Atribut Align Artribut ini digunakan untuk pengaturan pelurusan dari suatu cell, adapun macam pelurusan ini ada tiga yaitu LEFT, CENTER, dan RIGHT. Pelurusan cell ini diperlukan terutama untuk informasi data mengenai mata uang, atau yang berhubungan dengan nilai uang misalkan daftar harga. Bila ada daftar harga maka sebaiknya digunakan align RIGHT, sehingga akan memudahkan pembacaan, dari

31


pada menggunakan align default dari table yaitu menggunakan align LEFT. Lebih jelasnya perhatikan script dan tampilan hasilnya dibawah ini:

<TITLE>Align on Table

DAFTAR HARGA HANDPHONE NOKIA
TIPE GARANSI NON GARANSI BEKAS

3210 700.000

3310 1.350.000 1.100.000 800.000

3330 1.400.000 1.200.000 950.000

3350 1.750.000 1.500.000 1.100.000

Rata kanan

Gambar 3.10 Pengaturan pelurusan (align) rata kanan

3.2.5 Atribut Border Untuk menampilkan garis pada table maka digunakan atribut border sebagai berikut, BORDER=1 atau BORDER=n, dimana n merupakan ketebalan

32


dari border, yang dapat bernilai dari 0 sampai dengan 1000. Bila tab tanpa disertai atribut border, maka table akan ditampilkan tanpa border atau sama dengan bila atribut border diberikan angka nol yaitu
BORDER=0>.

Pada contoh table diatas dan dibawah terdapat karakter entitas yaitu (non backspace ) yang artinya mengisi cell dengan karakter kosong.

<TITLE>Border=14 on Table 4x4

DAFTAR HARGA HANDPHONE NOKIA

3210 700.000

3310 1.350.000 1.100.000 800.000

3330 1.400.000 1.200.000 950.000

3350 1.750.000 1.500.000 1.100.000

BORDER=14

Gambar 3.11 Ketebalan garis tepi (border) tabel

33


3.2.6 Tabel Bersarang (Nested Table) Kata bersarang (nested) sering digunakan pada istilah-istilah pemrograman dan sering dijumpai dalam setiap pemrograman. Demikian pula dalam pembuatan script HTML yaitu table bersarang, yang artinya adalah didalam suatu table terdapat table yang lain, kemungkin ini bias saja terjadi dengan meletakkan tag didalam tag
lainnya, sehingga didapatkan table yang bersarang didalam table lainnya. <TITLE>Nested Table

DAFTAR HARGA HANDPHONE DI JAKARTA MEI 2002

HANDPHONE NOKIA


3210 700.000

3310 1.350.000 1.100.000 800.000

3330 1.400.000 1.200.000 950.000

3350 1.750.000 1.500.000 1.100.000

HANDPHONE ERICSON


T20 875.000 650.000 600.000

T28s 700.000

T66 2.800.000 2.550.000

R380 4.000.000 3.000.000 2.500.000

34


Gambar 3.12 Tabel bersarang

3.3 Tag FrameSet Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan dengan pengaturan bingkai sebagai pembentuk jendela tampilan pada browser. Sehingga dapatlah jendela browser dibagi menjadi beberapa frame. Ada tiga pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical dan horizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak dapat digunakan untuk membuat halaman tampilan web, untuk itu diperlukan file yang berisi script HTML lain dan disisipkan kedalam script frame tesebut. Jadi bila ada dua frame maka diperlukan dua file HTML. Untuk keperluan pembuatan frame maka disiapkan dulu isi dari frame yang akan dibuat, misalkan dibuat tampilan dengan dua frame maka disiapkan dulu dua file HTML sebagai isi dari 3 frame uang dibuat. Untuk dapat menyisipkan ketiga file HTML tesebut kedalam frame, diperlukan nama yang jelas dan benar serta dimana letak folder/ direktorinya, karena informasi tersebut digunakna didalam tag . Berikut ini diberikan contoh ketiga file HTML tersebut dan sebuah file HTML lagi untuk mengatur tampilan frame, sehingga disini diperlukan 3 (tiga) file HTML sekaligus. Berikut ini diberikan contoh untuk membuat dua frame jendela secara horizontal.

35


File Script HTML pertama disimpan dengan nama SURAT.HTML
Panas sebelum DUEL
SHIZUOKA - Partai perempat final Piala Dunia antara Brazil dan Inggris mulai menyembulkan hawa panas. Kedua tim ini sudah melakukan <em>psywar untuk menjatuhkan mental pemain masing-masing sebelum laga tersebut digelar di Stadion Shizuoka.
Udara Shizuoka yang sedikit menyengat diperkirakan juga bakal mempengaruhi penampilan kedua tim. Barangkali pemain-pemain Brazil sedikit diuntungkan dengan kondisi cuaca bagus tersebut. Menurut laporan, udara disekitar Shizuoka besok diperkirakan 22-27 derajad Celsius.
Wartawan Jawa Pos Kholili Indra di Jepang melaporkan, publik Shizuoka juga sudah menyabut duel klasik tersebut. Para suporter Jepang yang sudah tidak mendukung timnya bakal terpecah untuk memilih salah satu tim. Bahkan sejak kemarin stadion yang berkapasitas 51.349 penonton itu sudah dijaga ketat.
Sumber: Jawa Pos, Kamis Pahing 20 Juni 2002 File Script HTML kedua disimpan dengan nama KABAR.HTML
PlayStation 2 Resmi versi Indoensia
Apakah penulis sedang mimpi atau berkhayal? Tidak! Jelas tidak! Judul ini adalah sebuah cita-cita, harapan dengan penuh keyakinan dari penulis. Siapa pemain video game di Indonesia yang tidak ingin punya PlayStation2 atau bahkan Xbox maupun Gamecube versi Indonesia? Mungkin banyak yang tidak perduli, tapi bagi pecinta video game sejati pasti akan bertanya balik, apa bedanya dengan versi Jepang atau AS. Apa untungnya membeli versi Indonesia, apa gengsinya membeli produk inpor yang dimodifikasi atau dirakit khusus untuk Indonesia.
Penulis: Edwin Gunawan
Pengamat dan pecinta Video Game Tinggal di Jakarta
Komputek edisi 267, Minggu ke V, Mei, Tahun 2002

36


File Script HTML ketiga disimpan dengan nama INDEX.HTML TITLE>HORIZONTAL FRAME

Gambar 3.13 Jendela Browser dengan dua Frame Horisontal

Perhatikan bahwa pembuatan script HTML untuk frame tidak menggunakan tag , apabila tag diberikan maka frame tidak akan terbentuk, karena tag merupakan tampilan isi halaman web dan bukan untuk membuat frame.

37


Untuk membuat frame secara vertical, dapat dilakukan dengan mengubah atribut ROWS pada file INDEX.HTML menjadi atribut COLS, sehingga pada tag
ROWS=”55%,45%”>

dapat

dimodifikasi

menjadi

COLS=”50%,50%”>, perhatikan contoh dibawah ini:

TITLE> VERTICAL FRAME

Gambar 3.14 Jendela Browser dengan dua Frame Vertikal

38

tag


Dari kedua tampilan frame diatas dapat dibuat kombinasi antara frame vertikal dengan frame horizontal, sehingga menjadi satu jendela yang mempunyai frame vertical dan horizontal. Untuk keperluan tersebut maka diperlukan satu file HTML lagi yang digunakan untuk mengisi frame yang ketiga sebagai berikut.

File Script HTML tambahan disimpan dengan nama BERITA.HTML
Sekilas Tentang HTML
HTML adalah singkatan dari Hyper Text Markup Language, merupakan bahasa teks yang menggunakan tanda-tanda (markup) yang dikenal dengan <tag>, dimana merupakan pengembangan dari SGML (Standard Generalize Markup Language).

Gambar 3.15 Jendela Browser dengan 1 Frame Vertikal dan 2 Frame Horisontal

39


Untuk mendapatkan hasil seperti pada Gambar 3.14 diatas maka script pada file INDEX.HTML dimodifikasi menjadi sebagai berikut:

<TITLE>VERTICAL & HORIZONTAL FRAME

3.5 Tugas-Tugas (dikumpulkan pada pertemuan berikutnya) Buatlah suatu halaman web yang menampilkan tampilan suatu daftar harga suatu barang (misalnya buku, peralatan musik, alat elektronik, VCD, komputer, dan sebagainya) dimana berisi nomor, nama (tipe), spesifikasi (keterangan), dan data lain yang berkaitan dengan barang tersebut. Gunakan tag-tag yang telah dipelajari diatas.

40

NRP	NAMA	NILAI
7401.040.001	ABEL DOLOK SARIBU	80
7401.040.005	CERAVINA SUSANTI K	76
7401.040.014	M. JARWANTO	90

DOSEN	NRP	NAMA	NILAI
Ir. Sigit Wasista	7401.040.001	ABEL DOLOK SARIBU	80
	7401.040.005	CERAVINA SUSANTI K	76
	7401.040.014	M. JARWANTO	90

DAFTAR MAHASISWA SEMESTER GENAP 2001/ 2002
DOSEN	NRP	NAMA	NILAI
Ir. Sigit Wasista	7401.040.001	ABEL DOLOK SARIBU	80
	7401.040.005	CERAVINA SUSANTI K	76
	7401.040.014	M. JARWANTO	90

DAFTAR HARGA HANDPHONE NOKIA
TIPE	GARANSI	NON GARANSI	BEKAS
3210			700.000
3310	1.350.000	1.100.000	800.000
3330	1.400.000	1.200.000	950.000
3350	1.750.000	1.500.000	1.100.000

Bab-3 Tag-Tag Daftar & Tabel

Recommend Documents

ENAM BESAR KESEBELASAN PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL JERMAN AMERIKA SERIKAT SPAYOL KOREA SELATAN SENEGAL

ENAM BESAR KESEBELASAN PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL JERMAN AMERIKA SERIKAT SPAYOL KOREA SELATAN SENEGAL

ENAM BESAR KESEBELASAN PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL JERMAN AMERIKA SERIKAT SPAYOL KOREA SELATAN SENEGAL

DAFTAR KESEBELASAN PIALA DUNIA 2002 KOREA-JEPANG

Grup A

DENMARK SENEGAL URUGUAY FRANCE

Grup B

SPAIN PARAGUAY SOUTH AFRICA SLOVENIA

KLASEMEN PENYISIHAN GRUP

GRUP C

Panas sebelum DUEL

PlayStation 2 Resmi versi Indoensia

Sekilas Tentang HTML

ENAM BESAR KESEBELASAN
PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

ENAM BESAR KESEBELASAN
PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

ENAM BESAR KESEBELASAN
PIALA DUNIA 2002 KOREA-JEPANG

BRAZIL

JERMAN

AMERIKA SERIKAT

SPAYOL

KOREA SELATAN

SENEGAL

DAFTAR KESEBELASAN
PIALA DUNIA 2002 KOREA-JEPANG

DENMARK

SENEGAL

URUGUAY

FRANCE

SPAIN

PARAGUAY

SOUTH AFRICA

SLOVENIA