Bab-3 Tag-Tag Daftar & Tabel · PDF filedari teks yang digunakan. Untuk selanjutnya dibahas...

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

http://www.eepis-its.edu/



http://www.jawapos.com/

http://www.telkom.net/

http://www.kompas.com/

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.



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>



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”



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>



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:



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>



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



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



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



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



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>&nbsp</TD> <TD>&nbsp</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



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 &nbsp (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>&nbsp</TD> <TD>&nbsp</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



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>&nbsp</TD> <TD>&nbsp</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>&nbsp</TD> <TD>&nbsp</TD><TD>700.000</TD></TR> <TR ALIGN=RIGHT><TD>T66</TD><TD>2.800.000</TD> <TD>2.550.000</TD><TD>&nbsp</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>



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.



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>



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.



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



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 &lttag&gt, 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



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.



Bab-3 Tag-Tag Daftar & Tabel · PDF filedari teks yang digunakan. Untuk selanjutnya dibahas...

Documents

Transcript of Bab-3 Tag-Tag Daftar & Tabel · PDF filedari teks yang digunakan. Untuk selanjutnya dibahas...