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

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

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.

W3C standards HTML CSS XML XHTML …

Web Standard HTML

Web standard XML

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.

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

XML Example

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

Web Standard XHTML

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.” http://www.w3.org/MarkUp/

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 (http://validator.w3.org)

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" http://www.w3schools.com/xhtml/xhtml_validate.asp

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

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

Web standard CSS

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

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

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

This is my header Menu Body Text goes here Footer

This is my header Menu Body Text goes here Footer

This is my header Menu Body Text goes here Footer

This is my header Menu Body Text goes here Footer

Web Standard Java Script

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

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

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.

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.

DOM tree

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

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

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

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

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

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

Rollovers View Form Validation

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

References http://www.mezzoblue.com/zengarden/alldesigns/ www.W3.org