Rose Colored Glasses

Random Thoughts on Instructional Design

Creating an HTML Page in Angel 7.x

joann avatar

Creating a Page Using the HTML Editor

This tutorial will assist you in posting pages to Angel courses. To print this page for reference click on the Print link located at the top right-hand-side of this window.

  1. Open your sample course and click on the Materials tab.
  2. Next click on the Settings link located under the "Instructor Overview" or "Meet the Instructor" content page created Week 3. The content page form will be displayed.
  3. Click on the HTML Editor link below the Page Text field.
  4. Paste or type your introduction information into the text area then edit the materials with the Word like functions located at the top of the editor.

    Angel html editor screen

    1. Text format – this function allows for the creation of headers and other text types. Highlight the text to be changed, click on the drop-down arrow next to the field, then click on the desired style.
    2. Font type – highlight the text to be changed, click on the drop-down arrow next to the field, then click on the desired style.
    3. Font size – highlight the text to be changed, click on the drop-down arrow next to the field, then click on the desired size.
    4. Spell check – works like most spell check tools
    5. Clean HTML content
      When inserting one or more paragraphs already formatted
      by another word processor, say, Microsoft Word, the size of
      the HTML code could increase considerably. This phenomenon is due to the export
      methods used by the two applications, that insert into the HTML code many
      and mostly useless HTML tags. You can clean the
      text of these tags by using the “Clean HTML Code” option. The result is a cleaner and more accurate code.
    6. Undo and redo – Functions just like the undo and redo buttons in most PC software packages.
    7. Cut, copy and paste functions – These functions work like those found in Word.
    8. Font styles – These functions work like those found in Word.
    9. Horizontal line
      this function allows you to insert horizontal lines into the page, in order to visually separate elements.
    10. Table tool – this tool will insert a table into the page where the cursor is placed.
      When the button is clicked a pop-up browser window will be displayed to help you set the number
      of rows and the number of columns, and the border width for the new table.
    11. Hyperlink tool
      links can be applied either to text selections or to pictures. You can
      link your page to other site pages, to external sites, to downloadable
      files or to an anchor within the same page. To insert a link, you have
      to select the desired text/image and then click the Hyperlink button from the toolbar. A Link Inspector window will be displayed at the bottom of the screen. If linking to an external source paste the URL in the URL field. If linking to other content in the course click on the book icon to the right of the URL field, navigate to the materials, then click on the resource to be linked.
    12. Image tool
      you can insert images into your page using the Insert
      Image function. After pressing the image button, a pop-up window will be displayed,
      to help you select the desired picture from your course library, or to
      upload a new one.

      Angel image directory

      To upload a new image and insert it into your page:

      1. Click on the Image icon. A Image Directory popup window will be displayed
      2. Click on the [Upload Image] button located at the bottom of the Image Directory popup window. The Upload Image popup will be displayed.
      3. Click on the [Browse] button. Your computer file menu will be displayed.
      4. Navigate to the image to be uploaded and click on the image. The file location of the image will be copied into the Upload Image popup.
      5. Click on the [Upload] button. The Upload Image popup will close and the Image Directory popup will be displayed with a thumbnail of the image.
      6. Double-click on the image and enter a short description of the image in the Alternate Text field.
      7. Click the [OK] button. The popup window will close and the HTML page will display the image.
    13. Text color and background selection tools – These functions work like those found in Word.
    14. Subscript and superscript tools – These functions work like those found in Word. The superscript and subscript formatting tools are useful for mathematical exponents and expressions. When superscript or subscript are active
      the button is highlighted. To remove the formatting select the
      button while the text highlighted.
    15. Math function tool – this tool is used for inserting special math elements such as
      auto-sizing parenthesis, radicals and more. The blue area of each element
      indicates where the currently selected text will be placed when the macro
      is inserted. To insert a math element simply select the text to which the
      element should be applied and click on the desired math element.
    16. Text alignment tools – These functions work like those found in Word.
    17. Bullet tools – These functions work like those found in Word.
    18. Text indent and outdent tools – These functions work like those found in Word.

Note: if you click on the question mark icon then on one of the tools a popup box defining the tool will be displayed.

5. Add your picture or an image that you would like to represent you to your introductory narrative. For assistance with this activity follow the steps noted in item 12 listed above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on November 27, 2006 by in Angel, Tutorials.

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 28 other followers

RSS oldaily

Tweets from Major ID Solutions

%d bloggers like this: