XHTML and CSS

1,567 views

Published on

Follow the standards and your work will be much simpler, more consistent, and your results more reliable

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,567
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XHTML and CSS

  1. 1. XHTML and CSS Rick Ells UW Technology http://staff.washington.edu/rells/
  2. 2. Using HTML/XHTML <ul><li>XHTML is relatively simple. You do most of your work with about twenty tags. </li></ul><ul><li>XHTML is orderly and structured </li></ul><ul><li>Good references and tutorial sites are available </li></ul><ul><li>Follow the standards and your work will be much simpler, more consistent, and your results more reliable </li></ul><ul><ul><li>Plus your co-workers will like you more </li></ul></ul>
  3. 3. Device Independence <ul><li>Your audience may view your site with many different devices and browser types. </li></ul>Urinary Tract
  4. 4. The Browser <ul><li>The browser is not print! </li></ul>Urinary Tract
  5. 5. The Browser Is Not Print <ul><li>No fixed page size </li></ul><ul><li>No fixed page length </li></ul><ul><li>User can change the font size </li></ul><ul><li>User can link to her/his own local style sheet </li></ul><ul><li>Screen size can be tiny or huge </li></ul>
  6. 6. The Adjustable Document Urinary Tract
  7. 7. The Birth of HTML <ul><li>Created by Tim Berners-Lee at CERN </li></ul><ul><li>Open standard developed under supervision of the World Wide Web Consortium ( www.w3.org ) </li></ul><ul><ul><li>Works to ensure the full potential of the Web for shared, integrated functionality is realized </li></ul></ul>
  8. 8. The History of HTML/XHTML <ul><li>1992 – HTML first defined </li></ul><ul><li>1994 – HTML 2.0 </li></ul><ul><li>1995 – Netscape specific non-standard HTML </li></ul><ul><li>1996 – HTML 3.2, compromise version </li></ul><ul><li>1997 – HTML 4.0, separates content from presentation </li></ul><ul><li>1998 – XML standard for writing Web languages </li></ul><ul><li>2000 – XHTML 1.0, XML compliant HTML </li></ul><ul><li>2002 – XHTML 2.0 </li></ul>
  9. 9. Problems With HTML <ul><li>Competing versions of browsers introduced features beyond the standards </li></ul><ul><li>Inconsistent implementations of display engines and scripting </li></ul><ul><li>Content and presentation mixed together </li></ul><ul><ul><li>Layout often done with tables </li></ul></ul><ul><ul><li>Each element had many presentation attributes, resulting in laborious maintenance </li></ul></ul><ul><li>The “Slop Code Era” </li></ul>
  10. 10. XHTML <ul><li>XHTML is a version of HTML modified to conform to the XML standard </li></ul><ul><li>Designed to separate content from presentation </li></ul><ul><ul><li>Content in XHTML </li></ul></ul><ul><ul><li>Presentation controlled by Cascading Style Sheets (CSS) </li></ul></ul><ul><li>Extensible – Additional elements can be defined </li></ul><ul><li>XML Compatible – Other XML based languages can be embedded in XHTML documents </li></ul><ul><li>Like a programming language </li></ul><ul><ul><li>Specific syntax to use </li></ul></ul><ul><ul><li>Validators help you get it right </li></ul></ul>
  11. 11. XHTML Differences <ul><li>Case is significant </li></ul><ul><li>All elements must have begin tags and end tags <p>Hello</p> </li></ul><ul><li>Empty elements contain their own end tag <br /> </li></ul><ul><li>Attribute values must be enclosed in quotation marks </li></ul><ul><li>More specfics available at http://www.w3.org/TR/xhtml1/#diffs </li></ul>
  12. 12. A Simple XHTML File <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><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> </li></ul><ul><li>My Home Page </li></ul><ul><li></title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> My Home Page </h1> </li></ul><ul><li><p> </li></ul><ul><li>Welcome to my home page </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  13. 13. Hierarchical Structure <ul><li>Well formed xhtml forms a hierarchy </li></ul>
  14. 14. Content Types <ul><li>Documents are made up of logical types of content. </li></ul>
  15. 15. Semantic Structure <ul><li>Content of the same type usually is formatted to look the same. </li></ul>
  16. 16. Semantic Markup <ul><li>HTML markup is based on logical content types </li></ul>
  17. 17. Hierarchy <ul><li>The resulting hierarchy </li></ul>
  18. 18. The DOCTYPE Statement <ul><li>Declares the specific version of HTML or XHTML being used on the page </li></ul><ul><li>Used by the browser to decide how to process the page </li></ul><ul><li>Three types </li></ul><ul><ul><li>Transitional - Forgiving </li></ul></ul><ul><ul><li>Strict – Requires adherence to standards </li></ul></ul><ul><ul><li>Frameset – Use if page has frames </li></ul></ul><ul><li>Always first in file </li></ul>
  19. 19. Strict DOCTYPE <ul><li>Enter exactly as below </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN“ </li></ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>Using Strict encourages standards based coding </li></ul><ul><ul><li>Validators will flag logical errors in your methods </li></ul></ul><ul><ul><li>Your CSS will work better and more predictably </li></ul></ul>
  20. 20. Elements <ul><li>Consist of three parts </li></ul><ul><ul><li>Begin tag, which can contain attributes </li></ul></ul><ul><ul><li>Contents </li></ul></ul><ul><ul><li>End tag </li></ul></ul><ul><li>Example: </li></ul><ul><li><p id=“intro”>Welcome</p> </li></ul><ul><li>W3schools specifications for <p> http://www.w3schools.com/tags/tag_p.asp </li></ul>
  21. 21. Attributes <ul><li>Always only used in the element begin tag </li></ul><ul><li>Three types </li></ul><ul><ul><li>Optional attributes: Varies with element type </li></ul></ul><ul><ul><li>Standard attributes: id, class, title, style, dir, lang, xml:lang </li></ul></ul><ul><ul><li>Event attributes: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup </li></ul></ul><ul><ul><ul><li>Used in scripting </li></ul></ul></ul>
  22. 22. Empty Elements <ul><li>Some elements have no content and therefore also have no end tag </li></ul><ul><ul><li><img src=“photo.jpg” /> </li></ul></ul><ul><ul><li><br /> </li></ul></ul><ul><ul><li><hr /> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“main.css&quot; /> </li></ul></ul><ul><li>In XHTML, which requires end tags on all elements, a single tag represents both the begin and end tag </li></ul>
  23. 23. <h1>, <h2>, <h3>, etc. <ul><li>Headings on the page </li></ul><ul><li>Represent the main topic, subtopics, subsubtopics, etc. of the page </li></ul><ul><li>Important to use they in a logical manner, which greatly helps assistive technology like voice browsers present the page content intelligibly </li></ul>
  24. 24. <p> <ul><li>Paragraph </li></ul><ul><li>Important for presentation control to put text in an element. When in doubt, put text in a paragraph </li></ul><ul><li>Blockquotes (<blockquote>) except they have wider left and right margins </li></ul>
  25. 25. Lists <ul><li>Unordered lists (bulleted lists) </li></ul><ul><li><ul> </li></ul><ul><li><li>One</li> </li></ul><ul><li><li>Two</li> </li></ul><ul><li></ul> </li></ul><ul><li>Ordered lists (numbered lists) </li></ul><ul><li><ol> </li></ul><ul><li><li>One</li> </li></ul><ul><li><li>Two</li> </li></ul><ul><li></ol> </li></ul>
  26. 26. Text Markup <ul><li>Bolding </li></ul><ul><ul><li><b>text</b> </li></ul></ul><ul><ul><li><strong>text</strong> </li></ul></ul><ul><li>Italics </li></ul><ul><ul><li><i>text</i> </li></ul></ul><ul><ul><li><em>text</em> </li></ul></ul><ul><li>Other </li></ul><ul><ul><li><sub>text</sub> subscript </li></ul></ul><ul><ul><li><sup>text</sup> superscript </li></ul></ul><ul><ul><li><del>text</del> deleted text </li></ul></ul>
  27. 27. Tables <ul><li><table border cellspacing=&quot;5&quot; cellpadding=&quot;10&quot;> </li></ul><ul><li><caption>People on the team</caption> </li></ul><ul><li><tr> </li></ul><ul><li><th>Name</th> </li></ul><ul><li><th>Position</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Mary</td> </li></ul><ul><li><td>Analyst</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>John</td> </li></ul><ul><li><td>Technician</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  28. 28. Graphics <ul><li>Graphics are placed by using an img element </li></ul><ul><li>The alt attribute provides alternative text describing the graphic in case the graphic itself cannot be shown or the user cannot see the graphic </li></ul><ul><li><img src=&quot;picture.gif&quot; alt=&quot;Suzzallo&quot;> </li></ul>
  29. 29. Anchors <ul><li>Anchors can link your page to any file on the Web </li></ul><a href=&quot;http://www.washington.edu/&quot;> University of Washington </a>
  30. 30. Divs <ul><li>Divs enclose a set of elements <div style=“text-align: center;”> <h2> News</h2> <p><a href=“budget.html”>Budget</a></p> <p><a href=“invest.html”>Investment</a></p> </div> </li></ul>
  31. 31. Spans <ul><li>Spans enclose objects (text, graphics) within an element <p>Call me Ishmael. Some years ago — <span style=“font-style: italic;”>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore, </li></ul>
  32. 32. Cascading Style Sheets <ul><li>Are used to control how elements are presented in the Web page </li></ul><ul><li>Use a different syntax that HTML/XHTML </li></ul><ul><li>Work with the common visual browsers (Internet Explorer, FireFox, Opera) </li></ul><ul><li>Used properly, can great simplify visual design, site management and content maintenance </li></ul>
  33. 33. A Style <ul><li>Selector  Property Value  </li></ul><ul><li>p { font-family: times; } </li></ul><ul><li>Note the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;) </li></ul>
  34. 34. Using CSS <ul><li>Styles can be set in a stylesheet, in a style element in the head or in a style attribute </li></ul>
  35. 35. Selectors <ul><li>Simple selectors p { color: blue } h1, h2, h3, h4 { font-style: italic; } </li></ul><ul><li>Contextual selectors ul li { font-weight: bold; } #main img { border: solid black 5px; } p.intro { font-family: verdana, sans-serif;} </li></ul>
  36. 36. The Box Model <ul><li>Each element has padding, border, and margin </li></ul>
  37. 37. Vertical Margins <ul><li>The larger of the two vertical margins will determine the distance between elements </li></ul>
  38. 38. Visual Formatting Model <ul><li>Pages are built as a series of blocks stacked from the top down </li></ul>
  39. 39. Controlling Layout <ul><li>Styles can control size and placement of elements </li></ul><ul><li>Example: #nav { width: 12em; float: left; } #news { width: 12em; float: right; } #main { margin: 1em 13em 1em 13em; </li></ul>
  40. 40. Nav Div Float Left
  41. 41. Nav Div Float Right
  42. 42. Nav Across Top <ul><li>Items in the Nav bar are anchors within a div </li></ul>
  43. 43. HTML-Kit <ul><li>HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML </li></ul>
  44. 44. HTML-Kit Has Tidy <ul><li>Press F9 and your XHTML is validated and tidied for easy reading </li></ul>
  45. 45. Resources <ul><li>HTML-Kit editor – http://chami.com/ </li></ul><ul><li>Amaya editor – http://www.w3c.org/Amaya </li></ul><ul><li>W3schools XHTML and CSS tutorials – http://www.w3schools.com/ </li></ul><ul><li>Web Head Start tutorials – http://www.webheadstart.org/ </li></ul><ul><li>Tidy Web Interface - http://www.washington.edu/webinfo/tidy.cgi </li></ul><ul><li>CSS Validator - http://jigsaw.w3.org/css-validator/ </li></ul><ul><li>Dave Raggett XHTML and CSS tutorials - http://www.w3.org/MarkUp/Guide/Overview.html </li></ul><ul><li>Web Accessibility in Mind (WebAIM) - http://www.webaim.org/ </li></ul><ul><li>Color contrast analyzer - http://www.visionaustralia.org.au/info.aspx?page=628 </li></ul><ul><li>Stylin’ With CSS, A Designer’s Guide , Second Edition by Charles Wyke-Smith </li></ul>

×