1. W3C Web standards and Recommendations
Lecture 3
Introduction to Web Publishing
W3C Web standards and Recommendations

2. Outcomes Understand the need for W3C web standards
Understand css, html, xml, and JavaScript purpose

3. Web standards
Web needs guidance to realize its full potential. Web standards are this guidance. They help to ensure that everyone has access to the information and make web development faster and more enjoyable.

4. W3C standards
HTML
CSS
XML
XHTML …

5. Web Standard
HTML

6. Web standard
XML

7. Extensible Markup Language (XML)
XML is playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.

8. User defined tags, i.e. extensible language
XML
User defined tags, i.e. extensible language

9. XML Example

10. Classroom physical structure University physical structure
Design XML for:
Telephone book
Coursework title page
Classroom physical structure
University physical structure

11. Web Standard
XHTML

12. XHTML
“The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML, and a series of specifications has been developed for XHTML.”

13. XHTML (XML influence) Declare the DOCTYPE
Tag and attributes in lower case
Attributes must have quoted values
All tags must have an end tag (<br />)
Nest tags correctly
Validate the page (

14. Validation?
An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML file can be properly validated, a correct DTD must be added as the first line of the file.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

15. XHTML XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.0 Frameset
XHTML 5 (under development together with HTML 5)

16. DIV Use DIVs to create the skeleton of the page.
There should be no display-specific information in the XHTML
The Goal: separate the information from the presentation of the page
Presentation/positioning is entirely controlled by CSS

17. Web standard
CSS

18. CSS
Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements

19. Skinning Concept
The skin is the design placed over the skeleton structure
It’s like a cell phone
Model of phone is the skeleton
Face plates are the skins
You can swap face plates

20. XHTML DIVs are like the parts of the phone (antenna, buttons, speaker, etc.)
Layout CSS is like the different models of phones (where parts are positioned)
Skin CSS is like the face plates

21. This is my header
Menu
Body
Text goes here
Footer

22. This is my header
Menu
Body
Text goes here
Footer

23. This is my header
Menu
Body
Text goes here
Footer

24. This is my header
Menu
Body
Text goes here
Footer

30. Web Standard
Java Script

31. JavaScript
JavaScript is a client-side scripting language that allows dynamic behavior to be specified within HTML documents.
A scripting language is a language, which is easy and fast to learn. !!!!

32. JavaScript
JavaScript is a client side language and it runs on the client browser.
JavaScript is ECMA (European Computer Manufacturers Association) web standard

33. Web Standards
When a web site or web page is described as complying with web standards, it usually means that the site or page has valid or nearly valid HTML, CSS and JavaScript. The HTML should also meet accessibility guidelines.

34. Document Object Model
A DOM, or Document Object Model, is a tree representation of the structure of a Web document that may be used via scripts to access and manipulate any element within that page.

35. DOM tree

36. JavaScript and DOM
Document Object Model is the way JavaScript sees its containing HTML page and browser state.

37. Why JavaScript
JavaScript is a language that lets you make your pages interact with your readers and respond to what they do.

38. Where it can be used Form validation Enabling cookies Image rollovers
Dropdown menus
Many more…

39. JavaScript in XHTML
<body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> view

40. JavaScript in XHTML
Browsers that do not support JavaScript will display JavaScript as page content

41. <body>
<script type="text/javascript">
<!–
document.write("Hello World!");
//--> </script>
</body>
The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

42. Rollovers
View
Form Validation

43. jQuery
jQuery is multi-browser JavaScript library designed to simplify the client-side scripting of HTML.

44. References