|
Wellcome to my cyber home [ Tutorial / Pelajaran Web]
Halaman 4
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>Nama Saya IFunk</TITLE>
</HEAD>
<BODY>
<P>Saya adalah orang ganteng:</P>
<BLOCKQUOTE>
Jadilah kamu orang gila kalo kamu ingin bertahan hidup dan tanyakan
kepada Ulama agar anda bisa selamat hidup " t.
</BLOCKQUOTE>
<HR>
<ADDRESS>
Webmaster<BR>
ifunk@solonet.co.id
</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.
pusing yah....lanjut oke biar tambah
pusing 
|
