HTML and CSS Reference
In-Depth Information
Creating a Home Page with Banner Logo
and Borderless Navigation Table
The first Web page developed in this chapter's project is the home page of the Oceanside
Hotel and Sports Club Web site. As you have learned, the home page is the main page of a
Web site and is what Web site visitors generally view first. Visitors then click links to move
from the home page to the other Web pages in the site. The Oceanside Hotel and Sports
Club home page includes the company logo as a banner image and a borderless table that
contains a navigation bar with four image links. Three of the links allow the user to navigate
to other pages: the Golf Web page, the Tennis Web page, and the Dining Web page. The
navigation bar also includes a link to return to the Home page. In addition to these links, the
home page also provides an e-mail link, so visitors can contact Oceanside Hotel and Sports
Club easily.
To Start Notepad++
The first step in creating the Oceanside Hotel and Sports Club Web site is to start
Notepad++ and ensure that word wrap is enabled. The following steps, which assume
Windows 7 is running, start Notepad++ based on a typical installation. You may need to
ask your instructor how to start Notepad++ for your computer.
1
2
Click the Start button on the Windows taskbar to display the Start menu.
Click All Programs at the bottom of the left pane on the Start menu to display the All
Programs list.
3
4
Click Notepad++ in the All Programs list to expand the folder.
Click Notepad++ in the expanded list to start the Notepad++ program.
5
If the Notepad++ window is not maximized, click the Maximize button on the Notepad++
title bar to maximize it.
6
Click View on the menu bar and verify that the Word wrap command has a check mark
next to it. If it does not, click Word wrap.
To Enter Initial HTML Tags to Define the Web Page Structure
Just as you did in Chapters 2 and 3, you start your file with the initial HTML tags
that define the structure of the Web page. Table 4-3 contains the tags and text for this task.
Table 4-3 Initial HTML Tags
Line
HTML Tag and Text
1
<!DOCTYPE HTML>
2
3
<html>
4
<head>
5
<meta charset=”utf-8” />
6
<title>Oceanside Hotel and Sports Club</title>
7
</head>
8
