Upcoming SlideShare
×

# Html 2

373 views

Published on

1 Like
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
21
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