| 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 : C:/nginx/html/JimMartinson/Classes/CST1021/Labs/ |
Upload File : |
Lab 5 - Working with Style
Grading Criteria
Total possible points: 20
Deductions for any elements required by the lab that are not present or incorrect:
-1 for each missing element or like group.
-1 for each incorrect element or like group.
-1 for any additional html elements that have errors.
There are some things I expect. If they are incorrect you will lose the following:
Work submitted incorrectly: -2 pts. This covers errors such as incorrect files names, incorrect file formats, poor formating, etc.
Second and subsequent submission of work for grading: -2 pts.
Work submitted late: -2 pts per week.
-2 Work submitted late.
-1 Work submitted incorrectly.
Your files were not contained in a Lab05 folder.
If you need help correcting this, please contact me.
-1 Work submitted incorrectly.
Your `Lab05` folder is misnamed `Lab 05`.
-0 Work submitted incorrectly.
You submitted an extra file not required by the lab (Lab05ooga.html).
Lab05.css:
-20 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
Lab05.css:
OK.
Step 2. External style sheet.
*******************************************************
h1 { background-color: lightgreen; text-align: center; }
p { color: blue; background-color: yellow; }
p.firstclass { color: green; }
p.secondclass { color: green; }
p.normal { color: inherit; background-color: inherit; }
a:link { color: #0080ff; }
a:visited { color: #04BA04; }
a:hover, a:active { color: #AA5FFF; }
em { font-style: normal; font-weight: bold; background-color: lavender; }
strong { font-style: italic; font-weight: normal; background-color: sandybrown; }
*******************************************************
Lab05.css:
OK.
<style></style>
-5 The validator is broken and it allowed the html style tags in the document and did not flag them.
This caused your first rule to not to work.
Note that the body rule was not a requirement of the lab.
charset
-1 line 1; The charset declaration must end with a ;. This breaks much of your styling.
-0 Line 8; You should have a space between declarations.
-0 Lines 4,5,8,12,13; You should have a space between declarations.
-0 Line 4; css declarations should end with a ;.
-0 Lines 6,28; css declarations should end with a ;.
-0 Line 7; You added a declaration of p.class not required by the lab.
Step 2.3 h1 { background-color: lightgreen; text-align: center; }
-1 Step 2.3; You did not center the text for the h1 element.
-1 Step 2.3; You the wrong background color for the h1 element.
Step 2.4 p { color: blue; background-color: yellow; }
-2 Step 2.4; You did not do this step.
Step 2.5 p.firstclass { color: green; }
-1 Step 2.5; You should not have a background color for p.firstclass.
-1 Step 2.5; Line 9; Your selector is not for a p element.
Step 2.6 p.secondclass { color: green; }
-0 Step 2.6; You should not have a background color for p.secondclass.
-1 Step 2.6; Line 10; Your selector is not for a p element.
Step 2.7 p.normal { color: inherit; background-color: inherit; }
-2 Step 2.7; Line 7; You did not style the text or background colors to inherit.
-1 Step 2.7; Line 7; You did not style the text color.
-1 Step 2.7; Line 7; You did not style the text background-color.
-1 Step 2.7; Line 11; Your selector is not for a p element.
-1 Step 2.7; Line 22; The value for the text color is incorrect.
Step 2.8 a:link { color: #0080ff; } a:visited { color: #04BA04; } a:hover, a:active { color: #AA5FFF; }
-0 Step 2.8; Line 9; While `a{color: #0080ff;}` works it is usually coded as `a:link{color: #0080ff;}`.
-3 Step 2.8; You styled a.class, not a:pseudo-class.
-1 Step 2.8; Lines 9,10; Your pseudo-class selectors are incorrect.
There are no :link:visited of :link:hover pseudo-class selectors.
Search for css link color.
-1 Step 2.8; Missing the declaration for visited links.
-1 Step 2.8; Missing the declaration for active links.
-1 Step 2.8; Your :active rule needs to be for the a tag.
Click on the page text and you will see the h1 and last p text change color.
-1 Step 2.8; Your style rule for :hover and :active are incorrect.
The way you have your selector it only works for active.
Step 2.9 em { font-style: normal; font-weight: bold; background-color: lavender; }
-1 Step 2.9; The font style of the em element is not styled.
-1 Step 2.9; The font weight of the em element is not styled.
-1 Step 2.9; The font weight of the em element is not correct.
-1 Step 2.9; the color for the em element should not be styled.
Step 2.10 strong { font-style: italic; font-weight: normal; background-color: sandybrown; }
-3 Step 2.10; You did not style the strong element.
Instead you have a second rule for the em element.
-1 Step 2.10; The font style of the strong element is not styled.
-1 Step 2.10; The font weight of the strong element is not styled as normal.
-1 Step 2.10; Your background-color value is incorrect.
-2 Missing the declarations for visited and hover links as required by step 2.8.
-2 Missing the em declaration required by step 2.9.
-2 Missing the strong declaration required by step 2.10.
-0 Your formatting is a bit uneven. This makes your code harder to read and understand.
Lab05_A.html:
-20 The Markup Validation Service at https://validator.w3.org/ reported errors.
You should always validate your code before you submit the assignment.
=e
Lab05_A.html:
OK.
-1 Your html tag is missing the lang attribute and value. See lab NOTES.
head
-1 Step 3.1; Missing the meta charset tag.
-1 Step 3.2; Your page title is incorrect.
*******************************************************
<style>
p.secondclass { color: red; }
em { color: blue; }
</style>
*******************************************************
h1
-0 You styled the h1 text alignment here instead of in the external css file.
head
-0 Step 3.1,3.2; Line 5; Your title content is incorrect.
-1 Step 3.1,3.2; You are missing the required h1 element.
-1 Step 3.4.2; Line 9; The em element should only have the color styled.
-1 Line 9; The em element should only have the color styled.
-0 Line 9; The css declaration should end with a ;.
-0 Lines 8,9; css declarations should end with a ;.
-4 Step 3.4; Missing internal css rules. Search for css internal styles.
You used inline styles instead.
-1 Step 3.4.1; Line 10; Your selector is not for a p element.
-1 Step 3.4.2; You did not style the em element.
-0 The indenting of your style section is uneven. It makes your code hard to read.
-0 line 20; This should be styled by an internal style, not an inline one.
-1 line 10; Without the p element as part of the declaration, the p.secondclass declaration in the external css is more specific and the text color does not change.
Step 3.5; p (no class)
Step 3.6; p firstclass
-2 Step 3.6; Line 24; You misspelled the class value.
Step 3.7; p secondclass
Step 3.8; p normal
Step 3.8.1; some text
Step 3.8.2; em
Step 3.8.2; You did not do this step.
-0 Step 3.8.2; Line 28; The em does not need a class and it does nothing without a class rule.
Step 3.8.3; strong
Step 3.8.3; You did not do this step.
-0 Step 3.8.3; Line 28; The strong does not need a class and it does nothing without a class rule.
Step 3.8.4; link 1
Step 3.8.5; link 2
Step 3.8.6; link 3
-0 Step 3.8; Your a tags should have been in the last paragraph.
-2 Line 18; You closed your p tag here instead of after the a tag on line 24. See step 3.7.
-3 lines 32-34; Your links have no content and cannot be clicked on. They should also be in the paragraph above.
-1 Your em and strong element are not inside of the fourth paragraph as required by step 3.7.
-6 Lines 14,15,16,17,18,19; Attribute values should be enclosed in quotes.
The values for class are not in quotes.
-1 Missing link required by STEP 3.8.4.
-1 Missing link required by STEP 3.8.5.
-1 Missing link required by STEP 3.8.6.
-1 Missing the stop html tag.
Lab05_B.html:
-20 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab05_B.html:
OK.
head
-1 Step 3.1; Missing the meta charset tag.
***** 1st p blue/yellow, 2nd green/yellow, 3rd has orange/black 4th has yellow/black, 5th has black, em has red text, strong has black.
*******************************************************
<style>
p.secondclass { color: orange; background: black; }
em { color: blue; }
</style>
*******************************************************
Please remember to fix and copy Lab05_A.html before fixing errors here.
-0 Line 18; CSS style declarations should end with a ;.
-0 Lines 18,19; CSS style declarations should end with a ;.
-1 Step 3.5; Your paragraph contains no content.
-0 Step 3.6; Line 25; You misspelled the class value.
This is the same problem so I did not take off points.
copy
-0 Step 4.1; You are missing the required h1 element (It should have been in page A and copied here).
-1 Step 4.1; Line 13; You did not copy the em rule as required. You changed it.
title
-0 Step 4.2; Line 5; Your title content is incorrect.
-2 You have the same internal vs inline styles problem on this page.
-0 You have the same problem with the missing internal style for the em element.
internal style change
-2 Step 4.3; You did not change the internal style for the p.secondclass rule.
Instead you used inline styles below.
-2 Step 4.3; You did not change the internal style for the p.secondclass rule.
Instead you added two style elements.
The first one changes the color to orange. (The first declaration to color red is overwritten)
The second one changes the background-color to red, not black and the color to orange (again).
-1 Step 4.3; Line 47; The background-color should have been styled by the internal rule in Step 4.3.
-1 Step 4.3; Line 55; The background-color should have been styled by the internal rule in Step 4.3.
-1 Step 4.3.1; Line 9; Your selector is not for a p element.
-2 Again you did not use an internal style as required by step 4.1.2.
Instead you are linking to an external 'Lab05b.css' stylesheet.
There you added may declarations not required by the lab as well and the internal and inline styles.
-1 Missing the internal style declaration required by step 3.3.2. (It should be in Lab05_A and copied to Lab05b).
-1 Missing the internal style declaration required by step 3.3.2. (It was in Lab05_A and not copied to Lab05b).
h1
-0 Step 4.4;
second secondclass paragraph style="color:yellow;"
-3 Step 4.5; Missing second p of class="secondclass".
-0 Step 4.5; Line 23; Only the color property should be styled.
-1 Step 4.5; Line 22; You did not style the paragraph color to yellow.
Instead you added a `color:yellow;` class which somehow passes the validator.
-1 Step 4.5; Line 23; You did not style the p with an inline style.
Instead you used an id.
-2 Step 4.5; Your second p of class="secondclass" has no content to display.
-0 Step 4.5; Line 36; CSS style declarations should end with a ;.
em style="color:red;"
-1 Step 4.6; Your em contains no content.
-0 Step 4.6; Line 43; CSS style declarations should end with a ;.
-1 Step 4.6; Line 29; You did not style the em as required.
-0 Lines 14,15,16,17,18,19; Attribute values should be enclosed in quotes.
The values for class and style are not in quotes.
I did not take off extra points for this as most is a copy from Lab05_A.
a href change
-1 Step 4.7; Incorrect href value.
a removal
-1 Step 4.8; You did not remove the extra links.
-1 You are missing the body tags. While the validator allows this, I do not.
-1 You are missing the stop body tag. While the validator allows this, I do not.
-1 You are missing the stop html tag. While the validator allows this, I do not.
-1 The internal style should be in the head section.
-0 line 15; No inline style should be applied here.
-0 line 16; No inline style for background color should be applied here.
-1 line 10; Without the p element as part of the declaration, the p.secondclass declaration in the external css is more specific and the text color does not change.
-0 line 18; CSS style declarations should end with a ;.
-0 lines 18,22; CSS style declarations should end with a ;.
-1 line 35; Your link has no content and cannot be clicked on. It should also be in the paragraph above.
-0 Missing link required by STEP 3.7.4. Point deducted above.
Good work. The code formatting is also good.
+1 Great looking code. I am giving you a point for that.