Reference no: EM133708161

Assignment: Website Development, Hands On Project

I. Write the HTML for a paragraph that uses inline styles to configure the background color of green and the text color of white.

II. Write the HTML and CSS code for an embedded style sheet that configures links without underlines; a background color of white; text color of black; is in Arial, Helvetica, or a sans-serif font; and has a class called new that is bold and italic.

III. Practice with the Cascade. In this exercise, you will create two web pages that link to the same external style sheet. After modifying the configuration in the external style sheet, you will test your pages again and find that they automatically pick up the new style configuration. Finally, you will add an inline style to one of the pages and find that it takes effect and overrides the external style.

1. Create a web page that includes an unordered list describing at least three CSS properties that can be used to format text. The text "CSS Properties" should be contained within <h1> tags. Write the HTML code so that one of the properties is configured to be a class called favorite. Place an e-mail link to yourself on the web page. The web page should be associated with the external style sheet called ex8.css. Save the page as properties.html.

2. Create an external style sheet (call it ex8.css) to format as follows: document background color of white; document text color of #000099; and document font family of Arial, Helvetica, or sans-serif. Hyperlinks should have a background color of gray (#CCCCCC). <h1> elements should use the Times New Roman font with black text color. The favorite class should use red italic text.

3. Launch a browser and test your work. Display the properties.html page. It should use the formatting configured in ex8.css. Modify the web page or the CSS file until your page displays as requested.

4. Change the configuration of the external style sheet (ex8.css) to use a document background color of black, document text color of white, and <h1> text color of gray (#CCCCCC). Save the file. Launch a browser and test the properties.html page. Notice how it picks up the new styles from the external style sheet.

5. Modify the properties.html file to use an inline style. The inline style should be applied to the <h1> tag and configure it to have red text. Save the properties.html page, and test in a browser. Notice how the <h1> text color specified in the style sheet is overridden by the inline style.

IV. Write the HTML to create an image for the schaumburgthumb.jpg image. It is 100 pixels high by 150 pixels wide. The image should link to a larger image called schaumburg.jpg. There should be no border on the image.

V. Practice with CSS.

1. Write the CSS for an HTML selector footer with the following characteristics: a light-blue background color, Arial font, dark-blue text color, 10 pixels of padding, and a narrow, dashed border in a dark-blue color.

2. Write the CSS for an id named notice that is configured to 80% width and centered.

3. Write the CSS to configure a class that will produce a headline with a dotted line underneath it. Choose a color that you like for the text and dotted line.

4. Write the CSS to configure an h1 element selector with drop-shadow text, a 50% transparent background color, and sans-serif font that is 4em in size.

5. Write the CSS to configure an id named feature with small, red, Arial font; a white background; a width of 80%; and a drop shadow.

VI. Design a new web page about you. Use CSS to configure a background color and text color for the page. Include the following on your web page:

1. Your name

2. A description of your favorite hobbies and activities

3. A photo of yourself (be sure to optimize the image for display on the Web) Save the page as yourlastname.html.

VII. Create a single page website about a favorite location-it could be somewhere you have gone on vacation or somewhere you would like to visit. Use the coding techniques in Hands-On Practice 6.11 and 6.12 as a guide. Make a list of things to do (activities) at this location. Make a list of things to see or famous places (sights) to visit at this location. The single page website should include three "pages"-Home, Activities, and Sights. Either use your own vacation photos or select relevant royalty-free photos from the Web (refer to Chapter 4). Use one photo for each "page". If you use photos from the Web, be sure to provide appropriate credit in the footer area. Include your name in an e-mail address in the page footer area. Save the file as location.html.