xhtml presented by kelly(geun-young) yim. learning objectives list the difference between xhtml and...
TRANSCRIPT
![Page 1: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/1.jpg)
XHTMLXHTML
Presented by Kelly(Geun-young) YimPresented by Kelly(Geun-young) Yim
![Page 2: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/2.jpg)
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
![Page 3: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/3.jpg)
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.
![Page 4: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/4.jpg)
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
![Page 5: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/5.jpg)
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.
![Page 6: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/6.jpg)
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">
![Page 7: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/7.jpg)
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
![Page 8: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/8.jpg)
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
![Page 9: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/9.jpg)
XHTML vs. HTMLXHTML vs. HTML
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>
![Page 10: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/10.jpg)
XHTML vs. HTMLXHTML vs. HTML
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
![Page 11: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/11.jpg)
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
![Page 12: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/12.jpg)
XHTML vs. HTMLXHTML vs. HTML
<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
![Page 13: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/13.jpg)
XHTML vs. HTMLXHTML vs. HTML
<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
“ ” “ ”
![Page 14: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/14.jpg)
XHTML vs. HTMLXHTML vs. HTML
<form> <form>
<input checked ... /> <input checked ... />
<input disabled ... /> <input disabled ... />
</form> </form>
Attributes cannot be minimizedAttributes cannot be minimized
=“checked”…/>
=“disabled” …/>
![Page 15: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/15.jpg)
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
![Page 16: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/16.jpg)
XHTML vs. HTMLXHTML vs. HTML
<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” />
![Page 17: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/17.jpg)
XHTML vs. HTMLXHTML vs. HTML
<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;
![Page 18: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/18.jpg)
XHTML vs. HTMLXHTML vs. HTML
<img src="titlebar.gif" /> <img src="titlebar.gif" />
Image alt attributes are mandatoryImage alt attributes are mandatory
alt="title"
![Page 19: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/19.jpg)
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 >
<!-- .SpecialClass { color: #000000; }
-->
</style>
language="javascript" /*<![CDATA[*/
/*]]>*/ createElementNS
type=“text/css”
/*<![CDATA[*/
/*]]>*/
![Page 20: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/20.jpg)
XHTML vs. HTMLXHTML vs. HTML
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
![Page 21: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/21.jpg)
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.
![Page 22: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/22.jpg)
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/
![Page 23: XHTML Presented by Kelly(Geun-young) Yim. Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e7d5503460f94b808bc/html5/thumbnails/23.jpg)
<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>