Html 2

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

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)

MAP
 Adalah tempat untuk beberapa elemen area yang
mendefinisikan area – area tertentu dalam sebuah
gambar
 Contoh :
<map ….. >
<area ….. />
</map>

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

 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)

 <Caption>…… </caption>
 Untuk memberi label pada tabel
 Harus di deklarasikan di setelah deklarasi tabel
 Attribute
 Align
 Contoh
<table border=1>
<caption> Data Mahasiswa </caption>
……..

 <tr> ….. </tr>
 Adalah elemen untuk Baris dalam table
 Attribute
 Align
 Bgcolor
 Contoh :
<table>
<tr> …….
</tr>
</table>

 <td> … </td>
 Mendefinisikan kolom / cell
 Attribut
 Bgcolor
 Align
 Colspan = merger kolom
 Rowspan = merger baris
 Valign = posisi text secara vertikal

 Contoh :
<table border=1>
<caption> Data Mahasiswa </caption>
<tr>
<td align=center> NIM </td>
<td align=left valign=middle> Nama Mahasiswa
</td>
</tr>
</table>

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>

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>

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>

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>

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>

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>

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>

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

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

<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>

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

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>

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>

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>

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>

 Class Selector
 Selector yang akan di aplikasikan pada setiap elemen dengan
class yang telah di buat.
 Contoh :
<style>
.tebal {
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>

 Id Selector
 Selector yang akan di aplikasikan pada elemen/tag HTML
dengan id yang telah di buat
 Contoh :
<style>
#satu {
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>

 Pseudo class
 Contoh
a:hover {
text-decoration : underline;
Color : white;
}

 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;
}

Html 2

More Related Content

Similar to Html 2 (20)

More from Aris Saputro (20)

Html 2