Arsip | Draft 003: List, Table, dan Frame

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<e-Web 2000>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
LIST, TABLE, DAN FRAME
======================

Setelah kita mengetahui elemen-elemen untuk menghias suatu dokumen 
HTML beserta dengan elemen-elemen hyperlink, maka saat ini kita akan 
membahas elemen-elemen yang digunakan untuk menyajikan dokumen HTML 
dengan teknik yang berbeda.

1. LIST
-------
Banyak dokumen-dokumen HTML di dalam web menyajikan teks dalam bentuk 
daftar. Baik daftar yang berurutan (biasanya menggunakan angka atau 
huruf), maupun daftar yang tidak berurutan (biasanya ditampilkan 
dengan karakter lingkaran, cakram, kotak, dan lain-lain). Berikut ini 
adalah elemen-elemen yang digunakan untuk menampilkan teks dalam 
bentuk daftar

+ Unordered List (Daftar Tidak Berurut)
  -------------------------------------

    <UL TYPE=DISC|CIRCLE|SQUARE>
      <LI TYPE=DISC|CIRCLE|SQUARE> ... </LI>
      ...
    </UL>

  Elemen ini menampilkan daftar teks yang diberi tanda sesuai yang 
  didefinisikan dalam atribut TYPE. Jika atribut TYPE didefinisikan 
  dalam tag <UL>, maka tandanya akan berlaku untuk semua baris daftar 
  di dalamnya. Jika atribut TYPE hanya didefinisikan dalam tag <LI> 
  (atau element daftar), maka tanda tersebut hanya akan ditampilkan 
  pada baris daftar itu saja,

 
+ Ordered List (Daftar Berurut)
  -----------------------------

    <OL TYPE=A|a|I|i|1 START=nomor_awal>
      <LI TYPE=A|a|I|i|1 VALUE=nilai> ... </LI>
      ...
    </OL>

  Elemen ini menampilkan teks yang terurut berdasarkan jenis 
  nomor/huruf yang didefinisikan pada atribut TYPE. Atribut START 
  pada tag <OL> menentukan nomor/huruf awal berapa daftar tersebut 
  dimulai. Atribut VALUE pada tag <LI> menentukan nilai nomor/huruf 
  pada baris daftar yang bersangkutan.

+ Definition List
  ---------------

    <DL>
      <DT> ... <DD> ...
      ...
    </DL>

  Elemen ini digunakan untuk menjelaskan definisi dari istilah-
  istilah. Nama istilah dituliskan di bagian tag <DT> (Data Term), 
  kemudian definisi dari itilah tersebut dituliskan di bagian tag 
  <DD> (Data Definition).

+ Menu List
  ---------

    <MENU>
      <LI> ...
      ...
    </MENU>

  Elemen ini digunakan untuk menampilkan daftar menu. Elemennya 
  dituliskan setelah tag <LI>

+ Directory List
  --------------

    <DIR>
      <LI> ...
      ...
    </DIR>

  Elemen ini digunakan untuk menampilkan daftar direktori. Elemennya 
  dituliskan setelah tag <LI>


2. TABLE
--------
Cara lain untuk menampilkan suatu daftar adalah dengan menggunakan 
tabel, walaupun sebenarnya tabel tidak diciptakan untuk keperluan 
tersebut. Tabel sangat berguna untuk menampilkan informasi yang 
terpilah-pilah. Sebelum adanya fasilitas tabel dalam HTML, orang 
menggunakan elemen PRE untuk menampilkan informasi yang berbentuk 
tabel.

Tag untuk tabel adalah:

  <TABLE BORDER=batas CELLSPACING=jarak CELLPADDING=jarak WIDTH=lebar
   ALIGN=Left|Center|Right VALIGN=Top|Middle|Bottom BGCOLOR=warna>

    <CAPTION ALIGN=Top|Bottom> ... </CAPTION>

    <TR ALIGN=Left|Right|Center|Middle|Bottom>
      ...

      <TH NOWRAP COLSPAN=jlh ROWSPAN=jlh WIDTH=lebar BGCOLOR=warna
       ALIGN=Left|Center|Right VALIGN=Top|Middle|Bottom> ... </TH>
       ...

      <TD NOWRAP COLSPAN=jlh ROWSPAN=jlh WIDTH=lebar BGCOLOR=warna
       ALIGN=Left|Center|Right VALIGN=Top|Middle|Bottom> ... </TD>
       ...

    </TR>
    ...

  </TABLE>

Suatu teks yang diformat dengan menggunakan tabel, harus berada di 
di antara tag <TABLE> .. </TABLE>. Atribut BORDER menentukan ukuran 
garis pemisah dalam tabel. CELLSPACING menunjukkan jarak antar sel 
tabel (dalam point), CELLPADDING menentukan jarak antara isi tabel 
dengan batas dari selnya. Atribut WIDTH menentukan lebar tabel (dalam 
persentase maupun absolut/point). ALIGN menentukan perataan teks 
dalam tabel secara horisontal dan VALIGN untuk vertikal. Sedangkan 
BGCOLOR menentukan warna latar belakang dari tabel. Tentang definisi 
warna akan dibicarakan kemudian.

Elemen penting dalam tabel yakni jumlah baris <TR> dan jumlah kolom 
<TD>. Elemen lainnya adalah Table Heading <TH> yang sering dijadikan 
sebagai kepala baris maupun kolom. Atribut ROWSPAN dan COLSPAN 
digunakan untuk menggabungkan beberapa baris dan kolom dalam satu 
bagian.

Tag <CAPTION> digunakan untuk memberi keterangan atau judul dari 
suatu tabel.


3. FRAME
--------
Frame adalah fasilitas tambahan untuk HTML dari Netscape. Kemunculan 
fasilitas ini disambut dengan gembira oleh para perancang halaman web 
karena dengan fasilitas ini sangat membantu untuk menampilkan 
beberapa halaman web sekaligus dalam satu jendela browser.

Frame digunakan untuk membagi-bagi jendela utama browser menjadi 
beberapa bagian di mana bagian-bagian tersebut (frame) akan 
menampilkan dokumen HTML yang berbeda-beda.

Dokumen yang menggunakan frame akan mempunyai strukutr yang berbeda 
dari dokumen HTML biasanya. Di bawah ini adalah struktur dokumen 
dalam bentuk frame

  <HTML>
    <HEAD>
      <TITLE> ... </TITLE>
    </HEAD>

    <FRAMESET>
    ...
    </FRAMESET>

  </HTML>

Frame terbagi dalam dua bagian, masing-masing adalah frame baris dan 
frame kolom. Tag-tagnya adalah:

  <FRAMESET ROWS=ukuran,*>    (untuk frame baris)
  ...
  </FRAMESET>

Atribut ROWS menyatakan ukuran dan jumlah dari masing-masing baris, 
baik berupa persentase maupun nilai absolut.

        Contoh: ROWS="30%,200,*"

Atribut tersebut memberi tahu browser untuk membuat 3 buah frame yang 
masing-masing berukuran 30% dari lebar jendela untuk frame1, 200 
point lebar untuk frame2, dan frame3 berukuran sebesar ruangan yang 
tersisa.

  <FRAMESET COLS=ukuran,*>
  ...
  </FRAMESET>

Seperti halnya dengan frame baris, frame kolom juga memiliki atribut 
yang sama dengan fungsi yang sama pula, yakni membagi kolom dengan 
ukuran-ukuran tertentu.

Baik frame kolom mupun baris dapat digabungkan dalam satu bagian 
frame dengan sub-frame di dalamnya. Contoh:

  <FRAMESET ROWS="20%,*">

    <FRAMESET COLS="100,10%,*">
    ...
    </FRAMESET>

    <FRAMESET COLS="50%,50%">
    ...
    </FRAMESET>

  </FRAMESET>

Penjelasan:
Frame utama adalah frame baris dengan dua bagian yang masing-masing 
berukuran 20% dan 80% (dalam kasus ini tanda * = 80%). Baris pertama 
dibagi dengan frame kolom 3 buah yang berukuran 100 point, 10% dan 
sisa kolom (*). Sedangkan baris kedua berisi frame kolom yang terbagi 
dua yang masing-masing berukuran 50%.

-------------------------
Edisi Berikutnya:
  "STYLE: COLOR, GRAPHIC, GRAPHICS EDITOR" 

-------------------------
Referensi untuk edisi ini:

HTML Ref (Bahasa Indonesia)
http://werbach.com/barebones/barebone_id.htm
http://werbach.com/barebones/barebone_annot_id.htm

NCSAA Beginner's Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.htm

HTML Ref dari HTML Writers Guild (HWG)
http://www.hwg.org/

The HTML 3.2 Specification
http://www.w3.org/hypertext/WWW/MarkUp/HTML3/

HTML Help.
http://www.htmhelp.com/

Netscape Extension to HTML 3.2
http://home.netscape.com/assist/net_sites/HTML_extensions_3.htm

The HTML Reference Manual (from Sandia National Laboratories)
http://www.sandia.gov/sci_compute/HTML_ref.htm

Frames
http://home.netscape.com/assist/net_sites/frames.htm

HTML Tables (Working Draft)
http://www.w3.org/hypertext/WWW/TR/WD-tables

Mosaic Tables
http://www.ncsa.uiuc.edu/SDG/Software/XMosaic/table-spec.htm