Kode Dasar HTML Lengkap

06.13 My Profile's 4 comments

Ini adalah panduan yang saya dapat dari werbach.com/barebones/barebone_id.html. Menurut saya panduan ini sangat bagus dan ringkas untuk orang-orang seperti saya yang juga baru belajar masalah 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.0bGaris Bawah<U></U>(Underline - jarang digunakan)
Huruf Coret<STRIKE></STRIKE>(Strikeout - jarang digunakan)
N3.0bHuruf 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.0Huruf 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.0Basis Ukuran Huruf<BASEFONT SIZE=?>(boleh diisi 1 sampai 7; ukuran standard/default=3)
Warna Huruf<FONT COLOR="#$$$$$$"></FONT>
N3.0bPilih Jenis Huruf<FONT FACE="***"></FONT>
N3.0bTeks Multi Kolom<MULTICOL COLS=?></MULTICOL>
N3.0bJarak Batas Kolom<MULTICOL GUTTER=?></MULTICOL>(default = 10 pixels)
N3.0bLebar Kolom<MULTICOL WIDTH=?></MULTICOL>
N3.0bCelah (Spacer)<SPACER>
N3.0bJenis Celah<SPACER TYPE=horizontal| vertical|block>
N3.0bUkuran Celah<SPACER SIZE=?>
N3.0bDimensi Celah<SPACER WIDTH=? HEIGHT=?>
N3.0bPenataan 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.0Jendela 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.0Penataan 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.0Gambar Low-Res Proxy<IMG SRC="URL" LOWSRC="URL">
N1.1Pemindahan Tarik<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">(Client Pull)
N2.0Objek Cantum<EMBED SRC="URL">(Embed Object - mencantumkan objek pada dokumen)
N2.0Ukuran 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.0Lebar Garis Persentasi<HR WIDTH="%">(dalam persentasi terhadap lebar halaman)
Garis Pejal<HR NOSHADE>(Solid Line - tanpa pola 3D)
N1.0Tanpa Ganti Baris<NOBR></NOBR>(No Break - mencegah ganti baris)
N1.0Sambung 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.0Mengirimkan 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.0Rangkuman 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.1Lebar Sel<TD WIDTH=?>(dalam satuan pixel)
N1.1Lebar Sel Persentasi<TD WIDTH="%">(dalam satuan persen terhadap lebar tabel)
N3.0bWarna 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.1Lebar Kepala Tabel<TH WIDTH=?>(dalam satuan pixel)
N1.1Lebar Persentasi<TH WIDTH="%">(dalam persentasi terhadap lebar tabel)
N3.0bWarna Kepala Tabel<TH BGCOLOR="#$$$$$$">
Keterangan Tabel<CAPTION></CAPTION>Caption
Penataan Keterangan<CAPTION ALIGN=TOP|BOTTOM>(di atas / di bawah tabel)

 
FRAMES
N2.0Dokumen dalam Frame<FRAMESET></FRAMESET>(sebagai pengganti <BODY>)
N2.0Tinggi Baris Frame<FRAMESET ROWS=,,,></FRAMESET>(dalam satuan pixel atau %)
N2.0Tinggi Baris Frame<FRAMESET ROWS=*></FRAMESET>(* = ukuran relatif)
N2.0Lebar Kolom Frame<FRAMESET COLS=,,,></FRAMESET>(dalam satuan pixel atau %)
N2.0Lebar Kolom Frame<FRAMESET COLS=*></FRAMESET>(* = ukuran relatif)
N3.0bLebar Garis Batas<FRAMESET BORDER=?>
N3.0bGaris Batas<FRAMESET FRAMEBORDER="yes|no">
N3.0bWarna Garis Batas<FRAMESET BORDERCOLOR="#$$$$$$">
N2.0Rancangan Frame<FRAME>(isi dari frame individu)
N2.0Tampilan Dokumen Frame<FRAME SRC="URL">
N2.0Nama Frame<FRAME NAME="***"|_blank|_self| _parent|_top>
N2.0Lebar Batas<FRAME MARGINWIDTH=?>(batas kiri dan kanan)
N2.0Tinggi Batas<FRAME MARGINHEIGHT=?>(batas atas dan bawah)
N2.0Scrollbar?<FRAME SCROLLING="YES|NO|AUTO">Memungkinkan scrolling pada frame
N2.0Ukuran Frame tak bisa diubah<FRAME NORESIZE>
N3.0bBatas Frame<FRAME FRAMEBORDER="yes|no">
N3.0bWarna Garis Batas<FRAME BORDERCOLOR="#$$$$$$">
N2.0Isi 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.0Nama 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)


Posted in: ,

4 komentar:

Unknown mengatakan...

sangat jelas sekali infonya gan...

bagi agan yang ingin belajar membuat web bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

7 September 2015 pukul 13.26
Unknown mengatakan...
Komentar ini telah dihapus oleh pengarang.
31 Mei 2016 pukul 18.19
Unknown mengatakan...

trimakasi infonya gan

http://www.fmnh.web.id/

31 Mei 2016 pukul 18.20
AnotherLife mengatakan...

mantap

7 Oktober 2016 pukul 13.50

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Online Project management