7/27/2019 Instructions and Hints for Assignment No.3(Fall-2011)

1/2

Instructions and Hints for the Assignment No.3

CS101 (Fall-2011)

1. The assignment should be prepared using HTML only; no JavaScript is requiredin any of part of the assignment.

2. You are not allowed to use any HTML generator Tools like Dreamweaver etc todevelop / 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

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 thetag. 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 computers drive then path will be the

location of the file.For example: Your images location/path is c:/image.jpg, if HTML and image are

in same folder then images 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: https://reader009.{domain}/reader009/html5/0419/5ad7efef94071/5ad7eff12d7cis the URLof 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 oneadditional attribute in image tag.

The attribute in image tag is usemap. See below code to understand how to useusemap.

http://www.google.com.pk/logos/2011/holiday11-sr.pnghttp://www.google.com.pk/logos/2011/holiday11-sr.pnghttp://www.google.com.pk/logos/2011/holiday11-sr.png

7/27/2019 Instructions and Hints for Assignment No.3(Fall-2011)

2/2

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 .

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.

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.

The final code will be like this:

Image

RectangleMap Area

1st co-ordinate

2nd co-ordinate

3rd co-ordinate

4th co-ordinate

1020

40

30

http://p//www.vu.edu.pk/http://p//www.vu.edu.pk/