1. DOM: Document Object Model

2. What are trees?

3. Or more like this…

4. A Better Example Sam & Bessie Al & JewelPaul & DawnLeo & Bea Peter & Cate Mark & Dina Abby & Phil Tess & John Barb & Ray Kari & Hal Dan & Cora Stu & Chi Sue LeahLoriMaryJenAndyAlNoahBenJake AmySaraMoeAndyDiLady

5. Descendents Sam & Bessie Al & JewelPaul & DawnLeo & Bea Peter & Cate Mark & Dina Abby & Phil Tess & John Barb & Ray Kari & Hal Dan & Cora Stu & Chi Sue LeahLoriMaryJenAndyAlNoahBenJake AmySaraMoeAndyDiLady

6. Children Sam & Bessie Al & JewelPaul & DawnLeo & Bea Peter & Cate Mark & Dina Abby & Phil Tess & John Barb & Ray Kari & Hal Dan & Cora Stu & Chi Sue LeahLoriMaryJenAndyAlNoahBenJake AmySaraMoeAndyDiLady

7. Children Sam & Bessie Al & JewelPaul & DawnLeo & Bea Peter & Cate Mark & Dina Abby & Phil Tess & John Barb & Ray Kari & Hal Dan & Cora Stu & Chi Sue LeahLoriMaryJenAndyNoahBenJake AmySaraMoeAndyDiLady Al

8. Siblings Sam & Bessie Al & JewelPaul & DawnLeo & Bea Peter & Cate Mark & Dina Abby & Phil Tess & John Barb & Ray Kari & Hal Dan & Cora Stu & Chi Sue LeahLoriMaryJenAndy Al NoahBenJake AmySaraMoeAndyDiLady

9. HTML Creates a tree: DOM  HTML tags create a tree  Called the DOM (Document Object Model)

10. HTML body divfooterheader h1 sectionulptablediv p figure ul lip tr plidivli td

11. HTML body divfooterheader h1 sectionulptablediv p figure ul lip tr plidivli td siblings child

12. Using the DOM  CSS will allow us to format selectively based on the tree

13. CSS Selectors  context tag {  Applies to any tag inside context  Space is a descendant selector  context > tag {  Applies to any tag directly inside context  > is a child selector  Context + tag {  Applies only to a tag that DIRECTLY FOLLOWS a context  + is an adjacent sibling selector

14. HTML body divfooterheader h1 sectionulptablediv p figure ul lip tr plidivli td

15. Child pseudo elements  W3schools W3schools  first-child, last-child, nth-child(), nth-last-child()  () options:  Number  Even-odd  Formula  Every 3 rd would be 3n+0  4, 7, 11 would be 3n+1  nth-last-child counts from end nth-last-child

16. CSS Inheritence  If you have 2 entries in your CSS: div {} div.class {}  BOTH are applied to  Taking advantage: “all my divs will have a border”  Problems: widths can conflict and rules aren’t obvious

17. Excel tables to the web

18. Getting Tables to the Web  Tableizer Tableizer  No classes  Not formatted  We have had Mac problems  HTML Formatter

19. Getting Tables to the Web  Mr. Data Converter Mr. Data Converter  Sets up classes  Formatted  Caveat: it requires that there be a value in the upper left cell