HTML and CSS Reference
In-Depth Information
Exploring the Node Tree
You and Norene discuss the table of contents app she wants you to create. She has pro-
vided a sample document containing the text of the United States Constitution. Norene
feels that this would pose an ideal challenge because the document is very long and
divided into different topical sections.
To view Norene's document:
◗
1.
Use your text editor to open the
usconsttxt.htm
and
toctxt.js
files from the
tutorial.14\tutorial folder. Enter
your name
and
the date
in the comment sec-
tion at the top of each file, and then save the files as
usconst.htm
and
toc.js
,
respectively.
◗
2.
Return to the
usconst.htm
file in your text editor, and then study the contents
and structure of the file. The document contains an
aside
element with the id
value
toc
, into which you'll place the table of contents. It also includes an
article
element with the id
doc
, which contains the text of the document upon which the
table of contents will be based.
Figure 14-1 shows Norene's sketch of her idea for the table of contents. Her idea is to
create the table of contents as an ordered list that is automatically generated when the
page is loaded by a browser.
Figure 14-1
proposed table of contents layout
Historic Documents Online
Table of Contents
Preamble
Articles of the Constitution
Article 1 - The Legislative Branch
Section 1: The Legislature
Section 2: The House
Section 3: The Senate
Section 4: Meet ings
Section 5: Membe rship
Section 6: Compe nsation
Section 7: Bi lls
Section 8: Congr essional Powers
Section 9: Congr essional Limits
Section 10: State Limits
Article II - The Executive Branch
Section 1: The President
Section 2: Presidential Powers
Section 3: State of the Union
The Constitution of the United States
Preamble
table of contents box
drawn from the
headings of the source
document
Articles of the Constitution
Article 1 - The Legislative Branch
Section 1: The Legislature
Section 2: The House
…
source document
Ideally, any table of contents application you create should be applicable to a wide
selection of source documents. Norene wants to base her table of contents on the
h1
through
h6
heading elements often used to mark the topical sections in HTML docu-
ments. The
h1
heading usually marks a primary section in the document,
h2
marks a
