PANDUAN RINGKAS HTML
Judul Asli: THE BARE BONES GUIDE
TO HTML
oleh Syem Fremay
Versi 3.0 Formatted -- Pebruary 10, 2010
Alih bahasa Indonesia oleh Syem Fremay
Versi Bahasa Indonesia -- 20 Maret 2012
oleh Syem Fremay
Versi 3.0 Formatted -- Pebruary 10, 2010
Alih bahasa Indonesia oleh Syem Fremay
Versi Bahasa Indonesia -- 20 Maret 2012
Nyo Kita Simak Caranya:
Daftar Isi
- 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
| 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> | ||
| FORMAT 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 DAN 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=?> | |
| 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> | |||
| LATAR BELAKANG DAN 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)
| |||
| HURUF SPESIAL(these must all
be in lower case) | |||
|---|---|---|---|
| Special Character | &#?; | (where ? is the ISO 8859-1 code) | |
| < | < | ||
| > | > | ||
| & | & | ||
| " | " | ||
| Registered TM | ® | ||
| Copyright | © | ||
| Spasi tak putus | | Non-breaking Space | |
(Daftar lengkap huruf khusus terdapat di
http://www.uni-passau.de/%7Eramsch/iso8859-1.html)
| |||
| FORMULIR | |||
|---|---|---|---|
| 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) |
| JAVA | |||
|---|---|---|---|
| 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) | |
| 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) | |
| Copyright ©1995-1997 Kevin Werbach. Redistribusi Non-kommersial diperbolehkan. Panduan ini bukan produk dari Bare Bones Software; kesamaan nama hanyalah kebetulan saja. |
