xhtml n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
XHTML PowerPoint Presentation
Download Presentation
XHTML

Loading in 2 Seconds...

play fullscreen
1 / 23

XHTML - PowerPoint PPT Presentation


  • 252 Views
  • Uploaded on

XHTML. Presented by Kelly(Geun-young) Yim. Learning Objectives. List the difference between XHTML and HTML Create a valid, well-formed XHTML document Convert an existing HTML document to XHTML Decide when XHTML is more appropriate than HTML. What is XHTML?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'XHTML' - morgan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
xhtml

XHTML

Presented by Kelly(Geun-young) Yim

learning objectives
Learning Objectives
  • List the difference between XHTML and HTML
  • Create a valid, well-formed XHTML document
  • Convert an existing HTML document to XHTML
  • Decide when XHTML is more appropriate than HTML
what is xhtml
What is XHTML?
  • XHTML stands for eXtensible HyperText Markup Language
  • Two major puposes
    • XHTML is a stricter standard than HTML
    • XHTML allows for modularisation
  • Overall, XHTML is almost the same as HTML
  • However, XHTML code must be well-formed.
why xhtml
Why XHTML?
  • Most web pages were designed in HTML
  • However, HTML allows all sort of mistakes and bad formatting in its code.
  • XHTML is stricter and easier to parse
xhtml1
XHTML
  • An XHTML document must contain a DOCTYPE declaration and four elements
  • <!DOCTYPE ... >

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

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

preferred doctype
Preferred DOCTYPE
  • <!DOCTYPE html

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

xhtml2

Has to be the same

XHTML
  • XML Prolog

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

  • Language

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

xhtml vs html

Needs to be switched

XHTML vs. HTML
  • Documents must be well-formed
  • Incorrect

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

xhtml vs html1
XHTML vs. HTML
  • Elements must be closed

</p>

</li>

  • Incorrect

<p>Here is a list:

<ul>

<li>Item 1

<li>Item 2

<li>Item 3

</ul>

</li>

</li>

xhtml vs html2
XHTML vs. HTML
  • What if there are no closing tags in HTML

/

/

Make sure to put a space between

/

  • Incorrect

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

<hr >

<br >

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

common empty tags in html
Common empty tags in HTML
  • area
  • base
  • basefont
  • br
  • hr
  • img
  • input
  • link
  • meta
  • param
xhtml vs html3
XHTML vs. HTML
  • Tags must be lowercase

h1

  • Attribute names must be lowercase

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

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

class

xhtml vs html4
XHTML vs. HTML
  • Attribute values must be quoted

“ ”

“”

<table border= 1 width= 100% >

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

</table>

xhtml vs html5

…/>

=“checked”

…/>

=“disabled”

XHTML vs. HTML
  • Attributes cannot be minimized

<form>

<input checked ... />

<input disabled ... />

</form>

a complete list of minimized attributes
A complete list of minimized attributes
  • noresize
  • noshade
  • nowrap
  • readonly
  • selected
  • multiple
  • checked
  • compact
  • declare
  • defer
  • disabled
  • ismap
  • nohref
xhtml vs html6

id=“anchor”

>

id=“mybanner”

/>

XHTML vs. HTML
  • The name attribute is replaced with the id attribute

<a name="anchor">

<img src="banner.gif"

name="mybanner" />

</a>

xhtml vs html7
XHTML vs. HTML
  • Ampersands are not supported

amp;

amp;

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

Home & Garden</a>

xhtml vs html8
XHTML vs. HTML
  • Image alt attributes are mandatory

alt="title"

<img src="titlebar.gif" />

xhtml vs html9
XHTML vs. HTML
  • Scripts 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[*/

/*]]>*/

xhtml vs html10
XHTML vs. HTML
  • Some elements may not be nested
when to convert
When to convert
  • When you want pages to be easily viewed over a nontraditional Internet-capable device, such as a PDA or Web-enabled telephone.
  • When you plan to work with XML in the future
  • When it is important your site to be current with the most recent W3C standards.
  • When you will need to convert your documents to another format.
exercise
Exercise
  • Change this HTML into an XHTML document conforming to the W3C’s strict standard. Validate your page using the validator available at http://validator.w3.org/
slide23

<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.

</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>