Your SlideShare is downloading. ×
5 pemrograman internet   css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

5 pemrograman internet css

353
views

Published on

CSS

CSS

Published in: Education

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cascading Style Sheet Cara Efisien bikin Desain
  • 2. Toni Tegar Sahidi tonitegarsahidi@gmail.comSTT Stikma Internasional, Malang
  • 3. CSS OVERVIEW#1 Apa sih CSS tu?#2 Ngapain pakai CSS?#3 Konsep Dasar CSS..?#4 Selector
  • 4. #1 Apa sih CSS? 1/6
  • 5. CSS memberitahu browserbagaimana me-render sebuah elemen HTML!
  • 6. CSS Styles ditambahkan keHTML 4.0 untuk menyelesaikan masalah.
  • 7. Tanpa CSS
  • 8. <h2>sebuah judul</h2>
  • 9. (tanpa CSS)misal ingin diberi warna biru
  • 10. <font color="blue"> <h2>sebuah judul</h2></font>
  • 11. Dengan CSS
  • 12. misal didefinisikankode CSS berikut
  • 13. h2 { color:blue; }
  • 14. <h2>sebuah judul</h2>
  • 15. #2 Ngapain pakai CSS? 1/6
  • 16. untuk memisahkan Konten dengan Style / CaraMenampilkan (Presentation)
  • 17. memudahkan me-manage tampilan website
  • 18. Kenapa?
  • 19. HTML sebenarnya tidak pernah dimaksudkan untuk mengandung tag formatting untuk dokumen
  • 20. HTML sebenarnya bertujuanuntuk mendefinisikan konten dari dokumen
  • 21. <h1>This is a heading</h1><p>This is a paragraph.</p>
  • 22. Ketika tag <font>diperkenalkan di HTML 3.2
  • 23. MIMPI BURUKWEB DEVELOPER!!
  • 24. Pendefinisian font dan warnayang banyak harus ditambahkandi SETIAP halaman website.
  • 25. website kecil tak masalah... Website BESAAAAR?
  • 26. Itulah kenapa W3Cmengenalkan CSS pada HTML 4.0* Sekarang sudah HTML 5!
  • 27. Sejak itu, semua formattingdapat dilepaskan dari dokumen HTML dan diletakkan di file yang berbeda*. *di file yang sama pun bisa saja, tapi not recommended
  • 28. http://www.w3schools.com/css/d emo_default.htm
  • 29. #3 SINTAKS CSS 2/5
  • 30. h2 { color:blue; margin : 1em; }
  • 31. selectorSelect / memilih elemen dalam dokumen HTML yang akan diaplikasikan style (di desain/diformat)
  • 32. h2 { color:blue; margin : 1em; } h2 adalah selector
  • 33. declarationMemberi tahu browser bagaimana menampilkan elemen
  • 34. h2 { color:blue;  declaration margin : 1em; }
  • 35. h2 { color:blue; margin : 1em;  declaration }
  • 36. property & value Property adalah style attribute (sifat elemen) yang ingin Andaganti. Setiap property memiliki nilai (value).
  • 37. h2 { color : blue; margin : 1em; } *color dan margin adalah property
  • 38. h2 { color : blue; margin : 1em; } *blue dan 1em adalah value
  • 39. #3 TIGA TIPE CSS 2/5
  • 40. #BROWSER Style Sheet#USER Style Sheet#AUTHOR Style Sheet
  • 41. #1 BROWSER Style SheetTampilan default yang diberikan oleh Web Browser kepada kita.
  • 42. #2 USER Style SheetBeberapa browser memungkinkan kita untuk men-setting sendiri tampilan default kita.
  • 43. #3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung situs.
  • 44. #3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung situs.
  • 45. Author Style Sheetdibuat oleh kita(Web Developer)
  • 46. #3 AUTHORSTYLE SHEET 2/5
  • 47. Ada 3 Metode untukMengaplikasikanAuthor Style Sheet
  • 48. #1 Inline Style #2 Header Style#3 External File Style
  • 49. #1 Inline Style #2 Header Style#3 External File Style
  • 50. <h2 style=“color:red;”> Sebuah Judul</h2>
  • 51. diletakkan di HTML elemennya
  • 52. #1 Inline Style #2 Header Style#3 External File Style
  • 53. <html> <head> <title>CSS Session</title> <style type="text/css"> h2 { color:blue; } </style> </head> <body> <h2>sebuah judul</h2> </body></html>
  • 54. #1 Inline Style #2 Header Style#3 External File Style
  • 55. <head> <title>CSS Session</title> <link href=“MyStyle.css" rel="stylesheet"type="text/css" /></head>
  • 56. #4 Selector 1/6
  • 57. memilih Elemen mana yangakan di-terapkan style CSS
  • 58. ADA 3#element#class#id
  • 59. element
  • 60. <body><h2>Kucing Kami... </h2></body>
  • 61. body{ background:#ff7865; }
  • 62. class
  • 63. untuk men-select semua yang sekelas/sejenis
  • 64. <h2>Kucing Kami... </h2><img src="kucing.jpg" alt="kucingkami" title="miauuw" /></br><img class="comment"src="kucing.jpg" alt="kucing kami"title="miauuw" />
  • 65. img.comment{ width:100px; }
  • 66. self LearningCSS dengan id
  • 67. next session MeLayout website dengan CSS JavaScript PHP?