Tutorials
Adding Images
Adding images to your web page using the built-in HTML editor
in ANGEL is easy. The WYSIWYG (what you see is what you get) editor allows
you to create web pages without having to know HTML. The Fast!page
HTML Editor is available wherever a text area is found within ANGEL. The editor
is available for both faculty and students. It is found in many places within
ANGEL including the email tool and discussion forums. This tutorial will focus
on how to add images to your web pages.
1. Click on the HTML Editor Link to start creating a simple web page. The
image below is from a email message.

HTML Link
2. The HTML Editor will appear in a new page. To begin your web page, just
start typing inside the text area.

HTML Editor Window
3.
Place your cursor in the location you want to insert the image and click the
Insert Image icon.

Image Icon
4. The Image Settings window will appear. Click the Upload Image button
(located at the bottom of the Images Settings screen).

Upload Button
5. The Upload Image window will appear. Click the Browse button.
A Choose file dialog box will appear on the screen. Locate and select the image
you want to insert and click the Open button. Click the Upload button.

Upload Image Window
6. Select the uploaded image from the image preview frame by click on the
image. You know the image is selected because it will be framed by a dark black
line.

Selected Image
7. Type an alternate text-based description in the Alternative Text text
box. This step is important for accessibility.

Alt Text
8. Select a setting from the Alignment drop-down menu to
adjust how the picture will be viewed within a body of text. By default,
the image will be displayed on its own line, without text wrapping around
it. If you want the text to wrap around the image, choose either left or
right alignment.

Image Alignment
9. Type a numerical value in the Border field to add a black
border around the image and specify the thickness of the border. The border
of hyperlinked images will appear in the browser’s default hyperlink
color (often blue or purple for visited links). NOTE - This is optional.

Border
10. Click the OK button.

Click OK
11. The image will appear in the HTML Editor.

Image Appears
12. You can manipulate the images once they are in the HTML Editor. You need
to select the image by clicking on it.

Image Selected in HTML Editor
13. You can add some space between the image and the words by placing values
in the H Space or V Space text boxes. The H Space is the horizontal space
around the image and the V Space is the vertical space around the image.

Adding Space
14. You can also change the alignment of the image. Using a Left or Right
will wrap the text around the image.

Wrap Text
15. Click Accept Changes.

Click Accept Changes
Related Topics: