CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan.

Presentasi berjudul: "CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan."— Transcript presentasi:

1

2 CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

3 CSS (Cascading stylesheet)  CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website.  Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.  Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya.  CSS adalah aset sangat berharga dalam Disain Web Site

4 CSS  Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel.  Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja.  Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS

5 Sejarah CSS  1996, Konsorsium W3C merekomendasikan penggunaan CSS dalam dokumen web.  Tujuannya untuk mengurangi adanya TAG baru untuk format tampilan web. (karena saat itu Netscape dan IE ingin mengembangkan TAG sendiri)  1998, W3C menyempurnakan CSS awal dengan membuat standar CSS2 yang menjadi standart hingga saat ini.

6 Kapabilitas CSS  Mengatur ukuran baku ( exact point ) teks  Menambahkan indentasi/tabulasi teks  Mengatur margin  Menambahkan elemen format baru pada halaman web  Menggunakan unit ukuran yang presisi seperti inchi dan centimeter  Membuat style baru yang kreatif pada halaman web kita

7  Merubah tampilan standar dari sebuah tag  Mengatur secara presisi bagaimana background image ditampilan, apakah perlu berulang ( repeated ) atau no-repeated  Menambahkan jarak antar huruf, jarak antar kata maupun spasi antar baris,  Membuat layout halaman web yang standar sehingga dapat ditampilkan sama pada semua jenis browser, termasuk pada browser media tertentu seperti pada PDA  dll

8 STYLE  Style merupakan corak/mode/gaya yang diberikan pada suatu elemen dari dokumen (html)  Secara default semua komponen sudah mempunyai style standar ( template )  Misalnya tag mempunyai style: Font : Times New Roman; Size : 6 (24pt); Text Decoration : Bold; Line- height = 24pt; –INI JUDUL DENGAN H1 STANDAR

9 Style Sheet  Kita dapat melakukan modifikasi dari style default sesuai keinginan kita  Modifikasi style dapat dilakukan secara tunggal per halaman, atau menggunakan file terpisah ( style sheet )  Style sheet merupakan tempat dimana kita mengontrol dan memanage style- style yang ada.

10 Implementasi CSS  CSS dapat ditambahkan dalam halaman web kita dengan 3 cara: 1. Inline CSS : menulis style langsung pada tag HTML 2. Embedded CSS : menulis CSS di dalam bagian HEAD sebuah dokumen HTML 3. External File CSS : menggunakan file CSS terpisah

11 STYLE FORMAT  selector { property1: value; property2:value,...}  H1{ color:green; background- color:orange}  Style terdiri dari dua bagian: 1. Selector : Bagian pertama sebelum tanda “{ }” disebut selector (TAG atau ELEMEN HTML) 2. Declaration : property dan nilainya.

12 INLINE STYLE  Style pada Tag tunggal: langsung menambahkan modifikasi style dalam tag tersebut.  Misalnya :

13 EMBEDDED STYLE  Style dipisah dan dikumpulkan pada bagian HEAD  Contoh: body { color:#ffffff; background:black; font-family:Verdana, Arial; font-size:12px; } p { line-height:20px; } h1{ color:brown; }

14 STYLE SCRIPT (GROUP)  Modifikasi Style dapat digunakan secara bersama oleh beberapa tag:  Misalnya : H1, H2, H3 { FONT-FAMILIY: Verdana;} P, TD, BODY { LINE-HEIGHT: 20px; MARGIN- RIGHT:20px; MARGIN-LEFT: 10px; }

15 STYLE SCRIPT (CLASS)  Modifikasi Style dapat digunakan secara bersama oleh beberapa tag. Menggunakan CLASS atau ID  Misalnya : H1.GREEN { COLOR: GREEN;} #GREEN { COLOR : #33FF33; FONT-WEIGHT: BOLD } NORMAL HEADER A DARK GREEN HEADER LIGT GREEN, BOLD HEADER ANOTHER DARK GREEN

16 External File CSS  Sama seperti embedded style tetapi dibuat pada file terpisah dengan ekstension.css  Sebuah dokumen bisa menggunakan lebih dari satu file CSS  Di- import (dipanggil) pada bagian HEAD  Ada dua cara: 1. 2. @import " style.css ";</style

17 Komentar dalam Style Sheets  Comments biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya,  Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan: /* isi Comments */ Contoh: H1 { color:blue;} /* H1 elements akan menjadi biru */ Tags.H1.color = “blue”; /* H1 menjadi biru */

18 USER DEFINED STYLE  Style yang kita definisikan sendiri, selain dari TAG standar yang ada.  Kita menentukan nama dan isi / format style nya  Contoh txtData { LINE-HEIGHT: 20px; MARGIN- RIGHT:20px; MARGIN-LEFT: 10px; } strTanggal { COLOR : #33FF33; FONT-WEIGHT: BOLD }

19 &  style dapat digunakan dengan memakai tag kontainer dan  Digunakan secara inline  Tag ini biasanya berfungsi untuk meng- override style yang sudah ada sebelumnya

20 METRICS  Dalam CSS metrics yang digunakan adalah: –Inchi : IN –Milimeter : MM –Centimeter : CM –Picas : PC –Pixel : PX –M-length : EM –X-height : EX

21 Penggunaan CSS saat ini  Kontrol aspek visual keseluruhan halaman website  Membuat Layout yang standart (kolaborasi dengan XHTML) Teknik membuat layout HTML:  Frame  cara lama, jarang digunakan  Tabel  disukai oleh designer  CSS  metode baru, menjadi standar

22 Layout: CSS vs TABEL ItemTabel basedCSS based Ukuran fileBesarKecil FleksibilitasKurang fleksibel, perubahan isi sering kali mengharuskan perubahan layout Sangat fleksibel Kemudahan dalam desain Sangat mudahRelatif lebih sulit AccessibilitySulit digunakan dengan peralatan non- konvensional (screenreader, text-based browser) Mudah dibaca dengan berbagai device

23 Referensi HTML & CSS  CSS-1: http://www.w3.org/TR/CSS1http://www.w3.org/TR/CSS1  CSS-2: http://www.w3.org/TR/CSS2http://www.w3.org/TR/CSS2  HTML: http://www.w3.org/TR/html41http://www.w3.org/TR/html41  XHTML: http://www.w3.org/TR/xhtml11http://www.w3.org/TR/xhtml11

24 Referensi  Shengili-Roberts, Keith.,” Core Cascading Style Sheet ”, Prentice Hall, New Jersey, 2000.  Nurhasyim, “ HTML & CSS”, http://www.ilmukomputer.com, http://www.ilmukomputer.com

25 TUGAS  Modifikasi website personal dari tugas web pribadi sebelumnya menambahkan CSS (gunakan link sheet)  Cek validitas code, sertakan hasil validasinya!