XHTML Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
XHTML basics
-
Upload
todd-barber -
Category
Technology
-
view
548 -
download
1
description
Transcript of XHTML basics
![Page 1: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/1.jpg)
A Reformulation of HTML 4 in XML 1.0
(Yes, I am a nerd)
![Page 2: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/2.jpg)
XHTML
What is it? Why use it? How do I use it correctly?
![Page 3: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/3.jpg)
What is XHTML?
Extensible HyperText Markup Language
Combination of HTML and XML The elements from HTML The syntax from XML
![Page 4: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/4.jpg)
Why should I care?
Based on industry standards Cross browser support Validated and proper code Will run properly on all XML
devices
![Page 5: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/5.jpg)
Basic Structure
One root element per document Properly nested elements Closed elements lowercase elements More syntax
![Page 6: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/6.jpg)
One root element The basic mandatory structure<!DOCTYPE – more in a second><html>
<head><title></title>
</head><body></body>
</html>
![Page 7: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/7.jpg)
Properly Nested BAD<p>
This <strong><em>is</strong></em> fun.
</p>
HAPPY FUN TIME<p>
This <strong><em>is </em></strong>fun.
</p>
![Page 8: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/8.jpg)
Closed Elements BAD<p>Paragraph 1<p>Paragraph 2<br><hr><img
src=“pic.jpg”>
HAPPY FUN TIME<p>Paragraph
1</p><p>Paragraph
2</p><br /><hr /><img src=“pic.jpg”
/>
![Page 9: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/9.jpg)
lowercase elements BAD<P> another
paragraphwith an image
<Img Src=“pic.jpg” />
</p>
HAPPY FUN TIME<p> another
paragraphwith an image
<img src=“pic.jpg” />
</p>
![Page 10: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/10.jpg)
HAPPY FUN TIME<table width=“100%”></table>
<input checked=“checked” />
<option selected=“selected”>
</option>
BAD<table WIDTH=100%></table>
<input checked><option SELECTED></option>
More syntax Attribute names must be lowercase, their
values quoted, and no “minimization”
![Page 11: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/11.jpg)
DOCTYPE
Only really have to worry about this if you create the page from scratch
Don’t really worry about what everything means except for…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 12: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/12.jpg)
Now What? XHTML Cheat Sheet v1.03
-http://floele.flyspray.org/htmlcheatsheet.pdf
Official HTML 4 page – http://www.w3.org/TR/html4/
Official list of elements (HTML 4) - http://www.w3.org/TR/html4/index/elements.html
Official list of attributes (HTML 4) - http://www.w3.org/TR/html4/index/attributes.html
Official XHTML 1 page – http://www.w3.org/TR/xhtml1/
![Page 13: XHTML basics](https://reader035.fdocuments.net/reader035/viewer/2022062617/54bb62094a795979098b45a4/html5/thumbnails/13.jpg)
Who am I?
C. Todd Barber Webmaster University of Tennessee Health Science
Center Memphis, TN 38163
Also at http://ctbarber.com http://twitter.com/ctbarber