Week8
On the W3Schools -> HTML Tutorial read:
HTML Block & Inline
HTML Div
HTML Classes
HTML ID
On the W3Schools -> CSS Tutorial read:
CSS Borders
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline
Lab8
Create a web page file named lab8.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 lab8" where YourName is your real name.
Create a web page similar to what you see below in concept. Chose your own topic, images, and text. Do not use the topic we did in the class lecture nor the topic in the screenshot below. You must demonstrate at least the same concepts that I am showing. Please make sure your topic is non-controversial (rated G).
You may want to set the page body text to be Arial or sans-serif so it has a nice look.
Place at least 4 images on the page. They should be positioned and be slightly overlapping each other. Control the overlapping with z-index.
Place a label or description on the top of each one of your images.
Place a block of text on the page similar to what you see in the sample below. It should be positioned.
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.
You need to turn in all files zipped together into one zip folder for credit.
Your instructor can see if your web page (lab8.html) works correctly only if the ALL images are turned in within the zipped folder!
When validation is passed, you should see a message like below.
Grading Criteria | Possible Points 15 |
Your Points 15 |
Correct file name. Correct DOCTYPE, HTML, HEAD, TITLE, and BODY structure. | 1 | 1 |
4 images on page, positioned, and overlapping. | 4 | 4 |
Label or description text positioned on top of each image. | 4 | 4 |
Block of text positioned on page. | 3 | 3 |
Document validated without any errors. | 3 | 3 |