slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking PowerPoint Presentation
Download Presentation
Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking

Loading in 2 Seconds...

play fullscreen
1 / 17

Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking - PowerPoint PPT Presentation


  • 137 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking' - apria


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Cascading Style Sheet (CSS)

Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking

dalam modul ini akan dipelajari
Dalam modul ini akan dipelajari:
  • Apa CSS
  • Text formating (color, size)
  • Pewarisan
  • Class
  • Positioning
  • Watermarking
1 apa itu css
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>

contoh efek u u menjadi pengatur warna
Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan.

Hasilnya sama dengan kode berikut :

demo

efek yang sama pada dua kode i dan u
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

beberapa efek pada satu kode b
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

2 css global sekali tulis pakai bersama
2. CSS-GLOBAL :Sekali Tulis, pakai bersama

File : global.css

  • 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}

Digunakan oleh

Css_global.html

Dan Digunakan oleh

Css_global2.html

selanjutnya 2 file html digabung dalam 1 frame
Selanjutnya 2 file html digabung dalam 1 frame

Klik lihat hasil

Terlihat :

Efek dari tag <B> dan tag <I> yang didefinisikan dalam STYLE di file global.css

demo

3 pewarisan
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

4 class
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
contoh class untuk ubah warna
Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b>

contoh class untuk ubah ukuran huruf
Contoh class (untuk ubah ukuran huruf)

Klik lihat hasil

Font-size : xx-small, x-small, small, medium, large, x-large, xx-large

contoh class untuk ubah warna1
Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b>

5 positioning
5. Positioning

Klik lihat hasil

demo

6 watermarking
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 !

demo

Hasil klik

rangkuman
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
latihan
Latihan
  • Buatlah gambar dari windows search seperti gambar dog sebelah ini
  • Namakan gambar tersebut dengan dog2.bmp
  • Gunakan gambar dog2.BMP tersebut sebagai watermarking dalam menampilkan tulisan seperti dalam gambar berikutnya
  • Atur dalam konsep class sedemikian sehingg huruf berwarna magenta dan berukuran 20