1. TABLES IN EXCEL MORE CSS FORMATTING

2. GRADING and OFFICE HOURS
Remember that all items in the checklist will be checked
Validation and formatting are different
Regrading is for our mistakes, not an opportunity for you to fix mistakes
Remember to check the calendar for Saturday office hours
Extra credit assignments

3. Lessons from assignments
RDT: Read the Docs
Assignment (it’s a checklist!)
101 Commandments
Do not write fragile code
Can you change the window size and it still look good?
Nothing extra
If deleting a CSS entry doesn’t change things, delete it!
Validate using URI
Autocheck will tell you if there is a problem, not what it is

4. Excel tables to the web

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

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

7. DOM: Document Object Model

8. What are trees?

9. Or more like this…

10. A Better Example Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea
Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

11. Descendents Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

12. Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

13. Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

14. Siblings Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

15. HTML Creates a tree: DOM
HTML tags create a tree
Called the DOM
(Document Object Model)
Formatting correctly makes it obvious!

16. HTML body div footer header h1 ul div section p table p ul figure litr tr li li
div td td td td td td

17. HTML body div footer header h1 ul div section p table p ul figure
child li li p p tr tr li li
div td td td td td td
siblings

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

19. CSS Selectors context tag { context > tag { 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

20. HTML body div footer header h1 ul div section p table p ul figure litr tr li li
div td td td td td td

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