Overview
The practical requires demonstrations of practical skills. You will be required to develop a web site that consists of a single, validated HTML page and one image.
Basic Web Page
· Create an .HTML file.
· All styles created must be in an external style sheet.
· If CSS fails to display properly, it usually means a missing a colon, semi-colon, or curly-brace somewhere. It could also mean the CSS file hasn’t been linked to the HTML file.
· Follow the example screenshot of this practical’s finished version as a guide.
· Download and extract the contents: marble_canyon.txt marble_canyon.jpg marble_canyon_panorama.jpg
· Create an external style sheet named styles.css and an index.html
REQUIREMENTS
· Add code to index.html that links to the styles.css file.
· Write the necessary HTML markup and CSS so that the page meets the following requirements:
· The title for the page is: Your Name’s Midterm Practical. (for example: Jane Doe’s Midterm Practical)
· Input the contents of marble_canyon.txt inside the <body> & </body> tags and give the body a Lavender (#E6E6FA) background a color.
· Place the text "Marble Canyon " in a <header> block.
· Use H1 for the header block and CSS to center.
· Use H3 for the Wikipedia line of text and CSS to display in Blue.
· Include the five paragraphs (ending in 39.2.) in five separate <p> blocks. In the last paragraph, enclose United States Bureau of Reclamation inside a <span> container that uses an ID or Class to a CSS rule that gives these four words a CornflowerBlue (#6495ED) background color.
· Add the image marble_canyon.jpg using the appropriate markup. Set the attributes of width to 500 pixels and height to 378 pixels. If, for some reason, the image does not load, display marble_canyon in its place.
· Use CSS to float the image to the right of the page.
· Add the image marble_canyon_panorama.jpg and set the width to 1000 pixels and the height to 280 pixels. Failure to load should display panorama.
· Using appropriate tags and CSS, center this panorama image
· Using the appropriate CSS, clear any text from flowing around either side of the panorama image.
· Add a <footer> block to display at the bottom of the page
· In the footer block, use an ordered list to display the three references.
· Make the first reference a hyperlink using: http://www.gcrg.org/bqr/10-2/mcd.html
· Add a paragraph to the bottom of the page that contains a copyright symbol followed by a date and your name.
· Style the copyright paragraph with an id selector named copyright that will cause the text to be center-aligned, red, and 80% of the normal font-size.
· Add a CSS rollover effect to all hyperlinks. All links, excluding background, should turn white when the mouse is over them. Add this rule to the external style sheet
· Add a caption tag under the panorama image that includes the text: "A panoramic view of Marble Canyon from Navajo Bridge. Looking into Marble Canyon, Shinimo Alter in the distance." Note that the caption text must fit inside whatever container used to incorporate the image.
Comentários