Arsip | Draft 002: Struktur Dasar dan Pemformatan HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<e-Web 2000>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
STRUKTUR DASAR DAN PEMFORMATAN HTML
===================================
Cara terbaik belajar HTML adalah dengan langsung mencoba sendiri
membuat halaman-halaman web. Berikut ini contoh sebuah halaman web
yang sangat sederhana:
<HTML>
<HEAD>
<TITLE>Homepage pertama saya</TITLE>
</HEAD>
<BODY>
<H1>Hallo</H1>
<P>Selamat datang di homepage saya!</P>
</BODY>
</HTML>
Untuk melihat hasilnya, kode di atas harus ditulis dengan editor teks
biasa dan disimpan dalam berkas dengan akhiran .htm atau .htm dan
dilihat dengan browser.
Elemen dan Tag
--------------
Sebelum kita mengupas halaman pertama tersebut, perlu dijelaskan
terlebih dahulu mengenai konsep elemen dan tag. Dokumen HTML terdiri
dari sekumpulan elemen-elemen yang mempunyai fungsi masing-masing.
Elemen biasanya ditandai dengan sepasang tag yang berupa tag awal
[misalnya <BODY>] dan tag akhir [misalnya </BODY>], jadi elemen BODY
adalah bagian dokumen mulai dari tag <BODY> berikut seluruh teks di
dalamnya, hingga tag </BODY>.
Tag tidak harus dituliskan dengan huruf besar semuanya, HTML adalah
bahasa yang tidak mengenal perbedaan huruf kecil dan besar. Demikian
juga dengan spasi dan indentasi, semuanya akan diabaikan oleh browser
dan digantikan dengan HANYA SATU spasi saja. Penggunaan huruf besar
dan indentasi hanya untuk memudahkan pemeriksaan dokumen.
Struktur HTML
-------------
Dari contoh di atas tampak struktur dasar dokumen HTML yang berupa:
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Seluruh dokumen adalah sebuah elemen HTML yang ditandai dengan tag
<HTML> di awal dokumen dan tag </HTML> di akhir dokumen. Elemen HTML
ini terdiri dari dua sub-elemen utama yaitu elemen HEAD dan elemen
BODY. Elemen HEAD berisi keterangan atau informasi tentang dokumen
HTML, sedangkan elemen BODY berisi teks yang akan tampak di browser.
Hanya sedikit elemen yang dapat berada di dalam elemen HEAD,
diantaranya elemen TITLE, META, SCRIPT dan beberapa lagi yang akan
dibahas kemudian. Sebagian besar elemen lainnya terdapat di dalam
elemen BODY. Elemen TITLE berisi judul dokumen yang akan tampak di
palang judul [title bar] browser pada saat dokumen diakses.
Heading dan Paragraf
--------------------
Untuk menampilkan judul yang tampak di dalam jendela browser
digunakan elemen Heading. Elemen ini akan menampilkan teks dengan
ukuran dan ketebalan yang lebih besar dari teks lainnya. Terdapat 6
level heading mulai dari H1 hingga H6 yang dapat digunakan untuk
membuat judul, sub-judul, sub-sub-judul dan seterusnya:
<H1>Judul Utama</H1>
<H2>Sub Judul</H2>
...
<H6>Sub-Sub-Sub ... Judul</H6>
Untuk menampilkan teks dalam bentuk paragraf digunakan elemen P.
Elemen ini dilengkapi juga dengan atribut ALIGN yang dapat diberi
nilai LEFT, RIGHT, atau CENTER untuk mengubah perataan [alignment]
paragraf tersebut:
<P ALIGN=LEFT|CENTER|RIGHT> ...teks... </P>
Elemen Blok
-----------
Struktur dokumen dapat lebih ditegaskan lagi dengan menggunakan
elemen-elemen blok, yaitu elemen yang mengubah penampilan sebuah
paragraf atau blok secara keseluruhan. Yang termasuk elemen blok
adalah:
+ Kutipan blok
------------
<BLOCKQUOTE> ...teks... </BLOCKQUOTE>
Elemen ini akan mengindentasi teks di dalamnya beberapa spasi untuk
menunjukkan kutipan.
+ Alamat
------
<ADDRESS> ...teks... </ADDRESS>
Elemen ini biasa digunakan untuk menuliskan alamat pembuat dokumen
HTML dan umunya ditampilkan dengan huruf miring.
+ Preformatted text
-----------------
<PRE> ...teks... </PRE>
Teks dalam elemen ini akan ditampilkan dengan monospace [fixed
width font] dan semua spasi akan ditampilkan apa adanya.
+ Program listing
---------------
<LISTING> ...teks...</LISTING>
Elemen ini serupa dengan elemen PRE, namun dengan ukuran font yang
lebih kecil dan biasanya digunakan untuk menampilkan fragmen
program.
+ Align Division
--------------
<DIV ALIGN=LEFT|RIGHT|CENTER> ...teks... </DIV>
Secara fisik tidak ada perubahan yang nampak dari penggunaan elemen
ini, kecuali jika digunakan atribut perataan. Kegunaan elemen ini
sebenarnya adalah untuk menandai bagian teks secara khusus untuk
kepentingan pembagian dokumen secara struktural atau hierarkis.
+ Center
------
<CENTER> ...teks... </CENTER>
Teks dalam elemen ini akan ditampilkan di tengah-tengah halaman
browser [secara horisontal]. Sama dengan hasil tampilan:
<DIV ALIGN=CENTER> ...teks... </DIV>
Pemformatan Teks
----------------
HTML juga menyediakan elemen-elemen yang dapat digunakan untuk
memformat teks dengan style-style seperti pada pengolah kata biasa.
Terdapat dua jenis pemformatan, yaitu Logical Formatting untuk
melakukan pemformatan berdasarkan fungsi teks, dan Physical
Formatting untuk melakukan pemformatan teks secara langsung.
Yang termasuk dalam Logical Formatting adalah elemen-elemen EM, CITE,
VAR, CODE, KBD, SAMP, dan STRONG. Sedangkan yang termasuk dalam
Physical Formatting adalah elemen-elemen B, I, U, S, TT, BIG, SMALL,
SUB, dan SUP.
+ Emphasis
--------
<EM> ...teks... </EM>
Digunakan untuk menandai penekanan suatu teks.
+ Citation
--------
<CITE> ...teks... </CITE>
Digunakan untuk menandai bagian kutipan.
+ Variable
--------
<VAR> ...teks... </VAR>
Digunakan untuk menyatakan variabel.
Elemen EM, CITE, dan VAR biasanya ditampilkan dengan huruf miring.
+ Code fragment
-------------
<CODE> ...teks... </CODE>
Digunakan untuk menampilkan "listing program".
+ Keyboard
--------
<KBD> ...teks... </KBD>
Digunakan untuk menandai bagian teks yang merupakan penekanan
tombol.
+ Sample
------
<SAMP> ...teks... </SAMP>
Digunakan untuk menandai teks yang merupakan contoh.
Elemen CODE, KBD, dan SAMP biasanya ditampilkan dengan monospace.
+ Strong Emphasis
---------------
<STRONG> ...teks... </STRONG>
Digunakan untuk menandai penekanan suatu teks yang kuat. Biasanya
ditampilkan dengan huruf tebal.
+ Bold
----
<B> ...teks... </B>
Teks ditampilkan dengan lebih tebal.
+ Italic
------
<I> ...teks... </I>
Teks ditampilkan dengan huruf miring.
+ Underlined
----------
<U> ...teks... </U>
Teks ditampilkan dengan garis bawah.
+ Striked
-------
<S> ...teks... </S>
Teks ditampilkan dengan garis memanjang di tengah.
+ Teletype
--------
<TT> ...teks... </TT>
Teks ditampilkan dengan monospace.
+ Big
---
<BIG> ...teks... </BIG>
Teks ditampilkan dengan ukuran lebih besar.
+ Small
-----
<SMALL> ...teks... </SMALL>
Teks ditampilkan dengan ukuran lebih kecil.
+ Subscript
---------
<SUB> ...teks... </SUB>
Teks ditampilkan agak ke bawah dari posisi normal.
+ Superscript
-----------
<SUP> ...teks... </SUP>
Teks ditampilkan agak ke atas dari posisi normal.
Mengubah Font
-------------
Untuk melakukan pengubahan font secara langsung digunakan elemen FONT:
<FONT FACE=jenis COLOR=warna SIZE=ukuran> ...teks... </FONT>
Atribut FACE menentukan jenis huruf, misalnya: "courier", "arial",
"times" dan sebagainya. Atribut COLOR digunakan untuk menentukan
warna huruf, misalnya: "red", "blue", atau dengan kode warna seperti
"#FFFFFF" yang berarti putih. Atribut SIZE menentukan ukuran huruf,
misalnya: "1", "2", "+3", "-1", dan seterusnya.
Jika perubahan font dilakukan terhadap seluruh dokumen HTML,
digunakan elemen BASEFONT yang diletakkan di awal dokumen.
<BASEFONT FACE=jenis COLOR=warna SIZE=ukuran>
Break dan No Break
------------------
<BR>
<NOBR> ...teks... </NOBR>
HTML akan menampilkan teks dengan mengabaikan penekanan tombol ENTER
dan spasi yang berlebihan. Perpindahan teks ke baris baru ditentukan
oleh lebar jendela browser. Elemen BR digunakan untuk berpindah ke
baris baru dalam satu paragraf. Efeknya seperti penekanan tombol
ENTER. Elemen NOBR digunakan untuk mencegah teks di dalamnya
berpindah ke baris baru secara otomatis, walaupun tepi jendela
browser telah dilampaui.
Garis Horisontal
----------------
<HR WIDTH=lebar SIZE=ukuran NOSHADE>
Elemen ini berfungsi untuk menampilkan garis horisontal. Elemen ini
dilengkapi dengan atribut WIDTH untuk menyatakan lebar dalam
persentase maupun absolut, atribut SIZE untuk menentukan ukuran,
misalnya: 1, 2, dst dan atribut NOSHADE untuk menentukan apakah garis
tersebut ditampilkan secara tiga dimensi (tanpa NOSHADE) atau dua
dimensi.
Netscape Extension
------------------
Netscape menambahkan beberapa elemen tambahan, diantaranya elemen
MULTICOL dan BLINK. Elemen-elemen tambahan ini dapat memperindah
halaman web, namun pemakaiannya belum tentu didukung oleh browser
lain, artinya jika halaman tersebut dilihat dengan browser selain
Netscape, hasilnya tidak akan seperti yang kita harapkan.
+ Multi-Column Text
-----------------
<MULTICOL COLS=kolom WIDTH=lebar GUTTER=batas> ... </MULTICOL>
Teks dalam elemen ini ditampilkan secara berkolom. Elemen ini
dilengkapi dengan atribut COLS untuk menentukan jumlah kolom, WIDTH
untuk menentukan lebar kolom dan GUTTER untuk menentukan batas
antar kolom (default 10 pix).
+ Blink
-----
<BLINK> ...teks... </BLINK>
Teks dalam elemen ini ditampilkan dengan berkedip.
Link
----
Dalam bagian sebelumnya telah disebutkan bahwa internet tersusun atas
sejumlah besar link-link yang saling terhubung antara satu dengan
lainnya. Link-link tersebut dapat berupa link ke dalam dokumen yang
sama, link berskala lokal (dalam server yang sama) maupun global
(beda server/lokasi).
Link ke dokumen
---------------
<A HREF=url> ... </A>
Elemen ini untuk mengarahkan browser ke dokumen tertentu. Atribut
HREF menentukan lokasi dari dokumen tersebut beserta jenis protokol
yang digunakan. Misalnya:
"bagan.htm" --> link ke dokumen HTML
"http://www.sabda.org" -> link ke server dengan protokol http
"ftp://ftp.cdrom.com" -> link dengan protokol ftp
"news://hub.xc.org/i-kan-webauthor" -> link ke newsgroup
"mailto:webmaster@sabda.org" -> link ke e-mail client
dan lain-lain.
Link ke Target tertentu
-----------------------
<A HREF="URL#target"> ... </A> (dalam dokumen yang berbeda)
<A HREF="#target"> ... </A> (dalam dokumen yang sama)
Link di atas untuk mengarahkan browser ke target tertentu dari suatu
dokumen.
Target Window
-------------
<A HREF="URL" TARGET="jendela|_blank|_self|_parent|_top"> ... </A>
Link yang dilengkapi dengan atribut TARGET akan membuka suatu dokumen
HTML dalam jendela browser yang baru.
Definisi Target dalam Dokumen
-----------------------------
<A NAME="nama_target"> ... </A>
Tag ini digunakan untuk menentukan nama target di dalam suatu dokumen
HTML.
----
Edisi Berikut:
"LIST, TABLE dan FRAME"
----
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
copyright© 1999 WebServant-2000 last updated: by webmaster <webmaster@sabda.org>