1. Retno Ires Devina Yolanti, SST
fairy.edensor@gmail.com
http://rezrack.wordpress.com

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)

3. <img src=./image/gambar.jpg width=100 height=200
alt=“insert gambar” hspace=10 vspace=10
usemap=#map1 />

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

6. <map name=map1>
<area shape=rect coords=0,20,10,40 href=1.html />
<area shape=rect coords=20,40,30,60 href=1.html />
<area shape=rect coords=30,50,40,70 href=1.html />
</map>

7. TABLE
 Untuk membuat table
 Komponen penyusun/pendukung table
 <Caption >
 <tr>
 <td>
 <th>
 <thead>
 <tbody>

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>

18. Radio Buttons
<form>
<input type="radio"
name="age"
id="u30“
checked=“checked”
value="Under30" />
<label for="u30">Under 30</label>
<br />
<input type="radio"
name="age"
id="thirty40"
value="30to40" />
<label for="thirty40">30 to 40</label>
</form>

19. Check Box
<form>
<input type="checkbox"
name="colour[]"
id="r"
checked="checked"
value="red" />
<label for="r">Red</label>
<br />
<input type="checkbox"
name="colour[]"
id="b"
value="blue" />
<label for="b">Blue</label>
</form>

20. Hidden Fields
<form>
<input type="hidden"
name="hidden_value"
value="My Hidden Value" />
</form>

21. Tombol Submit
<form>
<input type="submit"
name="submit"
value="Submit" />
</form>

22. <form action=proses.php name=form1
method=post>
NIM : <input type=text name=nim id=nim
size=12 />
Nama : <input type=text name=nama id=nama
size=50 />
Alamat : <textarea name=alamat id=alamat
rows=5 cols=7 > Masukkan Alamat Anda
</textarea>
</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;
}

32. Retno Ires Devina Yolanti, SST
fairy.edensor@gmail.com
http://rezrack.wordpress.com