| 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 10 - Lists
Deductions for any elements required by the lab that are not present or incorrect:
-15 if the CSS Validation Service or Markup Validation Service report errors. No further grading will be done.
-15 if you use the type or start attributes.
-2 for each list item level of the wrong type.
-2 for each list item level that indents or numbers incorrectly.
-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.
I reserve the right not to apply the deduction points at my absolute discretion.
-1 Work submitted incorrectly.
Your `Lab10' folder is misnamed `LAB10`.
-1 Work submitted incorrectly.
Your files were not contained in a Lab10 folder.
-1 Line 7; Bad href in link tag.
-1.5 Work submitted late.
-1.5 Second and subsequent submission of work for grading.
ol I A 1 a i
ol{list-style-type: upper-roman}
ol li ol{list-style-type: upper-alpha}
ol li ol li ol{list-style-type: decimal}
ol li ol li ol li ol{list-style-type: lower-alpha}
ol li ol li ol li ol li ol{list-style-type: lower-roman}
ul disk, circle, and square
Lab10.css:
-15 The CSS Validation Service at https://jigsaw.w3.org/css-validator/validator.html.en reported errors.
=e
Lab10.html:
-15 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really need to validate your code before submitting the lab.
You are closing <li> tags that should remain open as each level is added.
The stop </li> tag must be after the </ol> or </ul> tag of the next level.
ol and ul elements can only contain li elements.
The li elements can contain nearly anything including an ol or ul element.
See https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested for an example.
Note where the </li> tag is for the first list item.
=e
-15 The lab clearly states in step 3.4: All styling of the ordered list should be done through the use of CSS and not by using the type or start attributes.
You need to define css, not use the type attribute.
Also, All css declarations must be in the external style sheet. No internal or inline styles may be used in the html.
You need to move your inline style declarations to your css file.
0 points
=e
Lab10.css:
OK.
-5 Your li elements are styled with position inside.
With ith text-indent changed you cannot leave it outside and have it work.
See https://webmasters.stackexchange.com/questions/14238/numbered-list-with-subclauses for an example with much simpler css declarations.
-2 line 26; This re-declares class `third` from line 10 and removes the list-style-type of decimal.
-0 I see you noticed the ul styles asked for are the defaults and did not style them.
Not many people see that.
-0 css class and id rules should have a sematic meaning.
Lab10.html:
OK.
Lab10.html: (errors may be due to css rules)
-15 All styling of the ordered list must be done through the use of CSS and not by using the type or start attributes.
-15 Your list items are not indented properly.
This is because you are stopping each list before you add the next level.
See https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested for an example.
=e
-10 Your ordered list items are not numbered properly.
This is because your Lab10.css file does not contain needed rules.
You do not have a rule for first level ol elements or for second, third, fourth or fifth classes.
-5 You did not use nested lists.
See https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested for an example.
-2 You did not close the li elements that you began on lines 13, 15, 17, 38, and 40.
While the Markup Validator and HTML 5 allow for this, I do not. It is sloppy html.
These do not throw errors because the browser will insert a stop li tag if a new li element starts.
See https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested for an example.
-0.5 You did not close the li element that you began on line 48.
While the Markup Validator and HTML 5 allow for this, I do not. It is sloppy html.
These do not throw errors because the browser will insert a stop li tag if a new li element starts.
See https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested for an example.
-3 You did not close the li elements that you began on lines 16,18,20,22,43,and 45.
While the Markup Validator and HTML 5 allow for this, I do not. It is sloppy html.
These do not throw errors because the browser will insert a stop li tag if a new li element starts.
If you had made sure to indent your matching start/stop tags to the same level it would have been easier to see.
-2 Step 3.1; Missing the body element.
While the validator allows content without the use of the body element, I do not.
Your page content needs to be contained in a body element.
-2 Step 3.4; Lines 17-19; You restarted level five three times instead of having one level with three li.
-2 Step 3.5; Line 29; You styled your first unordered list as an ordered list using decimal numbers.
-2 Step 3.5; You did not close the li elements that you began on lines 30 and 31.
While the Markup Validator and HTML 5 allow for this, I do not. It is sloppy html.
-2 The third level ordered list items are not numbered with decimal numerals.
-2 The fifth level ordered list items are not numbered with lower case roman numerals.
-0 line 26; The li started on line 20 should have a stop li tag after the </ol>.
-0 line 31; The li started on line 20 should have a stop li tag after the </ol>.
-0 line 34 The li started on line 20 should have a stop li tag after the </ol>.
===============================================
Note: This is because you have ol elements on lines 13, 15, 17, and 19 that are children of an ol.
What you need to do to fix this is not to end the li before you have the start ol tag, but to end the ol and then end the li.
Not:
<li>Stuff</li>
<ol>
<li>New stuff</li>
</ol>
But:
<li>Stuff
<ol>
<li>New stuff</li>
</ol>
</li>
===============================================
Lab10.html:
ol styles: I A 1 a i
ul styles: disc circle square
Lab10.html:
-8 li elements do not have matching stop li tags.
An example is an li tag on line 14. There is no matching close li tag after the </ol> tag so the li is not closed correctly. The browser adds one to the DOM.
-6 The use of li with class="no-styling" is incorrect.
Instead of:
<li>First Level</li>
<li class="no-styling"><ol class="ordered-second-level">
Simply use:
<li>First Level<ol class="ordered-second-level">
Your problem was closing the first li tag before your ol tag. Then you added an li that did not close until the ol.
-2 Step 3.4; You have 4 list items in your first level ol, not three as required.
Instead of starting a second li that contains the next ol, place it in the first li.
-2 Step 3.4; You have 4 list items in your second level ol, not three as required.
Instead of starting a second li that contains the next ol, place it in the first li.
-2 Step 3.4; You have 4 list items in your third level ol, not three as required.
Instead of starting a second li that contains the next ol, place it in the first li.
-2 Step 3.4; You have 4 list items in your fourth level ol, not three as required.
Instead of starting a second li that contains the next ol, place it in the first li.
-2 Step 3.4; Your Third Level ol is not in the first li of the Second Level.
-2 Step 3.4; Your Fourth Level ol is not in the first li of the Third Level.
-2 Step 3.4; Your Fifth Level ol is not in the first li of the Fourth Level.
-2 Step 3.4; Your Fifthe Lever ol is not in lower roman.
-2 Step 3.5; You have 4 list items in your first level ul, not three as required.
Instead of starting a second li that contains the next ol, place it in the first li.
-2 Step 3.5; Your Level Two ul is not in the first li of the Level One ul.
It is in the second li.
-2 Step 3.5; Your Level Three ul is not in the first li of the Level One ul.
It is in the second li.
-4 Step 3.5; You have the same problem with your Level Two and Level Three uls.
-4 Step 3.5; You have the same problem with your Level One and Level Two uls.
-1 Missing the stop li tag for the li start tag on line 16.
The validator allows li tags to end when an ol or ul ends or a new li element begins. I do not.
Without proper indenting it is very hard to see the errors in your code.
-1 Your code indenting is uneven; This makes it hard to read.
Start and stop tags should have the same indenting.
Well done.
Very economical css rules.
You are one of the few who noticed the ul styles are the defaults.
Correct. Bad class names - they are not descriptive of what they do. Nicely formatted code.
Correct.
Bad class names - they are not descriptive of what they do.
You should indent your ol/li groupings to make them easier to read.
-1 Missing the </body> tag.
-1 Missing the </html> tag.