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 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: 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 1st co-ordinate

20

2nd co-ordinate 40 4th co-ordinate

Rectangle 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>