1 / 39

Pemprograman & Perancangan WEB

Pemprograman & Perancangan WEB. Pertemuan 6 CSS (Cascading Style Sheet). Sekilas PW.

lamar-mathis
Télécharger la présentation

Pemprograman & Perancangan WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pemprograman & Perancangan WEB Pertemuan 6 CSS (Cascading Style Sheet)

  2. Sekilas PW • Situs Web (web site) andalannyamerupakanlayanansajianinformasiynagmenggunakankonsep hyperlink yang memudahkan surfer (sebutanbagipemakai internet) untukmelakukan surfing(kegiatanpencarianinformasimelalui internet. • Informasi yang disajikanberbentuk : multimedia • Suatu website akancepatterkenaljikaup to date. • Ke-up to date-an dankelengkapan data merupakanmasalahbesarbagipengelolasitus.

  3. CSS • Pernah denger atau lihat kata diatas ?????? • Singkatannya Cascading Style Sheet • Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. • Singkatnya kita bisa mempercantik situs kita dengan cepat secara keseluruhan warna dan tampilan yang ada di situs kita. • Syarat – syarat belajar CSS ????????? • Anda paling tidak sudah tau code-code HTML

  4. CSS <HTML> <HEAD> </HEAD> <BODY> P: Mengapajikakitaanggap <B>suatupekerjaan</B> itumudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>? <P> J: Karenaitumerupakan <B>sugesti</B> terhadap <B>dirikita sendiri</B> </BODY> </HTML>

  5. CSS Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu ?katakan saja kita ingin mewarnainya dengan warna hijau….. <HTML> <HEAD> </HEAD> <BODY> P: Mengapajikakitaanggap <B><FONT COLOR="Lime">suatu pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan beneranmenjadi<B><FONT COLOR="Lime"> lebihmudah </FONT></B>? <P> J: Karenaitumerupakan <B><FONT COLOR="Lime">sugesti </FONT></B> terhadap <B><FONT COLOR="Lime">dirikita sendiri </FONT></B> </BODY> </HTML>

  6. CSS <HTML> <HEAD> <STYLE TYPE="text/css"> B { color : lime } </STYLE> </HEAD> <BODY> P: Mengapajikakitaanggap <B>suatupekerjaan</B> itumudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ? <P> J: Karenaitumerupakan <B>sugesti</B> terhadap <B>dirikita sendiri</B> </BODY> </HTML>

  7. CSS • Apa untungnya buat kita ???????????? • Listing code setidaknya akan mudah dibaca dan diatur. • Kita dapat membuat ini dimana saja dan kapan saja. • Coba ganti warna dengan kode RGB, layaknya perintah HTML dasar….. <STYLE TYPE="text/css"> B { color : #CC6633 } </STYLE>

  8. CSS <HTML> <HEAD> <STYLE TYPE="text/css"> I { color : red } </STYLE> </HEAD> <BODY> P: Mengapajikakitaanggap <I>suatupekerjaan</I> itumudah makapekerjaanituakanbeneranmenjadi<I> lebihmudah</I>? <P> J: Karenaitumerupakan <I>sugesti</I> terhadap <I>dirikita sendiri</I> </BODY> </HTML>

  9. CSS Jikasayaingin kata "suatupekerjaan" daricontoh di atasmenjadiberwarnamerahdan ITALIC, terus kata "lebihmudah" kitabuatmenjadiberwarnahijaudan BOLD, terusuntukmenambahkebingungan andajadikan kata "sugesti" dengan UNDERLINE danberwarnamerah, serta kata "dirikitasendiri" menjadihijaudan BOLD.

  10. CSS <HTML> <HEAD> <STYLE TYPE="text/css"> I,U { color: red } B { color : green } </STYLE> </HEAD> <BODY> P: Mengapajikakitaanggap <I>suatupekerjaan</I> itumudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>? <P> J: Karenaitumerupakan <U>sugesti</U> terhadap <B>dirikita sendiri</B> </BODY> </HTML>

  11. Ketentuan yang mendasar B {color: lime} • dikenalsebagai "Style Rule" atauperaturan/perintahcss, yang manaterdiridariduaelemendasaryaitu: "selector" dan "declaration“ • sebuah "selector" biasanyaadalah tag HTML (dalamhalini B), sementara "declaration" adalahsatuataubeberapaperintah/nilaidaricss yang menunjukkan type bentuk yang diaplikasikanpada selector. • Declaration inibiasanya di tandaidengankurungkurawal, danperintah/nilaicss yang berbedadipisahkansatu dengan yang lain dengan menggunakan titik-koma

  12. Ketentuan yang mendasar Bingung ?????????????? B {color: lime; text-decoration: underline; font-family: Arial} ini baru dapat kita katakan sebagai css yang valid

  13. Ketentuan yang mendasar <HTML> <HEAD> <STYLE TYPE="text/css"> B {color: lime; text-decoration: underline; font-family: Arial} </STYLE> </HEAD> <BODY> P: Mengapajikakitaanggap <B>suatupekerjaan</B> itumudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>? <P> J: Karenaitumerupakan <B>sugesti</B> terhadap <B>dirikita sendiri</B> </BODY> </HTML>

  14. Ketentuan yang mendasar • Csssendirimemilikilebihdarienam-puluh keyword (kata kunci), danandaakansering-seringbergauldenganmerekaseiringdenganpemahamanmateriini. • Selectors jugadapatdikelompokan, seperticontohmengubah teks untuk H1, H2, dan H4, menjadiberwarnaputih. H1, H2, H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */

  15. Ketentuan yang mendasar • Hal yang paling umumdalammemasukkankode Style Sheet denganmenggunakan tag <STYLE>, tag<STYLE> iniselalutampildalambagian<HEAD> daridokumenanda, garisbesarnyasepertiini : <HEAD> <STYLE TYPE="text/css"> ... aturan-aturancssdisini ... </STYLE> </HEAD>

  16. Sekali tulis pakai bersama • Satu dari beberapa kehebatan tekhnologi css ini - dan merupakan alasan banyak orang menyukai penggunaannya - adalahmemperbolehkankitauntukmendefinisikansebuah style-sheet global yang dapatmenerapkanaturan-aturancsstersebutuntukkeseluruhandokumen-dokumen HTML padahalaman web site anda. • Keuntungannyajelassekali, jikakitainginmengubahtampilansitus, kitatinggalmengeditsatu file sajadanhasilnyaakan di refleksikanpadakeseluruhandokumen HTML yang dilinkke situ.

  17. Sekali tulis pakai bersama • Anggap saja anda mempunyai Style-Sheet yang diberi nama "global.css" yang diletakkan pada server "www.situskamu.com/global.css". Untuk memberikan pengaruh aturan Style-Sheet kesemua atau ke spesifik dokumen HTML, gampangnya tambahkan saja kode sederhana ini di dalam tag <HEAD> pada dokumen HTML anda, seperti ini :

  18. Sekali Tulis pakai bersama <HEAD> <LINK REL="stylesheet" HREF="http://www.situskamu.com/global.css" TYPE="text/css"> </HEAD> • dansemuaaturan Style-Sheet dalam "global.css" secaraautomatisakanditerapkankedalamdokumenHTML yang ingindiberi Style-Sheet.

  19. Sekali tulis pakai bersama • Kamujugadapatmengimport Style-Sheet denganmenggunakan keyword (kata-kunci) "@import", maudibericontoh? Nihcoba: <STYLE TYPE="text/css"> @import url(http://www.situskamu.com/global.css); P {color: yellow} </STYLE>

  20. Sekali tulis pakai bersama • kamu juga dapat menerapkan aturan CSS berdasarkan "case to case", dengan menambahkan atribut CSS ke dalam kode HTML itu sendiri. Contohnya :

  21. Sekali tulis pakai bersama <HTML> <HEAD> </HEAD> <BODY> P: Mengapa jika kita anggap <B STYLE="color: lime; backgroundcolor: black"> suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi <B STYLE="color: lime; background-color: black"> lebih mudah</B>? <P> J: Karena itu merupakan <B STYLE="color: lime; backgroundcolor: black">sugesti</B> terhadap <B STYLE="color: lime; background-color: black">diri kita sendiri</B> </BODY> </HTML>

  22. Lebih lanjut tentang Pseudo - Giberish • Melanjutkan kembali konsep dasar yang sudah dipelajari : pewarisan (inheritance), kelas (classes), pseudo-classes, dan selectors-kontekstual(Contextual Selector). Coba kita bahas satu persatu :

  23. Lebih lanjut tentang Pseudo - Giberish • Pewarisan (Inheritance) : • ………………………… • Classes : • ………………………… • Selektor Kontekstual (Contextual-Selector) • …………………………

  24. Pewarisan <HTML> <HEAD> <STYLE TYPE="text/css"> B { color : green } </STYLE> </ HEAD> <BODY> <B> P: Mengapa jika kita anggap <FONT SIZE="+1">suatu pekerjaan</FONT> itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P> J: Karena itu merupakan sugesti terhadap diri kita sendiri</B> </BODY> </HTML>

  25. Clasess <HTML> <HEAD> <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> terhadap diri kita sendiri </BODY> </HTML>

  26. Selector Kontekstual <HEAD> <STYLE TYPE="text/css"> B I {color: blue; font-family: Arial} /* selector ini kesemuanya untuk bold+italic text */ </STYLE> </HEAD>

  27. Warna pada CSS • CSS menawarkan berbagai macam cara untuk mengganti warna. Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kreiss).

  28. Warna pada CSS • I {color: #0000FF) Ataunilaikombinasi RGB dalamnilaiabsolutterhadappersen, sepertiini : • I {color: rgb (0, 0, 255)) • I {color: rgb (0%, 0%, 100%)) • Kita dapatmengubahkombinasiwarnasesuaidengangaya yang kitasukai.

  29. Warna Pada CSS <HTML> <HEAD> <STYLE TYPE="text/css"> .blue {color: cyan; background-color: #FF8000} .green {color: lime; background-color: black} </STYLE> </HEAD> <BODY> <P CLASS="blue"> Sebenernya semua pekerjaan itu mudah! <P CLASS="green"> Setuju, tapi tak semudah mengatakannya </BODY> </HTML>

  30. Mencoba berbagai kemungkinan <HTML> <HEAD> <STYLE TYPE="text/css"> P {font-family: "Verdana"} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan sugesti terhadap diri kita sendiri </BODY> </HTML>

  31. Mencoba berbagai kemungkinan <HTML> <HEAD> <STYLE TYPE="text/css"> .tanya {font-size: xx-small} .jawab {font-size: x-large} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan sugesti terhadap diri kita sendiri </BODY> </HTML>

  32. Menambah Sedikit Style • Kita juga dapat menambah sedikit style pada teks dengan properti "font-style", dengan nilai "normal", "oblique", dan "italic". Perhatikan ini :

  33. Menambah Sedikit Style <HTML> <HEAD> <STYLE TYPE="text/css"> P {font-family: serif; font-style: italic} /* font italic */ </STYLE> </HEAD> <BODY> <P CLASS="tanya"> Q. Kenapa contoh yang diberikan tidak pernah diubah? <P CLASS="jawab"> A. Karena si Abe sudah gak mau susah membuat contoh baru </BODY> </HTML>

  34. Menambah Sedikit style <HTML> <HEAD> <STYLE TYPE="text/css"> .tanya {font-weight: bolder} .jawab {font-weight: 900} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> Q. Kenapa contoh pertanyaan tutorial ini tidak bervariasi? <P CLASS="jawab"> A. Lho, jangan tanya saya. Tanya penulisnya. </BODY> </HTML>

  35. Menambah sedikit style <HTML> <HEAD> <STYLE TYPE="text/css"> P {font-variant: small-caps} /* mengganti semua karakter lower-case dengan karakter upper-case */ </STYLE> </HEAD> <BODY> <P> Q. Sekarang saya tanya tentang saran kamu kepada penulis? <P> A. Bagaimana kalau contohnya dibuat yang lain. <P> Q. Maksudnya bagaimana sih? Khan sekarang pertanyaannya sudah saya ubah. <P> A. Yee... dasar tetep aja ngotot (sambil berlalu dengan cuek) </BODY> </HTML>

  36. PENULISAN PADA TAG DENGAN ATRIBUT STYLE

  37. PENULISAN PADA HEAD

  38. PENULISAN DENGAN CLASS

  39. PENULISAN DENGAN ID

More Related