Basic HTML for Enhancing Blackboard Documents

INTRODUCTION
 Blackboard gives you the ability to create documents without having to use HTML (hypertext mark-up language). The basic HTML tags to make a document appear over the Internet (a Web page) have already been written into Blackboard.

To create announcements, course information documents, staff information, course documents, assignments, or external links (links to other Web sites) for your students, all you have to do is click on the Control Panel button at the bottom of the navigation frame on the left side of your Blackboard screen. Then you will use one of the Page Editors to create the type of Web page that you want. All the text that you write, however, will be normal text. You will not have the ability to use boldfacing or create numbered and bulleted lists like those you see in this document unless you know a few simple HTML tags that are placed before and after each word, phrase, or paragraph that you want displayed with special features.

The following sections explain how to

Create Paragraph Breaks: Start a new paragraph with a line or paragraph break.
Set Font Face: Set or change the font face and size of a word or entire document.
Use Boldfacing: Make a word, phrase, or entire document bold.
Emphasize Text: Emphasize text with bold colors.
Indent Paragraphs: Indent the first line of a paragraph as you see in the paragraphs below.
Create Links: Create a hypertext link to another Web site.
Insert Images: Insert an image into a document.
Create Numbered Lists: Create numbered lists with hanging indent paragraphs after the first line of the numbered items.
Create Bulleted Lists: Create bulleted lists with "hanging indent" paragraphs after the first line of the bulleted items.
Create Tables: Create tables to display text and numbers in bordered columns and rows.

CHANGING THE FONT FACE AND SIZE
 Blackboard documents automatically display text in the 10-point Arial font. This document is designed to use the Verdana font face, which is a slightly larger and more rounded font than Arial. If your computer does not have the Verdana font, then it will display the Arial font. If you want to use the Verdana font size 10, use the following code:


The first font tag defines the font face. If a person's computer does not have the Verdana font, then the browser will display the ms sans serif font, which is similar. If a user's computer does not have Verdana, then it will use either Arial or Helvetica.
The second font tag defines the font size. Font size 2 in the Verdana face is slightly larger than 10-point Arial, a font commonly used in memos and business reports.
The reason for separating the font face and font size in two different tags is to set a default font face and a default font size separately at the beginning of the document. Then if you want to increase the font size, as you see in the major subject headings in this document, you can place the new font size tag in front of a heading and close it at the end of the heading without having to write so much code. To use the same size heading that you see int the title of this document, you would use the following HTML tags:
larger

USING BOLDFACING
 You can make any text boldfaced by placing the boldfacing tag, , before a word, phrase, sentence, or entire document that you want to appear in bold and then place the end boldface tag, , at the end of the word, phrase, sentence, or document to turn the boldfacing off.

This is bold and this is normal.

EMPHASIZING TEXT WITH COLORS
 Occasionally you may want to emphasize a word, such as "NOTE," in red. Use the following code to produce the desired effect:

NOTE
NOTE: You can start with either the bold tag or the font tag, but you must remember the order. Notice that in the code above the order of the beginning bold and font tags is reversed for the close font and close bold tags. The word within the tags will appear in bold color as shown.

To produce other colors, use the HTML tags below:

Purple

Blue

Green

STARTING A NEW PARAGRAPH WITH A LINE OR PARAGRAPH BREAK
 Whenever you insert text into the text box to create a document, Blackboard will display all the text with paragraph breaks whenever you press the Enter key on your keyboard twice, provided that you select the "Smart Text" option when you create the document. However, if you choose the HTML option, then you will have to place the HTML tag  before the first word of a paragraph and the  HTML tag after the end of the paragraph. This will result in a new paragraph with a line space between each paragraph. Two  tags, however, will not produce two blank lines between paragraphs. Instead, you will need to use the   tag after the  tag. You can also place three   tags beside each other to create two blank lines between paragraphs of text. This paragraph, for instance, concludes with the  tag and is followed by the   tag to leave two blanks lines between paragraphs. Be sure to note that you must leave a space between "br" and the "/" mark.

INDENTING THE FIRST LINE OF A PARAGRAPH
 If you want to indent the first line of a paragraph, then you need to add five non-breaking spaces (  = one non-breaking space) to the first line of a new paragraph, as shown in the following code. All you need to do is drag your mouse across the code below and then hold down your control key (Ctrl). While holding down the key, press "C." Then open your document in Blackboard that you are either creating or modifying through the Control Panel. Click in the spot in your document where you want to indent the first line. Then hold down the control key again and press the letter "V" to paste the code into your document.
     
CREATING HYPERTEXT LINKS
 If you want to make a link to another Web site, you can use the Page Editor for External Links. You may, however, want to make a link to another Web site within the text of a document, as you see on the next line:

USA Today
Here is the code for the link you see above:
<a href="http://www.usatoday.com" target="_blank">USA Today</a>
Note: The target="_blank" tag causes the new Web site to be opened in a new browser window while the current Web site remains open. Be sure that you place a space between the end of the URL and "target."
Note: The target="_top" tag causes the new Web site to replace your Web site. To return to your site, you will need to click the "back" button on your browser or click the right mouse button and click on "Back." Be sure that you place a space between the end of the URL and "target."

If you want to make the Web address (URL) itself visible to the students, use this phrasing and code:

Phrasing: "Visit the National Society of Engineeers site at http://www.nsoe.org, a major professional organization for engineers.
HTML: <a href="http://www.nsoe.org" target="_blank">http://www.nsoe.org</a>

INSERTING IMAGES
 You can insert an image into your document as long as you have the image stored on your computer (and provided that it is not restricted from use by copyright) in a digital format such as JPEG or GIF. If you want, you can even make that image a hypertext link. The first example below reproduces the HTML code that will display the image, followed by the image. The second shows the image code with a hypertext link, followed by the image as a link.

<img src="stone4.jþg" width="177" height="216" alt="Sandhills Community College" border="0">

<a href="http://www.sandhills.cc.nc.us" target="_blank"><img src="stone4.jþg" width="177" height="216" alt="Sandhills Community College" border="0"></a>

When you create a Blackboard document with the HTML tag for inserting an image, Blackboard will prompt you for the location of the file. You will click the "Browse" button and locate the file where you have saved it on your computer. Then the image will be inserted in your document. Note: You cannot insert an image into an existing document. If you decide you want to, click on the "Modify Item" button and copy the document. Then start a new document and paste the text of the old document into it. Then add the HTML tags to insert the image in the appropriate place in the text. After you have created the new document, you can delete the old one by clicking on the "Remove Item button.
NUMBERED (ORDERED) LISTS
 HTML allows you to create numbered lists with a hanging indented paragraph after the first line of the numbered item. Numbered lists are known as ordered lists. Bullets are known as unordered lists. To create an ordered list, the <ol> tag must be placed before the list. Each listed item would be preceded by the <li> tag and followed by the </li> tag. The last item in the ordered list would be followed by the </ol>tag. If you want a blank line after the ordered list and before the next paragraph of text, you would type the line break tag,   after the </ol>tag. The examples below display the ordered list and the HTML code required to produce that list.

ORDERED LIST DEFAULT

Ordered List

First item
Second item
Third item

HTML Code
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

ORDERED LIST TYPE A

Ordered List

First item
Second item
Third item

HTML Code
<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

ORDERED LIST OUTLINE FORMAT
If you want to create an outline with Roman numerals, then you would nest one list inside another list as shown below. Please note that two of the lists are closed before the final #III. The indention that occurs in the list items is automatic and cannot be changed.

Outline List

First Main Idea
Second Main Idea

First subdivision of the main idea
Second subdivision of the main idea

First reason or example
Second reason or example

Third Main Idea

HTML Code
<ol type="I">
<li>First Main Idea</li>
<li>Second Main Idea</li>
<ol type="A">
<li>First subdivision of the main idea</li>
<li>Second subdivision of the main idea</li>
<ol type="1">
<li>First reason or example</li>
<li>Second reason or example</li>
</ol>
</ol>
<li>Third Main Idea</li>
</ol>

BULLETED (UNORDERED) LISTS
 HTML allows you to create bulleted lists with a hanging indented paragraph after the first line of the bulleted item. Bulleted lists are known as unordered lists. To create an unordered list, the <ul> tag must be placed before the list. Each listed item would be preceded by the <li> tag and followed by the </li> tag. The end of the unordered list would be followed by the </ul>tag. If you want a line break after the unordered list, type the line break tag,   after the </ul>tag. This document uses two types of unordered lists, the square and the disc. The examples below illustrate both the square bullets and the disc bullets used in this document.

UNORDERED LIST SQUARE TYPE

Unordered List

Listed item

Listed item

Listed item

HTML Code
<ul type="square">
<li>Listed item</li>
<li>Listed item</li>
<li>Listed item</li>
</ul>

UNORDERED LIST DISC TYPE

Unordered List

Listed item
Listed item
Listed item

HTML Code
<ul type="disc">
<li>Listed item</li>
<li>Listed item</li>
<li>Listed item</li>
</ul>

UNORDERED LIST CIRCLE TYPE

Unordered List

Listed item
Listed item
Listed item

HTML Code
<ul type="circle">
<li>Listed item</li>
<li>Listed item</li>
<li>Listed item</li>
</ul>

Modified Wednesday, December 05, 2007

Provided by CEI - The North Carolina Conference of English Instructors