Lecture 2 3/10/11
W3C - • The World Wide Web consortium was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. • W3C's goals for the Web are: • Universal Access • Semantic Web • Web of Trust: • http://www.w3schools.com/
Static Web Applications • The content of page A served to client 1 is exactly the same as the content for page A served to client 2 • The web server does not dynamically generate any part of the site’s contents but simply serves static HTML pages loaded from the Web Server’s file systems and sends it to the requesting client
Serving an HTML page
What is xHTML? • xHTML stands for eXstensibleHyperTextMarkupLanguage • An xHTML file is a text file containing small markup tags • E.g. <h1> </h1> • The markup tags tell the Web browser how to display the page • An xHTML file must have an htm or html file extension • E.g. mypage.html
<!DOCTYPE> Is Mandatory • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Used to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets
<!DOCTYPE> • STRICT when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets • TRANSITIONAL • FRAMESET when you want to use HTML Frames to partition the browser window into two or more frames
<!DOCTYPE> • Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML • An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup. Validator: • http://validator.w3.org/check?uri=http%3A%2F%2Fwww.w3schools.com%2Fxhtml%2Fdefault.asp
First Homepage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> </body> </html>
Comments in xHTML The comment tag is used to insert a comment in the xHTMLsource code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. <!-- This is a comment --> Note that you need
XHTML Documents Must Have One Root Element All XHTML elements must be nested within the <html> root element All other elements can have sub (children) elements Sub elements must be in pairs and correctly nested within their parent element <html> <head> ... </head> <body> ... </body> </html>
XHTML Syntax Rules Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The xHTML DTD defines mandatory elements E.g. <table width="100%">
Basic Elements • Organize web content using block level elements: • Heading <h1></h1> to <h6></h6> • Paragraph <p> </p> • Preformatted text <pre></pre> • Blockquote <blockquote> </blockquote> • Address <address> </address>
Heading <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> <h2 align="center">Good xHTML</h2> <h3 align="right">Good xHTML</h3> <h4 align="left">Good xHTML</h4> <h5>Good xHTML</h5> <h6 align="center">Good xHTML</h6> </body> </html>
Paragraph <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> <h2 align="center">News</h2> <p align="right">WASHINGTON, Oct. 14 — For now, the most powerful law enforcement official in the federal government is a 47-year-old lawyer little known outside Washington. Mahesh Kumar/Associated Press Henrietta H. Fore, a State Department under secretary who also leads an aid agency. Or inside Washington, for that matter.He is acting Attorney General Peter D. Keisler, who is running the Justice Department until a new attorney general is confirmed by the Senate to replace Alberto R. Gonzales. Mr. Keisler had been in charge of the department’s civil division. </p> </body> </html>
Preformatted Text <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> <h2 align="center">News</h2> <pre>WASHINGTON, Oct. 14 — For now, the most powerful law enforcement official in the federal government is a 47-year-old lawyer little known outside Washington. Mahesh Kumar/Associated Press Henrietta H. Fore, a State Department under secretary who also leads an aid agency. Or inside Washington, for that matter.He is acting Attorney General Peter D. Keisler, who is running the Justice Department until a new attorney general is confirmed by the Senate to replace Alberto R. Gonzales. Mr.Keisler had been in charge of the department’s civil division. </pre> </body> </html>
Blockquote • The <blockquote> tag is supposed to contain only block-level elements within it, and not just plain text • To validate the page as strict XHTML, you must add a block-level element around the text within the <blockquote> tag • The blockquote element creates white space on both sides of the text.
Blockquote <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> <h2 align="center">Podge and Rodge</h2> Here comes a long quotation: <blockquote> Podge and Rodge are the two characters from A Scare at Bedtime and The Podge and Rodge Show, an Irish adult comedy televised puppet show. The characters were created and are produced by Ciaran Morrison and Mick O'Hara, who also voiced the characters of Zig and Zag and Bronx Bunny and Teddy T. </blockquote> </body> </html>
Address <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> <h2 align="center">Podge and Rodge</h2> <address> Donald Duck<br /> Box 555<br /> Disneyland </address> </body> </html>
More Formatting Tags Break rule <br/> Emphasis <em> </em> Strong emphasis <strong> </strong>
XHTML Syntax Rules Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The xHTML DTD defines mandatory elements E.g. <table width="100%">
Using the <hr /> (Horizontal Rule) tag Draw a horizontal rule across our Web Page Separate sections of content from each other The <hr /> tag is a standalone or empty tag For this tag to comply with the standards set out for XHTML we use a “/” to indicate that it is an empty tag
Recommended Reading • http://www.useit.com/alertbox/9710a.html • Customer-friendly : design guidelines for e-commerce (Feller, 2000) • http://www.useit.com/ Nielson • http://www.w3schools.com/ • http://www.w3.org/WAI/mobile/
