Math Tutorials and More
by George

Math Tutorials and More
by George

HTML Basics

HTML stands for Hypertext Markup Language. It consists of tags that are placed within a document to indicate how the document content should be organized and displayed. HTML tags are analogous to marks editors used to place in documents as instructions for the printer. The MOBI format used in older Kindles only supports a limited portion of HTML. For example, you can't prescribe the font family or the font color or the background. However, this means that there is less to learn. In fact you can write a nicely formatted Kindle or EPUB document using only a few HTML tags. HTML tags usually occur in pairs. There is an opening tag having the form <tag-name> and a closing tag having the form </tag-name>. For example, <p> denotes the beginning of a paragraph and </p> denotes the end of the paragraph. There are a few tags that are self closing. They have the form <tag-name />. We will see some examples of these later on. The general structure of an HTML document suitable for both EPUB and MOBI eBooks is shown below.

<?xml version="1.0" encoding ="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/​xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/​1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="application/​xhtml+xml; charset=utf-8"/>

<!-- The head section contains information about the document that is not displayed. -->

</head>

<body>

<!-- The body section contains the document content. -->

</body>

</html>

The first few lines specify the version of HTML used in the document. The EPUB specification requires a strict form of HTML designated as XHTML. These initial lines do not change and can be pasted into the beginning of each document. The document starts with the tag <html …> and ends with the tag </html>. The content of the document is placed between the tags <body> and </body>. The head section begins with <head> and ends with </head>. It contains information about the document that is not displayed. We will see some items that can be placed there later on. We will now list some common HTML tags that can be used to format a MOBI or EPUB document.

<p> … </p>
The included text forms a paragraph. Things such as first line indent and space between paragraphs are different, by default, in different eBook readers. I will show you later how to modify the default settings using CSS. With the help of CSS styles, paragraph tags can also be used to make chapter and section headings.
<div> … </div>
The div tag is sort of a blank container to which we can add properties using CSS. The tag <div class="…"> is often used to apply properties to a group of paragraphs.
<blockquote> … </blockquote>
Indents a block of text by providing larger margins. The default settings can be modified using CSS.
<h1> … </h1>
Included text forms a top level heading. Lower order headings are denoted by h2, h3, h4, h5, and h6. The heading text is bold and heading sizes become smaller as the heading number increases. It has been my experience that forming headings using styled paragraph tags gives much more predictable results than the use of the above heading tags.
<span> … </span>
Span is like a blank element that surrounds content within a line. By itself it doesn't do anything, but properties can be added to it using CSS.
<b> … </b>
The text within is made bold. You can also use <strong>.
<i> … </i>
The text within is made italic. You can also use <em>.
<u> … </u>
The text within is underlined. There are some places where the <u> tag is not allowed. Styled span tags can be used as a replacement.
<img src="image.jpg" alt="text" />
Displays the image contained in the src file name. The text corresponding to alt should describe the image. The alt property is required for eBooks, but it can be left blank, i.e., alt="".
<center> … </center>
Centers the contents horizontally.
<a id="mark" />
Establishes an internal bookmark to which you can link. In this case the bookmark has the name "mark". Older Kindles sometimes have problems with this type of bookmark.
<div id="mark"> Text to link to </div>
Another way to establish an internal bookmark to which you can link. This method seems to work well in all readers.
<a href="#mark">Link Text</a>
Link to a bookmark in the same file whose name follows #. Clicking on the link text takes you to the bookmark location.
<a href="file.php#mark">Link Text</a>
Link to a bookmark in an external file whose name follows #.
<a href="file.php">Link Text</a>
Link to another HTML file.
<br />
Inserts a line break.
<ul> … </ul>
Contains an unordered (bulleted) list. The individual list items are contained within <li> tags. To obtain an ordered (numbered) list replace ul by ol. Lists do not work properly in older Kindles if the default properties are modified using CSS.
<sub> … </sub>
The text within is made smaller and lowered to form a subscript.
<sup> … </sup>
The text within is made smaller and raised to form a superscript.

You can place comments in the HTML file that are not displayed as part of the document. The format is shown below

<!-- you can place a comment here -->

It should be noted that span tags with appropriate CSS styles can also be used to produce bold, italic, and underlined text.

In HTML all the formatting is determined by the HTML tags. Extra spaces or blank lines added by the document's creator are ignored. The default behavior of HTML tags can be modified by placing additional conditions within the opening tag. However, it is better to use CSS styles for this purpose. In the next section we will see how to modify HTML tags by using CSS (Cascading Style Sheets).