1. Dasar HTML
Hypertext Markup Language (HTML) merupakan bahasa pemrograman web berupa suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca, diinterpretasikan dari satu platform komputer ke platform komputer lainnya tanpa perlu melakukan suatu perubahan apa pun.
Struktur dokumen HTML :
<HTML>
<HEAD>
***** Script Bagian Head *****
</HEAD>
<BODY>
***** Script Bagian Body *****
</BODY>
</HTML>
Struktur Bagian Head :
<HEAD>
<TITLE>………..</TITLE>
<BASE HREF=”……………”>
<STYLE HREF=”url_style_sheet”>
<STYLE>…………</STYLE>
<META NAME=”…” CONTENT=”…”>
</HEAD>
Tag Pemformatan Text :
Paragraph:
<P align=”left/center/right”> . . . </P>
Preformatted Text:
<PRE> . . . </PRE>
DIV:
<DIV align=”” class=”” style=””> . . . </DIV>
Heading
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Physical Style
<br>….<br> untuk pindah baris ke baris berikutnya
<B>…</B> untuk menebalkan teks
<I>…</I> untuk membuat teks terlihat miring
<U>…</U> untuk menggarisbawahi teks
<S>…</S> untuk memberikan coretan pada teks
<BLINK>…</BLINK> untuk membuat teks berkedip
<TT>…</TT> untuk menampilkan teks dalam font typewriter
<BIG>…</BIG> untuk membesarkan teks
<SMALL>…</SMALL> untuk mengecilkan teks
<SUB>…</SUB> untuk membuat teks subscript
<SUP>…</SUP> untuk membuat teks superscript
FONT
Menentukan Ukuran Teks
<font size = “…”> ….</font>
Mengubah Warna Teks
<font color = “…”> ….</font>
Jenis Font
<font face = “…”> ….</font>
Link :
Untuk Membuat Link dapat menggunakan sintaks :
<a href=“path”> Link Teks </a>
Contoh :
<a href=”coba.html”> Coba </a>
Selain atribut href, juga terdapat atribut target yang digunakan untuk membuat sebuah frame atau jendela (window) baru untuk menampilkan halaman web lainnya yang dituju.
Contoh :
<a href=”coba.html” target=”frameone”> Coba </a>
Untuk menampilkan gambar menggunakan tag <img>.
Sintaks :
<img src=”path” align=”top|middle|bottom|left|right” width=”.. ” height=”..” border=”..” alt=”Teks Keterangan Gambar”>
Link Menggunakan image :
<a href=”dokumen2.html”>
<img src=”link.jpg” alt=”Buka Dokumen 2″>
</a>
FORM
Digunakan sebagai tempat untuk menangkap data inputan user. Tag <form> memiliki 2 buah atribut yaitu action dan method. Action, digunakan untuk menunjukkan URL atau dokumen pemrosesan form selanjutnya. Method, digunakan untuk menunjukkan bagaimana cara form tersebut diberlakukan.
Sintaks :
<form method=”post|get” action=”URL_script”>
Tag pendukung pembuatan form:
Input tag <input>, memiliki beberapa tipe yaitu:
v Check box
Sintaks :
<input type=nama_type name=”nama_elemen” value=”nilainya”>
Contoh :
<input type=checkbox name=”minat” value=”HTML”>
v Radio
Contoh :
<input type=radio name=”gender” value=”Laki-laki”>
v Text
Contoh :
<input type=text name=”nama”>
v Password
Contoh :
<input type=password name=”alamat” size=40>
v Submit
Contoh :
<input type=submit value=”Simpan”>
v Reset
Contoh :
<input type=reset value=”Ulangi”>
Textarea tag <textarea>
Contoh :
<textarea name=”catatan” cols=30 rows=5></textarea>
Select tag <select>
Contoh:
<select name=”os”>
<option value=”win98″>Windows 98/ME</option>
<option value=”winnt” selected>Windows NT/2000/XP</option>
<option value=”linux”>Linux</option>
</select>
Contoh Form
<H1>Contoh Formulir Pendaftaran</H1>
<form method=”post|get” action=”URL_script”>
Nama : <input type=text name=”nama”><br>
Alamat : <input type=text name=”alamat” size=40><br>
No. HP :<input type=text name=”hp” value=”+62″ size=15><br>
Jenis Kelamin :
<input type=radio name=”gender” value=”Laki-laki”> Lakilaki
<input type=radio name=”gender” value=”Perempuan”>Perempuan<br>
Minat :
<input type=checkbox name=”minat” value=”HTML”>HTML
<input type=checkbox name=”minat” value=”ASP”>ASP
<input type=checkbox name=”minat” value=”PHP”>PHP<br>
Sistem Operasi :
<select name=”os”>
<option value=”win98″>Windows 98/ME</option>
<option value=”winnt” selected>Windows
NT/2000/XP</option>
<option value=”linux”>Linux</option>
</select>
Catatan :
<textarea name=”catatan” cols=30 rows=5></textarea>
<br>
<input type=submit value=”Simpan”>
<input type=reset value=”Ulangi”>
</form>
