Dan seperti kita ketahui sebuah dimana bahasa pemograman selalu memiliki
struktur dan penyusunan yang jelas, jadi tentu saja HTML ini sangat
berbeda dengan bahasa kita sehari-hari. Bahkan mungkin kita akan sangat
perlu belajar serius untuk benar-benar bisa mengerti bagaimana cara
menulis dengan HTML yang valid dan bisa dimengerti oleh komputer.
Berikut kode" yang perlu kalian ketahui :
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>
|
|
CUAN 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 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)
|
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
|
Sekian tutorial HTML,semoga bermanfaat dan nanti nya bisa buat website sendiri :D
