Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Modul Design & Pemrograman Web

Presentasi serupa


Presentasi berjudul: "Modul Design & Pemrograman Web"— Transcript presentasi:

1 Modul Design & Pemrograman Web
CSS NEXT

2 CSS (Cascading Style Sheet)
Konsep: Pewarisan (inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes) BACK NEXT

3 CSS (Cascading Style Sheet)
Ketentuan Mendasar Penulisan script CSS terletak diantara tag <HEAD>…</HEAD> Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration. <HTML> <HEAD> <TITLE>…..</TITLE> <STYLE TYPE=text/css> selector { declaration } </STYLE> </HEAD> <BODY> …….. </BODY> </HTML> BACK NEXT

4 CSS (Cascading Style Sheet)
Tag Komentar <html> <head> <title>……</title> <style type=text/css> …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ </style> </head> <body> ………………… </body> </html> BACK NEXT

5 CSS Pewarisan (inheritance)
Text <html> <head> <title>CSS_01</title> <style type=text/css> b { color:lime } </style> </head> <body> Universitas Narotama Surabaya <br> <b>Fakultas Ilmu Komputer</b> </body> </html> BACK NEXT Catatan: Untuk declaration color dapat juga menggunakan kode heksa

6 CSS Selektor-Kontekstual (Contextual Selector)
<html> <head> <title>CSS_01</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT Catatan: selector ini kesemuanya untuk bold+italic text

7 CSS (Cascading Style Sheet)
Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector) <html> <head> <title>CSS Inheritance</title> <style type=text/css> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> <html> <head> <title>Selektor-Kontekstual</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html BACK NEXT

8 CSS (Cascading Style Sheet)
Aturan CSS berdasarkan case to case <html> <head> <title>CSS_01</title> </head> <body> Universitas Narotama Surabaya <br> <b style=color:lime> Fakultas Ilmu Komputer </b> </body> </html> TIDAK EFEKTIF BACK NEXT

9 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_02</title> <style type=text/css> i { color:#ff3333 } </style> </head> <body> Universitas Narotama Surabaya <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

10 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_03</title> <style type=text/css> u { color:#3333CC } </style> </head> <body> Universitas Narotama Surabaya <br> <u>Fakultas Ilmu Komputer</u> </body> </html> BACK NEXT

11 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_04</title> <style type=text/css> h3 { color:# } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> </body> </html> BACK NEXT

12 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_05</title> <style type=text/css> h2 { color:# } h3 { color:#FF3333 } </style> </head> <body> <h2>Sistem Informasi</h2> <br> <h3>Sistem Komputer</h3> </body> </html> BACK NEXT

13 CSS (Cascading Style Sheet)
text-decoration: underline (tampil garis dibawah text) overline (tampil garis diatas text) line-trough (tampil garis melalui text) none (non-efek) Text <html> <head> <title>CSS_07</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

14 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_08</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

15 CSS (Cascading Style Sheet)
Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

16 CSS (Cascading Style Sheet)
Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

17 CSS (Cascading Style Sheet)
Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

18 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_09</title> <style type=text/css> i { color:blue; text-decoration:underline; font-family:Tahoma; font-size:14px; font-weight:bold; } </style> </head> <body> <i>Universitas Narotama Surabaya</i> </body> </html> font-weight: normal bold NEXT

19 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_10</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-style:italic; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> BACK NEXT

20 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_11</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek) BACK NEXT Catatan: font-variant tidak berlaku pada browser Netscape

21 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_12</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-transform:lowercase; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA SURABAYA</p> </body> </html> text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil) BACK NEXT

22 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_13</title> <style type=text/css> p { color:blue; font-family:Tahoma; letter-spacing:10px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT

23 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_14</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-indent:30px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> text-indent = membuat indent untuk awal paragraf BACK NEXT

24 CSS (Cascading Style Sheet)
Body <html> <head> <title>CSS_15</title> <style type=text/css> body { background-color:blue; } </style> </head> <body> </body> </html> BACK NEXT

25 CSS (Cascading Style Sheet)
Body <html> <head> <title>CSS_16</title> <style type=text/css> body { background-image: url(bg.jpg); } </style> </head> <body> </body> </html> BACK NEXT

26 CSS (Cascading Style Sheet)
Catatan: Nilai list-style-type: disc -> efek lingkaran circle -> efek persegi empat square -> efek lingkaran yang transparan decimal -> 1,2,3,…dst lower-roman -> i,ii,iii,…dst upper-roman -> I,II,III,…dst lower-alpha -> a,b,c,…dst upper-alpha -> A,B,C,…dst None -> Tanpa Efek BACK NEXT

27 CSS (Cascading Style Sheet)
Bullet & Numbering <html> <head> <title>CSS_17</title> <style type=text/css> li { list-style-type:square; font-weight:bold; } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> <ol> <li>Sistem Informasi</li> <li>Sistem Komputer</li> </ol> </body> </html> BACK NEXT

28 CSS (Cascading Style Sheet)
Soal (4) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

29 CSS (Cascading Style Sheet)
Soal (5) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

30 CSS (Cascading Style Sheet)
Soal (6) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

31 CSS (Cascading Style Sheet)
Link Link Properties: A:link A:hover A:active NEXT

32 CSS (Cascading Style Sheet)
Link Definisi style link: A:link -> memberikan efek pada saat normal (unlink) A:hover -> memberikan efek pada saat mouse pointer diatas object A:active -> memberikan efek setelah event click BACK NEXT

33 CSS (Cascading Style Sheet)
Link <html> <head> <title>CSS_18</title> <style type=text/css> a { color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover { color : #FF9900; /* kode warna orange */ text-decoration : underline; } </style> </head> <body> <a href=#>Link 1</a> <br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW

34 CSS (Cascading Style Sheet)
Link <html> <head> <title>CSS_19</title> <style type=text/css> a { color: #000000; } /* kode warna hitam */ a:hover { color : #FF9900; } /* kode warna orange */ a:active { color: #006699; } /* kode warna biru */ </style> </head> <body> <a href=#>Link 1</a><br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW

35 CSS (Cascading Style Sheet)
Soal (7) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

36 CSS (Cascading Style Sheet)
Soal (8) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

37 CSS (Cascading Style Sheet)
Kursor Link BACK NEXT PREVIEW

38 CSS (Cascading Style Sheet)
Soal (9) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

39 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_01</title> <style type=text/css> input { background:yellow; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> Catatan: untuk selector input berlaku pada, <input type=radio>, <input type=checkbox>, <input type=submit> & <inputy type=button> BACK NEXT

40 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_02</title> <style type=text/css> input { background:yellow; border: 1px solid red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

41 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_03</title> <style type=text/css> input { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

42 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_04</title> <style type=text/css> select { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Program Studi:<br> <select name=prodi> <option value=SK>Sistem Komputer</option> <option value=SI>Sistem Informasi</option> </select> </form> </body> </html> BACK NEXT

43 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_05</title> <style type=text/css> textarea { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Alamat:<br> <textarea name=alamat cols=30 rows=5></textarea> </form> </body> </html> BACK NEXT

44 CSS (Cascading Style Sheet)
Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

45 CSS (Cascading Style Sheet)
Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

46 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_20</title> <style type=text/css> table { border: 1px solid black; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> <td> </td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

47 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_21</title> <style type=text/css> table { background-color: cyan; border: 1px solid orange; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> <td> </td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT

48 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_22</title> <style type=text/css> tr {background-color: blue; color:white; text-align:center;} </style> </head> <body> <table> <tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> </table></body></html> BACK NEXT Catatan: deklarasi border tidak berlaku pada selector <TR>

49 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_23</title> <style type=text/css> td {background-color: blue; color:white; padding-left: 15px; </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

50 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_24</title> <style type=text/css> td {background-color: blue; color:white; padding-top: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

51 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_25</title> <style type=text/css> td {background-color: blue; color:white; padding-bottom: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

52 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_26</title> <style type=text/css> td {background-color: blue; color:white; border-bottom: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

53 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_27</title> <style type=text/css> td {background-color: blue; color:white; border-top: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

54 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_28</title> <style type=text/css> td {background-color: blue; color:white; border-right: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

55 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_29</title> <style type=text/css> td {background-color: blue; color:white; border-left: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

56 CSS (Cascading Style Sheet)
Soal (10) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

57 CSS (Cascading Style Sheet)
Soal (11) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

58 CSS (Cascading Style Sheet)
Soal (12) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

59 CSS (Cascading Style Sheet)
Soal (13) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

60 CSS (Cascading Style Sheet)
Soal (14) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

61 CSS (Cascading Style Sheet) Classes
Penulisan <style type=text/css> .variable { … deklarasi … } </style> BACK NEXT Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

62 CSS (Cascading Style Sheet) Classes
Text <html> <head> <title>Kelas_01</title> <style type=text/css> .text { font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } </style> </head> <body> <a class=text>Universitas Narotama Surabaya</a> </body> </html> BACK NEXT PREVIEW

63 CSS (Cascading Style Sheet) Classes
Link <html> <head> <title>Kelas (LINK)</title> <style type=text/css> .link { font-family:tahoma; color:#0000FF; text-decoration:underline;} .link:hover,.link:active { font-family:tahoma; color:#FF9900;text-decoration:underline; } </style> </head> <body> <a href=# class=link>Link 1</a><br><br> <a href=# class=link>Link 2</a> </body> </html> BACK NEXT PREVIEW

64 CSS (Cascading Style Sheet) Classes
Form <html> <head> <title>Kelas_Form</title> <style type=text/css> .inputbox1 { background:silver; border: 1px dotted red;color: blue;} .inputbox2 { background:silver; border: 1px solid blue;color: red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form> <br> NIM: <br> <input type=text name=nim size=20 class=inputbox1><br> Nama: <br> <input type=text name=nama size=40 class=inputbox2> </form> </body></html> BACK NEXT PREVIEW

65 Finish Terserah Anda… Sekian Materi Design & Pemrograman Web.
Untuk Pengembangan Selanjutnya, Terserah Anda… END


Download ppt "Modul Design & Pemrograman Web"

Presentasi serupa


Iklan oleh Google