A Reformulation of HTML 4 in XML 1.0 (Yes, I am a nerd)
XHTML <ul><li>What is it? </li></ul><ul><li>Why use it? </li></ul><ul><li>How do I use it correctly? </li></ul>
What is XHTML? <ul><li>Extensible HyperText Markup Language </li></ul><ul><li>Combination of HTML and XML </li></ul><ul><l...
Why should I care? <ul><li>Based on industry standards </li></ul><ul><li>Cross browser support  </li></ul><ul><li>Validate...
Basic Structure <ul><li>One root element per document  </li></ul><ul><li>Properly nested elements </li></ul><ul><li>Closed...
One root element <ul><li>The basic mandatory structure </li></ul><ul><li><!DOCTYPE – more in a second> </li></ul><ul><li><...
Properly Nested <ul><li>BAD </li></ul><ul><li><p> </li></ul><ul><li>This <strong><em> </li></ul><ul><li>is</strong></em>  ...
Closed Elements <ul><li>BAD </li></ul><ul><li><p>Paragraph 1 </li></ul><ul><li><p>Paragraph 2 </li></ul><ul><li><br> </li>...
lowercase elements <ul><li>BAD </li></ul><ul><li><P> another paragraph </li></ul><ul><li>with an image  </li></ul><ul><li>...
<ul><li>BAD </li></ul><ul><li><table WIDTH=100%> </li></ul><ul><li></table> </li></ul><ul><li><input checked> </li></ul><u...
DOCTYPE <ul><li>Only really have to worry about this if you create the page from scratch </li></ul><ul><li>Don’t really wo...
Now What? <ul><li>XHTML Cheat Sheet v1.03 - http://floele.flyspray.org/htmlcheatsheet.pdf </li></ul><ul><li>Official HTML ...
Who am I? <ul><li>C. Todd Barber </li></ul><ul><ul><li>Webmaster </li></ul></ul><ul><ul><li>University of Tennessee Health...
Upcoming SlideShare
Loading in...5
×

XHTML basics

618

Published on

a very basic look at XHTML. Covers the basics of the structure not how to make a web page.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
618
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XHTML basics

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

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×