Techniques for Embedding External Web Pages

Placing static webpages within KEWL

You can place an external page inside KEWL using the IFRAME tag. For example, consider the following

<IFRAME SRC="http://www.uwc.ac.za/" width="700" height="500">
</IFRAME>

Make sure that you do not leave out the </IFRAME> tag, if you do, your
course will cease to work from the broken page onwards, and it may take a
week or more to get someone with Administrative rights to repair it for you.

The example above will place a copy of the UWC website within the KEWL
course page that you are editing. In this way, you can create static HTML
pages, and upload them to your course folder on KEWL, and include them
within your page to ensure that you get the navigation buttons and other
features of KEWL, but still allow for static HTML pages to be included. It
is not a good idea to use this method routinely, but there may be some
special cases where it is useful. For example, imagine that you have a
complex webpage, with some interactive content that is not really very
suited for placing inside the KEWL system as such. You can use WebExplorer
to upload the pages to your course folder on KEWL (or any server to which
you have access) and then place an IFRAME tag in your KEWL page to call the
external page.

Be warned, however, we are currently developing tools to enable you to
export your content from KEWL to static HTML for distribution on CDROM. KEWL
will not include IFRAME linked files, so you will need to make sure that
your IFRAME linked files are in the right location relative to the folder in
which you copy your exported your HTML for distribution on CD-ROM.

Here is Richard's example:

<h3>Hand dingis</h3>
<table width="700"><TD>
In the exercise below, you can use the hand dingis to move the image around.
Click the hand to see how to do the hand dingis's dingis.
</TD>
</Table>
<TABLE width "810">
<TR>
<TD width="710">
<IFRAME SRC="http://atlas.botany.uwc.ac.za/imagery/southafrica/ncape.htm"
width=700 height="550" align=left>
</IFRAME>
</TD>
<TD>
This is a bunch of text that should appear beside the iframe. You can have
<ul>
<li>A list titem
<li>another lits item
</ul>
</TD width=100">
</TR>
</TABLE>

Hyperlinking Email addresses

You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is: <A href="mailto:emailinfo@host">Name</A>

For example, enter: <A href="mailto:ascott@botunix.uwc.ac.za">Ms Anna Scott</A> to create a mail window that is already configured to open a mail window for Anna Scott. (You, of course, will enter another mail address!) This is OK for course content that is inside a database, but it is not a good idea to put mailto links in plain HTML webpages. There are spambots that scan websites looking for exposed email addresses, and then they use them to build a database which is used to distrubute spam emails.

To recap, a text hyperlink is simply text, such as a word or phrase, that has been assigned a destination URL, for example, here is a hyperlink.

A picture hyperlink on the other hand is a picture that has been assigned a destination URL in one of three ways:

• The entire picture can be assigned a default hyperlink. In this case, the site visitor can click any part of the picture to display its destination. An example of a picture with a default hyperlink is a button.
• Similarly, an image can be cut and placed in a table much like the “HTML Tutor” and each individual image can be assigned its own default hyperlink. Again in this case, the site visitor can click any part of each picture in a cell to display its unique destination.
• The picture can be assigned one or more hotspots, which are hyperlink regions on the picture. A picture that contains hotspots is called an image map. For example, an image map can be a picture that represents different parts of a Web site (such as the home page, a catalogue page, and so on). The site visitor clicks a certain area of the image map to display the corresponding page. We will not be showing you how to hyperlink a hotspot as this requires knowing the co-ordinates of the area to assign as the hotspot. This is often much easier accomplished with an HTML editor.

You can set a default hyperlink for a graphic, such as a picture, animated GIF, or video. When a site visitor clicks the graphic, the Web browser displays the destination of the hyperlink. For example, you could hyperlink a thumbnail image to its larger counterpart. The code would read as follows:

<A href="images/lgfynbos.jpg"><IMG border="1" src=" images/thfynbos.jpg" width="100" height="123"></A> ,

where <A href="images/lgfynbos.jpg"> is the opening tag for the hyperlink;
<IMG border="1" src=" images/thfynbos.jpg" width="100" height="123"> is the image source code, and </A> is the closing tag for the hyperlink. As with text hyperlinks, the opening and closing tags are on either side of the image source code.

The above HTML code would produce something like this:

Beside text and graphics, audio files and document formats can also be hyperlinked

If you want the destination of the hyperlink to show up in a specific frame, you have to specify the target frame. This is especially useful when your HTML page comprises a number of frames. If you have not set the target frame, the default frame is usually set for your hyperlink.  Setting the target frame for a hyperlink is the same for text, images, audio files and document formats.