Web 2.0 and RESTful Web Services

Download Report

Transcript Web 2.0 and RESTful Web Services 

Web Engineering 2010
Pertemuan ke-08
Teknologi Aplikasi Web I
(HTML, XHTML, CSS)
Husni
[email protected]
Husni.trunojyo.ac.id
Komputasi.trunoojoyo.ac.id
Outline
•
•
•
•
Pengantar
HTML & XHTML
CSS
Rangkuman
2
Unsur-unsur dasar apa untuk membangun suatu situs web
PENGANTAR
3
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
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
Bagaimana menstrukturkan content dalam suatu halaman web
HYPERTEXT MARKUP LANGUAGE
(HTML)
6
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
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
Sintaks
• Elemen (Tag)
– Kode yang mengontrol tampilan konten
– Pembukaan / Penutupan
• Two-Sided
– <tagName>Content</tagName>
• One-Sided
– <tagName />
– Lowercase
• Ditinggalkan
– Elemen atau sintaks usang
– Yang tidak menjalan dukungan masa depan
9
Sintaks
• Komentar
– <!-- . . . -->
• <!– ini adalah komentar. -->
• White Space
– Tidak merender spasi banyak
– Tab dan Enter tidak dirender
– Gunakan spasi non-breaking
&nbsp;
• Atribut-atribut
– Mengontrol perilaku atau tampilan dari suatu elemen
<tagName attrib#1=“Value” attrib#2=“Value” />
10
<html>
• <html>…</html>
– Mengelilingi semua markup & teks
– Disyaratkan
– Digunakan untuk memulai dan mengakhiri setiap
dokumen HTML
11
<head>
• <head>…</head>
– Mengandung informasi header dokumen
– Disyaratkan
– Informasi penting
• Judul (title) dokumen
• Tag-tag META
– Termasuk teks tak dirender
12
<body>
• <body>…</body>
– Mengandung semua content (isi) untuk dirender
• Atribut-atribut
– leftmargin=number
• Mengatur margin kiri halaman
– topmargin=number
• Mengatur margin atas halaman
13
<body>
• 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
<body>
• 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
<h#>
• <h#>…</h#>
– 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
<p> & <br>
• <p>…</p>
– Menyisipkan baris kosing sebelum tag
• Memisahkan paragraf teks
• <br />
– Menyebabkan teks berganti baris, dimanapun tag
diletakkan
17
List (Daftar)
• <ul>…</ul>
– 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
List (Daftar)
• <ol>…</ol>
– 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
List (Daftar)
• <li>…</li>
– Mendefinisikan item dalam suatu daftar
• <dl>…</dl>
– Mendefinisikan daftar
– <dt>…</dt>
• Term yang didefinisikan
– <dd>…</dd>
• Definisi
20
Elemen Tingkat Blok
• <blockquote>…</blockquote>
– Content yang di-indent di kiri dan kanan
• <pre>…</pre>
– Biarkan semua white space seperti aslinya
– Gunakan fixed width typeface
21
Elemen Inline
• <strong>…</strong> or <b>…</b>
– Bold (Tebal)
• <em>…</em> or <i>…</i>
– Italics (Miring)
• <sub>…</sub>
– Subscripted (subscript)
• <sup>…</sup>
– Superscripted (superscript)
22
Elemen Inline
• <span>…</span>
– Digunakan untuk menerapkan kelas CSS
• Bersarang (nested)
– Menempatkan tag-tag di dalam tag lain
• <b><i>…</i></b> bukan <b><i>…</b></i>
23
<img>
• <img />
– 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
<img>
• 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
<img>
• 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
<hr>
• <hr />
– 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
Karakter Khusus
• &amp;
– Ampersand (&)
• &copy;
– Copyright (c)
• &middot;
– Bullet
• &reg;
– Registered (R)
• &trade;
– Trademark (TM)
28
<a>
• <a>…</a>
– 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
<a>
• 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
<a>
• 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
<a>
• Atribut-atribut
– title=“text”
• Menyediakan informasi tambahan terhadap link
– Hadir seperti suatu Tooltip
– Sebaiknya kurang dari 60 karakter
32
<a>
• Contoh
<a href="http://www.mysite.com/">A link to a
site.</a>
< a href="#P5">A link to paragraph 5 in same
document.</a>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p id=“P5”>Paragraph 5 content.</p>
33
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
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
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
Protokol
• Hypertext Transfer Protocol
– Web server
– http://
• File Transfer Protocol
– File server
– ftp://
• USENET
– Newsgroup
– <a href=“news:newsgroup.name”>Klik Di sini</a>
37
Protokol
• E-Mail
– Mailto
• <a href=“mailto:[email protected]”>Kirim E-Mail</a>
– Dapat secara otomatis menyertakan baris subject
• mailto:[email protected]?subject=WebEng2010
– Opsi lain
• “mailto:[email protected][email protected]
&[email protected]&subject=subscribe
&body=Send me your newsletter right away”
38
<table>
• <table>…</table>
– 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
<table>
• 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
<table>
• 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
<colgroup>
• <colgroup>…</colgroup>
– Mendefinisikan grup kolom tabel yang diformat
– Hanya berlaku di dalam <table>
• 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
<colgroup>
• Atribut
– span=“#”
• Menentukan jumlah dari kolom <colgroup> yang dispan (tercakup)
– valign=“top | middle | bottom | baseline”
• Menentukan vertical alignment dari content dalam
<colgroup>
– width=“# | %”
• Menentukan lebar setiap kolom dalam <colgroup>
• 0* - lebar kolom akan menjadi lebar minimum
43
<col>
• <col />
– Mendefinisikan satua tau lebih kolom tabel untuk
diformat
– Hanya berlaku dalam <table> atau <colgroup>
• 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
<col>
• 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
<tr> & <td>
• <tr>…</tr>
– Mendefinisikan suatu baris dalam tabel
• <td>…</td>
– Mendefinisikan data tabel (suatu sel) dalam baris
• Sel-sel data tabel harus hanya muncul di dalam barisbaris tabel
• Tag penutupan harus muncul pada baris yang sama
dengan content
– Jika tidak maka dapat muncul celah atau
kekosongan
46
<td>
• Atribut
– colspan=“#”
• Mementukan berapa banyak kolom yang
dicakup oleh sel (penggabungan beberapa
kolom)
– rowspan=“#”
• Menentukan berapa banyak baris yang akan
dioverlap oleh sel
47
<th> & <caption>
• <th>…</th>
– Menentukan header tabel bagi suatu baris
• Identik dengan sel tabel data, kecuali:
– Isi sel ditebalkan (bold)
– Isi sel dialign ke tengah (center)
• <caption>…</caption>
– Menempelkan suatu caption pada tabel
48
Bagaimana membuat halaman web nyaman dilihat (good looking)
CASCADE STYLE SHEET (CSS)
49
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
• CSS2 (’98) — 70 properti tambahan
– www.zvon.org/xxl/css2Reference/Output/index.html
50
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
Dasar-dasar CSS
• Sintaks aturan style
52
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 <style>…</style> dalam <head>
• Linked
– File deklarasi eksternal tersedian untuk keseluruhan situs
• File ASCII dengan ekstensi .css
53
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
– <tag style=“property:value1; property:value2;”>
<h1 style=“color:green; font-family:sans-serif;”>
<b style=“color:yellow; background-color:green;”>
54
Embedded Style
• Selalu diletakkan dalam <head>
– Digunakan untuk meng-override suatu Style Set pada level
yang lebih tinggi
– Hanya mempengaruhi dokumen dimana style set berada
• Sintaks
– selector {declarations}
<style type=“text/css”>
h1 {color:green; font-family:sans-serif;}
b {color:yellow; background-color:green;}
</style>
55
Linked Style
• Style Sheet Eksternal
– Selalu diletakkan di dalam <head>
– Dokumen teks yang mengandung aturan-aturan style
– Memungkinkan spesifikasi aturan untuk banyak
dokumendocuments
– Tidak mengandung kode HTML
• Sintaks
• <link rel=“stylesheet” href=“master.css” />
56
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
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
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
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
Seleksi Dasar
• Selector Tipe
– Selector menentukan elemen yang akan
dikenakan deklarasi
– Contoh Style Sheet :
• h2 {color: red;}
• p {font-size: 10 pt;}
61
Seleksi Dasar
• Pengelompokan Selector
– Buat deklarasi sama untuk banyak selector
• Sintaks:
h1 {color: red;}
h2 {color: red;}
Menjadi:
h1, h2 {color: red;}
62
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
Seleksi Dasar
• Selector keturunan
– Dahulu: selector kontekstual
– Berdasarkan pada struktur hirarki dari elemenelemen dalam dokumen
• Sintaks:
– b i {color: #336699; background-color: #000000;}
– Tidak berlaku untuk i b
64
Seleksi Lanjutan
• Selector atribut id
– Diterapkan hanya untuk SATU elemen unik dalam dokumen
– Atribut inti dapat diterapkan terhadap elemen HTML
apapun
• Sintaks:
<p id=“preface”>Ini adalah paragraf unik yang mengawali
dokumen</p>
Seleksi Lanjutan
• Selector Atribut Class
– Membolehkan aplikasi dari aturan terhadap elemen-elemen
terpilih
– Atribut inti yang dapat diterapkan terhadap suatu elemen HTML
• Sintaks:
<p class=“quote”>Text in red with a 30 pixel margin</p>
– Mungkin dibatasi untuk jenis elemen spesifik
h1.quote {color: red; margin: 30px;}
66
Seleksi Lanjutan
• <div>…</div>
– Elemen level blok
– Digunakan untuk memuat elemen HTML lain
– Ditampilkan berlainan dari bagian lain dokumen
• Ganti paragraf ditambahkan sebelum dan setelah content
<div>.
• <span>…</span>
– Elemen Inline
– Digunakan untuk memuat elemen HTML lain
– Digunakan dalam blok-blok teks
67
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
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
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
Font
• Satuan Ukuran
71
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
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:
<p style=“font-family: arial;”>
73
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:
<p style=“font-family: verdana,arial,helvetica,sans-serif;”>
74
Properti Font
• Style
– style=“font-size: size | keyword | %;”
• Kata kunci absolut
– xx-small
– x-small
– small
– medium
– large
– x-large
– xx-large
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
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
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
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
Properti Margin
• margin: # | %
– Properti untuk mengubah 4 margin terpisah
Properti Margin
• margin-left | margin-right | margin-top |
margin-bottom: # | %
– Margin negatif dapat diberikan untuk mendapatkan
efek khusus
Properti Padding
• padding: # | %
– Properti untuk mengubah 4 padding
• Format sama dengan margin
• padding-left | padding-right | padding-top |
padding-bottom: # | %
Properti Border
• border: style width color
– Properti untuk mengubah 4 border
• Format sama dengan margin.
Properti Border
• border-style: kata kunci
– Kata kunci:
•
•
•
•
•
•
•
•
•
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Properti Border
• border-width: thin | medium | thick | #
• border-color: value
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
Properti Posisi
• Posisi: type position size
– type = static | relative | absolute | fixed
– position = top | left | bottom | right
– size = height | width
87
Properti Posisi
• div {position:absolute; left:130px; top:100px;}
Properti Posisi
• div {position:absolute; left:130px; top:100px; width: 100px;}
Properti Posisi
• visibility: visible | hidden
– Menentukan apakah elemen ditampilkan atau
disembunyikan
• z-index: auto | #
– Menentukan tingkat stacking dari elemen
90
Rangkuman
• XHTML untuk struktur content
• CSS untuk presentation
91
Bibliography
• Bacaan Utama
– XHTML Specification
• http://www.w3.org/TR/xhtml11/
– CSS Specification
• http://www.w3.org/TR/CSS2/
92
Tool Validasi
• XHTML
– http://validator.w3.org/
• CSS
– http://jigsaw.w3.org/css-validator/
93
Pertanyaan?
94