HTML

Assignment 3 Rubric

Page 163

Step

Completed (ü)  / Incomplete (X) and Comments

1

Name and date comment in all 5 files

ü

Files renamed: index.htm, pixal.htm, dc100.htm, dc250.htm, dc500.htm

ü

2

In index.htm:

Change background colour to ivory

ü

Top margin to 100 pixels

ü

logoanim.gif to 281 X 140 pixels

ü

3

Border width to 0 pixels

In pixal.htm:

Change background colour to ivory

ü

Display background image of back.gif

ü

Image is to be tiled in y-direction

ü

Image should scroll within Web page

ü

Set size of left margin to 185 pixels

ü

4

Body tag: a paragraph with menu.gif image

ü

Float image on left margin

ü

Set border width to 0 pixels

X  Set to –185px

Set size of left margin to 185 pixels

X  Not set at all

Set dimensions of image to 173 X 295 pixels

ü

Set the value of the alt attribute to an empty " " string

ü

5

Set dimensions of logo.jpg to 281 X 96 pixels

ü

6

Change colour of the 2 HR lines to red

X  Used the Word “red” not the hexadecimal

Value.

7

Address Element:

Display text in Arial, Helvetica or sans-serif font

X  Did not use style correctly, therefore,

it is not formatted correctly.

Set font colour to blue

Set font size to 0.7 em

Change font style to normal

8

Paragraph style changes to list of links (below address element)

Display the address text in Arial, Helvetica or sans-serif font

X  Did not use style correctly, therefore,

it is not formatted correctly.

Set font size to 0.7 em

9

Above closing BODY tag:

Insert image map named "dcpages"

ü

Rectangular hotspot to pixal.htm

Coordinates(1,1) and (81,15)

Alt text is "Home"

This is how your map should be defined.

<map name="dcpages" id="dcpages">

   <area shape="rect" coords="1,1,81,15" href="pixal.htm" alt="Home" />

   <area shape="rect" coords="23,50,64,62" href="dc100.htm" alt="DC100" />

   <area shape="rect" coords="23,64,64,79" href="dc250.htm" alt="Dc250" />

   <area shape="rect" coords="23,81,64,95" href="dc500.htm" alt="DC500" />

</map>

Rectangular hotspot to dc100.htm

Coordinates(23,50) and (64,62)

Alt text is "DC100"

Rectangular hotspot to dc250.htm

Coordinates(23,64) and (64,79)

Alt text is "DC250"

Rectangular hotspot to dc500.htm

Coordinates(23,81) and (64,95)

Alt text is "DC500"

10

Apply dcpages map to the menu.gif image (top of page)

12

In dc100.htm

Change background colour to ivory

ü

Display background image of back.gif

ü

Image is to be tiled in y-direction

ü

Image should scroll within Web page

ü

Set size of left margin to 185 pixels

ü

Body tag: a paragraph with menu.gif image

ü

Float image on left margin

ü

Set border width to 0 pixels

ü

Set size of left margin to 185 pixels

ü

Set dimensions of image to 173 X 295 pixels

ü

Set the value of the alt attribute to an empty " " string

ü

Set dimensions of logo.jpg to 281 X 96 pixels

ü

Change colour of the 2 HR lines to red

ü

Address Element:

Display text in Arial, Helvetica or sans-serif font

ü

Set font colour to blue

ü

Set font size to 0.7 em

ü

Change font style to normal

ü

Paragraph style changes to list of links (below address element)

Display the address text in Arial, Helvetica or sans-serif font

ü

Set font size to 0.7 em

ü

Above closing BODY tag:

Insert image map named "dcpages"

ü

Rectangular hotspot to pixal.htm

Coordinates(1,1) and (81,15)

Alt text is "Home"

ü

Rectangular hotspot to dc100.htm

Coordinates(23,50) and (64,62)

Alt text is "DC100"

ü

Rectangular hotspot to dc250.htm

Coordinates(23,64) and (64,79)

Alt text is "DC250"

ü

Rectangular hotspot to dc500.htm

Coordinates(23,81) and (64,95)

Alt text is "DC500"

ü

Apply dcpages map to the menu.gif image (top of page)

ü

DC Titles in blue Arial, Helvetia, sans-serif

ü

Image is done by style=”float:right”

ü

13

In dc250.htm

Change background colour to ivory

ü

Display background image of back.gif

ü

Image is to be tiled in y-direction

X

Image should scroll within Web page

ü

Set size of left margin to 185 pixels

ü

Body tag: a paragraph with menu.gif image

ü

Float image on left margin

X   Not set correctly.

Set border width to 0 pixels

X   Not set correctly.

Set size of left margin to 185 pixels

X   Not set correctly.

Set dimensions of image to 173 X 295 pixels

ü

Set the value of the alt attribute to an empty " " string

ü

Set dimensions of logo.jpg to 281 X 96 pixels

ü

Change colour of the 2 HR lines to red

ü

Address Element:

Display text in Arial, Helvetica or sans-serif font

ü

Set font colour to blue

ü

Set font size to 0.7 em

ü

Change font style to normal

ü

Paragraph style changes to list of links (below address element)

Display the address text in Arial, Helvetica or sans-serif font

X  Used the Word “red” not the hexadecimal

value.

Set font size to 0.7 em

ü

Above closing BODY tag:

Insert image map named "dcpages"

ü

This is how your map should be defined.

<img src="menu.gif" style="float: left; border-width: 0px; margin-left: -185px"

     usemap="#dcpages" width="173" height="295" alt="" />

<map name="dcpages" id="dcpages">

   <area shape="rect" coords="1,1,81,15" href="pixal.htm" alt="Home" />

   <area shape="rect" coords="23,50,64,62" href="dc100.htm" alt="DC100" />

   <area shape="rect" coords="23,64,64,79" href="dc250.htm" alt="Dc250" />

   <area shape="rect" coords="23,81,64,95" href="dc500.htm" alt="DC500" />

</map>

Rectangular hotspot to pixal.htm

Coordinates(1,1) and (81,15)

Alt text is "Home"

Rectangular hotspot to dc100.htm

Coordinates(23,50) and (64,62)

Alt text is "DC100"

Rectangular hotspot to dc250.htm

Coordinates(23,64) and (64,79)

Alt text is "DC250"

Rectangular hotspot to dc500.htm

Coordinates(23,81) and (64,95)

Alt text is "DC500"

Apply dcpages map to the menu.gif image (top of page)

DC Titles in blue Arial, Helvetia, sans-serif

Image is done by style=”float:right”

14

In dc500.htm

Change background colour to ivory

ü

Display background image of back.gif

ü

Image is to be tiled in y-direction

X

Image should scroll within Web page

ü

Set size of left margin to 185 pixels

ü

Body tag: a paragraph with menu.gif image

ü

Float image on left margin

X   Not set correctly.

Set border width to 0 pixels

X   Not set correctly.

Set size of left margin to 185 pixels

X   Not set correctly.

Set dimensions of image to 173 X 295 pixels

ü

Set the value of the alt attribute to an empty " " string

ü

Set dimensions of logo.jpg to 281 X 96 pixels

ü

Change colour of the 2 HR lines to red

ü

Address Element:

Display text in Arial, Helvetica or sans-serif font

ü

Set font colour to blue

ü

Set font size to 0.7 em

ü

Change font style to normal

ü

Paragraph style changes to list of links (below address element)

Display the address text in Arial, Helvetica or sans-serif font

X  Used the Word “red” not the hexadecimal

value.

Set font size to 0.7 em

ü

Above closing BODY tag:

Insert image map named "dcpages"

ü

Rectangular hotspot to pixal.htm

Coordinates(1,1) and (81,15)

Alt text is "Home"

This is how your map should be defined.

<map name="dcpages" id="dcpages">

   <area shape="rect" coords="1,1,81,15" href="pixal.htm" alt="Home" />

   <area shape="rect" coords="23,50,64,62" href="dc100.htm" alt="DC100" />

   <area shape="rect" coords="23,64,64,79" href="dc250.htm" alt="Dc250" />

   <area shape="rect" coords="23,81,64,95" href="dc500.htm" alt="DC500" />

</map>

Rectangular hotspot to dc100.htm

Coordinates(23,50) and (64,62)

Alt text is "DC100"

Rectangular hotspot to dc250.htm

Coordinates(23,64) and (64,79)

Alt text is "DC250"

Rectangular hotspot to dc500.htm

Coordinates(23,81) and (64,95)

Alt text is "DC500"

Apply dcpages map to the menu.gif image (top of page)

DC Titles in blue Arial, Helvetia, sans-serif

Image is done by style=”float:right”

15

In index.htm:

Verify image maps work

ü

Verify design in each of the pages match

ü

TOTAL

80

/114

=

3.5

/5