XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and...

XHTMLXHTML

Presented by Kelly(Geun-young) YimPresented by Kelly(Geun-young) Yim

Learning ObjectivesLearning Objectives

List the difference between XHTML and List the difference between XHTML and HTMLHTML

Create a valid, well-formed XHTML Create a valid, well-formed XHTML documentdocument

Convert an existing HTML document to Convert an existing HTML document to XHTMLXHTML

Decide when XHTML is more appropriate Decide when XHTML is more appropriate than HTMLthan HTML

What is XHTML?What is XHTML?

XHTML stands for eXtensible HyperText XHTML stands for eXtensible HyperText Markup Language Markup Language

Two major puposesTwo major puposes XHTML is a stricter standard than HTMLXHTML is a stricter standard than HTML XHTML allows for modularisationXHTML allows for modularisation

Overall, XHTML is almost the same as HTMLOverall, XHTML is almost the same as HTML However, XHTML code must be well-formed.However, XHTML code must be well-formed.

Why XHTML?Why XHTML?

Most web pages were designed in HTMLMost web pages were designed in HTML However, HTML allows all sort of However, HTML allows all sort of

mistakes and bad formatting in its code.mistakes and bad formatting in its code. XHTML is stricter and easier to parseXHTML is stricter and easier to parse

An XHTML document must contain a An XHTML document must contain a DOCTYPE declaration and four elementsDOCTYPE declaration and four elements

<!DOCTYPE ... > <!DOCTYPE ... > <html <html xmlns="http://www.w3.org/1999/xhtml"> xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <head> <title></title> </head> <body></body> </html> <body></body> </html>

XHTMLXHTML

Also, the root html tag of an XHTML document must include an xmlns declaration for the XHTML namespace.

Preferred DOCTYPEPreferred DOCTYPE

<!DOCTYPE html <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 1-strict.dtd">

XML PrologXML Prolog

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?> LanguageLanguage

<html <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> xml:lang="en" lang="en">

XHTMLXHTML

Has to be the same

XHTML vs. HTMLXHTML vs. HTML

IncorrectIncorrect

<b><u> This text is probably bold and underlined, <b><u> This text is probably bold and underlined, but inside incorrectly nested tags. </b></u> but inside incorrectly nested tags. </b></u>

Documents must be well-formedDocuments must be well-formed

Needs to be switched


IncorrectIncorrect<p>Here is a list: <p>Here is a list: <ul> <ul> <li>Item 1 <li>Item 1 <li>Item 2 <li>Item 2 <li>Item 3<li>Item 3 </ul> </ul>

Elements must be closedElements must be closed

</p>

</li></li>

</li>


IncorrectIncorrect

<img src="titlebar.gif" alt="Title" ><img src="titlebar.gif" alt="Title" >

<hr > <hr >

<br ><br >

<p>Welcome to my web page!</p> <p>Welcome to my web page!</p>

What if there are no closing tags in HTMLWhat if there are no closing tags in HTML

/

/

/Make sure to put a space

between

Common empty tags in Common empty tags in HTMLHTML

area area base base basefont basefont br br hr hr img img input input link link meta meta param param


<H1>This is an example of bad case.</h1> <H1>This is an example of bad case.</h1>

Tags must be lowercaseTags must be lowercase

h1

Attribute names must be lowercaseAttribute names must be lowercase

<p CLASS="specialText">Important Notice</p> class


<table border= 1 width= 100% > <table border= 1 width= 100% >

<tr><td> Tables are fun! </td></tr><tr><td> Tables are fun! </td></tr>

</table> </table>

Attribute values must be quotedAttribute values must be quoted

“ ” “ ”


<form> <form>

<input checked ... /> <input checked ... />

<input disabled ... /> <input disabled ... />

</form> </form>

Attributes cannot be minimizedAttributes cannot be minimized

=“checked”…/>

=“disabled” …/>

A complete list of A complete list of minimized attributes minimized attributes

checked checked compact compact declare declare defer defer disabled disabled ismap ismap nohrefnohref

noresize noresize noshade noshade nowrap nowrap readonly readonly selected selected multiple multiple


<a name="anchor"> <a name="anchor">

<img src="banner.gif" <img src="banner.gif"

name="mybanner" />name="mybanner" />

</a> </a>

The name attribute is replaced with the id attributeThe name attribute is replaced with the id attribute

id=“anchor” >

id=“mybanner” />


<a href="home.aspx?status=done& <a href="home.aspx?status=done& itWorked=false">itWorked=false">

Home & Garden</a> Home & Garden</a>

Ampersands are not supportedAmpersands are not supported

amp;

amp;


<img src="titlebar.gif" /> <img src="titlebar.gif" />

Image alt attributes are mandatoryImage alt attributes are mandatory

alt="title"

XHTML vs. HTMLXHTML vs. HTML Scripts and CSS must be escapedScripts and CSS must be escaped

<script language="JavaScript" > <!–

document.write ('Hello World!'); //-->

</script>

<style >



</style>

language="javascript" /*<![CDATA[*/

/*]]>*/ createElementNS

type=“text/css”

/*<![CDATA[*/

/*]]>*/


Some elements may not be nestedSome elements may not be nested

ElementElement Cannot contain…Cannot contain…

aa aa

prepre big, img, object, small, sub, supbig, img, object, small, sub, sup

buttonbutton button, fieldset, form, iframe, input, button, fieldset, form, iframe, input, isindex, label, select, textareaisindex, label, select, textarea

labellabel labellabel

formform formform

When to convertWhen to convert

When you want pages to be easily viewed over a When you want pages to be easily viewed over a nontraditional Internet-capable device, such as a PDA nontraditional Internet-capable device, such as a PDA or Web-enabled telephone.or Web-enabled telephone.

When you plan to work with XML in the futureWhen you plan to work with XML in the future

When it is important your site to be current with the When it is important your site to be current with the most recent W3C standards.most recent W3C standards.

When you will need to convert your documents to When you will need to convert your documents to another format.another format.

ExerciseExercise

Change this HTML into an XHTML Change this HTML into an XHTML document conforming to the W3C’s strict document conforming to the W3C’s strict standard. Validate your page using the standard. Validate your page using the validator available at validator available at http://validator.w3.org/ http://validator.w3.org/

<html> <head> <title> Convert html to XHTML </head> <body text=blue> <h1> <center> XHTML page </center> </h1> <p><b> It is important your site to be current with the most recent W3C standards.It is important your site to be current with the most recent W3C standards.</p></b> <u>Welcome</u> to my <b>page</b>.<br> I hope that you <i>enjoy</i> your stay. <p> <font color=#9900FF face=Arial size=+2> XHTML is similar to HTML </font> </p> <a href=http://validator.w3.org/> Validator </a> </body></html>

XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and...

Documents

Transcript of XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and...