; Using Basic HTML in Blackboard
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Using Basic HTML in Blackboard

VIEWS: 7 PAGES: 6

  • pg 1
									          Using Basic HTML
            in Blackboard                                                      8
Using HTML for Basic Text Formatting
Entire books and courses have been written on teaching HTML, so you should consider this
chapter only a basic introduction to the subject. This short primer focuses on some of the
most basic and useful HTML that you can use in building your course. There are also links
here to reference sites on the Web and some books that you might consider reading.


HTML Basics
When you look at an HTML document, you will see “tags” sprinkled throughout. These
tags are enclosed in <angle brackets> and serve as signals to the web browser. Most
frequently, HTML tags will surround a block of text, having a starting tag and a corre-
sponding ending tag. These follow a common format, where the end tag is the same as the
start tag, except that it begins with a slash. For instance, every HTML document opens with
a starting <HTML> tag, and ends with a closing </HTML> tag. Tags are not case sensitive
(can be upper or lower case) but in this document, they will all be presented in uppercase
for easy identification.


“Smart Text” and HTML
In the margin at the bottom of each text or message box in the Blackboard environment,
you’ll see radio buttons to select Smart Text, Plain Text, or HTML. HTML codes work if
you select either Smart Text or HTML. The benefit of using Smart Text is that you do not
have to code for line or paragraph breaks. Selecting Plain Text displays everything in the
message box just as you type it. This setting is useful for illustrating the use of HTML code
since the Plain Text setting turns off code reading. For the most part, the default setting of
Smart Text is all you’ll need to use.


Bold and Italic Text
First, here are some codes for basic text modifications that you may use when adding
content to your course. These HTML codes will work in “Smart Text” or “HTML” codes,
which can be selected using the radio buttons located directly below the text input box on
the Add/Modify Item screen.

To have bold text, open with the <B> tag and close with the </B> tag.
                 Desired Text                                       HTML
               This text is bold.                          This text is <B>bold</B>.




                                             71
EdTech Leaders Online
Basic HTML

                        To have italic text, open with the <I> tag and close with the </I> tag.
                                        Desired Text                                    HTML
                                    This text is in italics.                 This text is in <I>italics</I>.


                        What if you want to combine different attributes: say, make text both bold and
                        italic? Here you have to be careful to order your tags properly. For your text to
                        appear properly, you must “nest” your tags so that the first tag opened is the last
                        tag closed.
                                      Desired Text                                Correct HTML
                            This text is bold and in italics.     This text is <B><I>bold and in italics</I></B>.

                                                                                           
                        Below, just for reference, is an example of and incorrect (not nested) version of
                        text with two tags, which should NOT be used:

                                      Desired Text                               Incorrect HTML
                            This text is bold and in italics.     This text is <B><I>bold and in italics</B></I>.

                                                                                           
                        Font Size, Color
                        You can also adjust the size and color of fonts. Both are “modifiers” of the
                        FONT tag, which is used to control the appearance of the text that is shown in
                        the browser. In HTML, font size runs from 1 to 7, with most text in Blackboard
                        appearing in size 3 font. To change the size of the font, use the FONT tag, with
                        a modifier of SIZE.

                                    Desired Text                                  HTML
                                   This text is big.            This text is <FONT SIZE=”5”>big</FONT>.




                        There are two items to note here. First, the modifier amount will always be put
                        in double quotation marks. Please be sure that these are standard quotation
                        marks that are straight quotes (“) rather than curly (or “smart”) quotes (“). If you
                        are writing your HTML in Microsoft Word, be sure to turn off the AutoFormat
                        feature that creates curly quotes. (Go to the Tools pull-down menu, select
                        AutoCorrect Options, and deselect Replace “straight quotes” with “smart quotes”
                        from the AutoFormat as you Type menu.) Second, note that the closing tag does
                        not include the modifier—it is simply the main tag repeated with the slash, as
                        before. See in the above example where the opening tag has both the FONT tag

          72
                                                                                      EdTech Leaders Online
                                                                                      Facilitation & Design Guide

and the SIZE modifier, but the closing tag has only the /FONT.


     Important Note!
ETLO recommends using a dedicated text editor such as Notepad (PC) or
SimpleText (Mac) to write and/or edit HTML. Using these tools provides
the greatest compatibility and least likelihood of complication due to
unneeded features. Notepad can usually be found under Start > Programs >
Accessories. SimpleText can usually be found under the “Applications” folder.


Adjusting color is a similar process, but is slightly less intuitive. Internet
browsers display colors based on how much red, green, and blue make up those
colors. To further complicate matters, these three values are transformed into a
single hexadecimal number that looks something like this: #3366FF. Because of
this, the easiest way to pick web colors is to user a reference table. WebMonkey
provides a good example:

http://hotwired.lycos.com/webmonkey/reference/color_codes/


To change the color of text use the FONT tag, with a modifier of COLOR. The
color you specify must be in double quotation marks and include both the #
and the six-character code.


       Desired Text                               HTML
      This text is red.      This text is <FONT COLOR=”#FF0000”>red</FONT>.


Newer browsers also support some color names. Instead of using the
hexadecimal number, you can simply type the color name in quotation marks,
for example <FONT COLOR= “red”>red</FONT> rather than typing the
number. A list of these colors can be found at the W3Schools site:


http://www.w3schools.com/html/html_colornames.asp


Line Breaks
If you are editing in the Blackboard “HTML” mode (rather than the “Smart
Text” mode) you may need to add manual line breaks. If you do not specify
these line breaks, then the resulting text will display without any breaks, even if
you have created additional spacing (by adding multiple spaces or by pressing
the Enter/Return key) in the text edit window.

The easiest way to create manual line breaks is by using the <BR> tag. This tag
functions like the Enter key. If you put in one <BR>, it represents the end of
                                                                                                 73
EdTech Leaders Online
Basic HTML

                        a line. Two <BR>s in succession would be the end of a line with a blank line
                        following. (For instance, at the end of a paragraph.)
                                       Desired Text                                HTML
                                  Line 1                                  Line 1 <BR>
                                  Line 2                                  Line 2 <BR>
                                  Paragraph 1 ends here.                  Paragraph 1 ends here <BR><BR>
                                                                          Paragraph 2 then begins.
                                  Paragraph 2 then begins.



                        Paragraph Breaks
                        An alternative to combining two <BR> tags to create a blank line is the
                        <P> (or paragraph) tag. This tag is essentially the equivalent of writing
                        <BR><BR>.
                                        Desired Text                                 HTML
                                   Paragraph 1 ends here.                   Paragraph 1 ends here. <P>
                                                                            Paragraph 2 then begins.
                                   Paragraph 2 ends here.



                        Bulleted or Numbered Lists
                        You may also want to use HTML features like numbered and bulleted lists
                        helpful in your course or workshop, as Blackboard does not offer any way to
                        create lists. To create a list, you will use one of the two list tags: <OL> for a
                        numbered (or “ordered”) list or <UL> for a bulleted (or “unordered”) list. Each
                        item in a list also has its own tag, <LI>, which signifies that it is a “list item.” At
                        the end of your list, be sure to use a closing tag (</UL> or </OL>) to prevent
                        extra bullets or numbers at the end. An unordered list will appear like this:


                                        Desired Text                                  HTML
                                       • List item #1                       <UL><Li>List item #1</LI>
                                       • List item #2                       <LI>List item #2</LI>
                                       • List item #3                       <LI>List item #3</LI></UL>

                        In contrast, an ordered (or numbered) list might look like this:
                                        Desired Text                                  HTML
                                       1. List item #1                      <OL><Li>List item #1</LI>
                                       2. List item #2                      <LI>List item #2</LI>
                                       3. List item #3                      <LI>List item #3</LI></OL>

                        Inserting links and images using HTML
                        HTML uses the <a> (anchor) tag to create a link to another document.
                        An anchor can point to any resource on the Web: an HTML page, an image, a
                        sound file, a movie, etc.
                        The syntax for creating an anchor is as follows:
                        <a href=”url”>Text to be displayed</a>
          74
                                                                                      EdTech Leaders Online
                                                                                      Facilitation & Design Guide

The <a> tag is used to create an anchor to link from, the :href ” attribute is used
to address the document to which you want to link, and the words between the
open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to the EdTech Leaders Online website:
<a href=”http://www.edtechleaders.org/”>Visit ETLO!</a>
The line above will look like this in a browser: Visit ETLO!


       Important Note!
You can use the “target” attribute to make a link open in a new browser
window. When designing or facilitating workshops in a course-authoring
environment such as Blackboard, it is critical for copyright purposes to link
to all locations in new windows, as opposed to allowing them to be viewed
through the “frame” of the course-authorning environment. The line below
illustrates how to use the “target” attribute to open a link in a new browser
window: <a href=”http://www.edtechleaders.org/”target=”_blank”>Visit
ETLO!</a>.


In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it
has no closing tag. To display an image on a page, you need to use the “src”
attribute, which stands for “source”. The value of the src attribute is the URL of
the image you want to display on your page.
The syntax for defining an image is as follows:
<img src=”url”>
The URL points to the location where the image is stored. An image named
“celebration.gif ” located in the directory “images” on “www.edtechleaders.org”
has the URL: http://www.edtechleaders.org/images/celebration.gif.
The browser puts the image where the image tag occurs in the document. If
you put an image tag between two paragraphs, the browser shows the first
paragraph, then the image, and then the second paragraph.


     Important Note!
In order to link to an image, i.e. have it visible to the people viewing your
course, you must first save the image that you want to use on a server to
which you have access.


HTML Editors
If you become interested in expanding your abilities to customize what you
see in Blackboard even further, you might consider investing in an HTML
editor. These tend to be on the expensive side, so be sure that this is something
you will need and use before investing in one. Also check for any educational
discount available, as this can help to reduce the price. There are two main
                                                                                                 75
EdTech Leaders Online
Basic HTML

                        advantages to using an HTML editor. First, the editing window and tools are often
                        modeled on word processors, so that they are easy for new users to begin work quickly.
                        In editors, users can select formatting options, add bulleted and numbered lists, and
                        insert tables by clicking a few buttons or menu items. Second, depending on the editor,
                        HTML tags may be optionally displayed or completely hidden within these editors,
                        further simplifying the editing process.

                        The most popular programs are:
                          • Macromedia Dreamweaver
                          • Adobe GoLive
                          • Microsoft FrontPage

                        In addition, some web browsers may also include basic HTML editors.
                        Copying Text from an HTML Editor into Blackboard
                        To copy the HTML from a web editor into Blackboard, follow these steps:

                        1. Open the file in your editor and switch to the code view. (You should see the
                            actual HTML tags directly in the text.)
                        2. If your editor does not have a code view, open a text editor such as Notepad
                           (PC) or SimpleText (Mac) and then open HTML file.
                        3. Select everything in between the <BODY> tag near the top of the document
                            and the </BODY> tag near the bottom. Do not include the <BODY> tags
                            themselves. Copy the selected text. (Use Edit > Copy, or the keyboard
                            shortcut Ctrl+C or Command+C.)


                            Important Note!
                        When you copy HTML from an editor to the Blackboard edit window, be sure to only
                        copy the text between (and not including) the <BODY> and </BODY> tags.


                        4. Navigate to an existing Blackboard item in the control panel view or click.
                           Add Item to create a new item.
                        5. Paste the HTML code that you copied in Step 3 into the box labeled “Text:”
                           Add any additional requested information such as title and color of title.
                        6. Don’t forget to select the “HTML” option below the text input window. If
                           you leave the setting in “Smart Text,” you are likely to see odd spacing.


                              Did you know...
                        Although Microsoft Word allows you to save a document as HTML, this process is
                        not foolproof. The HTML code that Word generates is highly customized to make it
                        appear especially well-formatted in Microsoft’s browser, Internet Explorer. This code
                        is, at times, interpreted poorly in other browsers (such as Netscape and Opera) or on
                        non-Windows machines. In light of these limitations, ETLO does not recommend using
          76            Word’s Save as HTML feature within Blackboard.

								
To top
;