HTML and CSS Reference
In-Depth Information
3
Creating Web Pages
with Links, Images, and
Embedded Style Sheets
Introduction
One of the most useful and important aspects of the World Wide Web is the ability to
connect (link) one Web page to other Web pages — on the same server or on different
Web servers — located anywhere in the world. Using hyperlinks, a Web site visitor can
move from one page to another, and view information in any order. Many different
Web page elements, including text, graphics, and animations, can serve as hyperlinks.
In this chapter, you will create Web pages that are linked together using both text links
and image links. In the last chapter, you used inline styles to change the appearance
of individual elements or HTML tags. In this chapter, you will also use embedded
style sheets (also called internal style sheets) to set the appearance of elements such as
headings and body text for the entire Web page. Before starting on this project, you would
have already completed the Web site planning, analysis, and design phases of the Web
Development Life Cycle.
Project — Underwater Tours by Eloise Web Site
Chapter 3 illustrates how to use HTML to create a home page for the Underwater
Tours by Eloise Web site (Figure 3-1a) and to edit the existing samplephotos.html Web
page (Figure 3-1b) to improve its appearance and function. Your older sister, Eloise,
recently opened an underwater tour company and named it Underwater Tours by Eloise.
She would like to advertise her company on the Web and show sample pictures of sea
creatures. She knows that you have studied Web development in college and asks you to
develop two Web pages that are linked together: a home page and a Web page with the
sample pictures. During your analysis, you determined that there are four basic types of
links to use. The first type is a link from one Web page to another in the same Web site.
The second type is a link to a Web page on a different Web site. The third type is an
e-mail link. The fourth type is a link within one Web page. You plan to utilize all four of
these types of links for your sister's Web site.
The Underwater Tours by Eloise home page (Figure 3-1a) includes a logo image,
headings, an e-mail link, and a text link to a Web page on another Web site. This page also
includes a link to the samplephotos.html Web page. The Sample Photographs Web page
(Figure 3-1b) contains two images with text wrapped around them and internal links that
allow visitors to move easily from section to section within the Web page. The Web page
also has an image link back to the Underwater Tours by Eloise's home page.
HTML 88
