Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture 2
Document related concepts
Transcript
Lecture 2 3/10/11 W3C 2 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 3 Serving an HTML page 4 What is xHTML? xHTML stands for eXstensible HyperText Markup Language 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 5 <!DOCTYPE> Is Mandatory <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Used to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets 6 <!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 7 <!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 8 First Homepage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!-- An intro to xHTML--> <html> <head> <title>This is good xHTML</title> </head> <body> <h1>Good xHTML</h1> </body> </html> 9 10 Comments in xHTML 11 The comment tag is used to insert a comment in the xHTML source 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 Root12 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 13 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 14 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 15 <!-- 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> <!-- 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> Paragraph 16 Preformatted Text 17 <!-- 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 18 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. <!-- 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> Blockquote 19 Address 20 <!-- 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> <tt> Renders as teletype or mono spaced text <i> Renders as italic text <b> Renders as bold text <big> Renders as bigger text <small> Renders as smaller text 21 XHTML Syntax Rules 22 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 23 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/ 24
