Week7
On the W3Schools -> HTML Tutorial read:
HTML Lists
- Lists
- Unordered Lists
- Ordered Lists
- Other Lists
On the W3Schools -> CSS Tutorial read:
CSS Lists
Lab7
Create a web page file named lab7.html Notice that it is all lowercase, no spaces.
Specify a DOCTYPE as the very first line in the HTML document.
Create a html file that has the correct structure using the doctype, html, head, title, and body opening and closing tags.
Title the page "Your Name lab7" where YourName is your real name.
Create the lists as shown. You may copy my example exactly or use your own text. If you use your own text, you must demonstrate at least the same list depth and number of items.
You may want to set the page body text to be Arial or sans-serif so it has a nice look.
List #1 is a three deep nested ordered list. Roman numerals for the first level, capital letters for the second level, and numbers for the third level.
You may want to copy List #1 code to start List #2 to save time as it has the same structure.
List #2 is a three deep nested unordered list using disk, circle, and square types.
List #3 is a two deep nested list using graphics as the bullets. Find or create two graphics of your choice that are appropriately sized to use as the bullets.
List #4 is a description list.
You have now created a web page.
Verify that your web page validates using the W3C online validator. You must submit a screenshot to the dropbox that the page validates without ANY errors.
Your result should be similar to what you see below.
When validation is passed, you should see a message like below.
Grading Criteria | Possible Points 20 |
Your Points 20 |
Correct file name. Correct DOCTYPE, HTML, HEAD, TITLE, and BODY structure. | 1 | 1 |
List #1 created as described. | 4 | 4 |
List #2 created as described. | 4 | 4 |
List #3 created as described. | 3 | 3 |
List #4 created as described. | 3 | 3 |
Document validated without any errors. | 5 | 5 |