VIEWS: 7 PAGES: 6 POSTED ON: 8/15/2011
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.
Pages to are hidden for
"Using Basic HTML in Blackboard"Please download to view full document