Making websites

The simplest form of e-learning materials

The most common way of preparing e-learning resources is in the form of web pages within a web site. This is usually a series of web pages (HTML files) that are linked together using a navigation system. The pages themselves contain information in the form of text, images and some types of multimedia. You can also place interactive elements in your pages to add a level of participant activity and engagement.

Once you have created your web pages they can be uploaded to a web server or LMS so your students can access them.

Perhaps the fastest way of creating an e-learning resource is to provide links to existing web sites and resources into your web site. The pages you prepare can create the context and the instructions for the students and provide hyper links to the resources that already exist on the internet. It is important to realize that these links may become obsolete as web sites often change their addresses or are removed from the web.

The following sections provide you with some rules of thumb when designing your pages and techniques you can use to create your e-learning materials.

Using an HTML Editor

Using an HTML editor is not much different from using a Word Processor. There are a few differences, however, that you will need to be aware of.

The following are some tips on how to create web pages using an HTML editor:

  1. Adding text
    1. Structure the text using heading styles (ie Heading 1, Heading 2 etc). You can use a style sheet to redefine what the headings look like. Doing this will make your web pages more accessible.
    2. Keep the length of any one web page to about 1½  to 2 screens to minimise scrolling.
    3. You can copy and paste text from a word processor into your web pages.
  2. Adding images
    The web is a visual medium. Where possible it is a good idea to include some appropriate images to provide visual support for your content. Be careful, however, not to add images just for the sake of it. This can be very distracting and annoying if over done.
    1. Make sure images are the correct size before you insert them in your web pages. Large image file sizes will take a long time to download even if you have changed their size in the web page.
    2. Add 'alt' text for the images to improve accessibility.
      You should always add a short title or description to your image so that people who use screen readers can receive information about the images on the page. Some HTML editor programs will not allow you to add an image without adding an 'alt' tag to the image.
    3. You can add a hyperlink to an image. This is a good way of making an interactive navigation system for your web pages.
  3. Adding media elements
    Probably the simplest type of multimedia you can add to your resources is a Flash movie. Your HTML editor may have a menu item for adding or “embedding” media files in your web page.
  4. Lay out text in tables
    Simply adding text and images to a web page does not make it look engaging. One way of laying out your content is to lay it out using tables. Whilst this is not the accepted way of laying out content, it can be used if your students do not use screen readers or have other accessibility requirements. The correct way to layout content in a web page is to use cascading style sheets, but this is not a task for people who are just starting out in creating e-learning content.

Adding interactive elements

  1. Adding hyperlinks
    There are a number of simple ways in which you can interactivity to a web page. Using the hyperlink function allows the student to move around your e-learning resources by clicking on links.
    You can use images or words and then use the link function in your HTML editor program. If you want the link to open in a new window select the ‘target ="_blank"’ option.
    Some HTML editor programs allow you to add an ‘image map’ to your web page. An image map allows you to draw one or more shapes over an image and link these to specific web pages. An example use of this strategy could be placing image maps over different parts of a piece of machinery. These images maps open a new window that is link to pages that explain the functions of each part of the machinery.
    If you are starting with a Microsoft Word document, from which  you wish to produce a web page, you can use Course Genie which adds a range of interactive functions to the web pages. Refer to the section on 'Assemble it' which describes the use of specific programs to convert word to html.
  2. Using form elements
    Form elements can add a level of interactivity to your web pages by allowing the students to select options or enter text to the web page.
    Form elements include check boxes, text entry boxes, drop down menus and submission buttons. To provide feedback, based on the entries or selections made, you would need to develop JavaScript programs to be included in the page. To do this you may need to ask a person who has knowledge of JavaScript programming to assist you.
  3. Using layers to move images on the screen
    A layer is a web page element that can have particular properties. One of the features of a layer is that it can be made 'draggable'. This means objects on the screen can be clicked on and then moved around the web page. Once again this requires JavaScript to be added to the page. An example of this type of script, and how to use it your web pages, is located at Dynamic Drive DHTML web site http://www.dynamicdrive.com/dynamicindex4/image3.htm.
    It is also possible to create JavaScript responses to actions carried out on the draggable layer, such a dropping the image in a layer on a target. This lets you build games that provide feedback based on a students interaction with the elements on the web page. Once again this will require a knowledge of JavaScript programming.

The following are programs that allow you to create web pages and web sites very simply.

Resources

Last modified: 15/9/08