HTML Documents Presented in Different Ways
Not what you're looking for?
The goal of this assignment is to demonstrate how a single HTML document can be presented in two different appearances, determined by the document's CSS stylesheet. Your HTML file should be called p1.html and the two stylesheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css then it should appear like this ("Version A"), assuming you are running Firefox on a Windows machine:
If the HTML file links to p1b.css then it should appear like this in Firefox on Windows ("Version B"):
If you are using a Macintosh the appearance will be slightly different.
Here are some additional details and requirements for this problem:
•The content should be described in a single HTML file, using a <table> element to display the main table.
•There may not be any formatting information in the HTML file other than class and id attributes.
•The appearance must be generated entirely with CSS style information; you may not use images for this problem.
•The only change that should be required to switch from Version A to Version B is to change the <link> element in the header to refer to a different CSS file.
•Try to duplicate the appearance in the images above ("pixel perfect"). For example: ◦Some of the columns should be centered whereas others are left-justified.
◦The "Total" line appears only in Version B (hint: you may find the display attribute useful in producing this effect).
◦Both versions use the Tahoma font in a 13-pixel size.
◦The background color for the header row in Version A is #687291.
◦The background colors for the body rows in Version A are #eeeff2 and #dfe1e7.
◦The white lines between rows in Version A are 1 pixel wide.
◦The color for the frame around Version B is #d0d0ff.
◦The frame in Version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame.
◦The horizontal rule above the "Total" line in Version B is 2 pixels wide.
◦Match the padding and spacing as closely as possible.
•Your HTML file must be a valid HTML document
Purchase this Solution
Solution Summary
The goal of these solutions is to demonstrate how a single HTML document can be presented in two different appearances, determined by the document's CSS style sheet. Your HTML file should be called p1.html, and the two style sheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css, then it should appear like this ("Version A"), assuming you are running Firefox on a Windows machine. If the HTML file links to p1b.css, then it should appear like this in Firefox on Windows ("Version B"). If you are using a Macintosh the appearance will be slightly different.
Solution Preview
I have included all the files in Zip file. Though p1.html & p1 Copy.html both are the same.
It will be easier to ...
Education
- BSc (Hons), University of Colombo - Sri Lanka
- MEngSc, University of Melbourne
- Certificate IV in Training & Assessment , Australian Business Council
Recent Feedback
- "Thank you!"
- "Thank you."
- "Thanks a lot for you help and support"
- "Sorry about the late payment but the assignment was sufficient and appreciated. Good work"
- "Great description! Thank you for your quick response."
Purchase this Solution
Free BrainMass Quizzes
Basic Networking Questions
This quiz consists of some basic networking questions.
C# variables and classes
This quiz contains questions about C# classes and variables.
Inserting and deleting in a linked list
This quiz tests your understanding of how to insert and delete elements in a linked list. Understanding of the use of linked lists, and the related performance aspects, is an important fundamental skill of computer science data structures.
Word 2010: Table of Contents
Ever wondered where a Table of Contents in a Word document comes from? Maybe you need a refresher on the topic? This quiz will remind you of the keywords and options used when working with a T.O.C. in Word 2010.
Word 2010: Tables
Have you never worked with Tables in Word 2010? Maybe it has been a while since you have used a Table in Word and you need to brush up on your skills. Several keywords and popular options are discussed as you go through this quiz.