Download
pemprograman web html xhtml dan css n.
Skip this Video
Loading SlideShow in 5 Seconds..
Pemprograman Web HTML, XHTML dan CSS PowerPoint Presentation
Download Presentation
Pemprograman Web HTML, XHTML dan CSS

Pemprograman Web HTML, XHTML dan CSS

142 Vues Download Presentation
Télécharger la présentation

Pemprograman Web HTML, XHTML dan CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. 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

  3. 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.

  4. 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>

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

  6. 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/>

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

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

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

  10. 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.

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

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

  13. 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>

  14. 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>

  15. 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>

  16. Terima Kasih