Part 1
Demonstrate how a single HTML document can be presented in multiple different appearances, determined by the document's CSS stylesheet. Your HTML file should be called helloworld.html whose content is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1> Hello World Page</h1>
<p>This is a simple Hello world page, but with different CSS, it still can appear differently.</p>
<p class="ex">This Hello World is in blue.</p>
</body>
</html>
Write a first stylesheet to make the page appear like this:
Then write a second stylesheet to make the page appear like this:
Note that the border lines above are not a part of the required display. You can embed your CSS in the HTML file or keep it in a separate file.
Explain your work and experience in a 1-2 page paper. Place this paper in a zip file with the HTML (and possibly CSS) file
Part 2
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 that passes validation at and your CSS files must pass validation at
- Note: the border and margin styles are not supported for <tr> elements; <td> elements support border but not margin.
You should try to meet the above requirements as much as you can. It is OK if you can’t duplicate the appearance in the images exactly. Just try to approximate the appearance to the best you can.
After you have tried it yourself, place the HTML and CSS files in a zip file
PART 3
JavaScript Calculator
For this assignment, you will design a simple calculator using JavaScript. The XHTML frame that determines the layout of the calculator buttons is given to you. You will need to write the JavaScript to make the calculator work. Your calculator should perform as the following: when a number key is clicked, the number should be displayed; when an operator key is clicked, the proper math operation should be performed; when the clear key is clicked, the display should be reset to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
<title>A Simple Calculator</title>
<script language="javascript">
… your code goes in here …
</script>
</head>
<body>
<h1>A Simple Calculator</h1>
<hr>
<form name="calculator">
<input type="field" value="0" width=20 align="right">
<br>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<br>
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<br>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<br>
<input type="button" value="0">
<input type="button" value="C">
<input type="button" value="=">
<br>
<input type="button" value="+">
<input type="button" value="-">
<input type="button" value="*">
<input type="button" value="/">
</form>
<hr>
</body>
</html>
Hint: You will need to write JavaScript code and modify the form element of the HTML document to achieve these functions. For simplicity, you are not required to keep the precedence. You can either embed your JavaScript code in your HTML file, or make a separate file for it.
Submit a 1-2 page summary of your work which discusses your experience.Put this document and the HTML file (and JavaScript file if you keep them separate) into one zip file, and submit it to CourseNet. Make sure that your HTML and JavaScript code work in a browser
PART 4
The Document Object Model Level 2 (DOM-2) provides an interface that enables the generation of HTML on the fly, after the page has loaded. This assignment explores using the basic functionality of DOM-2 for generating dynamic content in the browser.
You are given anHTML frame that displays a sequence of buttons and a separate Insert button. Your task is to write the JavaScript code to allow the insertion of new buttons into the sequence at specified locations. To be more specific, the first figure below shows the initial XHTML document. Suppose your user first clicks Button2 and then click Insert, the document should now look like the second figure below. Similarly if your user now clicks Button3 and then Insert, your code should cause the document to look like the third figure. To summarize, your codes should first recognize a click on a button in the sequence and then when the Insert button is clicked, a new node should be inserted before the button that was clicked earlier.
Again, the HTML frame that determines the layout of the buttons is given to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Sequence Creation</title>
<script type="text/javascript">
… your code goes in here …
</script>
</head>
<body>
<h1>Button Sequence Creation</h1>
<hr>
<table border="1">
<tr>
<td>Button1</td>
<td>Button2</td>
<td>Button3</td>
</tr>
</table>
<br<button>Insert</button>
<hr>
</body>
</html>
Hint: You will need to call DOM-2 methods to create HTML elements, defining the elements’ attributes, and appending them to or inserting them into the document body or existing elements. You might want to search the following reference for DOM-2 methods:
Document Object Model (DOM) Level 2 Core Specification, Version 1.0,Retrieved from:
You will also need to modify the table and button elements of the HTML document to handle the button click events. You can either embed your JavaScript code in your HTML file, or make a separate file for it. You should try to meet the above requirements as much as you can. If you can’t insert a button at any arbitrary position, you should at least be able to insert buttons at a fixed position.
Submit a 1-2 page summary of your work which discusses your experience.Put this document and the HTML file (and JavaScript file if you keep them separate) into one zip file