Introduction
This is part 4 of my series, HTML Ebook. In this part of the series we look at the HTML pages for the HTML ebook project. The information I give you for the code samples in this part of the series are for illustrative purpose only. In your commercial project there will be practical information for the HTML pages.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The HTML Head and Body Elements
All HTML pages except the banner and sidebar pages will go into the content frame of the frameset. Each of these pages has the HTML BODY element. Each of these pages has the HTML HEAD element. The Head element of each of these pages has the TITLE element and a META description tag. The Title tag has the title of the page. The Meta description tag has the description of the page's information (content).

Non-Chapter Pages
The non-chapter pages are the Cover page, the Table of Contents page, the Forward page, the Acknowledgement page and the Index page.

We shall now look at the code for the different pages.

Table of Contents Page
The Table of Contents page mainly has to HTML Ordered Lists for the table of contents. Each item of the table of contents is a link that will lead you to its page.

The HTML Lists
In the Table of Contents the non-chapter pages are numbered with lower roman numbers, while the chapters are numbered with decimals. There are two HTML Ordered Lists: one for the non-chapter pages and the other for the chapter pages.

This is the one for the non-chapter pages:

    <ol style="list-style-type:lower-roman">
        <li><a href="cover.htm">Cover</a></li>
        <li><a href="Table-of-Contents.htm">Table of Contents</a></li>
        <li><a href="Forward.htm">Forward</a></li>
        <li><a href="Acknowledgement.htm">Acknowledgement</a></li>
    </ol>

The Ordered List for the chapters has nested Ordered Lists. The numbering for the outer list is decimal and does not have leading zeros. The numbering for the nested lists is also decimal but has leading zeros. The outer list is for the chapters while the nested lists are for the sections of the chapters.

The is the outer list without the nested lists:

    <ol style="list-style-type:decimal">
        <li><a href="Chapter1.htm">Chapter 1</a></li>
        <li><a href="Chapter2.htm">Chapter 2</a></li>
        <li><a href="Chapter3.htm">Chapter 3</a></li>
    </ol>

Here is the complete list for the chapters:

    <ol style="list-style-type:decimal">
        <li><a href="Chapter1.htm">Chapter 1</a></li>
        <ol  style="list-style-type:decimal-leading-zero">
            <li><a href="Chapter1/Chapter1-Section1.htm">Chapter 1 - Section 1</a></li>
            <li><a href="Chapter1/Chapter1-Section2.htm">Chapter 1 - Section 2</a></li>
            <li><a href="Chapter1/Chapter1-Section3.htm">Chapter 1 - Section 3</a></li>
        </ol>
        <li><a href="Chapter2.htm">Chapter 2</a></li>
        <ol  style="list-style-type:decimal-leading-zero">
            <li><a href="Chapter2/Chapter2-Section1.htm">Chapter 2 - Section 1</a></li>
            <li><a href="Chapter2/Chapter2-Section2.htm">Chapter 2 - Section 2</a></li>
            <li><a href="Chapter2/Chapter2-Section3.htm">Chapter 2 - Section 3</a></li>
        </ol>
        <li><a href="Chapter3.htm">Chapter 3</a></li>
        <ol  style="list-style-type:decimal-leading-zero">
            <li><a href="Chapter3/Chapter3-Section1.htm">Chapter 3 - Section 1</a></li>
            <li><a href="Chapter3/Chapter3-Section2.htm">Chapter 3 - Section 2</a></li>
            <li><a href="Chapter3/Chapter3-Section3.htm">Chapter 3 - Section 3</a></li>
        </ol>
        <li><a href="The-Index.htm">Index</a></li>
    </ol>

Just note that for convenience, I included the index page link with the chapter List and not the non-Chapter page List.

At the end of this series, you will have a link for the complete code, which would include the complete code for the Table of Contents page.

Numbering
I have numbered the entries of the table of contents in a very simple way. If you want a more convenient way of numbering the entries of the table of content and in chapters, then learn CSS Automatic Counters and Numbering.

The Cover Page
This is the code for the Cover page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Cover</title>
    <meta name="Description" content="Summary of cover page can go here if necessary.">
</head>
<body>

    <h1 style="text-align:center">Title of Book</h1>
    <h5 style="text-align:center">by</h5>
    <h2 style="text-align:center">Name of Author</h2>
    <br />
    <h3 style="text-align:center">Name of Publisher</h3>
    <div style="text-align:center">
        Publisher's Address line 1 <br />
        Publisher's Address line 1 <br />
        Publisher's Address line 1 <br />
        Publisher's Address line 1<br /><br />
        Year Published
    </div>

</body>
</html>

The Forward Page
The is the code for the forward page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Forward</title>
    <meta name="Description" content="Summary of forward page goes here.">
</head>
<body>

    In this page, the author gives the reasons why he writes the ebook: what purpose the ebook will be used for and what people will gain when they read the ebook.

</body>
</html>

The Acknowledgement Page
This is the code for the acknowledgement page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Forward</title>
    <meta name="Description" content="Summary of Acknowledgement page goes here.">
</head>
<body>

    In this page, the author list and thank the people and institutions that help him to produce the book.

</body>
</html>

Chapters
A chapter starts with some introduction or a kind of overview to the chapter information. In this case, the HTML page for the chapter introduction (overview) will be different from that of the first section of the chapter. This would lead to a chapter having four pages and not three.

Chapter 1 Introductory Page
Below is the introductory page for chapter 1. The name of this file is Chapter1.htm and it is in the head directory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Chapter 1 - Its title</title>
    <meta name="Description" content="Summary of Chapter 1 page goes here.">
</head>
<body>

    The introductory information for chapter 1 and any images go here.

</body>
</html>

Chapter 1-Section 1
Below is the Chapter 1-Section 1 page. The name of this file is Chapter1-Section1.htm and it is in the Chapter1 directory, which is an immediate sub directory to the head directory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Chapter 1 - Section 1- Its title</title>
    <meta name="Description" content="Summary of Chapter 1 - Section 1 page goes here.">
</head>
<body>

    Information and any images for chapter 1 - section 1 go here.

</body>
</html>

Chapter 1-Section 2
Below is the Chapter 1-Section 2 page. The name of this file is Chapter1-Section2.htm and it is in the Chapter1 directory, which is an immediate sub directory to the head directory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Chapter 1 - Section 2- Its title</title>
    <meta name="Description" content="Summary of Chapter 1 - Section 2 page goes here.">
</head>
<body>

    Information and any images for chapter 1 - section 2 go here.

</body>
</html>

Chapter 1-Section 3
Below is the Chapter 1-Section 3 page. The name of this file is Chapter1-Section3.htm and it is in the Chapter1 directory, which is an immediate sub directory to the head directory.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Chapter 1 - Section 3- Its title</title>
    <meta name="Description" content="Summary of Chapter 1 - Section 3 page goes here.">
</head>
<body>

    Information and any images for chapter 1 - section 3 go here.

</body>
</html>

The Pages for the other Chapters
The pages for the other chapters are defined similarly to those of chapter 1.

The Index Page
The index page consists of important words from all the chapters arranged in alphabetical order. Each of these words is a hyperlink to the page (position of the page) that has the word. I will not give you the code for this page; I leave that as an exercise for you.

The main thing you have to do for this is to arrange the words in alphabetical order (you can use a spreadsheet such as Excel for this) and then, for the HTML index page you make each word a hyperlink to the page that has the word, targeting (with the A target attribute) the content frame of the frameset.

That is it for this chapter. We take a break here and continue in the next part of the series.

Chrys