Chapter 01

395 views
356 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
395
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Element -- opening tag, closing tag and all of the contents in between
  • Element -- opening tag, closing tag and all of the contents in between
  • Element -- opening tag, closing tag and all of the contents in between
  • Element -- opening tag, closing tag and all of the contents in between
  • Element -- opening tag, closing tag and all of the contents in between
  • Chapter 01

    1. 1. Chapter 1 Rethinking HTML for CSS Source: CSS | The Missing Manual Copyright 2009
    2. 2. HTML Past <ul><li><TABLE> tag intended to display spreadsheet-like data </li></ul><ul><ul><li>research results </li></ul></ul><ul><ul><li>train schedules </li></ul></ul><ul><ul><li>etc. </li></ul></ul><ul><li><TABLE> tag used inappropriately to provide grid-like structure to a Web page </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    3. 3. HTML Present <ul><li>CSS lets HTML go back to doing what it does best – structure content, not page layout </li></ul><ul><ul><li>use HTML to organize content </li></ul></ul><ul><ul><li>use CSS to make that content look great </li></ul></ul><ul><li>Turning point – 2003 </li></ul><ul><ul><li>Jeffrey Zeldman ( www.zeldman.com ) </li></ul></ul><ul><ul><li>Web Standards </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    4. 4. Think Structure <ul><li>HTML adds meaning to text – semantic meaning </li></ul><ul><ul><li><h1> implies page heading </li></ul></ul><ul><ul><li><p> implies a paragraph of text </li></ul></ul><ul><ul><li><table> implies a spreadsheet of data </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    5. 5. Two New HTML Tags <ul><li>Two generic tags that let you provide “handles” to attach CSS styles to different elements in a page </li></ul><ul><ul><li><div> </li></ul></ul><ul><ul><li><span> </li></ul></ul><ul><li>What are “ elements ”? </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    6. 6. HTML Tags to Forget <ul><li><FONT> used for the display of text </li></ul><ul><li><B> and <I> used to make text bold and italic </li></ul><ul><ul><li>use <strong> and <em> instead </li></ul></ul><ul><li><TABLE> tag for page layout </li></ul><ul><li><BODY> tag attributes </li></ul><ul><ul><li>background , bgcolor , text , link , alink , vlink </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    7. 7. Tips to Guide Your Way <ul><li>Use only one <h1> tag per page </li></ul><ul><li>Use headings (<h2>, <h3>, etc.) to indicate the relative importance of text </li></ul><ul><li>Close all tags, especially single-sided tags </li></ul><ul><ul><li><br />, <img />, <link /> </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    8. 8. Importance of the Doctype <ul><li>Document Type Definition (DTD) </li></ul><ul><ul><li>an XML document that explains what tags, attributes and values are valid for a particular type of HTML </li></ul></ul><ul><ul><li>mistyping the doctype throws browsers in to “ quirks mode ”, a parallel universe where the browser thinks the time is 1999. </li></ul></ul><ul><ul><ul><li>www.quirksmode.org </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1
    9. 9. Importance of the Doctype <ul><li>XHTML Strict Doctype disallows once-popular properties like the link’s target property </li></ul><ul><ul><li><a target=“_blank”> triggers the opening of a new window or tab when clicking a link </li></ul></ul><ul><li>Personal choice: XHTML transitional </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 1

    ×