ST068 Algoritma dan Pemrograman - E
advertisement
P EMPROGRAMAN W EB
HTML, XHTML DAN CSS
P ERKEMBANGAN HTML
HTML 4.0 – 1997
Introduced many new features and deprecated
many older features
HTML 4.01 - 1999 - A cleanup of 4.0
XHTML 1.0 - 2000
Just 4.01 defined using XML, instead of SGML
XHTML 1.1 – 2001
Modularized 1.0, and drops frames
We’ll stick to 1.1, except for frames
XHTML
VS
HTML
Sintax HTML tidak ketat dan tidak rapi dan
terkadang membingungkan
Sintax XHTML lebih ketat, mempunyai standard
yg lebih rapi dan bersih.
XHTML mempunyai sifat case-sensitive dan
semua dutulis dgn huruf kecil , sedangkan HTML
tidak memperdulikan huruf besar kecil.
Tag di XHTML selalu mempunyai tag penutup
(closed tag), di HTML tidak terlalu
memperhatikan closed tag.
S INTAX
DASAR
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My web Pages</title>
</head>
<body>
<p>XHTML is easy!</p>
</body>
</html>
S INTAX
DASAR
<html>
<head>
<title>My web Pages</title>
</head>
<body>
<p>XHTML is easy!</p>
</body>
</html>
HTML
ATURAN S INTAX XHTML
Tag XHTML adalah dikelilingi sudut kurung seperti
<html>.
Tag-tag dalam XHTML diapit oleh sudut kurung
(< dan >)
Setiap Element didefinisikan oleh tag
Tag format:
Opening tag
: <label>
Closing tag
: </label>
Tidak semua tag mempunyai content/isi.
Jika tag tidak mempunyai content, penulisannya
adalah sebagai berikut <input />
K OMPONEN
DASAR
XHTML
Contoh:
<p class=“greeting”> Heloo, world!</p>
XHTML VALIDATOR
W3C XHTML Validation Service
http://validator.w3.org/file-upload.html
K OMPONEN URL
Dokumen di akses web mempunyai alamat unik
yang disebut Uniform Resource Locator (URL).
Contoh URL :
D EFINISI CSS
CSS (Cascade Style Sheet) dapat menambahkan style
halaman kita, meningkatkan dan memperbaiki
penyajian isi halaman.
CSS dibuat untuk memisahkan antara isi dan
presentasi.
CSS bertindak sebagai lapisan yang mempengaruhi
presentasi dari elemen XHTML yang diberikan.
Warna, font, text size, background, susunan elemen
pada halaman dan seluruh aspek presentasi isi,
dikontrol oleh CSS.
ATURAN P ENULISAN
CSS dibangun berdasarkan aturan.
Atura berisi set intruksi ang dapat dapat
memerintahkan browser mengikuti aturan untuk
mengubah penampilan elemen XHTML didasarkan
pada nilai-nilai yang diberikan.
M ENGGABUNGKAN CSS KE
D OCUMENT XHTML
Agar dapat memanfaatkan style CSS, kita harus
menghubungkan style sheet ke dokumen kita.
Cara Attaching CSS:
Inline Styles
Embedded Style Sheets
External Style Sheets
I NLINE S TYLE
Kita dapat memasukkan deklarasi CSS dalam gaya
opsional atribut sari setiap elemen dan markup.
Tidak dibagun sebagai aturan, dan tidak ada selector
karena properti dan nilainya melekat langsung pada
elemen.
<h2 style="color: red;">
Good eats for hungry geeks
</h2>
<p style="color: gray;">
Our fresh pizzas, hearty pasta dishes, and
succulent desserts are sure to please. And
don't forget about our daily chalkboard
specials!
</p>
E MBEDDED S TYLE S HEETS
Kita dapat menanamkan aturan CSS dalam elemen head
dari dokumen, yan gaturan tersebut dapat digunakan pada
dokumen yang sama dimana dideklarasikan.
Embedded style sheet (kadang disebut internal style
sheet).
<head>
<style type="text/css">
h2 { color: red; }
p { color: gray; }
.info {background:#cccccc; border:1px}
.label {margin:5px; color:#efefef}
</style>
</head>
E XTERNAL S TYLE S HEETS
Model adalah terbaik yaitu menempatkan aturan CSS terpisah dengan
dokumen XHTML, style sheet external langsung terhubung dengan
dokumen.
External style sheet adalah file text disimpan dengan ektensi .css.
Pendekatan ini benar-benar memisahkan antara presentasi dan isi dan
struktur.
Sebuah dokumen XHTML menghubungkan ke external style sheet
melalui elemen head.
<head>
<link rel="stylesheet“
type="text/css" href="styles.css" />
</head>
T ERIMA K ASIH
