WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 7
Key Concepts
Copyright © Terry Felke-Morris
1
LEARNING
OUTCOMES
In this chapter, you will learn how to ...
 Code relative hyperlinks to web pages in folders within a website
 Configure a hyperlink to a named fragment internal to a web page
 Configure images with CSS sprites
 Configure a three-column page layout using CSS
 Configure CSS for printing
 Configure CSS for mobile display
 Utilize CSS3 media queries to target mobile devices
Copyright © Terry Felke-Morris
2
MORE ON
RELATIVE LINKING
Relative links from the
home page:
index.html
<a href="contact.html">Contact</a>
<a href="products/collars.html">Collars</a>
<a href="../index.html">Home</a>
<a href="../services/bathing.html">Dog Bathing</a>
Copyright © Terry Felke-Morris
3
OPENING A LINK
IN A NEW BROWSER WINDOW
The target attribute on the anchor element opens
a link in a new browser window or new browser
tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
Copyright © Terry Felke-Morris
4
HTML LINKING TO FRAGMENT IDENTIFIERS
 A link to a part of a web page
 Also called named fragments, fragment ids
 Two components:
1. The element that identifies the named fragment of a
web page. This requires the id attribute.
<div id=“top”> ….. </div>
2. The anchor tag that links to the named fragment of a
web page. This uses the href attribute.
<a href=“#top”>Back to Top</a>
Note the use of the # in the anchor tag!
Copyright © Terry Felke-Morris
5
HTML5 BLOCK ANCHOR
Configure block display elements within a hyperlink
<a href="http://www.w3.org/TR/html-markup">
<h1>HTML5 Reference</h1>
<p>Bookmark this site for a handy HTML5 reference.</p>
</a>
Copyright © Terry Felke-Morris
6
TELEPHONE & TEXT MESSAGE
HYPERLINKS
Telephone Scheme
<a href="tel:888-555-5555">Call 888-555-5555</a>
Many mobile browsers will initiate a phone call when the
hyperlink is clicked.
SMS Scheme
<a href="sms:888-555-5555">Text 888-555-5555</a>
Many mobile browsers will initiate a text message to the phone
number when the hyperlink is clicked.
Copyright © Terry Felke-Morris
7
CSS SPRITES
Sprite
 an image file that contains multiple small graphics
 advantage: saves download time
Copyright © Terry Felke-Morris
8
CHECKPOINT
Describe a reason to organize the files in a website using
folders and subfolders.
2. Which attribute configures a hyperlink to open the file in a
new browser window or tab?
3. State an advantage of using CSS sprites in a website.
1.
Copyright © Terry Felke-Morris
THREE COLUMN
PAGE LAYOUT
A common web page layout consists of a header across
the top of the page with three columns below:
navigation, content, and sidebar.
Copyright © Terry Felke-Morris
10
THREE COLUMN
LAYOUT
 container sets default background
color, text color, font typeface, and a
minimum width
 Left-column navigation
 float: left; width:150px;
 Right-column content
 float: right; width: 200px;
 Center column
 Uses the remaining screen room available
room after the floating columns display
 margin: 0 210px 0 160px;
 Footer – clears the float
 clear: both;
Copyright © Terry Felke-Morris
11
CSS STYLING FOR PRINT
Create an external style sheet with the configurations
for browser display.
Create a second external style sheet with the
configurations for printing.
Connect both of the external style sheets to the web
page using two <link > elements.
<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen">
<link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print">
Copyright © Terry Felke-Morris
12
PRINT STYLING BEST PRACTICES
 Hide non-essential content
Example:
#nav { display: none; }
 Configure font size and color for printing
 Use pt font sizes, use dark text color
 Control page breaks
Example:
.newpage { page-break-before: always; }
 Print URLs for hyperlinks
Example:
#sidebar a:after { content: " (" attr(href) ") "; }
Copyright © Terry Felke-Morris
13
MOBILE WEB DESIGN BEST PRACTICES
 eMarketer.com predicts 134.3 million
mobile Internet users by 2013
(http://www.emarketer.com/articles/print.aspx?1007236)
 Three Approaches to Mobile Web:
◦ Develop a new mobile site with a .mobi TLD
◦ Create a separate website hosted within your current
domain targeted for mobile users
◦ Use CSS to configure your current website for display
on both mobile and desktop devices.
Copyright © Terry Felke-Morris
MOBILE WEB LIMITATIONS
 Small Screen Size
 Low bandwidth
 Limited fonts
 Limited color
 Awkward controls
 Lack of Flash support
 Limited processor and memory
 Cost per kilobyte
Copyright © Terry Felke-Morris
DESIGN TECHNIQUES FOR MOBILE WEB
 Single column design
 Avoid floats, tables, frames
 Descriptive page title
 Descriptive heading tags
 Optimize images
 Descriptive alt text for images
 Eliminate unneeded images
 Navigation in lists
 Em or percentage font size units
 Common font typefaces
 Good contrast between text and background colors
 Provide “Skip to Content” hyperlink
 Provide “Back to Top” hyperlink
Copyright © Terry Felke-Morris
VIEWPORT META TAG
 Default action for most mobile devices
is to zoom out and scale the web page
 Viewport Meta Tag
 Created as an Apple extension to configure
display on mobile devices
 Configures width and initial scale of browser viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Copyright © Terry Felke-Morris
17
CSS3 MEDIA QUERIES
Media Query
 Determines the capability of the mobile
device, such as screen resolution
 Directs the browser to styles configured
specifically for those capabilities
 Example:
<link href="lighthousemobile.css" rel="stylesheet"
media="only screen and (max-device-width: 480px)">
Copyright © Terry Felke-Morris
18
CHECKPOINT
Describe a design consideration when configuring a web
page for mobile display.
2. True of False. The media="handheld" attribute reliably
targets mobile devices.
1.
Copyright © Terry Felke-Morris
19
SUMMARY
This chapter introduced you to a variety
of topics related to hyperlinks, page layout,
and designing for the mobile web.
Copyright © Terry Felke-Morris
20