HTML and CSS Reference
In-Depth Information
Overview
As you read this chapter, you will learn how to create the Web pages shown in
Figure 5-1 on the previous page by performing these general tasks:
Enter HTML code into the Notepad++ window.
•
•
Save the file as an HTML file
•
View an image in Microsoft Paint to see image map coordinates.
•
Enter basic HTML tags and add text to the file.•
•
Insert an image to be used as an image map.
•
Create an image map by mapping hotspots on the image.
•
Create links to the other Web pages and to the home page with a horizontal
navigation bar.
Add special characters to the home page.
•
•
Create an external style sheet and insert the link into the home page.
•
Save and print the HTML and CSS code.
•
Validate, view, and print the Web pages.
Plan
Ahead
General Project Guidelines
As you create Web pages, such as the project shown in Figure 5-1 on the previous page, you
should follow these general guidelines:
1.
Plan the Web site.
As always with a multiple-page Web site, you should plan the site
before you begin to write your HTML code. Refer to Table 1-4 on page HTML 15 for
information on the planning phase of the Web Development Life Cycle.
2.
Analyze the need.
In the analysis phase of the Web Development Life Cycle, you should
analyze what content to include
on the Web page. The Web development project in
Chapter 5 is different from the one completed in other chapters because it contains an
image map. Part of the analysis phase then includes determining what image to use and
where to put links within the image map.
3.
Choose the image.
You need to select an image that has areas, such as the four words
(Home, Skiing, Boating, and Dining), that can be used as links. Not all images are
conducive to image mapping, as described in the chapter.
4.
Determine what areas of the image map to use as links.
Once an appropriate image is
selected, you need to determine how to divide up the image map for links. You want to
make sure that your hotspot (link) areas do not spill over into each other.
5.
Establish what other links are necessary.
In addition to links between the home page
and secondary Web pages, you need an e-mail link on this Web site. It is a general
standard for Web developers to provide an e-mail link on the home page of a Web site
for visitor comments or questions. Additionally, you need to provide links to all other
Web pages on the Web site (skiing.html, boating.html, and dining.html).
6.
Create the Web page, image map, and links.
Once the analysis and design are complete,
you create the Web pages. Good Web development standard practices should be
followed, such as utilizing the initial HTML tags as shown in previous chapters, providing
text links for all hotspots in the image map, and always identifying alt text (alternate
text) for images.
7.
Test all Web pages within the Web site.
It is important to test your pages to assure that
they follow W3C standards. In this topic, you use the W3C validator to validate your Web
pages. Additionally, you should check all content for accuracy. Finally, all links (image map
hotspots, text links, and page-to-page links within the same Web site) should be tested.
When necessary, details concerning the above guidelines are presented at appropriate
points in the chapter. The chapter will also identify the actions performed and decisions
made regarding these guidelines during the creation of the Web pages shown in Figure 5-1.
