WebServant-2000 - Tutorial 003

Tutorial | Elemen Format Blok

Dengan heading dan paragraf kita dapat menyusun dokumen HTML yang terstruktur dengan rapi. Untuk lebih menegaskan struktur dokumen, terdapat beberapa elemen khusus yang disebut elemen format blok.

ADDRESS dan BLOCKQUOTE

Dua elemen format blok yang penting adalah ADDRESS dan BLOCKQUOTE. Perhatikan contoh penggunaannya berikut ini:


<HTML>

    <HEAD>

        <TITLE>Doa Bapa Kami</TITLE>

    </HEAD>

    <BODY>

        <P>Karena itu berdoalah demikian:</P>

        <BLOCKQUOTE>

            Bapa kami yang di sorga, dikuduskanlah

            namaMu, datanglah KerajaanMu, jadilah

            kehendakMu di bumi seperti di sorga.<BR>

            Berikanlah kami pada hari ini makanan kami

            yang secukupnya dan ampunilah kami akan

            kesalahan kami, seperti kami juga mengampuni

            orang yang bersalah kepada kami; dan

            janganlah membawa kami ke dalam pencobaan,

            tetapi lepaskanlah kami dari pada yang jahat.

        </BLOCKQUOTE>

        <HR>

        <ADDRESS>

            Webmaster<BR>

            webmaster@domain.com

        </ADDRESS>

    </BODY>

</HTML>

Elemen BLOCKQUOTE digunakan untuk menandai bagian dokumen yang merupakan kutipan teks, seperti bagian percakapan atau puisi. Browser biasanya menampilkannya dengan memberi indentasi. Elemen ADDRESS digunakan untuk menandai bagian dokumen yang berupa informasi mengenai pembuat halaman web tersebut seperti: nama, alamat e-mail, tanggal pembuatan, atau hak cipta. Browser biasanya menampilkannya sebagai tulisan miring. Walaupun demikian elemen ini sebaiknya tidak dipakai untuk membuat tulisan miring, karena untuk tujuan itu ada elemen tersendiri yang akan dibicarakan kemudian.

PRE dan LISTING

Sejak awal telah kita pelajari bahwa semua whitespace dalam dokumen akan lenyap dan digantikan hanya dengan satu spasi saja. Tapi ternyata ada beberapa elemen yang tidak mengikuti aturan tersebut, diantaranya adalah elemen PRE dan LISTING.


<HTML>

    <HEAD>

        <TITLE>Preformatted Text</TITLE>

    </HEAD>

    <BODY>

        <PRE>

Elemen      Fungsi

---------------------------------------

ADDRESS     menandai alamat pembuat web

BLOCKQUOTE  menandai kutipan dalam teks

LISTING     menandai teks tanpa format

PRE         menandai teks tanpa format

        </PRE>

        <HR>

        <LISTING>

Sub Command1_Click()

    Answer$ = InputBox("Do you love me?")

    If Answer$ = "yes" Then

        MsgBox "She loves me"

    Else

        MsgBox "She loves me not"

    End If

End Sub

        </LISTING>

    </BODY>

</HTML>

Dari contoh diatas tampak bahwa teks yang berada di dalam elemen PRE dan LISTING ditampilkan dengan font berukuran tetap (fixed width) apa adanya, lengkap dengan whitespace dan penekanan tombol ENTER. Walaupun demikian tag-tag HTML maupun entity seperti <BR> dan < tetap diterjemahkan sebagaimana mestinya. Elemen LISTING biasanya digunakan untuk menampilkan fragmen program, sedangkan elemen PRE dapat dimanfaatkan untuk membuat tabel sederhana.

XMP dan PLAINTEXT

Jika elemen PRE dan LISTING menampilkan whitespace apa adanya namun tetap menafsirkan tag-tag dan entity sebagaimana mestinya, maka kedua elemen berikut ini - yaitu XMP dan PLAINTEXT - benar-benar akan menuliskan teks di dalamnya apa adanya, tanpa mempedulikan kode-kode apapun. Perhatikan contoh berikut ini:


<HTML>

    <HEAD>

        <TITLE>Plain Text</TITLE>

    </HEAD>

    <BODY>

        <XMP>

Struktur Dasar Dokumen HTML

---------------------------

<HTML>

    <HEAD>

        <TITLE>Judul</TITLE>

    </HEAD>

    <BODY>

        <H1>Heading Level 1</H1>

        <P>Paragraf</P>

    </BODY>

</HTML>

        </XMP>

        <HR>

        <PLAINTEXT>

Seluruh teks setelah tag pembuka elemen PLAINTEXT

akan ditampilkan apa adanya, termasuk tag penutup

PLAINTEXT dan tag-tag sesudahnya.

        </PLAINTEXT>

    </BODY>

</HTML>

Elemen XMP bekerja sebagaimana diharapkan: menampilkan tag-tag dan entity sebagaimana adanya sehingga dapat digunakan untuk menuliskan semua kode HTML, kecuali tag </XMP>, karena digunakan untuk menutup elemen tersebut. Tetapi elemen PLAINTEXT bekerja dengan cara yang aneh, karena seluruh teks setelah tag pembuka <PLAINTEXT> akan ditampilkan begitu saja, termasuk tag penutup </PLAINTEXT> sehingga tidak ada cara apapun untuk menutup atau mengembalikan efek elemen tersebut. Elemen ini sebaiknya tidak dipakai karena kurang bermanfaat.

DIV dan CENTER

Elemen DIV digunakan untuk membagi-bagi dokumen HTML ke dalam bagian-bagian struktural atau hierarkis. Seperti elemen heading dan paragraf, elemen DIV juga memiliki pasangan tag pembuka dan penutup dan mengenali atribut ALIGN untuk meratakan teks dan gambar di dalamnya. Penggunaan elemen DIV dengan atribut ALIGN="center" dapat diganti dengan elemen CENTER. Secara fisik tidak ada perubahan yang nampak dari penggunaan elemen DIV ini, kecuali jika diberikan atribut perataan, tapi manfaatnya akan lebih nampak jika digunakan bersama-sama dengan style sheet.

Netscape Extension: MULTICOL

Sampai di sini, semua halaman yang kita buat akan tampak mirip dilihat dengan browser apapun, kecuali mungkin beberapa browser lama yang hanya berbasis teks. Namun beberapa browser menambahkan sendiri beberapa elemen yang tidak didukung oleh browser lainnya. Contohnya Netscape menambahkan elemen MULTICOL untuk membagi halaman menjadi beberapa kolom seperti pada surat kabar. Elemen ini memiliki tiga atribut, yaitu COLS, GUTTER, dan WIDTH. Atribut COLS digunakan untuk menentukan jumlah kolom, atribut GUTTER untuk menentukan lebar spasi antar kolom, dan atribut WIDTH untuk menentukan lebar kolom.


<HTML>

    <HEAD>

        <TITLE>Kolom</TITLE>

    </HEAD>

    <BODY>

        <HR>

        <MULTICOL COLS="3">

            Jika browser anda adalah Netscape Navigator

            versi 3.0 atau yang lebih tinggi, maka

            halaman ini akan tampak terbagi menjadi 3

            kolom seperti pada surat kabar. Tetapi jika

            anda menggunakan browser lain seperti

            Internet Explorer, Mosaic atau Lynx, maka

            halaman ini akan tampak seperti halaman biasa

            saja.

        </MULTICOL>

        <HR>

    </BODY>

</HTML>

Dalam contoh di atas halaman web dibagi menjadi 3 kolom. Elemen MULTICOL dapat berisi elemen MULTICOL lain di dalamnya, sehingga dengan pengaturan yang tepat dapat dibuat halaman berkolom yang rumit dan bervariasi. Namun demikian, jangan bergantung pada elemen ini untuk mengatur tata letak halaman web, karena tidak semua pengunjung halaman anda memakai browser Netscape, kecuali anda membuatnya untuk intranet atau jaringan lokal anda sendiri.

Horizontal Ruler

Anda mungkin sudah mengamati bahwa hampir semua contoh dalam bagian ini memakai elemen HR yang ditampilkan sebagai sebuah garis mendatar. Elemen ini mempunyai beberapa atribut, yaitu ALIGN, SIZE, WIDTH dan NOSHADE. Atribut ALIGN berguna untuk menentukan perataan garis (left, right, atau center) seperti pada heading atau paragraf. Atribut SIZE menentukan ketebalan garis dalam pixel. Atribut WIDTH menentukan panjang garis yang dapat dinyatakan dalam pixel atau sebagai persentase dari lebar halaman. Sedangkan atribut NOSHADE tidak mempunyai nilai dan digunakan untuk menggambar garis tanpa bayangan 3-D. Berikut ini contoh pemakaian elemen HR:


<HTML>

    <HEAD>

        <TITLE>Horizontal Ruler</TITLE>

    </HEAD>

    <BODY>

        <HR>

        <HR ALIGN="left" WIDTH="50%">

        <HR ALIGN="center" WIDTH="100">

        <HR ALIGN="right" WIDTH="50%">

        <HR WIDTH="100" SIZE="15">

        <HR WIDTH="200" SIZE="10" NOSHADE>

        <HR WIDTH="300" SIZE="5">

        <HR WIDTH="400" SIZE="5" NOSHADE>

        <HR WIDTH="500" SIZE="10">

        <HR WIDTH="600" SIZE="15" NOSHADE>

        <HR NOSHADE>

    </BODY>

</HTML>

Dengan sedikit kesabaran dan ketelitian, elemen HR dapat digunakan untuk membuat efek grafik yang cukup menarik. Tentu saja untuk menciptakan halaman web yang indah dan berwarna-warni diperlukan lebih dari sekadar garis mendatar. Sebelum berkenalan dengan grafik kita akan mempelajari lebih dahulu bagian berikutnya, tentang Elemen Format Teks.