Html xhtml css

967 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
967
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html xhtml css

  1. 2. <ul><li>Your audience may view your site with many different devices and browser types. </li></ul>
  2. 3. <ul><li>The browser is not print! </li></ul>
  3. 4. <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>
  4. 6. <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.w3c.org ) </li></ul><ul><ul><li>Works to ensure the full potential of the Web for shared, integrated functionality is realized </li></ul></ul>
  5. 7. <ul><li>HTML files </li></ul><ul><ul><li>Text files </li></ul></ul><ul><ul><li>Contain mark-up tags </li></ul></ul><ul><ul><li>Tags direct how page is to be displayed by browser </li></ul></ul><ul><ul><li>Can be created from a simple text editor </li></ul></ul><ul><ul><li>File extension .htm or .html </li></ul></ul>
  6. 8. <ul><li>HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: </li></ul><ul><li><h1>This is a heading</h1> </li></ul><ul><li><p>This is a paragraph.</p> </li></ul><ul><li>When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process </li></ul>
  7. 9. <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>
  8. 10. <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>
  9. 11. <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>
  10. 12. <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>
  11. 13. <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>
  12. 14. <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>
  13. 15. <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>
  14. 16. <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>

×