In Moodle, you will upload the URL for the Web-page you create following the directions below.

On your W: drive, you should already have a folder for this class which is called   it111  . By saving all your web-pages for this class in that folder, your URL's will always be of the form: http://students.juniata.edu/your-user-name/it111/your-file-name.htm . Remember that when you save an .htm file, the name should not have any spaces, and it should have the .htm file extension. Always upload the full URL, not simply the file-name.

The element you use to include an image in html is MAP. An example of this element is:

<IMG SRC = "full file-name" >

In this class, you will save the image used in a page in the same folder that contains the html file. If the image is saved in a different folder, that full name would have to be provided in the quotes above.

If you want to make a portion of the image "clickable," then an image map is required.

1. Find an image (appropriate, not offensive, of type .jpg or .gif).

2. Save it to your it111 folder on your W: drive.

3. Open a new tab in your browser, and open your newly saved image, using its full URL, which is probably of the form:

http://students.juniata.edu/your-user-name/it111/your-image-name.jpg (or .gif)

4. You can use the Poor Man's Image Mapper , to find the coordinates of this image that you would like to make clickable.  Do NOT scale the image. Note that you must input a complete URL to the Image Mapper (since you already opened your image in a browswer, with its full URL, you'll be able to copy and paste the URL directly into the Image Mapper). As discussed in class, the image map requires the upper left corner and lower right corner to define the clickable rectangle. 

5. A sample image with image map is:

<IMG SRC = "file-name" USEMAP="#map-name" >

<MAP NAME="map-name">
<AREA SHAPE=RECT COORDS="Left, Top, Right, Bottom" HREF="full URL for link">
</MAP>

6. So, create a new html web-page. Add an image (labeled with one of the header <H1> tags), with a valid image map.

7. Finally, add some additional content to your page, with an additional image, ALL of which is a link, (that means that it's not an image map).