2. IMAGE
Inline tag yang digunakan untuk menyisipkan gambar
ke dalam halaman web
<IMG …. />
Attributes :
Src = [file source]
Width = [..px / %] (ukuran gambar secara horizontal )
Height = [..px / %] (ukuran gambar secara vertical)
Alt = [string] (alternative text)
Align = [middle|left|right|center]
Border = [angka]
Usemap = [#namamap] (penggunaan tag map)
Vspace / hspace = [angka] (memberi space secara horizontal / vertical)
4. MAP
Adalah tempat untuk beberapa elemen area yang
mendefinisikan area – area tertentu dalam sebuah
gambar
Contoh :
<map ….. >
<area ….. />
</map>
5. Attribute Map :
Name =
Attribute Area
shape= rect |circle| poly
coords= x1,y1,x2,y2 | x,y,r
Href= url
alt= Alternative string
Target = _blank | _self | _parent
8. Attribut Tabel
Align = center|left|right (posisi tabel)
Width = ..px | ..% (ukuran tabel secara horizontal)
Height = ..px | ..% (ukuran tabel secara horizontal)
Cellpadding = ..px (jarak tepi cell dengan content)
Cellspacing = ..px (jarak cell dengan border)
Background = alamat_file
Bgcolor = kdwarna|nama warna (background warna solid)
Bordercolor = kdwarna|nama warna
Border = ..px (ketebalan garis tabel)
9. <Caption>…… </caption>
Untuk memberi label pada tabel
Harus di deklarasikan di setelah deklarasi tabel
Attribute
Align
Contoh
<table border=1>
<caption> Data Mahasiswa </caption>
……..
10. <tr> ….. </tr>
Adalah elemen untuk Baris dalam table
Attribute
Align
Bgcolor
Contoh :
<table>
<tr> …….
</tr>
</table>
11. <td> … </td>
Mendefinisikan kolom / cell
Attribut
Bgcolor
Align
Colspan = merger kolom
Rowspan = merger baris
Valign = posisi text secara vertikal
12. Contoh :
<table border=1>
<caption> Data Mahasiswa </caption>
<tr>
<td align=center> NIM </td>
<td align=left valign=middle> Nama Mahasiswa
</td>
</tr>
</table>
13. FORM
Formulir Elektronik
Attribute
Name
Target = _blank | _self | _parent
Method = POST | GET
Action = [file] (file tujuan)
Contoh
<form name=form1 target=_blank action=proses.php
method=post>
…
</form>
14. Text Field
Untuk membuat single line text input.
<form >
<label for=“fn">First Name</label>
<input type="text"
name="firstname"
id=“fn"
size="20"/>
</form>
15. Password
Single line input dengan symbol untuk masukkannya,
digunakan untuk menginputkan password
<form >
<label for=“pw">Password</label>
<input type=“password"
name=“passwd"
id=“pw"
size="20"/>
</form>
16. Textarea
Untuk multi line input.
<form >
<label for="desc">Description</label>
<textarea name=“description”
id=“desc“
rows=“10” cols=“30”>
Default text goes here…
</textarea>
</form>
17. Drop Down
Membuat pilihan drop down
<form>
<label for="tn">Where do you live? </label>
<select name="town" id="tn">
<option value="swindon">Swindon</option>
<option value="london”
selected="selected">London</option>
<option value=“bristol">Bristol</option>
</select>
</form>
23. CSS
Adalah bahasa style sheet yang digunakan untuk
formating dan editing dokumen yang di tulis
menggunakan bahasa markup (HTML / XHTML)
Memisahkan konten web dengan tampilan
HTML (murni) = plain web
HTML + CSS = designed web
24. Satu Dokumen
Terletak diantara tag <style> ... </style> dalam satu
dokumen yang bersangkutan. Hanya di aplikasikan di
dokument tersebut.
Contoh :
<head>
<style >
body {
Background-color : #EEEEEE;
}
</style>
</head>
25. Dokumen lain
Class style di buat di dokumen lain dan di importkan
ke file/dokumen HTML yang akan menggunakan
dengan menggunakan tag <link>.
Contoh
<head>
<link rel="stylesheet" href="basic.css"/>
</head>
26. Inline
Inline style hanya di aplikasikan pada satu elemen
yang bersangkutan. Tidak berpengaruh untuk elemen
/ tag lain
Contoh :
<div style=“”background-color : black; color:white; font-
weight:bold”>
Content
</div>
27. Selector CSS
Elemen Selector
Selector yang berkerja pada elemen – elemen HTML
Contoh :
<style>
B {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>
28. Class Selector
Selector yang akan di aplikasikan pada setiap elemen dengan
class yang telah di buat.
Contoh :
<style>
.tebal {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>
29. Id Selector
Selector yang akan di aplikasikan pada elemen/tag HTML
dengan id yang telah di buat
Contoh :
<style>
#satu {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>
30. Pseudo class
Contoh
a:hover {
text-decoration : underline;
Color : white;
}
31. Custom selector
Gabungan dari selector – selector dasar
Contoh
P B {
Color : purple;
}
P.Teks {
color : orange
}
ol.menu li a:hover {
Color : white;
Text-decoration : underline;
}