Teknologi Aplikasi Web I (HTML, XHTML, CSS) Husni Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id Web Engineering 2010 Pertemuan.

Presentasi berjudul: "Teknologi Aplikasi Web I (HTML, XHTML, CSS) Husni Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id Web Engineering 2010 Pertemuan."— Transcript presentasi:

1 Teknologi Aplikasi Web I (HTML, XHTML, CSS) Husni husni@if.trunojoyo.ac.id Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id Web Engineering 2010 Pertemuan ke-08

2 Outline •Pengantar •HTML & XHTML •CSS •Rangkuman 2

3 PENGANTAR Unsur-unsur dasar apa untuk membangun suatu situs web 3

4 Unsur-Unsur Dasar • Penstrukturan content (dan presentasi “dasar” …) – (X)HTML • Logika bisnis (business logic), pada sisi client – JavaScript • Presentasi (Presentation) – CSS • … dengan 3 elemen ini anda dapat memulai pembangunan interface yang bagus (content static) bagi aplikasi web anda 4

5 Standard atau Non-Standard? • XHTML dan CSS adalah rekomendasi W3C – XHTML 1.1 (2.0 masih DRAFT) • http://www.w3.org/MarkUp – CSS 2.1 (3.0 dalam pengembangan) • http://www.w3.org/Style/CSS/ • JavaScript “bukanlah” suatu standard – Hal ini karena awalnya ada persaingan bahasa scripting antara Sun dan Microsoft – Upaya standardisasi dilakukan oleh Asosiasi Produsen Komputer Eropa (ECMA), tidak selesai (versi terakhir 1999) – http://en.wikipedia.org/wiki/JavaScript 5

6 HYPERTEXT MARKUP LANGUAGE (HTML) Bagaimana menstrukturkan content dalam suatu halaman web 6

7 HTML & XHTML • W3C – Standard himpunan • Sintaks • Fungsionalitas • HyperText Markup Language (v4.01 – 1999) – Tipe bahasa markup (SGML) yang lebih umum – Mendeskripsikan fungsi dari teks menggunakan kode • Extensible HTML (v2.0 – 2004) – Versi lebih ketat dari HTML – Mengintegrasikan HTML dengan XML 7

8 HTML & XHTML • Kelebihan HTML – Portabilitas platform – Kecepatan (ukuran file kecil) – File teks (plain text) • Kekurangan HTML – Perbedaan rendering – Ekstensi-ekstensi • fungsionalitas proprietary ditambahkan oleh browser • Keuntungan XHTML – Menyelesaikan masalah dengan versi HTML yang berbeda 8

9 Sintaks •Elemen (Tag) – Kode yang mengontrol tampilan konten – Pembukaan / Penutupan •Two-Sided – Content •One-Sided – –Lowercase •Ditinggalkan –Elemen atau sintaks usang –Yang tidak menjalan dukungan masa depan 9

10 Sintaks • Komentar – • • White Space – Tidak merender spasi banyak – Tab dan Enter tidak dirender – Gunakan spasi non-breaking • Atribut-atribut – Mengontrol perilaku atau tampilan dari suatu elemen 10

11 • … – Mengelilingi semua markup & teks – Disyaratkan – Digunakan untuk memulai dan mengakhiri setiap dokumen HTML 11

12 • … – Mengandung informasi header dokumen – Disyaratkan – Informasi penting • Judul (title) dokumen • Tag-tag META – Termasuk teks tak dirender 12

13 • … – Mengandung semua content (isi) untuk dirender • Atribut-atribut – leftmargin=number • Mengatur margin kiri halaman – topmargin=number • Mengatur margin atas halaman 13

14 • Style – style=“color: colorName | #rrggbb | rgb(#,#,#);” • Menentukan warna dari teks biasa (regular text) – style=“background-color: colorName | #rrggbb | rgb(#,#,#);” • Menentukan warna dari latar belakang (background) – style=“background-image: url(filename.ext);” • Menunjuk ke lokasi image (gambar) yang digunakan sebagai background • Image dibuat bersifat tile 14

15 • Style – style=“background-position: horizontal vertical;” • Menentukan posisi dari gambar latar belakang • Dapat ditentukan dalam kata-kunci atau persentase – style=“background-repeat: repeat | repeat-x | repeat-y | no-repeat;” • Menentukan tiling dari gambar latar-belakang – style=“background-attachment: scroll | fixed;” • Gambar latar belakang bergulung dengan halaman atau bertindak sebagai watermark 15

16 • … – Membuat suatu heading – Dinomori dari h1 sampai dengan h6 • h1 adalah level head paling atas, h6 head paling bawah (paling kecil hurufnya) – Tidak digunakan untuk menformat teks – Menyampaikan organisasi halaman dan content – Sebaiknya digunakan dalam urutan descending • Style – style=“text-align: left | center | right | justify;” • Menentukan alignment (perataan) dari teks heading 16

17 & • … – Menyisipkan baris kosing sebelum tag • Memisahkan paragraf teks • – Menyebabkan teks berganti baris, dimanapun tag diletakkan 17

18 List (Daftar) • … – Unordered list menampilkan daftar ber-bullet – Gunakan saat urutan atau rangking tak penting • Style – style=“list-style-type: disc | square | circle;” • Mengubah bentuk bullet sebelum item daftar – style=“list-style-image: url(filename.ext);” • Gambar yang digunakan sebagai bullet 18

19 List (Daftar) • … – Tag ordered list menampilkan daftar berurut • Style – style=“list-style-type: decimal | upper-roman | upper-alpha |...;” • Mengubah bentuk nomor/huruf sebelum item – style=“list-style-position: inside | outside;” • Mengubah penempatan wrapped item 19

20 List (Daftar) • … – Mendefinisikan item dalam suatu daftar • … – Mendefinisikan daftar – … • Term yang didefinisikan – … • Definisi 20

21 Elemen Tingkat Blok • … – Content yang di-indent di kiri dan kanan • … – Biarkan semua white space seperti aslinya – Gunakan fixed width typeface 21

22 Elemen Inline • … or … – Bold (Tebal) • … or … – Italics (Miring) • … – Subscripted (subscript) • … – Superscripted (superscript) 22

23 Elemen Inline • … – Digunakan untuk menerapkan kelas CSS • Bersarang (nested) – Menempatkan tag-tag di dalam tag lain • … bukan … 23

24 • – Menyisipkan suatu gambar ke dalam dokumen – Sekunder terhadap content • Atribut-atribut – alt=“text” • Menyediakan teks alternatif yang medeskripsikan gambar tersebut • IE menampilkan teks ALT ketika pengguna meletakkan mouse di atas gambar – Pengguna yang browsing dengan fitur grafus dimatikan (text only) – Browser-browser non-grafis » Teks Alt ditampilkan pada posisi gambar • Diharuskan 24

25 • Atribut-atribut – height=“pixels” • Menentukan tinggi gambar – src=“URL” • Menentukan lokasi dari gambar yang diletakkan dalam halaman web • Diharuskan – width=“pixels” • Menentukan lebar gambar 25

26 • Style – style=“float: none | left | right;” • Meletakkan gambar di sebelah kiri atau kanan teks yang mengelilinginya – style=“clear: none | left | right;” • Menampilkan content setelah margin bersih dari elemen floating – style=“margin: top# right# bottom# left#;” – style=“border-width: #;” • Ditampilkan dalam warna link khusus jika gambar adalah suatu link 26

27 • – Menyisipkan satu garis biasa (horizontal rule) sepanjang halaman – Menegaskan pembagian dan transisi dalam content • Style – style=“background-color: #RRGGBB | colorname;” – style=“color: #RRGGBB | colorname;” – style=“height: number;” – style=“width: number;” 27

28 Karakter Khusus • & – Ampersand (&) • © – Copyright (c) • · – Bullet • ® – Registered (R) • ™ – Trademark (TM) 28

29 • … – Digunakan untuk membuat link ke sumber daya lain – Anchor bernama • Dulu dinamakan bookmark • Digunakan untuk menamai lokasi tertentu dalam halaman • Atribut id – Mendefinisikan tujuan 29

30 • Atribut-atribut – accesskey=“text” • Karakter yang digunakan sebagai keyboard shortcut untuk mengaktifkan link – coords=“X1, Y1, X2, Y2, etc.” • Koordinat yang mendefinisikankan bentuk hot spot dalam peta gambar (image map) – href=“URL” • Mendefinisikan lokasi dari sumber daya terhubung – Biasanya file HTML lain – Dapat pula berupa sumber daya lain di Internet » File, E-mail atau FTP • URL dari anchor bernama atau bookmark didahului oleh # 30

31 • Atribut-atribut – name=“text” • Menandai tempat khusus di dalam dokumen HTML • Alias dari anchor bernama atau bookmark – rel=“text” • Menandakan hubungan antar dokumen – rel=“stylesheet” » Memberitahui browser bahwa dokumen terhubung (linked) adalah suatu style sheet (CSS) – shape=“rect | circle | poly | default” • Menentukan bentuk dari hot spot dalam image map 31

32 • Atribut-atribut – title=“text” • Menyediakan informasi tambahan terhadap link – Hadir seperti suatu Tooltip – Sebaiknya kurang dari 60 karakter 32

33 • Contoh A link to a site. A link to paragraph 5 in same document. Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 Paragraph 5 content. 33

34 Path (Jalur) • URL (Uniform Resource Locator) – Lokasi dari dokumen di web • Husni.trunojoyo.ac.id • Komputasi.wordpress.com • Path – Lokasi dari dokumen pada suatu server atau mesin • http://husni.trunojoyo.ac.id/we2010/files/intro.pdf 34

35 Path • Absolut – Lokasi tetap dan pasti pada server • Dimulai dengan suatu / – /webeng2010/index.htm • Relatif – Lokasi relatif terhadap dokumen yang sedang diakses • Satu tempat (direktori) — langsung nama dokumen – page.htm • Pada direktori anak — dipisahkan dengan / – images/background.gif • Pada direktori induk — dua titik (..) –../page.htm 35

36 URL • http://husni.trunojoyo.ac.id/we2010/files/intro.pdf – Protokol komunikasi • http:// – Domain • Husni.trunojoyo.ac.id – Path • /we2010/files/ – Dokumen • Intro.pdf 36

37 Protokol • Hypertext Transfer Protocol – Web server – http:// • File Transfer Protocol – File server – ftp:// • USENET – Newsgroup – Klik Di sini 37

38 Protokol • E-Mail – Mailto • Kirim E-Mail – Dapat secara otomatis menyertakan baris subject • mailto:husni@if.trunojoyo.ac.id?subject=WebEng2010 – Opsi lain • “mailto:husni@if.trunojoyo.ac.id?cc=siapa@gmail.com &bcc=dia@yahoo.com&subject=subscribe &body=Send me your newsletter right away” 38

39 • … – Struktur untuk mengendalikan layout halaman – Struktur untuk memuat dan mengatur content • Atribut-atribut – border=“#” • Mengatur ketebalan garis pembatas yang ditampilkan pada sel-sel tabel • Jika diset ke 0 maka garis batas menjadi “invisible” (tak terlihat) 39

40 • Atribut – cellpadding=“#” • Menentukan jumlah spasi antara sel dan isi dalam sel – cellspacing=“#” • Menentukan jumlah dari spasi antar sel – frame=“above | below | border | box | hsides | lhs | rhs | void | vsides” • Menentukan dimana pembatas dari tabel dan sel tampil 40

41 • Atribut – height=“# | %” • Menentukan tinggi dari tabel dalam pixel atau persentase jendela – rules=“all | cols | groups | none | rows” • Menentukan dimana garis grid tampil di dalam tabel – valign=“top | bottom | middle ” • Menentukan vertical alignment dari teks dalam sel – width=“# | %” • Menentukan lebar dari tabel dalam pixel atau persentase jendela 41

42 • … – Mendefinisikan grup kolom tabel yang diformat – Hanya berlaku di dalam • Atribut – align=“left | center | right | justify | char” • Menentukan horizontal alignment dari isi dalam grup kolom – char=“character” • Menentukan karakter yang digunakan untuk meng-align-kan teks 42

43 • Atribut – span=“#” • Menentukan jumlah dari kolom yang di- span (tercakup) – valign=“top | middle | bottom | baseline” • Menentukan vertical alignment dari content dalam – width=“# | %” • Menentukan lebar setiap kolom dalam • 0* - lebar kolom akan menjadi lebar minimum 43

44 • – Mendefinisikan satua tau lebih kolom tabel untuk diformat – Hanya berlaku dalam atau • Atribut – align=“left | center | right | justify | char” • Menentukan horizontal alignment dari content dalam kolom tabel – char=“character” • Menentukan karakter untuk meng-align-kan text 44

45 • Atribut – span=“#” • Menentukan jumlah kolom yang akan dispan – valign=“top | middle | bottom | baseline” • Menentukan vertical alignment dari content dalam kolom tabel – width=“# | %” • Menentukan lebar dari kolom • 0* - lebar kolom akan menjadi lebar minimum 45

46 & • … – Mendefinisikan suatu baris dalam tabel • … – Mendefinisikan data tabel (suatu sel) dalam baris • Sel-sel data tabel harus hanya muncul di dalam baris- baris tabel • Tag penutupan harus muncul pada baris yang sama dengan content – Jika tidak maka dapat muncul celah atau kekosongan 46

47 • Atribut – colspan=“#” • Mementukan berapa banyak kolom yang dicakup oleh sel (penggabungan beberapa kolom) – rowspan=“#” • Menentukan berapa banyak baris yang akan dioverlap oleh sel 47

48 & • … – Menentukan header tabel bagi suatu baris • Identik dengan sel tabel data, kecuali: – Isi sel ditebalkan (bold) – Isi sel dialign ke tengah (center) • … – Menempelkan suatu caption pada tabel 48

49 CASCADE STYLE SHEET (CSS) Bagaimana membuat halaman web nyaman dilihat (good looking) 49

50 Sejarah CSS • Proposal awal CSS – Dirilis tahun 1994 oleh Hakon Lie (CERN) • World Wide Web Consortium (W3C) – Didirikan tahun 1994 sebagai Organisasi Standard Web • CSS1 (’96) — 50 properti – www.zvon.org/xxl/css1Reference/Output/index.html www.zvon.org/xxl/css1Reference/Output/index.html • CSS2 (’98) — 70 properti tambahan – www.zvon.org/xxl/css2Reference/Output/index.html www.zvon.org/xxl/css2Reference/Output/index.html 50

51 Dasar-dasar CSS • Aturan Style – Menentukan karakteristik style bagi elemen HTML – Selector • Menentukan elemen yang akan diberlakukan aturan – Declaration • Menguraikan nilai properti secara pasti/tepat – Property » Kualitas atau karakteristik (misal: Color) – Value » Spesifikasi dari properti (misal: Blue) • Style Sheet – Himpunan dari aturan-aturan style 51

52 Dasar-dasar CSS • Sintaks aturan style 52

53 Menyatukan CSS & HTML • Inline – Mengubah tampilan dari elemen tertentu • Atribut style • Embedded – Diberlakukan terhadap dokumen keseluruhan • Me-redefinisi-kan semua kejadian dari elemen tertentu – Menggunakan … dalam • Linked – File deklarasi eksternal tersedian untuk keseluruhan situs • File ASCII dengan ekstensi.css 53

54 Inline Style • Definisikan suatu style untuk elemen tunggal – Digunakan untuk meng-override suatu Style Set pada level lebih tinggi – Hanya mempengaruhi satu instance dari elemen • Sintaks – 54

55 Embedded Style • Selalu diletakkan dalam – Digunakan untuk meng-override suatu Style Set pada level yang lebih tinggi – Hanya mempengaruhi dokumen dimana style set berada • Sintaks – selector {declarations} h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;} 55

56 Linked Style • Style Sheet Eksternal – Selalu diletakkan di dalam – Dokumen teks yang mengandung aturan-aturan style – Memungkinkan spesifikasi aturan untuk banyak dokumendocuments – Tidak mengandung kode HTML • Sintaks • 56

57 Cascading • Menentukan aturan mana yang disematkan ke elemen-elemen • Bobot yang diberikan didasarkan pada 4 variabel: – Menggunakan kata kunci penting – Asal dari aturan – Kekhususan dari selector – Urutan aturan dalam Style Sheet tersebut 57

58 Cascading • Bobot aturan dengan kata kunci !Important – Memungkinkan pengguna untuk meng-override pengaturan style yang dibuat author • Untuk elemen tertentu – Memperbaiki accessibility dari dokumen • Memberikan kontrol kepada pengguna dengan peryaratan khusus • Bobot aturan berdasarkan asalnya – Urutan keutamaan dari cascading: 1.Aturan dari style sheet author 2.Aturan dari style sheet pengguna (user) 3.Aturan dari style sheet browser 58

59 Cascading • Bobot aturan berdasarkan kekhususan – Aturan dengan selector lebih spesifik mendapatkan presenden (keutamaan) dibandingkan aturan dengan selector kurang spesifik • Bobot aturan berdasarkan urutan – Berdasarkan pada urutan dari aturan dalam Style Sheet • Aturan yang didaftar terakhir mendaspatkan preseden diatas yang didaftarkan lebih awal. 59

60 Inheritance (Penurunan) • Parent (induk) – Elemen yang mengandung elemen lain • Child (anak) – Elemen di dalam elemen lain • Inheritance (pembuatan keturunan) – Aturan CSS diturunkan dari elemen induk ke anak • Berdasarkan pada struktur hirarki dari dokumen 60

61 Seleksi Dasar • Selector Tipe – Selector menentukan elemen yang akan dikenakan deklarasi – Contoh Style Sheet : • h2 {color: red;} • p {font-size: 10 pt;} 61

62 Seleksi Dasar • Pengelompokan Selector – Buat deklarasi sama untuk banyak selector • Sintaks: h1 {color: red;} h2 {color: red;} Menjadi: h1, h2 {color: red;} 62

63 Seleksi Dasar • Menggabung deklarasi – Beberapa deklarasi dapat satukan untuk selector yang sama • Sintaks: p {color: blue;} p {font-size: 12pt;} Menjadi: p {color: blue; font-size: 12pt;} 63

64 Seleksi Dasar • Selector keturunan – Dahulu: selector kontekstual – Berdasarkan pada struktur hirarki dari elemen- elemen dalam dokumen • Sintaks: – b i {color: #336699; background-color: #000000;} – Tidak berlaku untuk i b 64

65 Seleksi Lanjutan • Selector atribut id – Diterapkan hanya untuk SATU elemen unik dalam dokumen – Atribut inti dapat diterapkan terhadap elemen HTML apapun • Sintaks: Ini adalah paragraf unik yang mengawali dokumen

66 Seleksi Lanjutan • Selector Atribut Class – Membolehkan aplikasi dari aturan terhadap elemen-elemen terpilih – Atribut inti yang dapat diterapkan terhadap suatu elemen HTML • Sintaks: Text in red with a 30 pixel margin – Mungkin dibatasi untuk jenis elemen spesifik h1.quote {color: red; margin: 30px;} 66

67 Seleksi Lanjutan • … – Elemen level blok – Digunakan untuk memuat elemen HTML lain – Ditampilkan berlainan dari bagian lain dokumen • Ganti paragraf ditambahkan sebelum dan setelah content. • … – Elemen Inline – Digunakan untuk memuat elemen HTML lain – Digunakan dalam blok-blok teks 67

68 Seleksi Lanjutan • Selector Pseudo-Class – Pilih elemen berdasarkan pada karakteristik selain daripada nama – Hubungkan antar pseudo-class • :link – Membolehkan perubahan karakteristik style untuk link-link yang tak-dikunjungi :link {color: green;} • :visited – Membolehkan perubahan karakteristik style untuk link-link yang dikunjungi :visited {color: green;} 68

69 Seleksi Lanjutan • Selector Pseudo-Class – Pseudo-class dinamis • Terapkan style terhadap elemen berdasarkan pada action pengguna • :hover – Menerapkan style ketika mouse di atas elemen • :active – Menerapkan style ketika pengguna mengaktifkan elemen • :focus – Menerapkan style ketika elemen menerima input pengguna 69

70 Font (Huruf) • Satuan Ukuran – Satuan absolut • Menentukan nilai tetap (fixed) • Tidak dapat diskalakan ke tampilan client – Gunakan hanya ketika ukuran dari medium pengguna diketahui – Satuan relatif • Memungkinkan halaman web scalable – Adaptasi terhadap jenis tampilan dan ukuran bebeda – Metode perancangan halaman web yang direkomendasikan 70

71 Font •Satuan Ukuran 71

72 Properti Font • Style – style=“font-family: fonts;” • Membolehkan spesifikasi nama-nama keluarga font • Keluarga font generik – Memungkinkan protabilitas lebih lintas platform – Serif  Bentuk huruf tyradisional (misal: Times) – Sans-serif  Huruf block, bukan serifs (Misal: Arial) – Monospace  Lebar-tetap » Setiap huruf mempunyai lebar horizontal sama – Cursive  Resembles handwriting (Dukungan terbatas) – Fantasy  Primarily decorative (Dukungan terbatas) 72

73 Properti Font • Style – style=“font-family: fonts;” • Keluarga font Spesifik – Memungkinkan spesifikasi keluar font tertentu » Garamond, impact – Pengguna harus mempunyai font terinstal pada mesin » Jika tidak, browser akan memberikan yang default • Contoh: 73

74 Properti Font • Style – style=“font-family: fonts;” • Menentukan substitusi font – Memungkinkan spesifikasi font pengganti » Menggunakan daftar dipisahkan koma – Browser memeriksa daftar huruf yang terinstal terlebih dahulu » Jika tidak, browser menggunakan default – Nama-nama keluarga font- generik dapat digunakan • Contoh: 74

75 Properti Font • Style – style=“font-size: size | keyword | %;” • Kata kunci absolut – xx-small – x-small – small – medium – large – x-large – xx-large

76 Properti Font • Styles – style=“font-size: size | keyword | %;” • Kata kunci relatif – Smaller | Larger  lebih kecil atau lebih besar – Contoh » Ukuran elemen induk adalah large » Ukuran elemen terkini diset larger » Hasil adalah ukuran huruf terkin menjadi X-large • Persentase – Contoh » 50%, 150%, 200% 76

77 Properti Font • Style – style=“font-style: normal | italic | oblique;” – style=“font-variant: normal | small-caps;” – style=“font-weight: normal | bold | bolder | lighter | #;” • # = 100 – 900 kenaikan per 100 • 400 = Normal • 700 = Bold (tebal) 77

78 Model Format Visual • Ada 3 kategori tipe tampilan elemen – Blok (Misal: Paragraf) • Mengandung kotak inline yang memuat content elemen – Inline • Mengandung content dalam elemen level blok • Tidak membentuk blok content baru – List-item • Membuat container dan kotak inline List-item terkelilingi – display: block | inline | list-item | none 78

79 Model Kotak • Mendeskripsikan kotak bersegi yang memuat content – Setiap elemen level blok ditampilkan sebagai suatu kotak (box) – Setiap kotak content dapat mempunyai margin, border & padding 79

80 Properti Margin • margin: # | % – Properti untuk mengubah 4 margin terpisah

81 Properti Margin • margin-left | margin-right | margin-top | margin-bottom: # | % – Margin negatif dapat diberikan untuk mendapatkan efek khusus

82 Properti Padding • padding: # | % – Properti untuk mengubah 4 padding • Format sama dengan margin • padding-left | padding-right | padding-top | padding-bottom: # | %

83 Properti Border • border: style width color – Properti untuk mengubah 4 border • Format sama dengan margin.

84 Properti Border • border-style: kata kunci – Kata kunci: • none • dotted • dashed • solid • double • groove • ridge • inset • outset

85 Properti Border • border-width: thin | medium | thick | # • border-color: value

86 Properti Kotak Khusus • width: # | % – Atur lebar horizontal dari kotak yang mengandung • height: # | % – Atur tinggi vertikal dari kotak yang mengandung • float: left | right | none – Atur posisi dari elemen ke kiri/kanan dari elemen induk • clear: none | left | right | both – Mengontrol aliran teks dari elemen sekeliling floated elements

87 Properti Posisi • Posisi: type position size – type = static | relative | absolute | fixed – position = top | left | bottom | right – size = height | width 87

88 Properti Posisi • div {position:absolute; left:130px; top:100px;}

89 Properti Posisi • div {position:absolute; left:130px; top:100px; width: 100px;}

90 Properti Posisi • visibility: visible | hidden – Menentukan apakah elemen ditampilkan atau disembunyikan • z-index: auto | # – Menentukan tingkat stacking dari elemen 90

91 Rangkuman • XHTML untuk struktur content • CSS untuk presentation 91

92 Bibliography • Bacaan Utama – XHTML Specification • http://www.w3.org/TR/xhtml11/ – CSS Specification • http://www.w3.org/TR/CSS2/ http://www.w3.org/TR/CSS2/ 92

93 Tool Validasi • XHTML – http://validator.w3.org/ http://validator.w3.org/ • CSS – http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/ 93

94 Pertanyaan? 94