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
oleh Kevin Werbach
Versi 3.0 Formatted -- July 21, 1996
Alih bahasa Indonesia oleh Kristianto Jahja
Versi Bahasa Indonesia -- 23 Desember 1996
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.
- PENDAHULUAN dan PERKENALAN
- Keunikan dari panduan ini
- Tag HTML apa saja yang tercakup
- Bagimana dokumen ini diformat (termasuk uraian tentang simbol dan singkatan)
- TAG HTML
- Elemen Dasar (semua dokumen HTML harus memuatnya)
- Ancangan Struktural (tampilan terkendali oleh pilihan browser)
- Format tampilan (penulis menetapkan 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 perkembangan HTML.
|
|
|||
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)
|
|
|
|
|||
Kepala
|
<H?></H?>
|
(Heading -
spesifikasi untuk menetapkan 6 tingkatan kepala)
|
|
Penataan
(Align) Kepala
|
|||
Bagian
(Division)
|
<DIV></DIV>
|
||
Penataan
Bagian
|
<DIV
ALIGN=LEFT|RIGHT|CENTER></DIV>
|
||
Kutipan
Blok (Block Quote)
|
(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>
|
||
|
|
|||
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 -
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 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=?>
|
|
|
|
|||
Paragraf
|
(tag
penutup seringkali tak diperlukan)
|
||
Align Text
|
|||
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
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>
|
|||
|
|
|||
Latar
Belakang Gambar
|
<BODY BACKGROUND="URL">
|
(Tiled
Background)
|
|
Warna
Latar Belakang
|
(Background
Color - urutan: merah/hijau/biru)
|
||
Warna
Huruf Teks
|
|||
Warna
Acuan
|
|||
Acuan
Lepas Kunjung
|
(Visited
Link)
|
||
Acuan
Aktif
|
(Active Link)
|
||
|
|
|||
Special
Character
|
&#?;
|
(where ?
is the ISO 8859-1 code)
|
|
<
|
<
|
||
>
|
>
|
||
&
|
&
|
||
"
|
"
|
||
Registered
TM
|
®
|
||
Copyright
|
©
|
||
Spasi tak
putus
|
|
Non-breaking
Space
|
|
|
|
|||
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
|
|
|
|||
Rancangan
Tabel
|
|||
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)
|
|
|
|
|||
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)
|
|
|
|||
Applet
|
<APPLET></APPLET>
|
||
Nama File
Applet
|
<APPLET
CODE="***">
|
||
Parameter
Applet
|
<APPLET
PARAM NAME="***">
|
||
Sumber
Applet
|
<APPLET
CODEBASE="URL">
|
||
Identifier
Applet
|
<APPLET
NAME="***">
|
(sebagai
rujukan di tempat lain pada halaman sama)
|
|
Teks
Alternatif
|
<APPLET
ALT="***">
|
(untuk
browser tanpa kemampuan Java browsers)
|
|
Penataan
Applet
|
<APPLET
ALIGN="LEFT|RIGHT|CENTER">
|
||
Ukuran
Applet
|
<APPLET
WIDTH=? HEIGHT=?>
|
(in
pixels)
|
|
Celah
batas Applet
|
<APPLET
HSPACE=? VSPACE=?>
|
(in
pixels)
|
|
|
|
|||
Komentar
|
<!--
*** -->
|
(tidak
ditampilkan oleh browser)
|
|
Prolog
HTML 3.2
|
|||
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)
|
|
Tidak ada komentar:
Posting Komentar