Transcript Powerpoint

TABLES IN EXCEL
MORE CSS FORMATTING
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
Lessons from assignments

RDT: Read the Docs
 Assignment
(it’s a checklist!)
 101 Commandments

Do not write fragile code
 Can

Nothing extra
 If

you change the window size and it still look good?
deleting a CSS entry doesn’t change things, delete it!
Validate using URI
 Autocheck
it is
will tell you if there is a problem, not what
Excel tables
to the web
Getting Tables to the Web
 Tableizer
No
classes
Not
formatted
We
have had Mac problems
 HTML
Formatter
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
DOM:
Document Object
Model
What are trees?
Or more like this…
A Better Example
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
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
Descendents
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
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
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
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
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
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
Siblings
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
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
HTML Creates a tree: DOM
HTML
tags create a tree
Called the DOM
(Document Object Model)
Formatting
it obvious!
correctly makes
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
HTML
body
header
h1
ul
div
div
section
p
footer
table
p
ul
li
li
figure
child
li
li
p
p
td
td
td
tr
td
tr
td
siblings
td
div
Using the DOM
CSS
will allow us to format
selectively based on the tree
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
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
Child pseudo elements

W3schools

first-child, last-child, nth-child(), nth-last-child()

() options:
 Number
 Even-odd
 Formula
 Every
 4,

3rd would be 3n+0
7, 11 would be 3n+1
nth-last-child counts from end