Posted by : Dre Okvian
Sabtu, 23 Agustus 2014
Assalamu'alaikum wr. wb.
Malam ini Okvi mau berbagi sebuah Info yang berjudul "Panduan Ringkas HTML"
Semoga Bermanfaat bagi kalian semua.
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)
|
|
| <
| <
|
|
|
| >
| >
|
|
|
| &
| &
|
|
|
| "
| "
|
|
|
| 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)
|
Time in Tokyo