Selasa, 20 Maret 2012

Belajar Tentang HTML


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

Nyo Kita Simak Caranya:
Daftar Isi
  1. PENDAHULUAN dan PERKENALAN
  2. TAG HTML 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.
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)
 
HURUF SPESIAL(these must all be in lower case)

  Special Character &#?; (where ? is the ISO 8859-1 code)
  < &lt;  
  > &gt;  
  & &amp;  
  " &quot;  
  Registered TM &reg;  
  Copyright &copy;  
  Spasi tak putus &nbsp; 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.