HTML Lab Exam CA106 CA1 Friday 9 th April 2004

Size: px

Start display at page:

Download "HTML Lab Exam CA106 CA1 Friday 9 th April 2004"

Amberlynn Ferguson
5 years ago
Views:

1 HTML Lab Exam CA106 CA1 Friday 9 th April 2004 The Lab exam is 2 hours long it is worth 25% of your overall mark. The exam is an open book exam (you may use your class notes only). You are only allowed to use notepad to write your HTML files and either Internet Explorer or Netscape communicator to view your work and download the images you require to complete the exam. Anyone caught using any other software, or automatically fails the lab exam and gets a Zero mark. All your H:\ drives have been disabled you must login with username ca106 no password is required, and save all your work to the A:\ Drive All four Images that you will require to do this Exam are available on you should save all these image files to your floppy disk on the A: drive. ALL THE HTML FILES WHICH YOU CREATE FOR THIS EXAM SHOULD BE SAVED TO THE A:\ DRIVE ALSO Part 1 (15 Marks) Create the following frame layout should contain the file mylinks.html scrolling bars should only be included if required. 2 should contain the file banner_page.html no scrolling bars should be allowed and no resizing should be permitted. 3 should contain the file tabledisplay.html and scrolling bars should be allowed. The page should be saved as Page.html

2 Part 2 Next create the pages, which will be shown within the s. Please refer to Diagram 1 for overview. Details for mylinks.html (30 Marks) The text Please use this to navigate & Image Map Links below should be shown in bold text Include the image map map.gif (width = 161 height = 309 ), which you should have downloaded to the A: Drive, the coordinates, links and targets that you will need for this image map are: Button Coordinates Target URL (rectangle) Link to home 13, 13, 153, 60 Right tabledisplay.html page bottom Link to DCU 13, 71, 153, 118 New Links to CA 13, 131, 153, 181 New Link to google 13, 188, 153, 237 New Link to Alta Vista 13, 246, 153, 292 New Also include text links (same attributes as above) only this time use unordered bullet list. When the mouse is moved over any of the links (image map or bullet List), it should show a small text box giving the user some details of what the links are for i.e. if the mouse is positioned over the link for homepage the text box should say Home Page. Details for banner_page.html (15 Marks) This should show the DCU logo on the right hand side of your page (DCUlogo_new_small.jpg). If the user clicks on the DCU logo it should take them to a new browser and open the DCU homepage ( On the left side of the page should be your student name, student number and Course Taken, the heading student name etc should be in black. Your details (i.e. your name, number, course taken) should appear in red. Details for tabledisplay.html (40 Marks) The title Tables and Thumbnail Details should appear in the centre of the page using heading 1. After insert the first table as shown in diagram 1

3 Row 1 The first two columns on row 1 are merged, and show a yellow background, include the text as shown in diagram 1. Row 2 Column 1 Include the image turtle.gif, when the user selects this image it should link to a file welldone.html. This file should also open up in frame 3. Welldone.html is available at Use the back button on your browser to return to tabledisplay.html. Row 2 Column 2 Insert the text as shown in Diagram 2. Insert two line spaces and enter the text Insert Table 2 below. This text should appear centered. TABLE 2 DETAILS Row 1 Column 1 Simply has the text This is an example of an embedded table in column 1 row 2 Column 1 row 2 Has an embedded table this embedded table consists of two rows and two columns, each cell is filled with a different colour and has the name of the colour and the hex value, as shown in diagram 2. Column 2 row 1 and Column 2 row 2 are merged and the background set to yellow. Simply show the following message This is two rows merged with a yellow background After table 2 insert the thumbnail image thumbdcua.jpg (width 189, height 118). As this is a thumbnail image include a link to the original image this image should open up in a new browser. Finally, include a named Anchor i.e., a link from the bottom of the document (CLICK TO RETURN TO THE TOP OF PAGE), to the top of the page (Tables and Thumbnail Details). Again all images can be found at and The Document welldone.html can be found at

4 Diagram 1: This is how your frame page should look like when you have finished. To view the colour content, load up the image Exam.gif, which can be found at

5 Diagram 2: Full Image for 3, to view the colour content, you can load up the image exama.gif from