Modul -4 : CSS 1 Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking Cascading Style Sheet (CSS) Modul-4 :

Presentasi berjudul: "Modul -4 : CSS 1 Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking Cascading Style Sheet (CSS) Modul-4 :"— Transcript presentasi:

1

2 Modul -4 : CSS 1 Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking Cascading Style Sheet (CSS) Modul-4 :

3 Modul -4 : CSS2 Dalam modul ini akan dipelajari: 1. Apa CSS 2. Text formating (color, size) 3. Pewarisan 4. Class 5. Positioning 6. Watermarking

4 Modul -4 : CSS3 1. Apa itu CSS CSS = Cascading Style Sheet adlah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs CSS dimulai dengan : NamaKODeBaru { Parameter : nilai } Sebagai contoh untuk kode HTML.. artinya adalah cetak tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan.. agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf. Contoh : <Style TYPE=“txt/CSS” U {color=red}

5 Modul -4 : CSS4 Contoh efek.. menjadi pengatur warna Tag.. memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan. demo Hasilnya sama dengan kode berikut :

6 Modul -4 : CSS5 Efek yang sama pada dua kode I dan U Tag =under line Dan tag = italic Diberi efek baru, yaitu warna merah hurufnya Tag = bold, diberi efek warna hijau Klik untuk lihat hasil DEMO

7 Modul -4 : CSS6 Beberapa efek pada satu kode B Misalkan pada tag akan dilekatkan efek warna, jenis huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:Arial } Klik untuk lihat hasil Demo

8 Modul -4 : CSS7 2. CSS-GLOBAL :Sekali Tulis, pakai bersama Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS File tersebut dapat diacu oleh setiap HTML Jika file HTML akan mengacu file CSS tersebut ditulis : <LINK REL="stylesheet" HREF="global.css" TYPE="text/css"> B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"Monotype Corsiva"; font-size:20} File : global.css Css_global.html Css_global2.html Digunakan oleh Dan Digunakan oleh

9 Modul -4 : CSS8 Selanjutnya 2 file html digabung dalam 1 frame Klik lihat hasil demo Terlihat : Efek dari tag dan tag yang didefinisikan dalam STYLE di file global.css

10 Modul -4 : CSS9 3. Pewarisan Jika kita definisikan suatu CSS yang berefek pada huruf, sementara dalam HTML juga didefinisikan efek huruf, dan jika tag CSS mengapit tag HTML maka pengaruh tag CSS akan mewaris (menurun) pada tag HTMLnya Efek warna huruf sebagai pengaruh tag CSS “menurun” pada tag HTML font, yaitu warna hijau Klik lihat hasil demo

11 Modul -4 : CSS10 4. Class Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class.tanya {color: red}.jawab {color: blue} Pada efek HTML dapat digunakan sbb : ini adalah teks yang terpengaruh efek class tanya Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag, tag dst

12 Modul -4 : CSS11 Contoh class (untuk ubah warna) Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag dan tag Klik lihat hasil

13 Modul -4 : CSS12 Contoh class (untuk ubah ukuran huruf) Font-size : xx-small, x- small, small, medium, large, x-large, xx-large Klik lihat hasil

14 Modul -4 : CSS13 Contoh class (untuk ubah warna) Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag dan tag Klik lihat hasil

15 Modul -4 : CSS14 5. Positioning Klik lihat hasil demo

16 Modul -4 : CSS15 6. Watermarking Watermarking adalah konsep mendesaign background layar dengan gambar tertentu Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut :.nama_Class {background-image: url(“namagambar"); background- repeat: yes} CONTOH : klik ! Hasil klik demo

17 Modul -4 : CSS16 Rangkuman CSS merupakan teknik perancangan tampilan WEB untuk melengkapi kemampuan HTML dengan mendefinisikan tag-tag baru melalui konsep class dan pewarisan Beberapa Kepraktisan dalam mengatur format teks dapat diatasi dengan CSS seperi atur model huruf, besar huruf, gaya huruf, macam huruf posisi Konsep yang sangat bagus dlama menampilkan halaman web adlah konsep watermarking yang tidak dapat diatasi dengan HTML murni dan hanya dengan class CSS. Namaklass { background-image: url(namagambar) } Penggunaan konsep CSS, yaitu dengan tag STYLE juga dapat langsung dimasukkan dalam tag HTML sehingga pengaruhnya lokal pada tag tersebut

18 Modul -4 : CSS17 Latihan 1. Buatlah gambar dari windows search seperti gambar dog sebelah ini 2. Namakan gambar tersebut dengan dog2.bmp 3. Gunakan gambar dog2.BMP tersebut sebagai watermarking dalam menampilkan tulisan seperti dalam gambar berikutnya 4. Atur dalam konsep class sedemikian sehingg huruf berwarna magenta dan berukuran 20