Cascading Style Sheet (CSS)

Slides:



Advertisements
Presentasi serupa
Cascading Style Sheet Gufron Gufron - Sub Bahasan • Pendahuluan • Konsep Dasar CSS • Syntax/Perintah CSS • Implementasi.
Advertisements

Pengembangan Web Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
Cascade Style Sheet (CSS) Dahlan Abdullah /
Cascading Style Sheets (CSS)
13 CSS ( CASCADING STYLE SHEET II ) Bayangkan jika kita memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap.
( Cascading Style Sheet) Bagian 1
Pertemuan 9 Cascading Style Sheet (css)
Dasar CSS A’ud Solehuddin::Februari2012. Materi Mengenal CSS Mengenal CSS Mencoba CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan atribut ID.
Tim FT Elektro UHAMKA CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Modul -4 : CSS 1 Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking Cascading Style Sheet (CSS) Modul-4 :
Pemprograman & Perancangan WEB Pertemuan 6  CSS (Cascading Style Sheet)
PENGERTIAN CSS.
CSS.
CSS (Cascading Style Sheet)
Cascading Style Sheet Oleh : Edy Mulyanto
Latihan CSS.
Pemrograman Berbasis Web CSS
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian.
CSS (Cascading Style Sheet)
CSS Eksternal & Style Elemen
Pertemuan 2 : HTML.
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Pemrograman Berbasis Web CSS
Cascading Style Sheet (CSS)
PERTEMUAN CSS Pengenalan CSS.
Cascading Style Sheets (CSS)
(Cascading Style Sheet)
Pemrograman Basis Data Berbasis Web
HTML CSS.
CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS)
Pengenalan CSS Apasih CSS itu ?.
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
CASCADING STYLE SHEETS (CSS)
DASAR-DASAR HTML Efek Karakter Fisik KOMPUTER APLIKASI IT – I Oleh :
S1 Teknik Informatika - Unijoyo
Cascading Style Sheet (CSS)
KOMPUTER APLIKASI IT XHTML & CSS MODUL 06
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
(Cascading Stylesheet)
Modul 2 : Dasar-dasar HTML (1)
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Rekayasa Perangkat Lunak
PERTEMUAN 5 CSS IMAGE.
Cascade Style Sheet (CSS)
CSS.
( Cascading Style Sheet) Bagian 1
CSS.
Pemrograman Basis Data Berbasis Web
( Cascading style sheets)
Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
Pemrograman Web HTML (5) Form CSS Andy Haryoko, ST
Assalamu’alaikum Warohmatullah Wabarokatuh Selamat Pagi 
Pemrograman Web I --CSS--
Dasar HTML Hypertext Markup Language Dasar HTML.
Cascading Style Sheet (CSS)
Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: Inline CSS Embedded (memasang kode ke dalam bagian External.
Cascading Style Sheet.
Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Hyperlink dengan CSS Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :
List dan Image pada HTML
CSS Cascading Style Sheet
Transcript presentasi:

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

Dalam modul ini akan dipelajari: Apa CSS Text formating (color, size) Pewarisan Class Positioning Watermarking Modul -4 : 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> Modul -4 : CSS

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 Modul -4 : CSS

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

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

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 Modul -4 : CSS

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 Modul -4 : CSS

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

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

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> Modul -4 : CSS

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

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> Modul -4 : CSS

5. Positioning Klik lihat hasil demo Modul -4 : CSS

6. Watermarking <STYLE TYPE="text/css"> 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 Modul -4 : CSS

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

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 Modul -4 : CSS