Scenario
This iLab supports the following TCOs.
TCO 3Given an original source document, convert the document to a web page using HTML and CSS.
TCO 4Given an older website that requires updating, review the techniques used to create the current site; develop a plan to revise the site using CSS layout techniques, client-side scripts, and other current website design techniques; and convert the web pages based on the plan.
Given a basic HTML file, create and apply embedded CSS styles to the content on the page. Given the same basic HTML page, create and attach an external CSS file based on the specifications given in the assignment.
- You will need to create embedded and external CSS style rules.
- You will also need to attach an external CSS file to the original HTML page.
Rubric
| Deliverable | Points |
| Part ACreate embedded CSS rules. | 10 |
| Part BCreate and attach the CSS file. | 3 |
| Part BCreate CSS rules for the listed tags in the external CSS file. | 8 |
| Part CCreate the listed CSS class rules. | 8 |
| Part CApply the CSS class rules to the HTML content. | 5 |
| Lab ReportAll sections complete. | 6 |
| Total | 40 |
Lab Steps
Preparation
- Download the lab2.html document found in the Lab section of Doc Sharing.
Part A: Embedded CSS
- Create Embedded CSS Rules.
In the lab2.html file, create a set of embedded CSS rules for the following properties. You will need to identify the appropriate tag(s) and attributes for each set of rules.
| Background color for the page | A light tan: #FC6 |
| Font color for all text in the page | A dark blue: #039 |
| Font for all text in the page | Comic Sans MS |
| Font size for all the text in the page | Body: 14 points |
| Color for all hyperlinks | Dark red: #CC0000 |
| Visited link color for all hyperlink | Dark red: #CC0000 |
| Rollover link color for all hyperlinks | Dark green: #060 |
| Active link color for all hyperlinks | Dark red: #CC0000 |
| No link should be underlined for all links | Never underline |
Part B: External CSS
- Create and attach the CSS file.
- Create a new CSS file.
- Save the file and name it styles.css.
- Attach the styles.css file to the lab3.html file.
- Create the CSS tag rules.
- For all of the following tags, create the CSS rule from the descriptions below.
- All rules should be created in the styles.css file.
| H1 | Background color: #39fBorder on the bottom with the following rules
Centered textMargin on all sides: 35 pixels |
| H2 | Text color: #333, bold |
| p | Font: GeorgiaText color: #030Padding of 15 pixels on all sides |
| li | Font family: ArialBackground color: grayText color: black, boldText size: 18 points |
Part C: CSS Class Rules
- Create the CSS class rules.
- In the styles.css file, create the following class rules using CSS.
| example1:This class will be applied to Example 1. | Background color: #699Text color: #033, boldText size: 10 pointsMargin on all sides: 25 pixelsPadding on all sides: 25 pixels |
| example2:This class will be applied to Example 2. | Background color: #66cBorder on all sides with the following rules Width: 10px Style: solid Color: #06cText size: 10 pixelsText color: #ccc |
| Example3:This class will be applied to Example 3. | Font family: ArialBackground color: #6ffText color: 030Text size: 36 pointsMargin on all sides: 50 pixelsPadding on all sides: 50 pixels |
- Apply the CSS class rules to the HTML content.
Apply the class CSS rules to the corresponding content in the lab3.html file as specified in
Reviews
There are no reviews yet.