SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
COMPETENCY: V203.
Demonstrate advanced principles of visualization.
OBJECTIVE: V203.06
Demonstrate basic web page design.
Introduction: Students will create the web page shown using HTML. It is the intention of this
exercise to use table layouts. Teachers should assess the experiences of their students and vary
the basic assignment to meet the needs of individual students. For HTML experienced students,
consider alternative exercises in Flash, JavaScript, DHTML, DreamWeaver, etc.
Materials:

Web editor such as Notepad

List of hexidecimal codes from Internet or other reference

List of common tag and attributes (See objective 3.05)

Examples of completed Web page coding

Images needed for page completion (See CD)
Requirements:
1. Students should create an independent document, but be allowed to consult with other
students.
2. Use a simple word editor to type the HTML code needed to create the web pages shown
below.
3. Students could substitute the images shown with images that they have created.
4. The code should be saved as an .htm or .html file so that a browser can display the page.
5. Hyperlinks are created between the two pages.
6. Grammar and spelling are correct.
7. The student should include the following basic tags:

Header

Paragraph

Horizontal rule

Table

Image

Align

Ordered list

Anchor

Font

Background color

Break
1
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
Variations:
A topic may be substituted. This unit may also be combined with any other objective in
the curriculum.
Assessment:
Tags are present so that the Web page to correctly display
the text, headings, list, and lines
30 points
Hyperlinks are present and work
25 points
Images appear on Web page correctly sized and positioned
25 points
Web pages will display correctly on various computers
10 points
Grammar and spelling are correct
10 points
Total
100 Points
Rubric:
Tags are present that cause the Web page to correctly display the text, etc.
Text not italicized,
bolded, sized, or
underlined as shown on
the example page.
Horizontal rule not
present or not correctly
sized. List is not present
or is not ordered. White
spaces are not shown as
in the example.
One or two errors
related to font,
italicizing, bolding, or
underlining. Horizontal
rule present, but not
sized or positioned as
shown. List is bulleted
instead of numbered.
One or two errors
related to white spaces.
Size and style of text
Total
match the example page. Points
Horizontal rule is
present and sized
correctly. Ordered list is
present. White spaces
are present as shown in
the example.
0-14 points
15-29 points
30 points
Hyperlinks are present and work
Hyperlinks do not look
like example.
Hyperlinks not
positioned as shown.
Hyperlinks do not work.
No more than one error
related to hyperlink
positioning, italicizing,
or script. One hyperlink
does not work.
Hyperlinks appear as
shown in the example
problem. Hyperlinks
work.
0-10 points
11-24 points
25 points
Total
Points
Images appear on Web page correctly sized and positioned
Images do not appear on
web page or images are
Some small problems
with sizing. One or two
images do not show on
2
Images appear on web
page. Images are sized
and positioned as shown
Total
Points
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
not sized correctly.
web page.
in the example.
0-10 points
11-24 points
25 points
Web pages will display correctly on various computers
Images do not appear.
Images and text do not
appear in their correct
relative positions.
Some small problems with
sizing or positioning of
page elements. One or
two images do not appear
when the page is moved.
When the student moves
the web pages, to
another computer, all of
the images and text
appear in their correct
relative positions.
0-4 points
5-9 points
10 points
Total
Points
Grammar and spelling are correct
Numerous errors in
spelling or grammar
appear.
One or two errors in
spelling or grammar.
Student copied text from Total
example without errors. Points
0-4 points
5-9 points
10 points
Create the pages shown below:
Page 1
3
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
Page 2
4
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
A possible code solution for the page 1:
<html>
<head>
<title>A web page on the Internal combustion engine</title>
</head>
<body bgcolor= #EEE9BF>
<center><h1><font face="arial" color="red"><u>Using Heat to Do Work:
</u></font></h1><h3>The internal combustion engine.</h3></center>
<hr color="red" width="60%" size="5">
<br>
<table align="center" border="0" width="600" cellspacing="0">
<tr>
<td width="370" height="400"><font face="arial" color="blue" size="3">Heat engines
are devices that convert thermal energy into mechanical energy by burning fuel in a
process called <i>combustion</i></font>
<p>
<font color="black">Each movement of the piston is called a <i><b>stroke</b></i>:
<br>
<ol>
<li>Intake stroke</li>
<li>Compression stroke</li>
<li>Power stroke</li>
<li>Exhaust stroke</li>
</ol></font></p></td>
<td width="230" height="400"><img src="internal engine pix.jpg" width="224"
height="339"></td>
</tr>
</center></table>
<center><a href="Internal Combustion page 2.htm"><i><font size="2">Click here to
understand more about the four strokes</font></i></a></center>
</body>
</html>
5
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
A possible code solution for the page 2:
<html>
<head>
<title>page 2 Internal Combustion Engine</title>
</head>
<body bgcolor=#EEE9BF>
<center><h1><font face="arial" color="red">Understanding the four strokes</font></center>
<hr color="red" width="60%" size="5">
<table align="center" border="0" width="600" cellspacing="3">
<tr>
<td width="260" height="175"><img src="intake.gif" width="260" height="175"
border="1"></td>
<td width="340" height="175"><font face="arial" size="2" color="blue"><b><i>Intake
Stroke:</b></i> In the carburetor gasoline is broken into small droplets and mixed with air. In
the cylinder, the intake valve opens and the piston moves downward, drawing the air - gasoline
mixture into the cylinder.</font></td>
</tr>
<tr>
<td width="260" height="175"><img src="Compression.gif" width="260" height="175"
border="1"></td>
<td width="340" height="175"><font face="arial" size="2" color="blue"><b><i>Compression
Stroke:</b></i> The intake valve closes and the piston moves upward. The fuel and air mixture
is compressed into the ever smaller space.</font></td>
</tr>
<tr>
<td width="260" height="175"><img src="Power.gif" width="260" height="175"
border="1"></td>
<td width="340" height="175"><font face="arial" size="2" color="blue"><b><i>Power
Stroke:</b></i> When the piston is almost at the top, a spark plug produces a spark and ignites
the fuel. The fuel and air mixture explodes, pushing the poston back down. Energy is transferred
by the downward motion of the piston to the wheels by the crankshaft.</font></td>
</tr>
<tr>
<td width="260" height="175"><img src="exhaust.gif" width="260" height="175"
border="1"></td>
<td width="340" height="175"><font face="arial" size="2" color="blue"><b><i>Exhaust
Stroke:</b></i> As the crankshaft turns, the piston is pushed upward again. As it moves upward
it compresses the waste products. The exhaust valve opens to let the waste out.</font></td>
</tr>
</table></center>
<center><a href="Internal Combustion index.htm"><i><font size="2">Click here to return to the
home page.</font></i></a></center>
6
SCIENTIFIC & TECHNICAL VISUALIZATION II
Summer 2005
</body>
</html>
7