Instructions and Hints for the Assignment No.

3
CS101 (Fall-2011)
1. The assignment should be prepared using HTML only; no JavaScript is required
in any of part of the assignment.

2. You are not allowed to use any HTML generator Tools like Dreamweaver etc to
develop / design this assignment. Only use Notepad for this purpose.

3. The students who are facing problems in placing image on HTML page should
follow the following guideline in this regard.
If you want to place any image on HTML page, you have to use img tag. i.e
<img src=”path of image”>

Same in the case of background image, if you want to use an image as

background of any tag, you have to write background="path of image" in the
tag. Tag can be body, form, table, tr, td or div. Path is URL or location of image.
Path/Source of image can be of two types (local or live/online).

Local:
If you want to use an image stored on your computer’s drive then path will be the
location of the file.
For example: Your image’s location/path is c:/image.jpg, if HTML and image are
in same folder then image’s location/path will be only image name with extension
like “image.jpg”.

Live/Online:
If image is available on web, as required in this assignment, then you have to give
full URL of the image.
For example: http://www.google.com.pk/logos/2011/holiday11-sr.png is the URL
of Google logo. If you want to place Google logo on your web page then you can
use the above mentioned complete URL as location/path of the image.

4. If you are feeling trouble to set image map in header section, as required in this
assignment then follow these instructions. It is very simple to place an image map
on anywhere in HTML page. We have to use two tags for this purpose and one
additional attribute in image tag.

The attribute in image tag is usemap. See below code to understand how to use
usemap.
<img src= “image path” usemap=”#Logo”>
Here “Logo” is map name. The next step is to create map tag. The best place to
use this tag is at the end of body tag, before closing </body>.

<map name="Logo">
Remember: Logo in map tag is same name that we used in usemap attribute in
img tag.

Then you have to use area tag into map tag.

Area tag has four important attributes.

Type of area (it can be Rectangle, Circle and Polygon). In this assignment you
have to use rectangle shape area.

Second attribute is its coordinates. We know that a rectangle has four coordinates
relative to image where we place it.

10
20 2nd co-ordinate
1st co-ordinate
Rectangle 40 4th co-ordinate
Map Area
30
3rd co-ordinate

Image

Third attribute is href. Here you will give the source/url of website or page that
you want to open, when someone will click in this area.

Forth attribute is target. You can use target attribute to open website in current
window or new window.

<area shape="rect" coords="10, 20, 30, 40" href="http://www.vu.edu.pk" target="

give appropriate value here">

The final code will be like this:

<img src=”image path” usemap="#Logo">

<map name="Logo">
<area shape="rect" coords="10, 20, 30, 40" href="htp://www.vu.edu.pk" target="
give appropriate value here">
</map>