HTML & CSS: Chapter 07

Chapter 7
Improving Web Design
with New Page Layouts
Web Design with
HTML5 & CSS3
8th Edition

• Explain when to use article, aside, and section
elements
• Define figure and figcaption elements
• Redesign wireframes for tablet and desktop
viewports
• Explain and use the opacity property
• Describe and use the text-shadow property
Chapter 7: Improving Web Design with New Page Layouts 2
Chapter Objectives

• Add a banner image to a website
• Insert and style a figure element
• Insert and style a section element
• Insert and style an article element
• Insert and style an aside element
• Create a three-column layout
• Describe and use the overflow property
Chapter Objectives (continued)

Using HTML5 Semantic Elements

• The article element, as described by the W3C, is
– a complete, self-contained composition in a
document, page, application, or site
– independently distributable or reusable, e.g. in
syndication
• The start and end tags of article elements are
<article> and </article>
• Content placed between these tags will appear on
a webpage as part of the article element
Article Element

• Articles may be nested within other HTML
elements, such as the main element, the section
element, or other article elements
• Articles are commonly used to contain news
articles, blog and forum posts, or comments
Article Element (continued 1)

Article Element (continued 2)

• The aside element is used as a sidebar that
contains additional information about a particular
item mentioned within another element
• For example, if an article on a webpage contains a
recipe and a list of ingredients, one could include
an aside element with more information about
one of the key ingredients, such as its origin or
where to purchase it
• It can be nested within article elements or
within main or section elements
Aside Element

Aside Element (continued)

• The section element, as described by the W3C, is
an element that
– represents a generic section of a document or
application. Here, a section is a thematic grouping of
content. The theme of each section should be
identified as a child of the section element
– is not a generic container element. A general rule is
that the section element is appropriate only if the
element’s contents would be listed explicitly in the
document’s outline
Section Element

• The following is an example of a several section
elements nested within an article element
<article>
<h1>Tutorials: Cooking Basics</h1>
<p>Watch our tutorials to learn
the basics of good cooking.</p>
<section>
<h1>Tutorial 1</h1>
<p>Assembling basic kitchen tools.</p>
</section>
…
</article>
Section Element (continued 1)

Section Element (continued 2)

• The figure element is used to group content, such
as illustrations, diagrams, and photos
• According to the W3C, the figure element
represents some flow content that is self-
contained and is typically referenced as a single
unit from the main flow of the document
• A figure element can contain one or more img
elements
Figure and Figure Caption
Elements

• The figure element may contain an optional
figure caption element, which is used to provide a
caption for the figure element
• The start and end tags of the figure caption
element are <figcaption> and </figcaption>
Elements (continued 1)

• The following is an example of the figure
element and the figure caption element
<figure>
<figcaption>New York City
Highlights</figcaption>
<img src="ny1.jpg" alt="Statue of
Liberty">
<img src="ny2.jpg" alt="Central Park">
<img src="ny3.jpg" alt="New York at
Night">
</figure>

• A banner is a graphic that spans the width of a
webpage and usually brands a website, often by
displaying its name or an identifying image
• The CSS3 opacity property specifies the
transparency of an element
• The text-shadow property applies a shadow to
text
– h-shadow value – designates the horizontal position of
the shadow
– v-shadow value – designates the vertical position of
the shadow
Website Layout

• An example of a style rule that applies a text
shadow to an element is shown below
h1 {
text-shadow: 0.2em 0.1em #292933;
}
In this example, a text shadow with a horizontal
position of 0.2em, a vertical position of 0.1em,
and a dark gray color is applied to an h1 element
Website Layout (continued)

Redesigning the Home Page
19Chapter 7: Improving Web Design with New Page Layouts

To Add a New div Element to the
Home Page

To Add a New div Element to the
Home Page (continued)

To Add a figure Element
to the Home Page

To Add a figure Element
to the Home Page (continued)

To Add New Style Rules
to the Tablet Viewport

To Add Section Elements
to the About Us Page

To Style the About Us Page
for a Tablet Viewport

To Style the About Us Page
for a Tablet Viewport (continued)

Creating the Nutrition Page
28Chapter 7: Improving Web Design with New Page Layouts

• Overflow property – It is used to specify how to
manage content when it “spills over” into another
element
Creating the Nutrition Page
(continued)

To Create the Nutrition Page

To Add article and aside
Elements to the Nutrition Page

To Add article and aside Elements
to the Nutrition Page (continued 1)

To Add article and aside Elements
to the Nutrition Page (continued 2)

To Create a Three-Column Layout
for the Nutrition Page in a Tablet
Viewport

To Create a Three-Column Layout
for the Nutrition Page in a Tablet
Viewport (continued)

• The main element is not in the correct area in
Figure 7–83
• The float property used within the article style
rule displaces the main element to the banner
image area
• To correct this issue, apply an overflow property
with a value of auto to the main style rule
contained within the tablet media query
– Use overflow: auto; to add a property and value
To Apply the Overflow Property
to the main Element Style Rule

To Apply the Overflow Property to the
main Element Style Rule (continued)

To Style the article Element
for the Nutrition Page

To Style the aside Element
for the Nutrition Page

To Style the aside Element
for the Nutrition Page (continued)

Chapter 7 Complete
HTML5 & CSS3
8th Edition

HTML & CSS: Chapter 07

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to HTML & CSS: Chapter 07 (20)

More from Steve Guinan (20)

Recently uploaded (20)

HTML & CSS: Chapter 07