Embed Size (px)
Citation preview
3/10 /11
Lecture 2
2
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
3
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
4
5
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
<!DOCTYPE> Is Mandatory
6
<!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>
7
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>
8
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
9
<!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>
10
11
Comments in xHTML
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
12XHTML 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>
13
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
elementsE.g. <table width="100%">
14
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>
15
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>
16
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 PressHenrietta 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>
17
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>
18
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.
19
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>
20
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>
21
More Formatting TagsBreak 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
22
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
elementsE.g. <table width="100%">
23Using the <hr /> (Horizontal Rule) tag
Draw a horizontal rule across our Web PageSeparate sections of content from each otherThe <hr /> tag is a standalone or empty
tagFor this tag to comply with the standards set
out for XHTML we use a “/” to indicate that it is an empty tag
Recommended Reading
24
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/
