HTML and CSS Reference
With a USB flash drive connected to one of the computer's USB ports, click File on the
Notepad++ menu bar and then click Save.
Type underwatertours.html in the File name text box (do not press e n t e r ).
Click Computer in the left pane of the Save As dialog box to display a list of available drives.
If necessary, scroll until UDISK 2.0 (G:) or the name of your storage device is displayed in
the list of available drives.
Open the Chapter03\ChapterFiles folder.
Click the Save button in the Save As dialog box to save the file on the USB flash drive in
the Chapter03\ChapterFiles folder with the name underwatertours.html.
Identify how to format various elements of the text.
Before inserting the graphical and color elements on a Web page, you should plan how you
want to format them. By effectively utilizing graphics and color, you can call attention to
important topics on the Web page without overpowering it. Consider the following format-
Effectively utilize graphics
. An important part of Web development is the use of
graphics to call attention to a Web page. Generally, companies utilize the same logo
on their Web site as they use on print material associated with the company, such
as business cards and letterheads. Using the same graphical image on all marketing
materials, including the Web site, is a good way to provide a consistent visual and
brand message to customers.
Utilize headings that connect to the graphics
. In many cases, companies use a
logo image as the main heading on their home page, as opposed to using an
<h1> heading. It is sometimes good to coordinate the color of the headings and
graphics contained on the Web page to the logo. This can bring attention to the
company logo image, and it makes the Web page look cohesive with coordinating
colors. Heading size standards should generally be followed from h1 (the largest) to
h6 (the smallest). In this project, though, you use the company logo image as your
main heading, so you have no h1 heading. Figure 3-1b on page HTML 89 shows the
use of h1 and h2 headings in appropriate precedence.
To Add a Banner Image
The Underwater Tours by Eloise home page includes a logo image to provide visual appeal, catch the visitor's
interest, and promote the company's brand. The following steps illustrate how to add an image to a Web page using
the <header></header> container. Table 3-2 contains the code for adding the logo image.
Table 3-2 HTML Code for Adding a Banner Image
HTML Tag and Text
<img src="underwaterlogo.jpg" width="581" height="450" alt="Underwater
Tours logo" />