Table of Contents Chapter 11: Adding Multimedia to Lessons

Chapter10: Formatting text

In Chapter 9: Customizing User Interface and Style, we learned how to change text format and style for block elements. To format individual text in an element, we can use the following three methods.

Using style sheet
Adding ordinary HTML tags
Converting rich text to HTML

Using Style Sheet

A style sheet is a collection of one or more style rules, which define a particular look and feel of the item(s) in the HTML document. The rules are surrounded by the <STYLE> and </STYLE> tags, with each rule being composed of

one or more HTML elements for which the style sheet is defined
one or more attributes (properties) that apply to the element(s)

Example 1

The following rule assigns the font Helvetica and the color Navy to all <P> elements(tags) in the demo Digital Teacher lesson page. To open the page, click the "Show me the result" link below.

          <STYLE>
               P {font-family: Helvetica; font-size:8pt; color: Navy}
          </STYLE>
          <BODY>
          <P>This is a paragraph.</P>
          <P>This is another paragraph.</P>

Show me the result

Example 2

In general, the style rule is defined and applied for the default HTML elements (such as P, H2, TD) as shown in the above example. However, if your page design calls for more precise styles to be assigned to specific categories or classes of elements, you must create and identify subgroup elements first. You invent these sub-level elements using style sheet selectors called classes, IDs, and contextual selectors.

For example, the second rule in the following style sheet assigns the wider left margin to the second paragraph of the reading text in Page 2 of the demo page.

          <STYLE>
               P {font-family: Helvetica; font-size:8pt; color: Navy}
               P.SetMargin {margin-left:3em}
          </STYLE>
          <BODY>
          <P>This is the first paragraph in the Reading box.</P>
          <P CLASS="SetMargin">This is the second paragraph in the Reading box.</P>

Show me the result

Example 3

When you need to assign styles to one or more sections in a paragraph, you use the contextual selector. A contextual selector is composed of multiple, hierarchical list of elements separated by spaces.

For example, the third rule in the following style sheet assigns the font size 10pt and the color Red to a portion (surrounded by the EM tags) of the second paragraph element in the Reading box. The EM element is called phrase element, which assigns structural meaning to a designated portion of the HTML document.

          <STYLE>
               P {font-family: Helvetica; font-size:8pt; color: Navy}
               P.SetMargin {margin-left:3em}
               P.SetMargin EM {font-style:normal; font-size:10pt; color:red}
          </STYLE>
          <BODY>
          <P>This is first paragraph in the Reading box.</P>
          <P CLASS="SetMargin">This is <EM>second paragraph in the Reading</EM> box.</P>

Show me the result

Example 4

You may still want to format just a single word inside the section shown in the above example. To apply style to a deeper section of the EM element, you create and identify it with the SPAN element.

The fourth rule in the following style sheet assigns the font size 12pt and the background color Yellow to a word. In this example, the SPAN element is affected only when it is nested inside an EM element, which is nested inside a P element.

          <STYLE>
               P {font-family: Helvetica; font-size:8pt; color: Navy}
               P.SetMargin {margin-left:3em}
               P.SetMargin EM {font-style:normal; font-size:10pt; color:red}
               P.SetMargin EM SPAN {font-size:12pt; background-color:yellow}
          </STYLE>
          <BODY>
          <P>This is first paragraph in the Reading box.</P>
          <P CLASS="SetMargin">This is <EM>second paragraph in <SPAN>the</SPAN> Reading</EM> box.</P>

Show me the result

Example 5

The fifth rule in the following style sheet creates the border around the second paragraph.

          <STYLE>
               P {font-family: Helvetica; font-size:8pt; color: Navy}
               P.SetMargin {margin-left:3em}
               P.SetMargin EM {font-style:normal; font-size:10pt; color:red}
               P.SetMargin EM SPAN {font-size:12pt; background-color:yellow}
               #ShowBorder {border:3px double red; padding:5px}
          </STYLE>
          <BODY>
          <P>This is first paragraph in the Reading box.</P>
          <P CLASS="SetMargin" ID="ShowBorder">This is <EM>second paragraph in <SPAN>the</SPAN> Reading</EM> box.</P>

Show me the result

As shown in the above examples, style rules that are associated with a particular HTML element requires the element present in the document. For example, to assign rules to paragraphs, the <P></P> structure must already exist in the page.

However, the Digital Teacher authoring program does not add P tags and other container block HTML elements such as <H1></H1>, <UL></UL> to the web lesson page. When Digital Teacher generates a web lesson, carrage returns and line breaks in the source text are converted to the <BR> tags.

If you want to create and add style rules associated with default HTML tags, you must add them to your lesson text either manually or using the HTML menu commands, which we will discuss in the next topic. Or you can simply establish your own custom elements using two special tags: <DIV> and <SPAN>. A DIV tag is used to create a block that contains chunks of sections. A SPAN tag is used to create a section that contains chunks of inline text. Using these tags, you can create your own custom styles without associating with any exisiting tags.

Adding ordinary HTML tags

In order to format text, you can add HTML tags manually to your question or reading text. For your convenience, Digital Teacher's Editor window comes with the HTML menu commands that allow you to insert most general HTML tags onto text in your page.

Discussing on each tags in more details is not the scope of this guide. Please obtain and refer to a basic HTML guide. However, here are two basic guidelines you want to remember.

Every HTML tags starts with the opening angle bracket (<) and the closing angle bracket (>). When you want the angle brackets shown literally on the browser window, you MUST use a name or number code. For example,
```
	- to show the less than (<) itself, use &lt; or &#60;
	- to show the greater than (>) itself, use &gt; or &#62;
```
If you simply type them using the keyboard, the browser (especially Netscape) may attempt to interpret them as HTML tags, causing problems. In general, to display characters and symbols between 129 and 255 in the standard ASCII set, you should type in the name or number codes as defined in the ISO Latin-1 character set.
When you add an HTML tag, always add it in a pair. Digital Teacher Web Application is a DHML application, in which an HTML element in a page is treated as a container whose territory is bounded by its start and end tags even when the end tag is optional (such as </P>). While omitting end tags does not necessarily cause problems, specifying boundary for an element by including the end tag allows the browser interprete your page faster.

See an example lesson page

Converting Rich Text to HTML

Note: This feature is only available for the SBCS (single byte character set - for most Roman alphabet) Windows system.

The source of our Digital Teacher web-based lesson files are books in the Digital Teacher authoring program's libraries. The text format in these books are RTF, which can be converted to the HTML format when we generate web-based lesson files.

We do this by checking the [Display Text with Original Formatting Preserved] option before we generate a web lesson. When this option is checked, Digital Teacher converts most of the rich text format to the equivalent HTML tags and add them to the web page.

With this feature, we can automatically create the Digital Teacher web lesson pages with the original formatting preserved without manually inserting HTML tags onto text.

Digital Teacher converts most of the rich text characters including symbols such as ¢ $ £ ¥ ™ © ® @ • and ~~strikethrough~~, center/right alignment. However, the following items are not converted. You should add their equivalent HTML tags manually.

	Tab
	Super/Subscript
	Equation (math symbols) object
	Embedded multimedia objects
	Special fonts (such as wingdings)
	Background color

Note: The RTF-to-HTML conversion feature has been included to let you maintain "cross-file type" Digital Teacher books. For example, by NOT adding HTML tags to text in a book, you can use the book as a single source to create files for both off-line (Desktop and LAN) and on-line (Web) lessons without needing to author and maintain two separate "file-specific" source books.

Note: Generating a web lesson page with this option selected creates bigger file in size.

Rendering Precedence

As described in the previous topics, we can format our web lesson page in various ways. At the same time, there is a possiblity that overlapping formatting schemes can apply to the same text element (with or without intention). To avoid seeing unexpected results on the web page, you should understand the following precedence rule.

In-line formatting is rendered first.
With no in-line formatting, style is applied (if defined).
With no style defined, the browser's default value is rendered.

The following table shows examples.

If you	and the source text is	and the pre-defined Style is	the result on the web page and the tags added will be
generate a web page using the RTF Conversion method described in the 3rd topic	Hello, World. face: serif - RTF size: 8pt - RTF color: blue - RTF	#Greeting { font-family: Verdana; font-size: 9pt; color: Red; }	Hello, World. <FONT FACE="serif" SIZE=1 COLOR=blue>Hello, World.</FONT> where SIZE=1 is equivalent to 8pt in RTF.
	Hello, World. face: serif - RTF size: 10pt - RTF (The color is not defined)	#Greeting { font-family: Verdana; font-size: 9pt; color: Red; }	Hello, World. <FONT FACE="serif" SIZE=2>Hello, World.</FONT> where SIZE=2 is equivalent to 10pt in RTF. *The color red is rendered by Style.
	Hello, World. face: serif - RTF size: 10pt - RTF (The color is not defined)	#Greeting { font-family: Verdana; font-size: 9pt; font-weight: bold; } (The color is not defined) (The font weight is defined)	Hello, World. <FONT FACE="serif" SIZE=2>Hello, World.</FONT> where SIZE=2 is equivalent to 10pt in RTF. *Text color is rendered by Browser's default text color setting. The bold face is rendered by Style.
manually format by adding HTML tags as described in the 2nd topic	<FONT FACE="serif" SIZE=3>Hello, World.</FONT>	#Greeting { font-family: Verdana; font-size: 8pt; color: Teal }	Hello, World. <FONT FACE="serif" SIZE=3 COLOR="Teal">Hello, World.</FONT> *Text color is rendered by Style.

Depending on versions, this rendering precedence may not properly be applied with Netscapte.
When defined by HTML tags, the actual text size rendered on the web page depends on the user's text (font) size setting on the browser.
Generating a web lesson page with the [Display Text with Original Formatting Preserved] option selected will create bigger file in size.

With this rule in mind, you should experiment to get the best result depending on your particular situation - your system, fonts installed, and the desired file size for a Digital Teacher web lesson page, etc.

Table of Contents Chapter 11: Adding Multimedia to Lessons