| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /nginx/html/JimMartinson/Classes/CST1021/Labs/ |
Upload File : |
Lab 3 - Links
Grading Criteria
-30 if the CSS Validation Service or Markup Validation Service report errors. No further grading will be done.
Criteria Points
Links are correct. 10
Link tab order and shortcuts are correct. 6
Image map is correct. 6
Anchors are correct and in correct location. 4
Do not add any additional code or styling other than what is required by the lab.
HTML is well formatted and follows lab requirements.
I will deduct points for additional code or styling that are or cause problems. 4
Total: 30
There are some things I expect. If they are incorrect you will lose the following:
Work submitted incorrectly: -3 pts. This covers errors such as incorrect files names, incorrect file formats, poor formatting, etc.
Second and subsequent submission of work for grading: -3 pts.
Work submitted late: -3 pts per week.
I reserve the right not to apply the deduction points at my absolute discretion.
-0 Work submitted incorrectly.
-1 Work submitted incorrectly.
Your `AbdurahmanJigre_Lab03_A.html` file was misnamed `AbdurahmanJigre_Lab3_A.html`.
Your html filenames are incorrect. Check the case of 'A' and 'B'.
-1 Work submitted incorrectly.
Your Lab03 folder is misnamed 'lab_03'.
-1 Work submitted incorrectly.
Your files were not in a Lab03 folder as required.
If you need help correcting this, please contact me.
-3 Work submitted incorrectly.
None of the images were submitted with your assignment.
-5 Work submitted incorrectly.
Your Lab03.css file is missing from the assignment.
-30 Work submitted incorrectly.
Your xxx file is missing from the assignment.
=e
-3 Work submitted late.
Lab03.css:
-30 The CSS Validation Service at https://jigsaw.w3.org/css-validator/validator.html.en reported errors.
You really must validate your css before submitting your assignment.
=e
Lab03.css:
OK.
@charset "utf-8";
/* Lab03.css */
a { color: blue; }
a.page { color: black; font-size: 3em; }
a.page img { height: 48px; padding: 0 .1em; vertical-align: sub; width: 93px; }
body { font-size: 1.25em; }
h1 { background-color: #efd; }
-3 Work submitted incorrectly: You are missing the required Lab03.css file.
Lab03_A.html:
-30 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab03_A.html:
OK.
html:
-1 Incorrect value the the lang attribute. You used en-US while I required en.
-1 Line 2; Your html element does not include the required lang attribute. See the lab Notes.
-3 Line 9; the link to your css file has an incorrect href.
-0 Line 5,9; The head tag should be in lowercase, not 'Head'.
-0 Line 8,17; The body tag should be in lowercase, not 'Body'.
-1 Line 10; The h1 tag should be in the body.
-2 Lines 3-5; No head section.
-1 Line 7; Missing the stop head tag.
-0 You have an a tag on line 9 that is not required by the lab.
This id anchor should be in the h1 element on page B.
-4 You placed all of your tabindex in a div element above the a tag.
The tabindex attribute must be in the a tag. You should also then remove the div tags.
head:
-0 Line 6; `type="text/css"` is no longer needed.
Step 6 link 1 to B (n 4)
-0 Step 6; Line 14; It is common practice for img tags to be all on one line.
-1 Step 6; Line 14; You have an empty a tag with the tabindex attribute.
This should be removed as it changes the tab order.
-1 Step 6; Lines 10,11; Both the image and Next text should be in the a tag.
-1 Step 6; Lines 13,17; Both the image and Next text should be in the same a tag.
Merge the a tags into one tag. They are messing up your tab order.
-1 Step 6; Lines 11-15; You placed your tabindex in a div element around the a tag.
The tabindex attribute must be in the a tag.
It seems to work as the tag does seem to get focus, but it does not and will not hyperlink by hitting enter.
-2 Step 6.2; Line 10; The href has an incorrect value.
-1 Step 6.3; Line 14; Missing the shortcut key.
-1 Step 6.4; Line 14; Missing the tab order.
-1 Step 6.4; Line 16; The tab index has an incorrect value.
-1 Step 6.5; Line 15; The class is not set to page, you set it to `Page`.
Instead you added an inline style.
-1 Step 6.6; Line 10; The a element must contain both the text `Next` and the handRight.png image.
This makes both the text and the image clickable as the hyperlink.
-1 Step 6.6; Line 10; The a tag content is in the wrong order.
The text should be first and then the image.
-1 Step 6.6.2; Line 11; The height and width values for the image are incorrect.
This image should also be part of the hyperlink.
-1 Step 6.6.2; Line 13; The image must have height and width set using css or height and width attributes.
You have two height attributes set and you set them for the a tag, not the img tag.
-0 Step 6.6; You have whitespace in your a tag content.
An underscore is displayed before the text in your link.
-1 Line 14; The br tag is missing the starting angle bracket.
Step 7 link 2 to B bottom (b 3)
-2 Step 7; Line 19; The href has an incorrect value.
The href is linked to a botton id on the current page instead of page B.
-1 Step 7; Line 20; There should be no spaces between an attrubute and its value.
`accesskey = "b"` should be `accesskey="b"`.
-1 Step 7; Line 20; Attribute values should be enclosed in quotes.
`tabindex = 3` should be `tabindex="3"`, again with no spaces between an attribute and its value.
-1 You used the same accesskey value for steps 6 and 7. The one for 6 is incorect.
-1 Step 7; Lines 16-19; Same problem as step 6.
-1 Step 7; Line 22; The link does not go to the bottom of page B.
-1 Step 7.2; Line 15; Missing the shortcut key.
-1 Step 7.3; Line 15; Missing the tab order.
Step 8 link 3 to New B (o 2)
-4 Step 8; You are missing this step entirely.
-1 Step 8; Line 17; This link should come before Step 9 in your html.
-1 Step 8.1; Line 17; The href attribute value must be enclosed in quotes.
-1 Step 8.1; Line 17; The href attribute value in incorrect.
It should not go to the bottom of the page.
-1 Step 8.1; Line 17; The hyperlink does not open the page in a new window.
-1 Step 8.2; Line 17; The accesskey attribute value in incorrect.
You have a zero instead of the letter o.
-1 Step 8.2 Line 22; Missing the shortcut key.
-1 Step 8.2; Line 17; The value for the tabindex attribute is incorrect.
-1 Step 8; Lines 20-23; Same problem as step 6.
-4 Step 8; Your links for step 3.3 are incorrect. You used three <a> tags for each. You should have only one with the href, accesskey, and tabindex attributes in the one tag.
-1 Step 8.3; Line 15; Missing the tab order.
Step 9 link 4 to Class (c 1)
-2 Step 9; Line 37; The href has an incorrect value.
-1 Step 9; Line 24; The value for the tabindex attribute is incorrect.
-1 Step 9; Line 17; Added target attribute.
-1 Step 9; Lines 24-27; Same problem as step 6.
-1 Step 9.2 Line 15; Missing the shortcut key.
-1 Step 9.3; Line 15; Missing the tab order.
-1 Missing stop bogy tag.
While this is allowed by HTML 5, it is not allowed by me.
-1 Missing stop html tag.
While this is allowed by HTML 5, it is not allowed by me.
Lab03_B.html:
-30 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab03_B.html:
OK.
-0 Lines 13,24,25,26; Self-closing tag syntax in text/html documents is widely discouraged.
It’s unnecessary and interacts badly with other HTML features
Also, if you are going to use it there should be a space before the closing /.
Step 12 <h1> top
-2 Step 12; You are missing the h1 heading and anchor.
-2 Step 12; Line 16; The name attribute is obsolete.
Consider putting an id attribute on the nearest container instead and remove the a tag.
-2 Step 12; Line 16; You did not place the 'top' anchor in the h1 tag as required.
This can be done with an id attribute.
-1 Step 12.2; Line 14; Attribute value not enclosed in quotes.
-1 Step 12.2; Line 12; You did not place the 'top' anchor in the h1 tag as required.
Instead you placed it in an empty a tag.
Also, the use of an a tag here can mess up your tab order.
-1 Step 4.2 Line 14; Your h1 tag should have the same content as the title. See notes.
Step 13 link 1
-0 Line 14; It is common practice for a tags to be all on one line.
-1 Step 6; Line 14; You have an empty a tag with the tabindex attribute.
This should be removed as it changes the tab order.
-1 Step 13; Lines 10,11; Both the Previous text and image should be in the a tag.
-1 Step 13; Line 11; The href value for the a tag is incorrect.
Note the /.
-1 Step 13.3; Line 15; Incorrect shortcut key.
-1 Step 13.3; Line 14; Missing the shortcut key.
-1 Step 13.4; Line 15; Incorrect tab order.
-1 Step 13.5; Line 10; The class is not set to `page`.
You set it to `Page`.
-1 Step 13.6; Line 13; You have the image and text content of the a tag in the wrong order.
-0 Step 13.6; You have whitespace in your a tag content.
An underline is displayed after the text in your link and moves the image to the right a bit.
There is also an underscore displayed after the image.
-1 Step 13.6; Line 10; The a element should contain both the text `Previous` and the handLeft.png image.
This makes both the text and the image clickable as the hyperlink.
-1 Step 13.6; Line 10; The a tag content is in the wrong order.
The image should be first and then the text.
-1 Step 13.6; Lines 12,16; Both the image and Previous text must be in the same a tag.
By placing then in different a tags you have messed up the tab order.
-1 Step 13.6.2; Line 15; The image should have height and width set using css or height and width attributes.
You set them for the a tag, not the img tag.
-1 Step 13.6.2; Line 11; The height and width values for the image are incorrect.
This image should also be part of the hyperlink.
Merge the a tags into one tag. They are messing up your tab order.
-1 Step 13.6.2 Lines 10-13; Missing the text `Previous`.
-1 Step 13.6.2; Line 15; You misspelled Previous.
-1 Steps 13.6.1 and 13.6.2; You have placed these steps in your html in the wrong order.
The text should be after the image.
-1 Steps 14 and 15; You have placed these steps in your html in the wrong order.
Step 14 link 2 to bottom
-4 Step 14; You are missing this step entirely.
-1 Step 14.1; Line 15; The href is incorrect.
-1 Step 14.1; Line 17; The link does not go to the bottom of page B.
-0 Step 14.1; Line 14; You do not need the page name in the href. Only #bottom is needed.
-1 Step 14.2; Line 16; Missing the shortcut key.
-1 Step 14.3; Line 16; Missing the tab order.
-0 Step 14.4; Line 17; Misspelling of `Page`. You have `page`.
-0 Step 14.4.2; Line 13; There should be no spaced between an attribute name, the = character, and the value.
`href = "#bottom"` should be `href="#bottom"`.
Step 15; map
<map name="map">
<area shape="rect" coords="0,0,261,104" href="https://www.bing.com" title="Search with Bing." tabindex="3">
<area shape="rect" coords="0,104,262,200" href="https://www.google.com" title="Search with Google." tabindex="4">
<area shape="circle" coords="357,102,91" href="https://www.yahoo.com" title="Search with Yahoo!" tabindex="5">
</map>
-9 Step 15; Missing the image map.
You were supposed to setup an image map. Search for: html image maps.
-0 Lines 19,21,23; It is common practice for area tags to be all on one line.
-6 Step 15; The map is not linked to the image.
-0 Step 15; You have incorrect alt values for the area tags.
-1 Step 15.2; Line 17; The image must have height and width set using css or height and width attributes.
-1 Step 15.2.1; Line 15; The width attribute value is incorrect.
-3 Step 15.3; You did not set the title for the area tags as required.
-3 Step 15.3; Your alt values are incorrect for the area tags.
Bing
-2 Step 15.3.1; Line 60; The href value is incorrect.
-2 Step 15.3.1; Line 23; The coords value is incorrect.
-1 Step 15.3.1; Line 16; The coords value is somewhat incorrect.
Your top-left x value is too big. Your bottom-right x and y values are too small.
-2 Step 15.3.2; Line 23; The coords value is incorrect.
-2 Step 15.3.2; Line 40; The title attribute and value are missing.
-1 Step 15.3.1; Line 19; The title value is incorrect.
-0 Step 15.3.1; Line 23; Misspelling of the title value.
This should be the first area tag in the map.
-2 Step 15.3.1; The tabindex was not set.
Google
-2 Step 15.3.2; Line 23; The coords value is incorrect.
-2 Step 15.3.2; Line 23; The href value is incorrect.
-1 Step 15.3.2; Line 17; The coords value is somewhat incorrect.
Your top-left x value is too big. Your top-left y value is too small.
-1 Step 15.3.2; Line 24; The coords value is somewhat incorrect.
It does not encapsulate the Google part of the image.
-2 Step 15.3.2; Line 20; The tabindex value is incorrect.
-2 Step 15.3.2; The tabindex was not set.
Yahoo
-2 Step 15.3.3; Line 19; The shape and coords values are incorrect. This should be a circle area.
-2 Step 15.3.3; Line 20; The coords value is incorrect. Your r value is too large.
-2 Step 15.3.3; Line 20; The coords value is incorrect. Your r value is too small.
-2 Step 15.3.3; Line 60; The href value is incorrect.
-1 Step 15.3.3; Line 18; The coords value is somewhat incorrect.
Your x,y values are not at the center of the Y! image. Your r value is too large.
-1 Step 15.3.3; Line 25; The coords value is somewhat incorrect.
The x value is too small. The r value is a bit too large.
-2 Step 15.3.3; Line 20; The coords value is incorrect. The y value must be >= to the y1 value.
-2 Step 15.3.3; Line 21; The tabindex value is incorrect.
This should be the third area tag in the map.
-2 Step 15.3.3; The tabindex was not set.
-1 Step 15.3.3; Line 30; An area circle coords only has 3 numbers for the value: x,y,radius.
-0 Step 15.3.3; Line 25; Misspelling of title `Search with Yahoo!`. You have `search with yahoo`.
-0 Step 15.3.3; Line 30; Your x,y coords for the circle are a bit off.
Step 15.4 filler
-1 Step 15.4; You did not add enough filler text to cause the page to demonstrate the top and bottom anchors effectively.
Step 16 bottom to top
-4 Step 16. Missing the hyperlink required. You did not perform this step.
-1 Step 16.1; Line 98; The href is incorrect. It should go to the top anchor on this page.
-1 Step 16.1; Line 98; The value for the href attribute must be enclosed in quotes.
-1 Step 16.2; Line 98; Missing the required shortcut.
-1 Step 16.2; Line 77; The accesskey attribute value is incorrect.
You have y instead of t.
-1 Step 16.3; Line 98; Missing the required tab order.
-1 Step 16.3; Line 39; The tabindex attribute value is incorrect.
-2 Step 16.5; Line 35; There is no `bottom` anchor (id) for link 2 on page A and B to go to.
-1 Step 16.5; Line 46; You placed your `bottom` anchor in a span tag, not in the a tag as required.
Just move the id attribute inside the a tag and then you can remove the span element.
-1 Step 16.5; Line 98; You placed your `bottom` anchor in a p tag, not in the a tag as required.
Just move the id attribute inside the a tag.
-1 Step 16.5; Line 45; You placed your `bottom` anchor in an additional a element.
This may mess with your tab order.
Just move the id attribute inside the first a tag on line 44 and then you can remove the additional a element.
-1 Step 16.5; Line 98; The value for the id attribute must be enclosed in quotes.
-1 Step 16.5; Line 63; The id value is incorrect. It should be `bottom`, not `top`.
-1 Step 16.5; Line 76; The name attribute is obsolete. Use the id attribute instead.
-0 Step 16.5; Same problem as step 12.
-1 Step 16.5; Lines 41-42; You did not place the 'top' anchor in the a tag as required..
-1 Step 16.5; The bottom anchor should have been in the a tag, not the p above.
-1 Step 16.5; Line 67; You did not place the 'bottom' anchor in the a tag as required.
You put it in a p tag instead.
-1 Line 50; The href is incorrect and should not have a target attribute. It should use the #id format.
-1 Line 51; The name attribute is no longer supported in HTML 5. This tag should be removed and an id attribute set in the a tag above.
-1 Line 36, You should not place an a tag inside another. Simply id the first a tag and delete the inside one.
-1 Missing stop bogy tag.
While this is allowed by HTML 5, it is not allowed by me.
-1 Missing stop html tag.
While this is allowed by HTML 5, it is not allowed by me.
Both:
-5 No link tab order or shortcuts are set.
-1 Your code indenting is uneven; This makes it hard to read.
Start and stop tags should have the same indenting or be inline. See your head and html tags.
Also, do you want to indent the body? If so, the head should also be indented.
-0 you have some uneven indenting. Some elements and text in the body are indented while others are not.
-1 Your code is hard to read without any indenting. You should at least indent the contents of the head section.
Well done.
Perfect! Beautiful looking code.
+1 The formatting in the document makes it very easy to read.
I am giving you a point back because of this.
Your code very well formatted and easy to read. I wish it was possible to give you extra points.