XHTML basics
-
Upload
todd-barber -
Category
Technology
-
view
464 -
download
0
description
Transcript of XHTML basics
![Page 1: XHTML basics](https://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/html5/thumbnails/1.jpg)
A Reformulation of HTML 4 in XML 1.0
(Yes, I am a nerd)
![Page 2: XHTML basics](https://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/html5/thumbnails/2.jpg)
XHTML
What is it? Why use it? How do I use it correctly?
![Page 3: XHTML basics](https://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/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://reader036.fdocuments.us/reader036/viewer/2022081414/54bb620a4a79596f098b45a3/html5/thumbnails/13.jpg)
Who am I?
C. Todd Barber Webmaster University of Tennessee Health Science
Center Memphis, TN 38163 http://www.utmem.edu
Also at http://ctbarber.com http://twitter.com/ctbarber