XtGem.com

PANDUAN RINGKAS HTML

Judul Asli: THE BARE BONES GUIDE TO HTML oleh Kevin Werbach Versi 3.0 Formatted -- July 21, 1996 Alih bahasa Indonesia oleh Kristianto Jahja Versi Bahasa Indonesia -- 23 Desember 1996

Versi terakhir dokumen ini terdapat di < http:// werbach.com/ barebones/ >. Panduan ini memuat semua tag yang dikenali oleh hampir semua browser terkemuka versi terkini. Saya telah memuatkan semua Tag yang terdapat pada Spesifikasi HTML 3.2, demikian juga dengan tag perluasan Netscape yang terdapat pada Netscape Navigator sampai dengan versi 3.0b5. Panduan ini dirancang seringkas mungkin; namun bila dikehendaki informasi rinci lebih lanjut tentang HTML anda dapat mencarinya di WWW Help Page yang saya susun. Segenap saran dan komentar anda akan disambut dengan senang hati. Daftar Isi 1. PENDAHULUAN dan PERKENALAN Keunikan dari panduan ini Tag HTML apa saja yang tercakup Bagimana dokumen ini diformat (termasuk uraian tentang simbol dan singkatan) 2. TAG HTML Elemen Dasar (semua dokumen HTML harus memuatny a) Ancangan Struktural (tampilan terkendali oleh pilihan browser) Format tampilan (penulis menetapk an tampilan naskah) Acuan (links) dan grafik Pemisah (dividers) Daftar (lists) Latar belakang dan warna Huruf spesial Formulir (forms) Table (tables) Frame Java Lain-lain Penting: Bila anda tidak cukup paham tentang perbedaan antara HTML 2.0, HTML 3.0, HTML 3.2, dan Netscape extensions, sebaiknya anda membaca W3C statement tentang perkembanga n HTML.

ELEMEN DASAR

Jenis Dokumen
<HTML></HTML>
(terdapat pada awal
dan akhir dari file
HTML)
Judul
<TITLE></TITLE>
(harus selalu
terdapat pada
mukadimah)
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum,
seperti judul dsb.)
Batang Tubuh
<BODY></BODY>
(isi dari halaman
HTML)

ANCANGAN STRUKTURAL

Kepala
<H?></H?>
(Heading -
spesifikasi untuk
menetapkan 6
tingkatan kepala)
Penataan (Align)
Kepala
<H? ALIGN=LEFT|
CENTER|RIGHT></H?>
[*]
Bagian (Division)
<DIV></DIV>
Penataan Bagian
<DIV ALIGN=LEFT|
RIGHT|CENTER></
DIV>
Kutipan Blok (Block
Quote)
<BLOCKQUOTE></
BLOCKQUOTE> [*]
(tampilan dengan
jeda terhadap batas
pinggir)
Penekanan
(Emphasis)
<EM></EM>
(umumnya huruf
miring)
Penguatan (Strong
Emphasis)
<STRONG></STRONG>
(umumnya huruf
tebal)
Kutipan singkat
(Citation)
<CITE></CITE>
(umumnya huruf
miring)
Kode
<CODE></CODE>
(Code - untuk source
code listings)
Contoh Keluaran
<SAMP></SAMP>
(Sample Output)
Masukan Papan
Ketik
<KBD></KBD>
(Keyboard Input)
Variabel
<VAR></VAR>
(Variable)
Definisi
<DFN></DFN>
(Definition - jarang
dipakai)
Alamat Pengarang
(Author's Address)
<ADDRESS></
ADDRESS>
Huruf ukuran Besar
<BIG></BIG>
Huruf Ukuran Kecil
<SMALL></SMALL>

F0RMAT TAMPILAN

Huruf Tebal
<B></B>
(Bold)
Huruf Miring
<I></I>
(Italic)
N3.0b
Garis Bawah
<U></U>
(Underline - jarang
digunakan)
Huruf Coret
<STRIKE></STRIKE>
(Strikeout - jarang
digunakan)
N3.0b
Huruf Coret
<S></S>
(Strikeout - jarang
digunakan)
Huruf Geser Bawah
<SUB></SUB>
(Subscript)
Huruf Geser Atas
<SUP></SUP>
(Superscript)
Huruf Mesin Ketik
<TT></TT>
(Typewriter - huruf
berjarak tetap)
Pra-format
(Preformatted)
<PRE></PRE>
(menampilkan
dengan jarak pra-
format)
Jarak Huruf
<PRE WIDTH=?></
PRE>
(mengatur jarak
huruf)
Rata Tengah
<CENTER></CENTER>
[*]
(Center - berlaku
untuk teks maupun
gambar)
N1.0
Huruf Kedip
<BLINK></BLINK>
(Blinking - tag
terlucu sampai kini)
Ukuran Huruf
<FONT SIZE=?></
FONT>
(Font Size - boleh
diisi dari 1 sampai 7)
Rubah Ukuran Huruf
<FONT
SIZE="+|-?"></FONT>
N1.0
Basis Ukuran Huruf
<BASEFONT SIZE=?>
(boleh diisi 1 sampai
7; ukuran standard/
default=3)
Warna Huruf
<FONT COLOR="#$$$
$$$"></FONT>
N3.0b
Pilih Jenis Huruf
<FONT
FACE="***"></
FONT>
N3.0b
Teks Multi Kolom
<MULTICOL COLS=?
></MULTICOL>
N3.0b
Jarak Batas Kolom
<MULTICOL
GUTTER=?></
MULTICOL>
(default = 10 pixels)
N3.0b
Lebar Kolom
<MULTICOL WIDTH=?
></MULTICOL>
N3.0b
Celah (Spacer)
<SPACER>
N3.0b
Jenis Celah
<SPACER
TYPE=horizontal|
vertical|block>
N3.0b
Ukuran Celah
<SPACER SIZE=?>
N3.0b
Dimensi Celah
<SPACER WIDTH=?
HEIGHT=?>
N3.0b
Penataan Celah
<SPACER ALIGN=left|
right|center>

ACUAN & GRAFIK

Acuan pada
dokumen tertentu
<A HREF="URL"></A>
Acuan pada sasaran
dalam dokumen
<A HREF="URL#
***"></A>
(bila terdapat pada
dokumen lain)
<A HREF="#***"></
A>
(bila terdapat pada
dokumen yang
sama)
N2.0
Jendela Sasaran
(Target Window)
<A HREF="URL"
TARGET="***| |_
blank|_self|_parent|_
top"></A>
Penamaan sasaran
pada dokumen
<A NAME="***"></
A>
Kaitan(Relationship)
<A REL="***"></A>
(jarang digunakan)
Kaitan terbalik
(Reverse
Relationship)
<A REV="***"></A>
(jarang digunakan)
Peragaan Gambar
<IMG SRC="URL">
Penataan Letak
Gambar
<IMG SRC="URL"
ALIGN=TOP|BOTTOM|
MIDDLE|LEFT|RIGHT>
N1.0
Penataan Letak
Gambar
<IMG SRC="URL"
ALIGN=TEXTTOP|
ABSMIDDLE|
BASELINE|
ABSBOTTOM>
Alternatif Teks
<IMG SRC="URL"
ALT="***">
(saat gambar
belum/tidak
ditampilkan)
Daerah Gambar
(Imagemap)
<IMG SRC="URL"
ISMAP>
(membutuhkan
program script)
Daerah Gambar
pihak klien
<IMG SRC="URL"
USEMAP="URL">
Uraian Daerah
Gambar
<MAP
NAME="***"></
MAP>
Pembagian Daerah
Gambar
<AREA SHAPE="RECT"
COORDS=",,,"
HREF="URL"|
NOHREF>
Dimensi Gambar
<IMG SRC="URL"
WIDTH=? HEIGHT=?>
(in pixels)
Garis Batas
<IMG SRC="URL"
BORDER=?>
(dalam satuan pixel)
Ruang Pembatas
<IMG SRC="URL"
HSPACE=? VSPACE=?
>
(dalam satuan pixel)
N1.0
Gambar Low-Res
Proxy
<IMG SRC="URL"
LOWSRC="URL">
N1.1
Pemindahan Tarik
<META HTTP-
EQUIV="Refresh"
CONTENT="?;
URL=URL">
(Client Pull)
N2.0
Objek Cantum
<EMBED SRC="URL">
(Embed Object -
mencantumkan
objek pada
dokumen)
N2.0
Ukuran Objek
<EMBED SRC="URL"
WIDTH=? HEIGHT=?>

ACUAN & GRAFIK

PEMISAH

Paragraf
<P></P> [*]
(tag penutup
seringkali tak
diperlukan)
Align Text
<P ALIGN=LEFT|
CENTER|RIGHT></P>
[*]
Pndah Baris
<BR>
(pindah ke baris
berikut)
Putus Penataan
Baris
<BR CLEAR=LEFT|
RIGHT|ALL>
(Clear Textwrap)
Garis Datar
<HR>
(Horizontal Rule)
Penataan Letak
Garis
<HR ALIGN=LEFT|
RIGHT|CENTER>
Tebal Garis
<HR SIZE=?>
(dalam satuan pixel)
Lebar Garis
<HR WIDTH=?>
(dalam satuan pixel)
N1.0
Lebar Garis
Persentasi
<HR WIDTH="%">
(dalam persentasi
terhadap lebar
halaman)
Garis Pejal
<HR NOSHADE>
(Solid Line - tanpa
pola 3D)
N1.0
Tanpa Ganti Baris
<NOBR></NOBR>
(No Break -
mencegah ganti
baris)
N1.0
Sambung Suku Kata
<WBR>
(Word Break - letak
ganti baris bila
diperlukan)

DAFTAR

Daftar Tanpa Nomor
<UL><LI></UL>
(Unordered List -
Cantumkan <LI>
sebelum tiap butir)
Kompak
<UL COMPACT></UL>
(Compact)
Jenis Butiran
<UL TYPE=DISC|
CIRCLE|SQUARE>
(Bullet Type -
berlaku umum bagi
butir terdaftar)
<LI TYPE=DISC|
CIRCLE|SQUARE>
(berlaku khusus
pada butir ini dan
selanjutnya)
Daftar Bernomor
<OL><LI></OL>
(Ordered List -
Cantumkan <LI>
sebelum tiap butir)
Kompak
<OL COMPACT></OL>
Jenis Penomoran
<OL TYPE=A|a|I|i|1>
(berlaku umum
untuk semua butir
dalam daftar)
<LI TYPE=A|a|I|i|1>
(berlaku khusus
pada butir ini dan
selanjutnya)
Nomor Mulai
<OL START=?>
(berlaku umum
untuk semua butir
dalam daftar)
<LI VALUE=?>
(berlaku khusus
pada butir ini dan
selanjutnya)
Daftar Definisi
<DL><DT><DD></DL>
(Definition List -
<DT>=istilah,
<DD>=uraian)
Kompak
<DL COMPACT></DL>
Daftar Menu
<MENU><LI></MENU>
(Cantumkan <LI>
sebelum butir menu)
Kompak
<MENU COMPACT></
MENU>
Daftar Direktori
<DIR><LI></DIR>
(Cantumkan <LI>
sebelum tiap butir
direktori)
Kompak
<DIR COMPACT></
DIR>

BACKGR0UND & WARNA

Latar Belakang
Gambar
<BODY
BACKGROUND="URL">
(Tiled Background)
Warna Latar
Belakang
<BODY BGCOLOR="#$
$$$$$"> [*]
(Background Color -
urutan: merah/
hijau/biru)
Warna Huruf Teks
<BODY TEXT="#$$$$
$$"> [*]
Warna Acuan
<BODY LINK="#$$$$$
$"> [*]
Acuan Lepas
Kunjung
<BODY VLINK="#$$$$
$$"> [*]
(Visited Link)
Acuan Aktif
<BODY ALINK="#$$$$
$$"> [*]
(Active Link)
(Info lanjut di http://
werbach.com/web/
wwwhelp.html#
color
)

F0RMULIR

Rancangan Formulir
<FORM ACTION="URL"
METHOD=GET|
POST></FORM>
Define Forms
N2.0
Mengirimkan File
<FORM
ENCTYPE="multipart
/form-data"></
FORM>
File Upload
Input Field
<INPUT TYPE="TEXT|
PASSWORD|
CHECKBOX|RADIO|
IMAGE|HIDDEN|
SUBMIT|RESET">
Nama Field
<INPUT
NAME="***">
Nilai Field
<INPUT
VALUE="***">
Kotak Periksa
<INPUT CHECKED>
(checkboxes dan
radio boxes)
Ukuran Field
<INPUT SIZE=?>
(dalam satuan
jumlah karakter)
Panjang Maksimum
<INPUT
MAXLENGTH=?>
(dalam satuan
karakter)
Daftar Pilihan
<SELECT></SELECT>
Selection List
Nama Daftar Pilihan
<SELECT
NAME="***"></
SELECT>
Jumlah Pilihan
<SELECT SIZE=?></
SELECT>
Banyak Pilihan
<SELECT MULTIPLE>
(dapat memilih lebih
dari satu)
Pilihan
<OPTION>
(butir yang dapat
dipilih)
Pilihan Default
<OPTION SELECTED>
Ukuran Input Box
<TEXTAREA ROWS=?
COLS=?></
TEXTAREA>
Nama Input Box
<TEXTAREA
NAME="***"></
TEXTAREA>
N2.0
Rangkuman Teks
<TEXTAREA
WRAP=OFF|VIRTUAL|
PHYSICAL></
TEXTAREA>
Wrap Text

TABEL

Rancangan Tabel
<TABLE></TABLE>
[*]
Garis Batas Tabel
<TABLE BORDER=?></
TABLE>
Celah Sel
<TABLE
CELLSPACING=?>
Cell Spacing
Penyangga Sel
<TABLE
CELLPADDING=?>
Cell Padding
Lebar Tabel
<TABLE WIDTH=?>
(dalam satuan pixel)
Lebar Tabel
Persentasi
<TABLE WIDTH="%">
(dalam satuan
persen terhadap
lebar halaman)
Baris dalam Tabel
<TR></TR>
Penataan Letak
Baris
<TR ALIGN=LEFT|
RIGHT| CENTER|
MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|
MIDDLE>
Sel dalam Tabel
<TD></TD>
(harus ada dalam
setiap baris tabel)
Penataan Letak Sel
<TD ALIGN=LEFT|
RIGHT| CENTER|
MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|
MIDDLE>
Tanpa Ganti Baris
<TD NOWRAP>
Rentang Kolom
<TD COLSPAN=?>
Columns to span
Rentang Baris
<TD ROWSPAN=?>
Rows to span
N1.1
Lebar Sel
<TD WIDTH=?>
(dalam satuan pixel)
N1.1
Lebar Sel Persentasi
<TD WIDTH="%">
(dalam satuan
persen terhadap
lebar tabel)
N3.0b
Warna Sel
<TD BGCOLOR="#$$$
$$$">
Kepala Tabel
<TH></TH>
(Table Header -
seperti data dengan
Bold dan Center)
Penataan Letak
Kepala Tabel
<TH ALIGN=LEFT|
RIGHT| CENTER|
MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|
MIDDLE>
Tanpa Baris Baru
<TH NOWRAP>
Rentang Kolom
<TH COLSPAN=?>
Columns to Span
Rentang Baris
<TH ROWSPAN=?>
Rows to Span
N1.1
Lebar Kepala Tabel
<TH WIDTH=?>
(dalam satuan pixel)
N1.1
Lebar Persentasi
<TH WIDTH="%">
(dalam persentasi
terhadap lebar
tabel)
N3.0b
Warna Kepala Tabel
<TH BGCOLOR="#$$$
$$$">
Keterangan Tabel
<CAPTION></
CAPTION>
Caption
Penataan
Keterangan
<CAPTION ALIGN=TOP|
BOTTOM>
(di atas / di bawah
tabel)

FRAMES

N2.0
Dokumen dalam
Frame
<FRAMESET></
FRAMESET>
(sebagai pengganti
<BODY>)
N2.0
Tinggi Baris Frame
<FRAMESET
ROWS=,,,></
FRAMESET>
(dalam satuan pixel
atau %)
N2.0
Tinggi Baris Frame
<FRAMESET
ROWS=*></
FRAMESET>
(* = ukuran relatif)
N2.0
Lebar Kolom Frame
<FRAMESET
COLS=,,,></
FRAMESET>
(dalam satuan pixel
atau %)
N2.0
Lebar Kolom Frame
<FRAMESET
COLS=*></
FRAMESET>
(* = ukuran relatif)
N3.0b
Lebar Garis Batas
<FRAMESET
BORDER=?>
N3.0b
Garis Batas
<FRAMESET
FRAMEBORDER="yes|
no">
N3.0b
Warna Garis Batas
<FRAMESET
BORDERCOLOR="#$$$
$$$">
N2.0
Rancangan Frame
<FRAME>
(isi dari frame
individu)
N2.0
Tampilan Dokumen
Frame
<FRAME SRC="URL">
N2.0
Nama Frame
<FRAME
NAME="***"|_
blank|_self| _parent|
_top>
N2.0
Lebar Batas
<FRAME
MARGINWIDTH=?>
(batas kiri dan
kanan)
N2.0
Tinggi Batas
<FRAME
MARGINHEIGHT=?>
(batas atas dan
bawah)
N2.0
Scrollbar?
<FRAME
SCROLLING="YES|NO|
AUTO">
Memungkinkan
scrolling pada frame
N2.0
Ukuran Frame tak
bisa diubah
<FRAME NORESIZE>
N3.0b
Batas Frame
<FRAME
FRAMEBORDER="yes|
no">
N3.0b
Warna Garis Batas
<FRAME
BORDERCOLOR="#$$$
$$$">
N2.0
Isi tanpa Frame
<NOFRAMES></
NOFRAMES>
(bagi browser yang
tak mampu frame)

LAIN-LAIN

Komentar

(tidak ditampilkan
oleh browser)
Prolog HTML 3.2
<!DOCTYPE HTML
PUBLIC "-//W3C//
DTD HTML 3.2//EN">
[*]
Mampu Cari
<ISINDEX>
(indikasi indeks yang
dapat dicari-
temukan)
Prompt
<ISINDEX
PROMPT="***">
(teks sebagai
prompt)
Perintah Cari
<A HREF="URL?
***"></a>
(gunakan tanda
tanya yang
sebenarnya)
URL dari file ini
<BASE HREF="URL">
(harus terletak di
header)
N2.0
Nama Dasar Window
<BASE
TARGET="***">
(harus terletak di
header)
Kaitan
<LINK REV="***"
REL="***"
HREF="URL">
(Relation dan
Reverse Relation,
harus terletak di
header)
Informasi Meta
<META>
(harus terletak di
header)
Lembar Gaya
Penulisan
<STYLE></STYLE>
(Style Sheet - belum
didukung
sepenuhnya)
Scripts
<SCRIPT></SCRIPT>
(belum didukung
sepenuhnya)