Perancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN

Ukuran: px

Mulai penontonan dengan halaman:

Download "Perancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN"

Hartono Hadi Tanudjaja
6 tahun lalu
Tontonan:

1 Oleh : Moh. Sulhan 1

2 Apa itu CSS? - Merupakan bahasa style sheet yang digunakan untuk mengatur tampilan dokumen - Sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color, text, tabel, dll. - Mennghindari penulisan yang berulang - ulang 2

3 <html> <head> <title>penulisan Skrip HTML</title> </head> <body> <font color="#ff0000" size="+3" face="arial">informatika</font> <font color="#ff0000" size="+3" face="arial">universitas</font> <font color="#ff0000" size="+3" face="arial">akademik</font> </body> </html> <html> <head> <title>penulisan Skrip CSS</title> <style type="text/css"> p { font-size:30px; font-family:times New Roman; color:#ff3300; </style> </head> <body> <p>informatika</p> <p>univeritas</p> <p>akademik</p> </body> </html> 3

4 Kegunaan CSS? - Mempersingkat penulisan tag HTML - Mempercepat proses rendering atau pembacaan HTML - Mudah dan cepat dalam me-maintenance - CSS bisa melakukan apa yang tdk bisa dilakukan oleh HTML 4

5 Cara Penulisan CSS? Cara penulisan skrip CSS dibagi menjadi tiga bagian, yaitu : - Inline Style Sheet - Embedded Style Sheet - Linked Style Sheet 5

6 Inline Style Sheet - Metode ini jarang digunakan karena tidak efisien - Penulisan skripnya sama dengan HTML - Contoh : <p style="color:green">saya BELAJAR CSS</p> 6

7 Embedded Style Sheet - Metode ini menggunakan tag <style> </style> Contoh : <style type= text/css > h1 { color:red </style> 7

8 Linked Style Sheet - Penulisan skrip CSS di halaman yang berbeda atau terpisah dari HTML - Untuk metode ini menggunakan tag <link rel> yang ditempatkan di tag <HEAD> Contoh : <link rel="stylesheet" type="text/css" href="display.css"> 8

9 Aturan Penulisan CSS - SELECTOR : yang terdiri dari Tag, Class, Id, dan Pseudo yang digunakan sebagai pemisah antar elemen - DECLATION: Untuk mendeskripsikan properti dan value yang digunakan pada selector atau pemisah. Selector h1 { color: #0000FF; Value Properti 9

10 Komentar Pada CSS - Komentar akan diberikan pada skrip untuk menjelaskan suatu skrip css tertentu. - Komentar pada CSS hampir sama dengan komentar pada bahas C atau C++, yaitu : /* isi komentar */ h1 { color: red; /* memberikan warna merah pada heading 1 */ 10

11 Macam-macam CSS Ada beberapa Selector pada CSS diantaranya : - Tag/Elemen HTML H1{ color:green i { font-style:normal) - Class.isiteks { font-family : Arial, Helvetica, sans-serif; font-size: 12px; color: #6699FF; Ditulis di antara <style>.</style> <body> <p class= isiteks >Ayo Belajar CSS</p> Pemanggilan di antara skrip HTML </body> 11

12 -ID - Digunakan untuk mendefinisikan tag secara individual atau spesifik - Penggunaan selektor ID akan diawali dengan tanda pagar (#). #header { font-size: 20px; Ditulis di antara <style>.</style> <DIV ID = header >..</DIV Pemanggilan di antara skrip HTML 12

13 - PSEUDO - Selector PSUDO biasanya digunakan untuk mengatur LiNK pada suatu kondisi tertentu - Misal : Saat link diklik warnanya berubah menjadi biru. selector:pseudo-class { property:value a:link{ color :#FF0000; text-decoration: none; a:visited{ color :#0000FF; a:hover{ color :#00CC00; a:active{ color :#FFFF00; Ditulis di antara <style>.</style> Pemanggilannya : <body> <p><a href=index.html >Home</a></p> </body 13

14 Grouping dan Inheritance Apa itu Grouping dan Inheritance? -Grouping - Merupakan pengelompokan beberapa tag HTML dengan properti dan value yang sama. - Metode ini akan membantu menghemat penulisan tag HTML. Selector1, Selector2, Selector3 { Property : value; <html> <head><title>penulisan Skrip HTML</title> <style type="text/css"> h1,p,i,u,b { font-family:arial, Helvetica, sans-serif; font-size:24px; color:#0000ff; </style> </head> <body> <h1>welcome TO MYWEBSITE</h1> <p>web Content</p> <i>copyright 2010</i> <u>malang</u> <b>indonesia</b> </body> </html> 14

15 - Inheritance - Bisa disebut dengan pewarisan atau turunan. - Inheritance pada CSS akan tetap berlaku pada tag-tag yang berada pada turunannya bila tdk didefinisikan. <style type= text/css > h1 { color:blue </style> <body <h1> Ayu Belajar CSS, <span style= color:red >Mudah Kan?</span></h1> </body> 15

dokumen-dokumen yang mirip

CSS Cascading Style Sheet

CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan