Using HTML

HTML is the standard language used for displaying files on the World Wide Web. Web pages normally use the file extensions .htm or html.

HTML uses tags contained within angle brackets < >. These tags tell your web browser how to display the contents of the HTML file it is reading. Tags are normally (but not always*) used in pairs to surround a piece of text with an opening and closing tag.

The position of the opening tag tells the browser where to start applying the effect, and the position of the closing tag tells the browser to when to stop applying the effect. Closing tags always begin with a forward slash /. Although tags can be written in upper or lower-case, UWE Web Standards "...require lower-case tags and and matched-case opening and closing tags throughout." Visit the UWE Web Guidance site for further information on UWE standards.

Please note - HTML files normally start and end with the tags <html> and </html>. When using HTML to format text within text boxes in Blackboard's Content or Tools areas, these tags are not necessary and should not be used.

*The line break tag <br /> is one such tag.

Example 1: Basic HTML Code.

The HTML code below uses the <strong> tag to make text bold and the <em> tag to make text italic:

<strong>Never</strong> use material without including a reference to the <em>source</em>>.

This will be displayed by a browser as follows:

Never use material without including a reference to the source.

In addition to the visual effect these tags have, they also give the text emphasis to users of screen readers. Therefore only use where emphasis is appropriate.

Multiple HTML tags can be used to apply more than one effect to text. Tags can be added in any order, but must be closed in the correct order as shown in Example 2 below:

Example 2: Closing HTML Tags in the Correct Order.

The HTML code below uses both <strong> and <em> tags on the same word to produce the following effect:

Never use material without including a reference to the source.

Correct - opening and closing tags are properly nested within each other i.e. the <em> tag is fully contained within the <strong> tag:

<strong><em>Never</em></strong> use material without including a reference to the source.

Incorrect - opening and closing tags are incorrectly nested i.e. the <em> tag is not within the <strong> tag:

<strong><em>Never</strong></em> use material without including a reference to the source.

Back to top

Where can I use HTML in Blackboard?

HTML can be used in any Content and Tools area which contain a textbox with Smart Text and HTML options. These include:

  • All Content areas (Course Materials, Staff Information, Web Sites etc.)
  • All Content types (Item, Folder, Learning Unit etc.)
  • Some Tools areas, including: Announcements, Calendar, Tasks etc.

Please note - Staff Profiles cannot contain HTML code.

In addition, the Visual Text Editor has an option to allow you to view and edit the code produced.

How do I add HTML code to Blackboard Content?

Blackboard will automatically recognise and interpret any tags used if the text types HTML or Smart Text are selected when content is added to a text box. If the Plain Text option is selected, any HTML tags used will appear within the text as written.

Example 3: HTML, Smart Text and Plain Text.

The following HTML code:

Always <strong>proof read</strong> your assignments.

Will appear as follows if HTML or Smart Text is selected:

Always proof read your assignments.

And will appear as follows if Plain Text is selected:

Always <strong>proof read</strong> your assignments.

Back to top

Adding Paragraph and Line Breaks

HTML text relies on the author to insert tags to create line and paragraph breaks when required. HTML text does not recognise carriage returns.

The single tag <br /> is used to insert a line break in HTML documents. This tag has no closing counterpart.

The tags <p> and </p> are used to enclose each paragraph of text and will automatically create a line break after the closing </p> tag.

Example 4: Line and Paragraph Breaks in HTML Code.

The code shown below:

<p>Seminar 1.<br /> Wednesday 25 September 2002.<br />Room 5D1.</p><p>Please read Chapter 8 in preparation.</p>

Appears as follows when HTML text type is selected:

Seminar 1.
Wednesday 25 September 2002 .
Room 5D1.

Please read Chapter 8 in preparation.

As you can see, HTML code can be written in a single line of text, as it relies on tags to insert line and paragraph breaks. However, putting clear line breaks within your code makes reading and editing the code simpler. The code shown above could have been written as follows without affecting the appearance of the content in any way:

<p>
Seminar 1.<br />
Wednesday 25 September 2002.<br />
Room 5D1.
</p>
<p>
Please read Chapter 8 in preparation.
</p>

Back to top

Important difference between HTML and Smart Text

Unlike HTML, Smart Text does not require tags to insert line or paragraph breaks, as it recognises carriage returns used within the Add Content text box.

Example 5: Differences Between Plain Text, Smart text and HTML

Text, including carriage returns, as entered in text box:

<strong>Exam Timetables</strong>

Exam timetables have been posted outside the School reception area.

Students <em>must</em> ensure that they check the board regularly.

Appears as follows when plain text is selected:

<strong>Exam Timetables</strong>Exam timetables have been posted outside the School reception area. Students <em>must</em> ensure that they check the board regularly.

Appears as follows when Smart Text is selected:

Exam Timetables

Exam timetables have been posted outside the School reception area.

Students must ensure that they check the board regularly.

Appears as follows when HTML is selected:

Exam Timetables Exam timetables have been posted outside the School reception area. Students must ensure that they check the board regularly.

Adding a Heading

HTML code has a series of heading tags, which are important to add heading structure to web documents. These tags range from <h1> down to <h6>, with <h1> as the largest heading and <h6> the smallest. Heading tags make text bold and insert a blank line after the heading. Headings should always be used logically rather than stylisticlly i.e. h1 should always be the top-level heading (e.g. titles), h2 should then be used as the next sub-heading level and so on. This is to enable users of non-visual software to correctly interpret the importance of a heading in the document hierarchy.

Example 6: HTML Heading Styles

The code below:

<h1>Autumn Term</h1>

<p>Autumn term begins on 30 September 2002.</p>

Will be displayed within your Blackboard content as follows:

Autumn Term

Autumn term begins on 30 September 2002.

The <h2> tag makes text slightly smaller:

Autumn Term

<h3> reduces the size of the text further:

Autumn Term

<h6> is the smallest heading of all:

Autumn Term

Back to top

Adding a Link

A hyperlink is a piece of text within a web page which, when clicked on, will take the user to another web page. Hyperlinks have three parts:

The opening tag and web address (Uniform Resource Locator or URL): <a href="protocol and url here">

The label for the link: Text which appears as link

The closing tag: </a>

In full: <a href="protocol and url here">Text which appears as link</a>

Example 7: Adding a Hyperlink

The following text typed into an Add Content text box as HTML or Smart Text:

Visit the <a href="http://www.uwe.ac.uk/">UWE Home Page</a>.

Will appear within the content as follows:

Visit the UWE Home Page.

Clicking on the link will open the UWE Home Page within the Blackboard content frame.

If you would prefer your link to open in a new browser window outside the Blackboard frame, add the following to your code:

Visit the <a href="http://www.uwe.ac.uk/" target="_blank">UWE Home Page</a>.

Back to top

Adding Images

The simplest way to add images to Blackboard content is to use the Add Item: Content Attachments function and select the special action Display media file within the page.

However, images can also be directly included in Blackboard content by using the following instructions.

To add an image directly into course content using HTML code in the text box of an Add Content page:

  1. Save the image in GIF or JPEG format with the file extension .gif or .jpg
  2. Make sure that the image is sized as you would like it to appear. Blackboard recommends a size of 150 by 150 pixels for images accompanying Staff Information, but does not set a limit to the size of images added to other content areas. However, it is worth bearing in mind that the screen size of most Student PCs within UWE is 600 x 800 pixels. Within Blackboard, the course menu and Blackboard header further restricts screen size, so large images placed in your course content may not be visible to students in a single screen.
  3. When you have saved your image file in the appropriate size and format, insert the following HTML code into the text box in the Add Content page (quotation marks must always be placed around your file name):
    <img src="your_image_file_name_goes_here.gif"> or
    <img src="your_image_file_name_goes_here.jpg">
  4. If you would like to control the placement of the image in your course document page, add the following to your HTML code:
    <img src="your_image_file_name_goes_here.gif" align="left"> or
    <img src="your_image_file_name_goes_here.gif" align="right">
  5. Left alignment will place your image on the left of the page, with text wrapping on the right. Right alignment will place your image on the right of the page, with text on the left.
  6. Always add a descriptive text alternative, or ALT Text to images. This is good practice as text alternatives make your content accessible to Visually impaired users who use screen reading software to access the Internet, or users who have a slow Internet connection, making large files slow to download, or users who have chosen to switch images off in their web browser.
  7. To add ALT Text to an image, add the following code to your content:
    <img src="image_file_name_here.gif" align="right" alt="description of image">
  8. After inserting the IMG SRC tag into the content box, select the text type Smart Text or HTML and select the Submit button.
  9. As your content is uploaded into Blackboard, the link to your image file will be detected, but because the link points to a locally stored copy of the image, Blackboard will be unable to display the image. Instead, a Content Actions page will appear, prompting you to locate the locally stored image file referred to in the IMG SRC tag. This will allow you to locate the image, which will then be uploaded to the Blackboard server.

    example screenshot showing the Content Actions page where you can browse to missing images detected

  10. Select the Browse button, navigate to the image file and then select the file name and then Open. The path and file name will then appear in the Browse dialogue box on the Content Actions page.
  11. Select Submit to upload your image file to the Blackboard server and make the image visible in your course content.

Back to top

HTML Quick Reference

Effect Opening Tag Closing Tag
Bold <strong> </strong>
Italic <em> </em>
Line Break..
...next line of text
<br /> None
Paragraph
(blank line)
...next line of text
(not needed for Smart Text)
<p> </p>

Heading 1

<h1> </h1>

Heading 2

<h2> </h2>

Heading 3

<h3> </h3>
Hypertext Link <a href="URL goes here"> </a>
Hypertext Link
(opening in a new window)
<a href="URL" target="_blank"> </a>
Insert Image <img src="image file name here" /> None
Align Image in page <img src="image file name here" align="left" /> None
Add Text Alternative to Image <img src="image file name here" alt="text description of image here" /> None
NB. The quotation marks " " shown in the examples above should always be included in your HTML code.

Back to top