ChaptER 4 Organizing a Page’s Content with Lists, Figures, and Various Organizational Elements
one
two
three
one
two
three
Wind Disasters
Tornadoes
Hurricanes
Joplin, Missouri
Katrina
Tri-State
Andrew
Waco, Texas
Galveston
Noon Power Generation (positive) and Consumption (negative)
Component Description
Overall Size
Noon Power
Installed Cost
PV Solar Collectors
137 m2 panel area
+18 kW
$45,000
Immediate Consumption
274 m2 floor area
-5 kW
Chilled Water Storage
2.3 m diameter x 2.1 m high
-2 kW
$1000
Battery Storage
1.3 m x 1.0 m x 1.1 m high, 1250kg
+18 kW
$6000
Average Annual Global Temperatures
Year
Temp
Rank
Avg
Temp (°F)
2016
1
58.98
2015
2
58.77
2014
3
58.53
2013
5
58.37
2012
9
58.33
My Favorite Eras
Eras
Events
Mesozoic
251 to 65.5 mya
Evolutionary split between reptiles and dinosaurs
235 mya
South America breaks away from Africa
105 mya
Cenozoic
65.5 mya to today
Modern mammals appear
40 mya
Tool-making humanoids appear
2 mya
First Rolling Stones reunion tour
11,000 years ago
Grading Weights for Web Programming I
Help The first 3 columns show weights for the 3 homework assignments.
The next 2 columns show weights for the 2 exams.
The last column shows the weight for staying awake during class.
details
element, embedded
in a
caption
element
summary
element, embedded
in the
details
element
with the
table
element. That wasn’t always the case. In older versions of HTML, the
table
element was used not only for holding data, but also for layout. Consequently, many web devel-
opers have gotten used to using the
table
element for layout purposes. Knowing that it’s hard
to “teach an old dog new tricks,” the W3C realizes that this nonconforming practice will con-
tinue for the foreseeable future. The
role="presentation"
solution somewhat mitigates the
problem.
This section provided a brief introduction to the rather large field of web accessibility. If you’d
like additional details, check out the W3C’s accessibility page at https://www.w3.org/WAI/intro
/accessibility.php.
5.8 CSS display Property with Table Values In the previous section, we told you not to use the
table
element for layout tables, but if you do
so, you should use
role="presentation"
to avoid incurring the wrath of the W3C police. Now
it’s time to discuss how to implement layout tables the right way—using CSS rather than the
table
element. There are two main ways to implement layout tables with CSS. If you want the layout
boundaries to grow and shrink the way they do for an HTML
table
element, then use the CSS
display
property with table values. On the other hand, if you want the layout boundaries to be
fixed (no growing or shrinking), then use CSS position properties. In this section, we discuss the
first technique, using the CSS
display
property with table values, and in the next section, we dis-
cuss the second technique, using CSS position properties.
FIGUre 5.12B Source code for Grading Weights web page 188 Chapter 5 Tables and CSS Layout
Homework Assignments
Exams
Ability to
Stay Awake
1
2
3
1
2
10%
10%
10%
30%
36%
4%
...
Ancient Wonders of the World
Great Pyramid of Giza
Hanging Gardens of Babylon
Colossus of Parkville
Imprint Express - News From Park University
It's Snack Attack Friday. Students and staff are welcome to
enjoy corn dogs, buffalo wings, and other deep-fat-fried favorites
at the Thompson Center, October 22 from 10 pm to midnight.
On Saturday, September 16, Park's ACM Club sponsored a Habitat for
Humanity service project in Kansas City, Kansas. Said ACM President,
Niren Shakya, "Me, Josh, and Aiba poured the foundation and put up
the walls. We plan to finish the house next Saturday."
207 Review Questions
Bank Accounts
Account
Starting
Balance
Expenditures
Remaining
324014
$2,990.55
$550.55
$2,440.00
361102
$4,075.00
$0.00
$4,075.00
212 CHAPTER 5 Tables and CSS Layout
>
Park University's Clock Tower
Clock Tower Photograph |
Pledge Drive
Pledge Drive
The clock tower building is crumbling.
Park needs your support. Do it for the kids.
Send cash contributions to michael.loeffler@park.edu.
^ Back to the Top
Super Dad!
Displaying each image with the PNG file's natural
dimensions (width="150" height="150")
PNG Format
SVG Format
width="150" height="150">
width="150" height="150">
Displaying the same images as above, but with
expanded dimensions (width="400" height="250")
PNG Format
SVG Format
width="400" height="250">
width="400" height="250">
Joe Hartman School in the Dominican Republic
During this past spring break, Jordan participated in a service trip to
the Dominican Republic. One of the group's primary activities was
helping to build an annex to a grade school. In the above picture, you
can see Jordan with some of the kids. She's the one wearing sunglasses.
Local Renewable Energy, Cogeneration, and Energy Storage
Electricity from Photovoltaic Solar Collectors
Collectors"/>
target="_blank">Net-metering allows customers to sell locally
generated electric power to the utility at retail price. This makes
photovoltaic solar collectors cost-competitive in sunny regions
where there is no shading from
nearby trees or structures.
Support for Electric Utilities
Since times of maximum sunshine roughly correspond to times of
maximum electrical demand and power costs more at those times,
PV solar power is worth more than average electrical power. For
how progressive utilities like San Diego Gas and Electric benefit,
see "http://www.energybiz.com/magazine/article/325109/dawn-microgrids"
target="_blank">EnergyBiz article. Power transistors that make
conversions between DC and AC power can also provide power
conditioning services to regional
utilities.
so the image’s top aligns with the top of that paragraph, and its right side aligns with the right
side of that paragraph.
Note the
a
element links within the first
section
container. The “Net-metering”
a
element
links to a remote-site web page, and its
target="_blank"
attribute tells the browser to display
that remote-site page in a new browser window or in a new tab within the current browser win-
dow. The “no shading from nearby trees or structures” element refers to a different web page on
the current site—the web page described at the end of Chapter 3. Since this element does not
contain an explicit
target
attribute, the referenced web page replaces the web page from which
it was called.
FIGUre 6.21B contains the third and fourth
section
containers. Skim those sections on
your own and pay attention to the links. In particular, note its first section’s second paragraph,
which contains this link:
This link jumps to the
microgridPossibilities.html
web page and looks for an element
with
id="examples"
on that web page. It then positions that element at the top of the web
page.
The development of the Local Energy web page left a dangling loose end. Near the bottom
of Figure 6.21A, the reference in the tag,
, refers to an Electric
