Panduan dasar belajar HTML ini saya dedikasikan bagi mereka yang ingin mengenal bahasa html, baik itu mereka para pelajar dan mahasiswa, dosen, dan umum. semoga bermanfaat..

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)


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	`<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)
	Acuan pada sasaran dalam dokumen	`<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 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)
Jenis Butiran	`<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)
Jenis Penomoran	`<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)
Nomor Mulai	`<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
(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.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)


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). }

Semoga bermanfaat, Panduan Lengkap Belajar HTML

Source : Kucoba.com

Anda sedang membaca artikel tentang Panduan Lengkap Belajar HTML dan anda bisa menemukan artikel Panduan Lengkap Belajar HTML ini dengan url http://share-tuts.blogspot.com/2012/11/panduan-lengkap-belajar-html.html. Anda boleh menyebarluaskan atau mengcopy artikel Panduan Lengkap Belajar HTML ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini

4 komentar:

Yousake NKRI mengatakan...: pusing dgn yg namanya HTML..
nice deh sob; 5 November 2012 pukul 18.32
Share-Tuts mengatakan...: @Yousake NKRI ane juga sedikit pusing sob tapi ane kalau ngga ingat harus liat kodenya juga :D; 5 November 2012 pukul 19.24
Mahfud mengatakan...: Wah, tulisannya bagus sekali sobat... rinci..
Semoga mempermudah yng lagi belajar html..; 15 November 2012 pukul 22.46
Share-Tuts mengatakan...: @Mahfud hehe makasih sob, amin dah mudah"an membantu untuk yang pingin belajar,,makasih dah berkunjung ke Share-Tuts; 15 November 2012 pukul 23.01

Peraturan Berkomentar :

1. KOMENTAR "PERTAMAXX, KEDUAXX, NICE GAN, NICE SOB" dan sejenisnya akan langsung Share-Tuts hapus
2. Berkomentar sesuai isi postingan.
3. Berkomentar dengan sopan, tidak SARA, kasar/porno.
4. Dilarang SPAM !
5. Dilarang menaruh iklan !
6. Apabila menaruh link hidup maka akan Share-Tuts ganti menjadi link Blog ini !
7. Apabila Anda ingin berkomentar dengan menyertakan link blog, silahkan gunakan profil OpenID.