Pemprograman Web HTML, XHTML dan CSS

Pemprograman WebHTML, XHTML dan CSS Arif Dwi Laksito, S.Kom

Perkembangan 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 tidakketat dan tidak rapi dan terkadangmembingungkan • 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.

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

Sintax dasar HTML <html> <head> <title>My web Pages</title> </head> <body> <p>XHTML is easy!</p> </body> </html>

Aturan Sintax XHTML • Tag XHTML adalahdikelilingisudutkurungseperti<html>. • Tag-tag dalam XHTML diapitolehsudutkurung(< 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/>

Komponen dasar XHTML Contoh: <p class=“greeting”> Heloo,world!</p>

XHTML Validator • W3C XHTML Validation Service http://validator.w3.org/file-upload.html

Komponen URL • Dokumendiakses web mempunyaialamatunik yang disebut Uniform Resource Locator (URL). • Contoh URL :

Definisi CSS • CSS (Cascade Style Sheet) dapatmenambahkan style halamankita, meningkatkandanmemperbaikipenyajianisihalaman. • CSS dibuatuntukmemisahkanantaraisidanpresentasi. • CSS bertindaksebagailapisan yang mempengaruhipresentasidarielemen XHTML yang diberikan. • Warna, font, text size, background, susunanelemenpadahalamandanseluruhaspekpresentasiisi, dikontrololeh CSS.

Aturan Penulisan • CSS dibangunberdasarkanaturan. • Aturaberisi set intruksiangdapatdapatmemerintahkan browser mengikutiaturanuntukmengubahpenampilanelemen XHTML didasarkanpadanilai-nilai yang diberikan.

Menggabungkan CSS ke Document XHTML • Agar dapatmemanfaatkan style CSS, kitaharusmenghubungkan style sheet kedokumenkita. • Cara AttachingCSS: • Inline Styles • Embedded Style Sheets • External Style Sheets

Inline Style • Kita dapatmemasukkandeklarasi CSS dalamgayaopsionalatribut sari setiapelemendan markup. • Tidakdibagunsebagaiaturan, dantidakada selector karenapropertidannilainyamelekatlangsungpadaelemen. <h2style="color: red;"> Good eats for hungry geeks </h2> <pstyle="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>

Embedded Style Sheets • Kita dapatmenanamkanaturan CSS dalamelemen head daridokumen, yangaturantersebutdapatdigunakanpadadokumen yang samadimanadideklarasikan. • Embedded style sheet (kadangdisebut internal style sheet). <head> <styletype="text/css"> h2 { color: red; } p { color: gray; } .info {background:#cccccc; border:1px} .label {margin:5px; color:#efefef} </style> </head>

External Style Sheets • Model adalahterbaikyaitumenempatkanaturan CSS terpisahdengandokumen XHTML, style sheet external langsungterhubungdengandokumen. • External style sheet adalah file text disimpandenganektensi .css. • Pendekataninibenar-benarmemisahkanantarapresentasidanisidanstruktur. • Sebuahdokumen XHTML menghubungkanke external style sheet melaluielemen head. <head> <linkrel="stylesheet“type="text/css"href="styles.css"/> </head>

Terima Kasih

Pemprograman Web HTML, XHTML dan CSS