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 ...
<img src=./image/gambar.jpg width=100 height=200
alt=“insert gambar” hspace=10 vspace=10
usemap=#map1 />
MAP
 Adalah tempat untuk beberapa elemen area yang
mendefinisikan area – area tertentu dalam sebuah
gambar
 Contoh :
<ma...
 Attribute Map :
 Name =
 Attribute Area
 shape= rect |circle| poly
 coords= x1,y1,x2,y2 | x,y,r
 Href= url
 alt= A...
<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...
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...
 <Caption>…… </caption>
 Untuk memberi label pada tabel
 Harus di deklarasikan di setelah deklarasi tabel
 Attribute
...
 <tr> ….. </tr>
 Adalah elemen untuk Baris dalam table
 Attribute
 Align
 Bgcolor
 Contoh :
<table>
<tr> …….
</tr>
<...
 <td> … </td>
 Mendefinisikan kolom / cell
 Attribut
 Bgcolor
 Align
 Colspan = merger kolom
 Rowspan = merger bari...
 Contoh :
<table border=1>
<caption> Data Mahasiswa </caption>
<tr>
<td align=center> NIM </td>
<td align=left valign=mid...
FORM
 Formulir Elektronik
 Attribute
 Name
 Target = _blank | _self | _parent
 Method = POST | GET
 Action = [file] ...
Text Field
 Untuk membuat single line text input.
<form >
<label for=“fn">First Name</label>
<input type="text"
name="fir...
Password
 Single line input dengan symbol untuk masukkannya,
digunakan untuk menginputkan password
<form >
<label for=“pw...
Textarea
 Untuk multi line input.
<form >
<label for="desc">Description</label>
<textarea name=“description”
id=“desc“
ro...
Drop Down
 Membuat pilihan drop down
<form>
<label for="tn">Where do you live? </label>
<select name="town" id="tn">
<opt...
Radio Buttons
<form>
<input type="radio"
name="age"
id="u30“
checked=“checked”
value="Under30" />
<label for="u30">Under 3...
Check Box
<form>
<input type="checkbox"
name="colour[]"
id="r"
checked="checked"
value="red" />
<label for="r">Red</label>...
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 ...
CSS
 Adalah bahasa style sheet yang digunakan untuk
formating dan editing dokumen yang di tulis
menggunakan bahasa markup...
Satu Dokumen
 Terletak diantara tag <style> ... </style> dalam satu
dokumen yang bersangkutan. Hanya di aplikasikan di
do...
Dokumen lain
 Class style di buat di dokumen lain dan di importkan
ke file/dokumen HTML yang akan menggunakan
dengan meng...
Inline
 Inline style hanya di aplikasikan pada satu elemen
yang bersangkutan. Tidak berpengaruh untuk elemen
/ tag lain
...
Selector CSS
 Elemen Selector
Selector yang berkerja pada elemen – elemen HTML
Contoh :
<style>
B {
Font-family : verdana...
 Class Selector
 Selector yang akan di aplikasikan pada setiap elemen dengan
class yang telah di buat.
 Contoh :
<style...
 Id Selector
 Selector yang akan di aplikasikan pada elemen/tag HTML
dengan id yang telah di buat
 Contoh :
<style>
#sa...
 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....
Retno Ires Devina Yolanti, SST
fairy.edensor@gmail.com
http://rezrack.wordpress.com
Upcoming SlideShare
Loading in...5
×

Html 2

213

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
213
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html 2

  1. 1. Retno Ires Devina Yolanti, SST fairy.edensor@gmail.com http://rezrack.wordpress.com
  2. 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. 3. <img src=./image/gambar.jpg width=100 height=200 alt=“insert gambar” hspace=10 vspace=10 usemap=#map1 />
  4. 4. MAP  Adalah tempat untuk beberapa elemen area yang mendefinisikan area – area tertentu dalam sebuah gambar  Contoh : <map ….. > <area ….. /> </map>
  5. 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. 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. 7. TABLE  Untuk membuat table  Komponen penyusun/pendukung table  <Caption >  <tr>  <td>  <th>  <thead>  <tbody>
  8. 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. 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. 10.  <tr> ….. </tr>  Adalah elemen untuk Baris dalam table  Attribute  Align  Bgcolor  Contoh : <table> <tr> ……. </tr> </table>
  11. 11.  <td> … </td>  Mendefinisikan kolom / cell  Attribut  Bgcolor  Align  Colspan = merger kolom  Rowspan = merger baris  Valign = posisi text secara vertikal
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. Hidden Fields <form> <input type="hidden" name="hidden_value" value="My Hidden Value" /> </form>
  21. 21. Tombol Submit <form> <input type="submit" name="submit" value="Submit" /> </form>
  22. 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. 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. 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. 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. 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. 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. 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. 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. 30.  Pseudo class  Contoh a:hover { text-decoration : underline; Color : white; }
  31. 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. 32. Retno Ires Devina Yolanti, SST fairy.edensor@gmail.com http://rezrack.wordpress.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×