CSS (Cascading Style Sheet)

Slides:



Advertisements
Presentasi serupa
Modul Design & Pemrograman Web
Advertisements

Cascade Style Sheet (CSS) Dahlan Abdullah /
( Cascading Style Sheet) Bagian 1
Pertemuan 9 Cascading Style Sheet (css)
Minggu …8… Page 1 MINGGU Ke delapan Web Teknologi 2 Pokok Bahasan: CSS and Themes Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan dan mengaplikasikan.
Modul Design & Pemrograman Web
Belajar Dasar HTML TIK Fajar Harapan. Apa itu HTML ?
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.
Pengembangan Evangs Mailoa Cascading Style Sheet (CSS) dan HTML Form WEB.
CSS (Cascading Style Sheet)
Cascading Style Sheet Oleh : Edy Mulyanto
Latihan CSS.
Pemrograman Berbasis Web CSS
CSS (Cascading Style Sheet)
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
Cascading Style Sheet (CSS) dan HTML Form
CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan.
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
Modul Design & Pemrograman Web
Pemrograman Berbasis Web CSS
Modul Design & Pemrograman Web
Cascading Style Sheet (CSS)
PERTEMUAN CSS Pengenalan CSS.
Cascading Style Sheets (CSS)
(Cascading Style Sheet)
Pemrograman Basis Data Berbasis Web
HTML CSS.
Perkenalan CSS.
CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS)
Pengenalan CSS Apasih CSS itu ?.
Perancangan & Pemrograman Web
S1 Teknik Informatika - Unijoyo
Cascading Style Sheet (CSS)
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
Pemrograman Web Dinamis
(Cascading Stylesheet)
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Cascading Style Sheet (CSS)
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Rekayasa Perangkat Lunak
PERTEMUAN 5 CSS IMAGE.
Cascade Style Sheet (CSS)
Pengembangan Aplikasi Framework (IT657)
CSS.
Pemrograman Basis Data Berbasis Web
( Cascading style sheets)
Pemrograman Web I --CSS--
Pemrograman Berorientasi Platform (IN315B)
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
CSS Khafiizh Hastuti.
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 (CSS) dan HTML Form
Cascading Style Sheet.
Cascading Style Sheet (CSS) dan HTML Form
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)
Hyperlink dengan CSS Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya seperti berikut :
List dan Image pada HTML
Cascading Style Sheet (CSS) dan HTML Form
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Transcript presentasi:

CSS (Cascading Style Sheet) Manfaat: Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam mendesain tampilan website. NEXT

CSS (Cascading Style Sheet) Konsep: Pewarisan (inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes) BACK NEXT

CSS (Cascading Style Sheet) Ketentuan Mendasar Penulisan script CSS terletak diantara tag <HEAD>…</HEAD> Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration. <HTML> <HEAD> <TITLE>…..</TITLE> <STYLE TYPE=text/css> selector { declaration } </STYLE> </HEAD> <BODY> …….. </BODY> </HTML> BACK NEXT

CSS (Cascading Style Sheet) Tag Komentar <html> <head> <title>……</title> <style type=text/css> …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ </style> </head> <body> ………………… </body> </html> BACK NEXT

CSS Pewarisan (inheritance) Text <html> <head> <title>CSS_01</title> <style type=text/css> b { color:lime } </style> </head> <body> Universitas Narotama Surabaya <br> <b>Fakultas Ilmu Komputer</b> </body> </html> BACK NEXT Catatan: Untuk declaration color dapat juga menggunakan kode heksa

CSS Selektor-Kontekstual (Contextual Selector) <html> <head> <title>CSS_01</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT Catatan: selector ini kesemuanya untuk bold+italic text

CSS (Cascading Style Sheet) Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector) <html> <head> <title>CSS Inheritance</title> <style type=text/css> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> <html> <head> <title>Selektor-Kontekstual</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html BACK NEXT

CSS (Cascading Style Sheet) Aturan CSS berdasarkan case to case <html> <head> <title>CSS_01</title> </head> <body> Universitas Narotama Surabaya <br> <b style=color:lime> Fakultas Ilmu Komputer </b> </body> </html> TIDAK EFEKTIF BACK NEXT

CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_02</title> <style type=text/css> i { color:#ff3333 } </style> </head> <body> Universitas Narotama Surabaya <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_03</title> <style type=text/css> u { color:#3333CC } </style> </head> <body> Universitas Narotama Surabaya <br> <u>Fakultas Ilmu Komputer</u> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_04</title> <style type=text/css> h3 { color:#009900 } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_05</title> <style type=text/css> h2 { color:#009900 } h3 { color:#FF3333 } </style> </head> <body> <h2>Sistem Informasi</h2> <br> <h3>Sistem Komputer</h3> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) text-decoration: underline (tampil garis dibawah text) overline (tampil garis diatas text) line-trough (tampil garis melalui text) none (non-efek) Text <html> <head> <title>CSS_07</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_08</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

CSS (Cascading Style Sheet) Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

CSS (Cascading Style Sheet) Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

CSS (Cascading Style Sheet) Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW