assalammualaikum wr wb
dalam pertemuan kali ini saya ingin berbagi ilmu dengan anda semua tentang elemen-elemen dasar coding HTML atau bahasa cELEMEN 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)
|
|
|
|
|||
Kepala
|
<H?></H?>
|
(Heading - spesifikasi untuk menetapkan 6 tingkatan
kepala)
|
|
Penataan (Align) Kepala
|
|||
Bagian (Division)
|
<DIV></DIV>
|
||
Penataan Bagian
|
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
|
||
Kutipan Blok (Block Quote)
|
(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>
|
||
|
|
|||
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 - 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 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=?>
|
|
|
|
|||
Paragraf
|
(tag penutup seringkali tak diperlukan)
|
||
Align Text
|
|||
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 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 Gambar
|
<BODY BACKGROUND="URL">
|
(Tiled Background)
|
|
Warna Latar Belakang
|
(Background Color - urutan: merah/hijau/biru)
|
||
Warna Huruf Teks
|
|||
Warna Acuan
|
|||
Acuan Lepas Kunjung
|
(Visited Link)
|
||
Acuan Aktif
|
(Active Link)
|
||
|
|
|||
Special Character
|
&#?;
|
(where ? is the ISO 8859-1 code)
|
|
<
|
<
|
||
>
|
>
|
||
&
|
&
|
||
"
|
"
|
||
Registered TM
|
®
|
||
Copyright
|
©
|
||
Spasi tak putus
|
|
Non-breaking Space
|
|
|
|
|||
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
|
|
|
|||
Rancangan Tabel
|
|||
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)
|
|
|
|
|||
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)
|
|
|
|||
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)
|
|
|
|
|||
Komentar
|
<!-- *** -->
|
(tidak ditampilkan oleh browser)
|
|
Prolog HTML 3.2
|
|||
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)
|
|
nah itu lah semua elemen-elemen dasar yang saya ketahui sobat semoga bisa bermanfaat untuk anda semua selamat mencoba...
No comments:
Post a Comment