HTML 2 & CSSRetno Ires Devina Yolanti, SST

fairy.edensor@gmail.comhttp://rezrack.wordpress.com

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

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

MAPAdalah tempat untuk beberapa elemen area

yang mendefinisikan area – area tertentu dalam sebuah gambar

Contoh : <map ….. >

<area ….. /></map>

Attribute Map :Name =

Attribute Areashape= rect |circle| polycoords= x1,y1,x2,y2 | x,y,rHref= urlalt= Alternative stringTarget = _blank | _self | _parent

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

TABLEUntuk membuat tableKomponen penyusun/pendukung table

<Caption ><tr> <td><th><thead><tbody>

Attribut TabelAlign = 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_fileBgcolor = kdwarna|nama warna (background

warna solid)Bordercolor = kdwarna|nama warnaBorder = ..px (ketebalan garis tabel)

<Caption>…… </caption>Untuk memberi label pada tabelHarus di deklarasikan di setelah deklarasi

tabelAttribute

Align

Contoh <table border=1>

<caption> Data Mahasiswa </caption>……..

<tr> ….. </tr>Adalah elemen untuk Baris dalam tableAttribute

Align Bgcolor

Contoh :<table>

<tr> ……. </tr></table>

<td> … </td>Mendefinisikan kolom / cellAttribut

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>

FORMFormulir ElektronikAttribute

NameTarget = _blank | _self | _parentMethod = POST | GETAction = [file] (file tujuan)

Contoh<form name=form1 target=_blank

action=proses.php method=post>…

</form>

Text FieldUntuk membuat single line text input.<form ><label for=“fn">First Name</label><input type="text" name="firstname" id=“fn"

size="20"/> </form>

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

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

CSSAdalah bahasa style sheet yang digunakan

untuk formating dan editing dokumen yang di tulis menggunakan bahasa markup (HTML / XHTML)

Memisahkan konten web dengan tampilanHTML (murni) = plain webHTML + CSS = designed web

Satu DokumenTerletak 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 lainClass 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>

InlineInline 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 CSSElemen Selector

Selector yang berkerja pada elemen – elemen HTML Contoh : <style>B {

Font-family : verdana;Font-size : 14pt;Font-weight : bold;Color : orange;

}</style>

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

Id SelectorSelector yang akan di aplikasikan pada elemen/tag

HTML dengan id yang telah di buatContoh :<style> #satu {

Font-family : verdana;Font-size : 14pt;Font-weight : bold;Color : orange;

}</style>

Pseudo class

Contoh a:hover {

text-decoration : underline;Color : white;}

Custom selectorGabungan dari selector – selector dasarContoh P B {Color : purple;} P.Teks {

color : orange}ol.menu li a:hover {Color : white;Text-decoration : underline;}

HTML 2 & CSSRetno Ires Devina Yolanti, SST

fairy.edensor@gmail.comhttp://rezrack.wordpress.com