| 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 2 - Formatting, quotes, comments, and colors
-25 if the CSS Validation Service or Markup Validation Service report errors. No further grading will be done.
Criteria Points
Correct filename, DOCTYPE, html, head, title, meta charset, link, body, and h1 tags. 4
Correct Lab02.css file. 2
Correct HTML Text Formatting section and tags. 4
Correct HTML Quotation and Citation Elements section and tags. 4
Correct HTML Comments section and tags. 2
Correct HTML Colors section and tags. 5
HTML is well formatted and follows lab requirements. 4
Do not add any additional code or styling other than what is required by the lab.
You should also not have any errors when your html and css are validated.
I will deduct points for these also.
Total: 25
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.
-25 Your xxx.zip file is not a zip file containing a Lab02 folder and your files.
It appears to be an html document with an incorrect extension.
If you need help zipping up you submission, give me a call and I can show you how to do it.
=e
-3 Work submitted incorrectly.
Your zip file contained another zip file with the name 'StudentName-Lab02.html'.
I unzipped it an graded the files from there.
-3 Work submitted incorrectly.
Your zip file does not contain the Lab02.css file as required.
-3 Work submitted incorrectly.
Your Lab02.css file does not contain any of the required css declarations.
See steps 2 and 3.
-0 Work submitted incorrectly.
You have an additional folder with 19 other files contained in it.
I do not wan any extra files submitted.
Points will be deducted for this in the future.
-0 Work submitted incorrectly.
Your files are not contained in a Lab02 folder as required.
Points will be deducted for this in the future.
If you need help correcting this please contact me.
-0 Work submitted incorrectly.
Your Lab02 folder was misnamed CST1021_TerynBennett_Lab02.
Points will be deducted for this in the future.
-0 Work submitted incorrectly.
Your zip file contains an additional file not required (Lab01.html).
Points will be deducted for this in the future.
-0 Work submitted incorrectly.
Your StudentName_Lab02.html file was misnamed (StudentName-Lab02.html.html).
Points will be deducted for this in the future.
-0 Work submitted incorrectly.
Your Lab02 folder was misnamed 'CST1021_JordanKjorness_Lab02'.
Points will be deducted for this in the future.
-0 Work submitted incorrectly.
You have extra documents in your submission.
Points will be deducted for this in the future.
-0 You submission contians an extra file.
Points will be deducted for this in the future.
Lab02.css:
-25 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
-0 The link tag no longer requires a type attribute and value.
-2 Your Lab02.css file was misnamed 'Lab02.css.css'.
Because of this the css file was not loaded.
Lab02.css:
Correct.
Lab02.css:
section { background-color: rgb(238, 255, 238); } /* #efe */
Lab02.css:
-2 Step 3; You did not change the css for the section declaration as required.
The color value must be in rgb format.
I missed this the first time I graded your lab.
-1 Step 3; You changed the color to rgba. The color value must be in rgb format.
-1 Step 3; You changed the css for the h2 declaration as well.
-1 Step 3; line 6; You have the wrong rgb values for the section element background-color.
-1 Step 3; You changed the css for the h2 instead of the section as required.
-0 Step 3; You should have only changed the section background-color value to rgb.
-0 Step 3; Line 6; CSS style declarations should end with a ;.
-0 Step 3; Line 6; RGB should be in lowercase letters.
Lab02.css:
Correct.
Lab02.html:
-25 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab02.html:
doctype:
-1 The !DOCTYPE tag should have doctype html.
html:
-1 Your start and stop html tags must have HTML in lowercase.
-1 Line 2; Your html element does not include the required lang attribute. See the lab Notes.
-2 You are missing the required start and stop html tags.
See the lab notes.
-1 Your head section is not closed after the link tag. Instead you have it after the stop body tag.
-4 You placed all of your content in the head section and have no body section.
-5 lines 12-18; This internal style is not needed, and internal style elements should be in the head section.
-1 You have extra <p> tags not required by the lab.
-1 Line 49; There is no innerhtml tag. When I talk about innerHTML I am simply talking about the content of the element (tag).
-2 You have no start and stop body tags.
-8 Steps 7-10. You did not place your code in section elements as required.
-1 Step 7; You did not enclose your code in a section element as required.
-2 Steps 7 and 8. You did not enclose your code in a section element as required.
-1 Lines 14, 27; Tag names must be in lowercase.
-0 Line 45; There should be no spaces before or after the = for attributes and values.
-0 Lines 31, 42, 44, 45; There should be no spaces before or after the = for attributes and values.
-0 It is unusual for title and heading tags to be multi-line.
-0 It is unusual for heading tags to be multi-line.
Step 5 head
-0 Step 5; Line 6; You do not need the type="text/css" attribute and value.
-1 Step 5; Missing the stop head tag.
This is missed by the Markup Validation Service but is required.
-1 Lines 8-12; This style is not needed. span#tom had the css rule in the external css file I gave you.
-3 Step 5.3; The href value for your link tag is incorrect and the css file is not loaded.
Step 6 h1
-1 Step 6; You placed your h1 heading tag in the head section instead of at the beginning of the body.
-1 Step 6; You are missing the h1 heading tag at the beginning of the body as required.
-1 Step 6; Your h1 heading tag in inside of your first section instead of before it.
-1 Step 6; Your h1 heading does not have any content.
-1 Step 6; Your h1 heading tag in inside of a section element.
It also has the wrong content.
Step 7 HTML Text Formatting.
-1 Step 7; Missing the enclosing section element tags.
-1 Step 7; You did not place the b, strong, i, etc... tags on separate lines in your code as required.
-0 Step 7; I wanted the text formatting tags each on a separate line.
I did not want then on separate lines when viewed, no <br> tags.
-1 Step 7.1; Line 10; You placed your h2 heading before the section element.
-0 Step 7.7; The del tag should be all lowercase.
-1 Step 7; You placed all or your content inside a second h2 tag.
Step 8 HTML Quotation and Citation Elements.
-4 Step 8; you are missing the entire HTML Quotation and Citation Elements section.
-2 Step 8; You did not close this section until line 39.
This must be closed before you start the section for step 9.
-2 Step 8; Your h2 heading is before the section instead of in it.
Jim says <q>HTML must be well formatted!</q>
-1 Step 8; Line 29; You section tag is not all lowercase.
-1 Step 8; There should not be a p tag on line 33, instead there should be a br tag before it.
-0 Step 8; On line 27 your have 'title = '. There should be no spaces before or after the =.
-2 Step 8; You have a title tag on line 31 from step 7. This tag is only used in the head section.
What you wanted was a title attribute in the abbr tag.
-0 Step 8.2; Line 29; You did not need the quotes, they are added by the q tag.
-0 Step 8; You added a p element to the section not required by the lab.
-1 Step 8.2; The "Tamika says:" should be before your q tag, not in it. It should also not have the :.
-1 Step 8.2; Line 25; The "Tomisz says:" should be before your q tag, not in it. It should contain text of your choosing.
-1 Step 8.2; Line 26; You do not have the text followed by the q element as required.
-1 Step 8.2; Line 43; Tour q tag has no content.
<br>
-1 Step 8.3; Line 26; The br tag does not follow the q element as required.
<abbr title="Computer Systems Technology">CST</abbr> began as the AIT department and was re-named in 1994.
-2 Step 8.4; Line 32; Your abbr tag is missing the title attribute and value.
Instead you used the title value as the content of your abbr tag.
Instead you placed the title value in a h3 tag below it. There should also not be a p tag.
-2 Step 8.4; Your abbr tag is missing the title attribute and value.
Instead you placed the title value in a p tag before it. There should also not be a p tag, use a br instead.
-2 Step 8.4; Your abbr tag is missing the title attribute and value.
You placed 'CST' in an ins tag to underline it.
-2 Step 8.4; Line 12; You placed CST outside the abbr tag and the text inside it.
This must be the other way around.
-2 Step 8.4; Line 27; You are missing the required content (CST) in your abbr tag.
-1 Step 8.4; Line 25; Your abbr tag encloses your q tag instead of comming after the q tag line and br tag.
-1 Step 8.4; Line 29; The content of your abbr tag is incorrect.
-1 Step 8.4; The title attribute for your abbr tag has an incorect value.
-1 Step 8.4; Line 33; In your abbr tag you have a space between the 'title=' attribute and it's value.
-1 Step 8.4; Line 25; Your abbr tag encloses your q tag instead of commong after the q tag line and br tag.
-1 Step 8.4; Line 25; The text ` began as the AIT department and was re-named in 1994.` should follow the abbr tag, not be enclosed by it.
-0 Step 8.4; Line 31; There should be no spaces between the attribute, =, and value.
Step 9 HTML Comments.
-2 Step 9; You did not place your code in a section element as required.
-1 Step 9.1; Line 37; The heading content is incorrect.
-1 Step 9.1; Line 37; This heading should not have been styled.
-0 Step 9.2; You placed your comment before the h2 heading tag.
<!--This section only contains the h2 tag and a comment.-->
-2 Step 9.2; There is no <comment> tag. Look up html comments for the correct tag.
-2 Step 9.2; You do not have "This section only contains the h2 tag and a comment." enclosed in a comment tag.
-2 Step 9.2; You did not include the comment in your code.
Instead you placed the text that should be in a comment in a p tag.
-2 Step 9.2; Line 37; You placed your comment in an h2 tag.
-2 Step 9.2; Line 35; You did not place the comment text inside of the comment.
You have it after the comment and it is visible on the page.
-1 Step 9.2; Line 38; The text of your comment is incorrect.
-1 Step 9.2; Line 39; You added a tag to this section. There should be no tags that display on the page.
-0 Step 9.2; Your comment is not as required by the instructions. But they work as needed.
Step 10 HTML Colors.
-2 Step 10; You did not enclose the code in a new section element.
-2 Step 10; You did not enclose the code in a new section element, instead it is in the section for Step 7.
-1 Step 10; You did not place the span tags on separate lines.
-2 Step 10; Lines 36-41; You placed the code for steps 10.2-10.4 in an additional section below this one.
Lines 38-40 should be placed in this section and the emply section below shold be removed.
The warning from the Validator should have given you an idea there was something wrong.
<h2 style="background-color:hsla(9, 100%, 63.9%, 0.5)">HTML Colors</h2> or hsla(9, 100%, 64%, 0.5)
-2 Step 10.1; You did not style your h2 heading with hsla format at 50% opacity.
Instead you used a color name and set the entire element using the opacity property.
Search for hsla color format of reviiew CSS colors: https://www.w3schools.com/css/css_colors.asp
-2 Step 10.1; You did not style your h2 heading with hsla format as required.
Instead you used rgba format.
-2 Step 10.1; You did not style your h2 heading with hsla format as required.
Instead you used rgba format with incorrect color values.
-1 Step 10.1; You did not style your h2 heading with hsla format as required.
Instead you used hsl format. The FORGIVING browser displays it as hsla since it has 4 values.
-1 Step 10.1; Line 52; You hsla values are incorrect. Where did you get yours?
-1 Step 10.1; Line 41; Your hsla saturation value is incorrect for the Tomato color.
Look at the value from the w3schools example or search for an online color converter.
You also did not enclose the style attribute value in quotes as required.
-1 Step 10.1; You did not style your h2 heading with hsla format at 50% opacity.
Instead you have it at full opacity.
Search for hsla color format of review CSS colors: https://www.w3schools.com/css/css_colors.asp
-1 Step 10.1; Line 31; Your hsla alpha value is incorrect for 50% opacity.
Look at the value from the w3schools example or search for an online color converter.
-2 Step 10.1; You did not style your h2 heading with hsla format at 50% opacity.
Instead you have the style code inside of your h2 element instead of in the h2 tag.
Search for hsla color format of review CSS colors: https://www.w3schools.com/css/css_colors.asp
-2 Step 10.1; You did not enclose your style value in a style attribute declaration.
-1 Step 10.1; Line 34; Some of your hsla values are incorrect for the Tomato color.
Look at the value from the w3schools example or search for an online color converter.
-2 Step 10.1; Instead of styling the h2 heading tag as required you added a style tag below it that does nothing.
Review the recording or look up how to apply hsla colors.
-1 Step 10.1; Your hsla values for the Tomato color are incorrect. Try inspecting the tom span to get the rgb ones, then convert them to hsla.
-0 Step 10.1; Line 50 You used HSLA in caps. It should be lowercase.
-0 Step 10.1; Line 37; CSS style declarations should end with a ;.
<span>This is an un-styled span tag.</span>
-1 Step 10.2; You did not enclose "This is an un-styled span tag." in a span tag.
-0 Step 10.2; The <b> tag was not required.
<span id="tom">Styled via id.</span>
-2 Step 10.3; Line 43; You did not add the id attribute to the span as required.
Instead you added a style attribute.
-2 Step 10.3; Line 63; You added a style and set the color.
You did not set the id to `tom` as required.
-2 Step 10.3; Line 36; Your value for the id attribute is incorrect.
You did not set the id to `tom` as required.
-2 Step 10.3; Line 41; You did not set the id to 'tom' as required.
Instead you created your own internal #p01 id style and used that. The Lab02.css file has the span#tom style already defined.
-2 Step 10.3; Line 41; You did not set the id to 'tom' as required. Instead you used an inline style to color the span.
-1 Step 10.3; Line 45; The value for your id attribute is not enclosed in quotes (").
-1 Step 10.3; Line:46; You added a style attribute not required by the lab.
The id will style the color from the css file.
-0 Step 10.3; The <i> tag was not required.
<span style="color:DodgerBlue;">Some DodgerBlue text.</span>
-2 Step 10.4; You did not style the span tag with a style attribute and color declaration as required.
Lookup the style attribute or review the lecture recordings.
-1 Step 10.4; Line 46; You styled the background-color instead of the color.
-1 Step 10.4; Line 33; The style value needs to be enclosed in quotes.
-0 Step 10.4; Line 46; You should have used the color name.
-0 Step 10.4; The <ins> tag was not required.
-0 Step 10.4; Line 40; CSS style declarations should end with a ;.
-0 Step 10.4; Line 51; The correct syntax to define a tag attribute is `attribute="value"`.
There should be no spaces on either side of the equal sign.
-0 Step 10.4; Line 29; There should be no space between the style attribute and the = sign.
-0 Step 10.4; Lines 60 and 62; There should be no space between the style attribute and the = sign, nor between the = sign and the value.
-1 You are missing the stop body tag.
While this is allowed by HTML 5, it is not allowed by me.
-1 You are missing the stop html tag.
While this is allowed by HTML 5, it is not allowed by me.
You should try to refrain from adding html markup NOT required by the lab and instead try to follow the lab requirements.
Check your code with the Markup Validation Service, and check what your page looks like vs the example.
-0 Your code is a very hard to read without ANY indenting.
You may have points deducted in future lab submissions.
-0 Your code indenting is a little inconsistent.
Your indenting of h2 tags is not consistent.
Your indenting of content is not consistent.
You may have points deducted in future labs.
-0 Your code is a little sloppy and hard to read. Your indenting is uneven.
You may have points deducted in future labs.
-1 Your code is a very sloppy and hard to read. Please use appropriate indenting to make if easier to read.
You have some code formatting inconsistencies, but overall, good work.
See lines 41 and 42.
Perfect! Well done.
The formatting in the document makes it very easy to read. Well done.
The formatting in the document makes it very easy to read though there are a few extra blank lines that make it uneven.
The formatting in the document makes it very easy to read though it is more common to indent with two space instead of one.
+1 Your code is beautiful. The formatting in the document makes it very easy to read.
I am giving you a point back because of this.
Your code is beautiful. The formatting in the document makes it very easy to read.