HTML XHTML Css

Diunggah oleh

wytha
7 tayangan16 halaman

Judul Asli

20110411 HTML Xhtml Css

Hak Cipta

© Attribution Non-Commercial (BY-NC)

Format Tersedia

PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
7 tayangan16 halaman

HTML XHTML Css

Judul Asli:

20110411 HTML Xhtml Css

Diunggah oleh

wytha

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 16

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/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;


charset=utf-8" />
<title>My web Pages</title>

</head>

<body>

<p>XHTML is easy!</p>

</body>

</html>
S INTAX DASAR HTML

<html>
<head>
<title>My web Pages</title>
</head>
<body>
<p>HTML is easy!</p>
</body>
</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

Anda mungkin juga menyukai