materi webdesign - CSS

CSSCascading Style Sheet

Ingat Aturan XHTML1. elemen XHTML harus ditulis secara bersarang

2. elemen XHTML (yang berpasangan) harus ditutup dengan pasangannya

3. elemen XHTML yang kosong (yang tidak berpasangan) juga harus ditutup

4. elemen XHTML harus ditulis dalam huruf kecil

5. dokumen XHTML hanya memiliki 1 elemen induk, yaitu <html>. Elemen anak harus ditulis secara berpasangan dan bersarang terhadap elemen induknya

Ingat Aturan XHTML

6. nama atribut ditulis dalam huruf kecil

7. nilai atribut harus diapit dengan tanda petik

8. penulisan atribut dalam bentuk minimal dilarang

9. atribut 'lang' (bahasa) digunakan jika konten elemen mengandung bahasa tertentu

10. semua dokumen XHTML harus memiliki deklarasi DOCTYPE.

fungsi CSSMengatur 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

Struktur webpage XHTMLDOCTYPE, 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

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.

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">

fungsi CSSMembuat 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

Implementasi/penerapan CSSCSS 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

Contoh penulisan inline style

<div style=“color:red; background-color:silver;”>..... konten / isi informasi .....</div>

Contoh penulisan embedded style

Contoh penulisan external file

Box model

materi webdesign - CSS

Education

Transcript of materi webdesign - CSS