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

Begin Your Document: Begin your document with a definition list tag.
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.

BEGIN WITH A DEFINTION LIST
 Once your have read "How to Create Documents with Page Editors" in the "For Instructors Only" folder, you are ready to enhance your document with HTML tags. The first step is to decide the following:

Do I want a blank line between a numbered or bulleted list and the heading or introductory text that precedes it?
Do I want a numbered or bulleted list to begin immediately after the heading or other text that introduces the list?
The bulleted list of topics at the beginning of this document, for example, follows immediately after the text that introduces the list. If you like that design, similar to what you would see in magazines and newspaper articles, place the following definition list HTML tags at the beginning of your document: <dl><dt>
CHANGING THE FONT FACE AND SIZE
 Blackboard 4.0 documents automatically display their text in the 12-point Arial font. Blackboard 5.5 documents automatically display their 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  in front either at the end of a line or at the beginning of a line. 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; in fact, you will need to place three   tags beside each other to create two blank lines between paragraphs of text. This paragraph, for instance, contains one   tag to begin the paragraph after the heading and one  tag between this line and the heading that begins the following paragraph.
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 www.usatoday.com for recent news of the day and feature articles about entertainment, business, and sports.
HTML: <a href="http://www.usatoday.com" target="_blank">www.usatoday.com</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. Note: The HTML tags below define the height and width of the image in pixels. If you do not know that size or do not care to restrict it, Blackboard will adjust the size without your listing anything except the HTML tag and a name for the image. The "alt" command will produce the text described in a textbox when the mouse pointer is rolled over the image. When you create a Blackboard document with a command similar to the one below, be sure to check the "Add image" option and then "browse" to locate the item on your disk when prompted by Blackboard. If you later want to modify the document, modify the document via the Control Panel. Choose the "remove image" option. Then return to modify the document. Insert the new document with the HTML tags, add the image again, and click the "submit" button at the bottom of the page to make the revised document available for viewing.

<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.
If you would like for the image to be displayed on the left side of the screen and for the text to wrap around the image, place the <align="left"> tag inside the image tag. If you would like for the image to be displayed on the right side of the screen and for the text to wrap around the image, place the <align="right"> tag inside the image tag, along with the tag adding 5 pixels of horizontal space to separate the image from the text. You can insert an image into your document as long as you have the image stored on your computer (provided that it is not restricted from use by copyright) in a digital format such as JPEG or GIF. The HTML tags below placed at the beginning of the paragraph will place the image on the left of the paragraph and cause the text to flow around the right side of the image and leave 5 pixels of space between the image and the text: <img src="stone4.jþg" width="177" height="216" alt="Sandhills Community College" border="0" align="left" hspace="5">. The next set of HTML tags placed at the beginning of the paragraph will cause the image to be placed on the right side of the screen and the text to flow around it to the left, with 5 pixels of horizontal space between the text and the image: <img src="stone4.jþg" width="177" height="216" alt="Sandhills Community College" border="0" align="right" hspace="5">
NUMBERED 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. 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>Second item
<li>Third item
</ol>
 

ORDERED LIST TYPE A

Ordered List

First item
Second item
Third item

HTML Code
<ol type="A">
<li>First item
<li>Second item
<li>Third item
</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>Second Main Idea
<ol type="A">
<li>First subdivision of the main idea
<li>Second subdivision of the main idea
<ol type="1">
<li>First reason or example
<li>Second reason or example
</ol>
</ol>
<li>Third Main Idea
</ol>

BULLETED 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. 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>Listed item
<li>Listed item
</ul>
 

UNORDERED LIST DISC TYPE

Unordered List

Listed item
Listed item
Listed item

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

UNORDERED LIST CIRCLE TYPE

Unordered List

Listed item
Listed item
Listed item

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