BELAJAR 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) | |
(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 | |
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) |
Gabung dalam percakapan