HTML and CSS Reference
In-Depth Information
To Open an Existing HTML File in Notepad++
In this chapter, the partially completed HTML code for the Home Web page is
provided in the Data Files for Students in the file chapter11-1home.html, which includes
an embedded CSS <style> section. You will begin by opening this file in a new Notepad++
window.
Document Object
Model Hierarchy Nodes
The DOM naming system
uses a treelike hierarchy
of parent and child
relationships where each
object is a node. A
node
is a point in a treelike
structure that indicates
the relationship between
objects. The <html> tag
is the root node, and the
<body> tag is a child to
the <html> tag node.
These relationships allow
an object to become a
child of another object,
and the relationship
between the document
object and the objects
within a Web page is w
h
at
gives Web developers
access to every aspect of
the Web page.
1
Start Notepad++, and, if necessary, maximize the window. Verify that word wrap is on.
2
With a USB flash drive plugged in to your computer, click File on the menu bar and then
click Open.
3
Navigate to the Chapter11\ChapterFiles folder on the USB drive.
4
Double-click chapter11-1home.html in the list of files to display the HTML code for the
chapter11-1home.html Web page, as shown in Figure 11-2.
new file opened in
Notepad++, filename
displays on tab
embedded style sheet
supplied in data file
Figure 11-2
Plan
Ahead
Creating the navigation bar with image rollovers.
To create and utilize the navigation bar on the Hickory Oaks Forest Preserve Web site,
create the following items:
A set of images used as buttons, to represent the mouse state: up-state, over-state,
•
and down-state
A table with one row and as many data table cells as needed for each button
•
•
JavaScript user-defined functions associated with each mouse event handler
The buttons should be named the same way including its state (up, over, down) as part
of the name. For example, chapter11-1home_down.jpg includes the button text (home) and
its state (down) when clicked. The name will be used to select the correct button to match
the event handler calling the image rollover user-defined function.
