HTML 2 & CSSRetno Ires Devina Yolanti, SST
[email protected]://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
[email protected]://rezrack.wordpress.com
Top Related