HTML Tips

 

Overview

Hypertext Mark-up Language (HTML) may be used to customize many areas of Eduspace. This section provides some basic HTML codes and tips for adding simple formatting to a course Web site. Additional resources for learning more about HTML may be found at the end of this section.

 

Examples of using HTML in Eduspace are located in the HTML Content Examples topic.

 

 

What is HTML?

HTML is the set of codes used to format (or “mark up”) Web pages. A single piece of HTML code is called a "tag." HTML tags are surrounded by pointed brackets ("<" and ">"), also known as the greater-than and less-than symbols. Tags usually come in pairs. The tags will format the text between the beginning tag and the end tag of the pair.

 

For example the pair of HTML tags to create bold text looks like this:

 

<b>This text will be bold. </b>

 

The <b> tag means "start bold here." The end tag, </b>, means "end bold here." End tags always include the forward slash ("/").

 

Paragraph formatting

In HTML, a paragraph break puts a single blank line between paragraphs. A line break inserts no blank line.

 

The tag can be used alone at the end of a paragraph, or as a pair. If used as a pair, the "align=left|center|right" modifier may be included in the beginning tag to control placement.

 

For example, the following tag would create a right-aligned paragraph:

 

<P align=right>Fourscore and seven years ago, our founding fathers

 set forth upon this continent a new nation.</P><BR><BR>

 

Text formatting

The following tags are used for basic text formatting:

·          Bold text tag:  <B> text </B>

·          Italic text tag:  <I> text </I>

·          Underlined text tag:  <U> text </U>

·          Font format tags: <FONT> text </FONT>
Fonts include FACE=fontstyle COLOR=fontcolor SIZE=fontsize

 

The FONT tag requires that at least one of the modifiers (FACE, COLOR, or SIZE), but the user does not need to use all of them.

 

The FACE modifier can be set to any font, but the person viewing the page must also have that font installed on their computer. For that reason, it is best to stick to common fonts like Times New Roman, Arial, or Courier New.

 

The COLOR modifier will recognize basic colors, including black, white, gray, red, blue, yellow, green, purple, orange, cyan, magenta, and so forth.

 

The SIZE modifier does not refer to typical font point sizes. In HTML fonts can be sizes 1 through 7. The default font size is 3.

 

Note: Since each user may set the default font point at which their browser will display text, these font sizes can be relative. For example, one user might have their browser's default font set to 10-point Times while another has their browser's default font set to 12-point Times. The HTML tag would create 10-point Times text on the first computer, and 12-point on the latter, since 3 is the default size.

 

Users may use plus or minus signs to indicate sizes relative to the default. For example, the following HTML would create text that is two steps larger than the default font size:

 

<FONT size=+2>Bigger, Better, Faster!</FONT>

 

Creating Links with HTML

Links are created using the ‘anchor’ tag. In the example below the URL is the Web address and ‘clickable text’ is the text that will become the link.

 

<A href="URL">Clickable text</A>

 

In the following example, the words ‘Blackboard Inc.’ will turn into a link that directs the user to the Blackboard home page.

 

<A href="http://www.blackboard.com/">Blackboard Inc.</A>

 

Creating HTML with other tools

Course developers do not have to learn everything about HTML. They may also use Web authoring tools to generate HTML. There are many applications that may be used for this. Some examples are:

 

·          Word processors — Microsoft© Word™, Corel© WordPerfect™, Apple©  AppleWorks™, Sun©  StarOffice™, and almost every other contemporary word processor contains the ability to convert word processing documents to a Web page coded in HTML. However, the conversion from a word processing document to an HTML Web page is often not perfect, especially for documents with complex formatting.

 

·          WYSIWYG (What You See Is What You Get) Web-authoring tools — These tools provide an environment similar to a word processor for developing Web pages and entire Web sites. There are many products to choose from, including Macromedia© Dreamweaver™, Adobe© GoLive™, and Microsoft© FrontPage™. The major browsers supported by Eduspace also come with free Web-authoring tools. Netscape Composer is part of Netscape Communicator, and Microsoft FrontPage Express can be bundled with Microsoft Internet Explorer. A Text Box Editor is now available within Eduspace. For additional information see the Text Box Editor topic.

 

·          HTML Editors — Applications like BareBones© Software's BBEdit™ and Macromedia© Allaire HomeSite™ provide an editing environment for HTML documents. While they are not WYSIWYG, HTML editors usually have a "preview" mode that allows users to switch between viewing the raw HTML codes and previewing how those codes will look in the browser. These products will help the user write HTML faster and easier, but they presume the user is already knowledgeable about HTML.

 

Incorporating HTML generated with other applications

Instructors may decide to incorporate HTML generated content with other applications into their Eduspace course Web site. There are two options for including this content:

 

·          Save the content as an HTML file and upload the HTML file itself into Eduspace. In the Content Area, next to the Special Action field, select Create a link to this file. Eduspace will automatically detect images in an HTML file and prompt the user to upload the images as well.

 

·          Copy and paste the HTML codes into the text box in Eduspace, for example, in a Content Area, an Announcement, or an Assessment. Follow the steps below:

 

Step 1                 View the HTML source. Most of the tools discussed above will have a mechanism (usually part of a View menu) to allow the user to see the ‘HTML source’ (this means the HTML codes themselves).  

 

Step 2                 Copy all of the HTML tags between but not including the <BODY> and </BODY> tags. Eduspace dynamically generates the HTML above and below the BODY tags, so this portion of the HTML source does not have to be copied.

 

Step 3                 Paste the copied HTML into the text field in Eduspace.

 

Step 4                 Choose the HTML text-formatting option.

 

Step 5                 Submit the form.

 

Step 6                 If there are <IMG> tags in the HTML, Eduspace will automatically detect them when the page is submitted. Users will receive a second page prompting them to upload the appropriate images.

 

Troubleshooting

Instructors may decide to incorporate HTML generated content with other applications into their Eduspace course Web site. There are two options for including this content:

 

It is possible to use a lot of different HTML in the Eduspace, but there are certain practices that should not be incorporated. Houghton Mifflin recommends that users do not use the following in a course Web site:

·          Do not use multiple frames.

·          Do not add Web pages that contain additional navigational items, for example,   buttons. Only include links that directly point to a URL.

·          Do not add <body> tags, <html> tags, <head> tags, <form> tags, or <form element> tags; entering these tags will cause issues when the page is accessed by end users.

·          Users with certain roles may enter JavaScript into the text box editors. These include System Administrator, System Support, Course Creator, Support, Instructor, Teaching Assistant, Course Builder and Grader. The Discussion Board area does not permit any JavaScript.

·          Inline style sheets are not supported by all browsers, and may cause issues when entered in Eduspace.

·          Avoid including <applet> tags inside the text box. These tags may be automatically deleted by the system, or cause errors in the content.

 

Note: These troubleshooting guidelines should be observed whenever entering HTML, whether WYSIWYG is disabled or enabled.

 

Other HTML resources

 

There are many online resources for additional information about HTML. One that users may want to visit is The World Wide Web Consortium located at:

 

http://www.w3.org