materi webdesign - CSS

3,254 views
3,072 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,254
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
172
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

materi webdesign - CSS

  1. 1. CSSCascading Style Sheet
  2. 2. Ingat  Aturan XHTML1. elemen XHTML harus ditulis secara bersarang2. elemen XHTML (yang berpasangan) harus ditutup dengan pasangannya3. elemen XHTML yang kosong (yang tidak berpasangan) juga harus ditutup4. elemen XHTML harus ditulis dalam huruf kecil5. dokumen XHTML hanya memiliki 1 elemen induk, yaitu <html>. Elemen anak harus ditulis secara berpasangan dan bersarang terhadap elemen induknya
  3. 3. Ingat  Aturan XHTML6. nama atribut ditulis dalam huruf kecil7. nilai atribut harus diapit dengan tanda petik8. penulisan atribut dalam bentuk minimal dilarang9. atribut lang (bahasa) digunakan jika konten elemen mengandung bahasa tertentu10. semua dokumen XHTML harus memiliki deklarasi DOCTYPE.
  4. 4. fungsi CSS Mengatur ulang tampilan (presentation) tag HTML Misalnya tag <H1> mempunyai style/gaya tampilan : Font : Times New Roman; Size : 6 (24pt); Text Decoration : Bold; Line-height = 24pt; INI JUDUL DENGAN H1 STANDAR
  5. 5. Struktur webpage XHTML DOCTYPE, HTML, HEAD, BODY DOCTYPE menentukan bagaimana dokumen tersebut dibaca oleh browser. Apakah browser membaca dokumen tersebut dalam modus Standard atau Quirks. Pada prinsipnya XHTML = HTML, hanya ada perbaikan pada aturan-aturan penulisan dan penggunaan elemen & atribut HTML
  6. 6. XHTML: Document Type Definitions XHTML - Strict / strict doctype declaration: Kontrol seluruh layout dan format sebuah halaman Web melalui CSS. Tidak menggunakan tag font, align dan table XHTML - Transitional / transitional doctype declaration: masih menggunakan sebagian besar tag-tag HTML seperti font dan table untuk melayout halaman. XHTML - Frames / frameset declaration: Penggunaan Frame pada halaman Web.
  7. 7. Penulisan Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
  8. 8. fungsi CSS Membuat tata letak/layout halaman web halaman web tanpa css halaman web dengan css Memudahkan dalam mengelola website ◦ Mengatur ulang tata letak ◦ Mengatur ulang tampilan tag HTML
  9. 9. Implementasi/penerapan CSSCSS dapat ditambahkan dalam halamanweb kita dengan 3 cara:1. Inline CSS: menulis style langsung pada tag HTML2. Embedded CSS: menulis CSS di dalam bagian HEAD sebuah dokumen HTML3. External File CSS: menggunakan file CSS terpisah
  10. 10. Contoh penulisan inline style<div style=“color:red; background-color:silver;”>..... konten / isi informasi .....</div>
  11. 11. Contoh penulisan embeddedstyle
  12. 12. Contoh penulisan external file
  13. 13. Box model

×