21
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 negara-
negara 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:
Created using Click to Convert Trial - http://www.clicktoconvert.com
22
<HTML> <HEAD> <TITLE>UnOrdered List with tag <ul> & <li> </TITLE> </HEAD> <BODY> <H2>ENAM BESAR KESEBELASAN<BR> PIALA DUNIA 2002 KOREA-JEPANG </H2> <UL> <H3> <LI>BRAZIL</LI> <LI>JERMAN</LI> <LI>AMERIKA SERIKAT</LI> <LI>SPAYOL</LI> <LI>KOREA SELATAN</LI> <LI>SENEGAL</LI> </H3> </UL> </BODY> </HTML>
Gambar 3.1 UnOrdered List menggunakan tag <ul> dan <li>
Default dari bullet adalah titik, sedangkan bila diinginkan untuk mengganti
bullet dapat ditambahkan atribut TYPE, dengan pilihan “DISC”, “CIRCLE” dan
“SQUARE” sehingga tag <ul> menjadi <UL TYPE=”CIRCLE”>, dimana akan
menampilkan bullet berupa lingkaran (0), yang merupakan kebalikan dari bullet
default-nya.
Created using Click to Convert Trial - http://www.clicktoconvert.com
23
3.1.2 Tag Daftar Dengan Nomor
Apabila diinginkan pemberian nomor pada daftar, maka dapat dilakukan
dengan mengganti tag <ul> menjadi tag <ol>, sedangkan tag lainnya tetap.
Berikut disajikan bentuk perubahan dari HTML pada Sub Bab 3.1.1 diatas.
<HTML> <HEAD> <TITLE>Ordered List with tag <ol> & <li> </TITLE> </HEAD> <BODY> <H2>ENAM BESAR KESEBELASAN<BR> PIALA DUNIA 2002 KOREA-JEPANG </H2> <OL> <H3> <LI>BRAZIL</LI> <LI>JERMAN</LI> <LI>AMERIKA SERIKAT</LI> <LI>SPAYOL</LI> <LI>KOREA SELATAN</LI> <LI>SENEGAL</LI> </H3> </OL> </BODY> </HTML>
Gambar 3.2 Ordered List menggunakan tag <ol> dan <li>
Created using Click to Convert Trial - http://www.clicktoconvert.com
24
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:
<HTML> <HEAD> <TITLE>Ordered List with TYPE="I" </TITLE> </HEAD> <BODY> <H2>ENAM BESAR KESEBELASAN<BR> PIALA DUNIA 2002 KOREA-JEPANG </H2> <OL TYPE="I"> <H3> <LI>BRAZIL</LI> <LI>JERMAN</LI> <LI>AMERIKA SERIKAT</LI> <LI>SPAYOL</LI> <LI>KOREA SELATAN</LI> <LI>SENEGAL</LI> </H3> </OL> </BODY> </HTML>
Gambar 3.3 Ordered List menggunakan TYPE=”I”
Created using Click to Convert Trial - http://www.clicktoconvert.com
25
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 <ul> didalam tag <ul>
sehingga didapatkan daftar bersarang sebagai berikut:
<HTML> <HEAD> <TITLE>Ordered List with TYPE="I" </TITLE> </HEAD> <BODY> <H1>DAFTAR KESEBELASAN<BR> PIALA DUNIA 2002 KOREA-JEPANG </H1> <UL> <LI> <H2>Grup A</H2> </LI> <OL> <H3> <LI>DENMARK</LI> <LI>SENEGAL</LI> <LI>URUGUAY</LI> <LI>FRANCE</LI> </H3> </OL> </UL> <UL> <LI> <H2>Grup B</H2> </LI> <OL> <H3> <LI>SPAIN</LI> <LI>PARAGUAY</LI> <LI>SOUTH AFRICA</LI> <LI>SLOVENIA</LI> </H3> </OL> </UL> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
26
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 <table> dan ditutup dengan tag
</table>, 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:
Created using Click to Convert Trial - http://www.clicktoconvert.com
27
Tabel 3.1 Atribut-atribut pada tag <table>
Atribut Nilai Arti
border 0 s/ 15 Meniadakan atau menampilkan ketebalan
garis-garis pada tabel
<tr>
</tr>
- Membuat baris table, pengaturan semua
teks dapat dilakukan disini
<th>
</th>
- Membuat kolom judul
<td>
</td>
- Membuat kolom table isi
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 n Menggabungkan baris table menjadi satu
(merge cells)
colspan n Manggabungkan kolom table menjadi
satu (merge cells)
Berikut contoh script HTML untuk pembuatan table sederhana yang terdiri
dari 3 kolom dan 3 baris sebagai berikut:
<HTML> <HEAD> <TITLE>Simple Table 3x4</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TH>NRP</TH><TH>NAMA</TH><TH>NILAI</TH></TR> <TR><TD>7401.040.001</TD><TD>ABEL DOLOK SARIBU</TD><TD>80</TD></TR> <TR><TD>7401.040.005</TD><TD>CERAVINA SUSANTI K</TD> <TD>76</TD></TR> <TR><TD>7401.040.014</TD> <TD>M. JARWANTO</TD><TD>90</TD></TR> </TABLE> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
28
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.
<HTML> <HEAD> <TITLE>Tabel Klasemen Piala Dunia 2002</TITLE> </HEAD> <BODY> <H3>KLASEMEN PENYISIHAN GRUP</H3> <H4>GRUP C</H4> <TABLE BORDER=1> <TR><TH>NEGARA</TH><TH>M</TH><TH>M</TH><TH>S</TH><TH>K</TH><TH>GOL</TH><TH>SKOR</TH></TR> <TR><TD>Brazil</TD><TD>3</TD><TD>3</TD><TD>0</TD><TD>0</TD><TD>11-3</TD><TD>9</TD></TR> <TR><TD>Turki</TD><TD>3</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>5-2</TD><TD>4</TD></TR> <TR><TD>Kosta Rika</TD><TD>3</TD><TD>1</TD><TD>1</TD><TD>1</TD><TD>5-6</TD><TD>4</TD></TR> <TR><TD>China</TD><TD>3</TD><TD>0</TD><TD>0</TD><TD>3</TD><TD>0-9</TD><TD>0</TD></TR> </TABLE> </BODY> </HTML>
Gambar 3.6 Tabel Klasemen Penyisihan Grup
Created using Click to Convert Trial - http://www.clicktoconvert.com
29
3.2.1 Atribut ROWSPAN
Atribut ini digunakan untuk menggabungkan beberapa baris dalam satu
kolom menjadi satu baris (merge cell) seperti contoh dibawah ini:
<HTML> <HEAD> <TITLE>Rowspan on Table 4x4</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TH>DOSEN</TH><TH>NRP</TH><TH>NAMA</TH> <TH>NILAI</TH></TR> <TR><TD ROWSPAN=3>Ir. Sigit Wasista</TD> <TD>7401.040.001</TD><TD>ABEL DOLOK SARIBU</TD> <TD>80</TD></TR> <TR><TD>7401.040.005</TD><TD>CERAVINA SUSANTI K</TD> <TD>76</TD></TR> <TR><TD>7401.040.014</TD><TD>M. JARWANTO</TD> <TD>90</TD></TR> </TABLE> </BODY> </HTML>
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:
Rowspan=3
Created using Click to Convert Trial - http://www.clicktoconvert.com
30
<HTML> <HEAD> <TITLE>Colspan on Table 4x4</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TH COLSPAN=4> DAFTAR MAHASISWA SEMESTER GENAP 2001/ 2002</TH> <TR><TH>DOSEN</TH><TH>NRP</TH><TH>NAMA</TH> <TH>NILAI</TH></TR> <TR><TD ROWSPAN=3> Ir. Sigit Wasista</TD><TD>7401.040.001</TD> <TD>ABEL DOLOK SARIBU</TD><TD>80</TD></TR> <TR><TD>7401.040.005</TD><TD>CERAVINA SUSANTI K</TD> <TD>76</TD></TR><TR><TD>7401.040.014</TD> <TD>M. JARWANTO</TD><TD>90</TD></TR> </TABLE> </BODY> </HTML>
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 dapat
digunakan untuk latar belakang adalah *.JPG, *.GIF, *.BMP dan *.PNG.
Colspan=4
Created using Click to Convert Trial - http://www.clicktoconvert.com
31
<HTML> <HEAD> <TITLE>BgColor & Background on Table</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TH COLSPAN=4 BGCOLOR=LIGHTGREEN> DAFTAR MAHASISWA SEMESTER GENAP 2001/ 2002</TH> <TR><TH>DOSEN</TH><TH>NRP</TH><TH>NAMA</TH> <TH>NILAI</TH></TR> <TR><TD ROWSPAN=3 BACKGROUND="ITS.BMP"> WASISTA</TD><TD>7401.040.001</TD> <TD>ABEL DOLOK SARIBU</TD><TD>80</TD></TR> <TR><TD>7401.040.005</TD> <TD>CERAVINA SUSANTI K</TD><TD>76</TD></TR> <TR><TD>7401.040.014</TD> <TD>M. JARWANTO</TD><TD>90</TD></TR> </TABLE> </BODY> </HTML>
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
Warna Hijau
Teks “WASISTA” dengan latar belakang logo ITS
Created using Click to Convert Trial - http://www.clicktoconvert.com
32
pada menggunakan align default dari table yaitu menggunakan align LEFT. Lebih
jelasnya perhatikan script dan tampilan hasilnya dibawah ini:
<HTML> <HEAD> <TITLE>Align on Table</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TH COLSPAN=4>DAFTAR HARGA HANDPHONE NOKIA</TH> <TR><TH>TIPE</TH><TH>GARANSI</TH><TH>NON GARANSI</TH> <TH>BEKAS</TH></TR> <TR ALIGN=RIGHT><TD>3210</TD><TD> </TD> <TD> </TD><TD>700.000</TD></TR> <TR ALIGN=RIGHT><TD>3310</TD><TD>1.350.000</TD> <TD>1.100.000</TD><TD>800.000</TD></TR> <TR ALIGN=RIGHT><TD>3330</TD><TD>1.400.000</TD> <TD>1.200.000</TD><TD>950.000</TD></TR> <TR ALIGN=RIGHT><TD>3350</TD><TD>1.750.000</TD> <TD>1.500.000</TD><TD>1.100.000</TD></TR> </TABLE> </BODY> </HTML>
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
Rata kanan
Created using Click to Convert Trial - http://www.clicktoconvert.com
33
dari border, yang dapat bernilai dari 0 sampai dengan 1000. Bila tab <table> tanpa
disertai atribut border, maka table akan ditampilkan tanpa border atau sama
dengan bila atribut border diberikan angka nol yaitu <TABLE BORDER=0>.
Pada contoh table diatas dan dibawah terdapat karakter entitas yaitu   (non
backspace ) yang artinya mengisi cell dengan karakter kosong.
<HTML> <HEAD> <TITLE>Border=14 on Table 4x4</TITLE> </HEAD> <BODY> <TABLE BORDER=14> <TR><TH COLSPAN=4>DAFTAR HARGA HANDPHONE NOKIA</TH> <TR><TH>TIPE</TH><TH>GARANSI</TH><TH>NON GARANSI</TH> <TH>BEKAS</TH></TR> <TR ALIGN=RIGHT><TD>3210</TD><TD> </TD> <TD> </TD><TD>700.000</TD></TR> <TR ALIGN=RIGHT><TD>3310</TD><TD>1.350.000</TD> <TD>1.100.000</TD><TD>800.000</TD></TR> <TR ALIGN=RIGHT><TD>3330</TD><TD>1.400.000</TD> <TD>1.200.000</TD><TD>950.000</TD></TR> <TR ALIGN=RIGHT><TD>3350</TD><TD>1.750.000</TD> <TD>1.500.000</TD><TD>1.100.000</TD></TR> </TABLE> </BODY> </HTML>
Gambar 3.11 Ketebalan garis tepi (border) tabel
BORDER=14
Created using Click to Convert Trial - http://www.clicktoconvert.com
34
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
<table> didalam tag <table> lainnya, sehingga didapatkan table yang bersarang
didalam table lainnya.
<HTML> <HEAD><TITLE>Nested Table</TITLE></HEAD> <BODY> <TABLE BORDER=14> <TR><TH COLSPAN=2> DAFTAR HARGA HANDPHONE DI JAKARTA MEI 2002</TH></TR> <TR><TD><TABLE BORDER=1> <TR><TH COLSPAN=4>HANDPHONE NOKIA</TH></TR> <TR><TH>TIPE</TH><TH>GARANSI</TH> <TH>NON GARANSI</TH> <TH>BEKAS</TH></TR> <TR ALIGN=RIGHT><TD>3210</TD><TD> </TD> <TD> </TD><TD>700.000</TD></TR> <TR ALIGN=RIGHT><TD>3310</TD><TD>1.350.000</TD> <TD>1.100.000</TD><TD>800.000</TD></TR> <TR ALIGN=RIGHT><TD>3330</TD><TD>1.400.000</TD> <TD>1.200.000</TD><TD>950.000</TD></TR> <TR ALIGN=RIGHT><TD>3350</TD><TD>1.750.000</TD> <TD>1.500.000</TD><TD>1.100.000</TD></TR> </TABLE> <TD><TABLE BORDER=1> <TR><TH COLSPAN=4>HANDPHONE ERICSON</TH></TR> <TR><TH>TIPE</TH><TH>GARANSI</TH> <TH>NON GARANSI</TH><TH>BEKAS</TH></TR> <TR ALIGN=RIGHT><TD>T20</TD><TD>875.000</TD> <TD>650.000</TD><TD>600.000</TD></TR> <TR ALIGN=RIGHT><TD>T28s</TD><TD> </TD> <TD> </TD><TD>700.000</TD></TR> <TR ALIGN=RIGHT><TD>T66</TD><TD>2.800.000</TD> <TD>2.550.000</TD><TD> </TD></TR> <TR ALIGN=RIGHT><TD>R380</TD><TD>4.000.000</TD> <TD>3.000.000</TD><TD>2.500.000</TD></TR> </TABLE> </TD></TR> </TABLE> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
35
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 <frameset>. 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.
Created using Click to Convert Trial - http://www.clicktoconvert.com
36
File Script HTML pertama disimpan dengan nama SURAT.HTML
<HTML> <BODY> <H2>Panas sebelum DUEL</H2> <FONT SIZE=3><B>SHIZUOKA</B></FONT> - Partai perempat final Piala Dunia antara Brazil dan Inggris mulai menyembulkan hawa panas. Kedua tim ini sudah melakukan <em>psywar</em> untuk menjatuhkan mental pemain masing-masing sebelum laga tersebut digelar di Stadion Shizuoka.<P>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.<P>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. <P><B><I>Sumber: Jawa Pos, Kamis Pahing 20 Juni 2002</I></B> </BODY> </HTML>
File Script HTML kedua disimpan dengan nama KABAR.HTML
<HTML> <BODY> <H2>PlayStation 2 Resmi versi Indoensia</H2> <FONT SIZE=3><B>A</B></FONT>pakah 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.<P><B>Penulis: Edwin Gunawan<BR> Pengamat dan pecinta Video Game Tinggal di Jakarta<BR> <I>Komputek edisi 267, Minggu ke V, Mei, Tahun 2002</I></B> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
37
File Script HTML ketiga disimpan dengan nama INDEX.HTML
<HTML> <HEAD> TITLE>HORIZONTAL FRAME</TITLE> </HEAD> <FRAMESET ROWS="80%,20%"> <FRAME SRC="surat.html"> <FRAME SRC="kabar.html"> </FRAMESET> </HTML>
Gambar 3.13 Jendela Browser dengan dua Frame Horisontal
Perhatikan bahwa pembuatan script HTML untuk frame tidak
menggunakan tag <BODY>, apabila tag <BODY> diberikan maka frame tidak
akan terbentuk, karena tag <BODY> merupakan tampilan isi halaman web dan
bukan untuk membuat frame.
Created using Click to Convert Trial - http://www.clicktoconvert.com
38
Untuk membuat frame secara vertical, dapat dilakukan dengan mengubah
atribut ROWS pada file INDEX.HTML menjadi atribut COLS, sehingga pada tag
<FRAMESET ROWS=”55%,45%”> dapat dimodifikasi menjadi tag
<FRAMESET COLS=”50%,50%”>, perhatikan contoh dibawah ini:
<HTML> <HEAD> TITLE> VERTICAL FRAME </TITLE> </HEAD> <BODY> <FRAMESET COLS="80%,20%"> <FRAME SRC="surat.html"> <FRAME SRC="kabar.html"> </FRAMESET> </BODY> </HTML>
Gambar 3.14 Jendela Browser dengan dua Frame Vertikal
Created using Click to Convert Trial - http://www.clicktoconvert.com
39
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
<HTML> <BODY> <H2>Sekilas Tentang HTML</H2> <FONT SIZE=3><B>HTML </B></FONT> adalah singkatan dari <I>Hyper Text Markup Language</I>, merupakan bahasa teks yang menggunakan tanda-tanda (<I><B>markup</B></I>) yang dikenal dengan <tag>, dimana merupakan pengembangan dari SGML (<I>Standard Generalize Markup Language).</I><P> </BODY> </HTML>
Gambar 3.15 Jendela Browser dengan 1 Frame Vertikal dan 2 Frame Horisontal
Created using Click to Convert Trial - http://www.clicktoconvert.com
40
Untuk mendapatkan hasil seperti pada Gambar 3.14 diatas maka script
pada file INDEX.HTML dimodifikasi menjadi sebagai berikut:
<HTML> <HEAD> <TITLE>VERTICAL & HORIZONTAL FRAME</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="berita.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="surat.html"> <FRAME SRC="kabar.html"> </FRAMESET> </FRAMESET> </HTML>
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.
Created using Click to Convert Trial - http://www.clicktoconvert.com