HTML and CSS Reference
In-Depth Information
secondary heading, and so on. Figure 14-2 shows the type of HTML code the table of
contents application would generate. The app would search the Web page for heading
elements, copying the text of each heading into a nested list with higher-level headings
placed in the outer lists. Thus, all
h1
headings would be placed in the outermost list of
the TOC,
h2
headings would be nested within the
h1
headings, and so forth down to any
h6
headings.
Figure 14-2
document headings converted into a tOc
<ol>
<li>Main I
<ol>
<li>Sub A
<ol>
<li>Minor 1</li>
<li>Minor 2</li>
</ol>
<li>Sub B</li>
</ol>
</li>
<li>Main II
<ol>
<li>Sub A
<ol>
<li>Minor 1</li>
</ol>
</li>
</ol>
</li>
</ol>
<h1>Main I</h1>
…
<h2>Sub A</h2>
…
<h3>Minor 1</h3>
…
<h3>Minor 2</h3>
…
<h2>Sub B</h2>
…
<h1>Main II</h1>
…
<h2>Sub A</h2>
…
<h3>Minor 1</h3>
…
document content
nested list generated by the TOC app
All of the JavaScript code to generate this nested list will be located in an external
JavaScript file. The style design will be stored in an external CSS style sheet. Using
external files will allow Norene to easily apply the finished app to other documents in
her library. You'll create links now to the
toc.js
and
toc.css
files that Norene already has
created.
To create links to the JavaScript file and style sheet:
◗
1.
Return to the
usconst.htm
file in your text editor, and then add the following
code to link to the style sheet and JavaScript file:
<link href=”toc.css” rel=”stylesheet” type=”text/css” />
<script src=”toc.js” type=”text/javascript”></script>
◗
2.
Save your changes to the file, and then open
usconst.htm
in your Web browser.
The current appearance of the page is shown in Figure 14-3. The empty blue box
in the figure is where the contents of the TOC will be placed.
