mempelajari dasar-dasar css : inheritance, class, positioning dan watermarking
DESCRIPTION
Modul-4 :. Cascading Style Sheet (CSS). Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking. Dalam modul ini akan dipelajari:. Apa CSS Text formating (color, size) Pewarisan Class Positioning Watermarking. 1. Apa itu CSS. - PowerPoint PPT PresentationTRANSCRIPT
Modul -4 : CSS 1
Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking
Cascading Style Sheet (CSS)
Modul-4 :
Modul -4 : CSS 2
Dalam modul ini akan dipelajari:
1. Apa CSS
2. Text formating (color, size)
3. Pewarisan
4. Class
5. Positioning
6. Watermarking
Modul -4 : CSS 3
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 : <STYLE TYPE="text/css">
NamaKODeBaru { Parameter : nilai } </STYLE>
Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf.
Contoh : <Style TYPE=“txt/CSS” U {color=red}
</Style>
Modul -4 : CSS 4
Contoh efek <U>..</U> menjadi pengatur warna
Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan.
demo
Hasilnya sama dengan kode berikut :
Modul -4 : CSS 5
Efek yang sama pada dua kode I dan U
Tag <U> =under line
Dan tag <I> = italic
Diberi efek baru, yaitu warna merah hurufnya
Tag <B> = bold, diberi efek warna hijau
Klik untuk lihat hasil
DEMO
Modul -4 : CSS 6
Beberapa efek pada satu kode B
Misalkan pada tag <B> 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
Modul -4 : CSS 7
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 :
<HEAD> <LINK REL="stylesheet"
HREF="global.css" TYPE="text/css"> </HEAD>
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
Modul -4 : CSS 8
Selanjutnya 2 file html digabung dalam 1 frame
Klik lihat hasil
demo
Terlihat :
Efek dari tag <B> dan tag <I> yang
didefinisikan dalam STYLE di
file global.css
Modul -4 : CSS 9
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
Modul -4 : CSS 10
4. Class
Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class
<STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue}</STYLE>
Pada efek HTML dapat digunakan sbb : <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek
class tanya</P>
Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag <B>, tag <I> dst
Modul -4 : CSS 11
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
<P> dan tag <b>
Klik lihat hasil
Modul -4 : CSS 12
Contoh class (untuk ubah ukuran huruf)
Font-size : xx-small, x-small, small, medium, large, x-large, xx-large
Klik lihat hasil
Modul -4 : CSS 13
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
<P> dan tag <b>
Klik lihat hasil
Modul -4 : CSS 14
5. Positioning
Klik lihat hasil
demo
Modul -4 : CSS 15
6. Watermarking
Watermarking adalah konsep mendesaign background layar dengan gambar tertentu
Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut :
<STYLE TYPE="text/css">
.nama_Class {background-image:
url(“namagambar"); background-repeat: yes}
</STYLE> </HEAD> CONTOH : klik !
Hasil klik
demo
Modul -4 : CSS 16
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
<STYLE TYPE=“text/css”> . Namaklass { background-image: url(namagambar) }
</STYLE> Penggunaan konsep CSS, yaitu dengan tag STYLE juga dapat
langsung dimasukkan dalam tag HTML sehingga pengaruhnya lokal pada tag tersebut
Modul -4 : CSS 17
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