Part Two Lab Work

This page describes the lab work for Part Two of FIT 100. A lot of these exercises can be done during the lab sessions with the help of your TA. If you are a sophisticate, use your initiative and charge ahead. Your Part Two Web Page acts as a record of your activities.

 

List your three favorite ice creams


Use an editor to create a standard HTML file: 
<html>
	<head>
		<title>My First Web Page</title>
	</head>
	<body>
	</body>	
</html>

Use a <h1> heading to indicate "Terry Brooks' Ice Creams"


Copy this image for your page:

Add the align attribute of the image tag to place the image to the right: "align=left"
Use a <p></p> tag to start a paragraph. Write a short paragraph about your favorites.
Use a couple of empty paragraph tags to situate your paragraph in about the middle of the image. Put a non-breaking space in the middle of the paragraph tags, i.e., <p>&nbsp;</p>
After the paragraph use a break tag to clear the right: <br clear="right">
Enumerate your favorite ice creams in a list.

 

List the 2003 winners at Wimbledon


Use a <h3> heading to indicate "Terry Brooks' Wimbledon List"
Insert a style attribute in the <h3> heading to turn it red, i.e., style='color:red'
The text "Winners indicated in green" should be set within <em> tags.
Then put a <span> tag around the "<em>Winners..." code
Add a style attribute to the <span> tag that sets a 50px margin and sets the color to green, e.g. "style=margin:50px; color:green"
Embed one list inside of another one: The outer list should state "Gentlemen's singles" and "Ladies' singles", e.g.: 
<ul>
  <li>Gentlemen's singles</li>
  <li>Ladies' singles</li>
</ul>

Create an inner list to enumerate the Gentlemen and then do the same to the Ladies, e.g.: 
	<li>Gentlemen's singles</li>
		<ul>
			<li>Roger Federer</li>
			<li>Mark Philippoussis</li>
		</ul>

Set the style attribute of the two winners, Roger and Serena, to green, e.g.: style="color:green"

 

Resize a blue bird image


Use a <h3> heading to indicate "Terry Brooks' Blue Bird Resize Widget"
Set the text to red with the style attribute, e.g.: style="color:red"
Create three buttons titled "Zoom up" "Zoom down" and "Reset". Set them apart by inserting some hard spaces between them: 
<input type=button value="Zoom up">
&nbsp;&nbsp;
<input type=button value="Zoom down">
&nbsp;&nbsp;
<input type=button value="Reset">

Place this bird image below the buttons. Use the <p> tag with a hard space to get some room: <p>&nbsp;</p>
Return to your button code and for each add an onclick attribute, e.g.: 
...value="Zoom up" onclick="up()">
...value="Zoom down" onclick="down()">
...value="Reset" onclick="reset()">

Return to your bird image and add an ID attribute: id="bird"
Go to the top of your HTML page, and add some javascript to the <head> tag. Remember to embed the following inside <script> tags: 
	function up(){
		var e = document.getElementById("bird");
		e.width="204";
		e.height="136";
	}
	function down() {
		var e = document.getElementById("bird");
		e.width="51";
		e.height="34";
	}
	function reset() {
		var e = document.getElementById("bird");
		e.width="102";
		e.height="68";
	}

 

Use an Array to Control the Ten Reasons why the Dixie Chicks are better than the Spice Girls

[Thanks to http://www.geocities.com/Nashville/7402/top10.html]
Declare an array and populate it with the ten reasons, etc. [You can swipe over the following and import it to your own work - save yourself some typing!] Place it at the top of your page inside the <script> tag. 

var chicks = new Array();
chicks[9]="There's a 'Scary Spice' but there's no Scary Chick!"; 
chicks[8]="Which would you rather have your child be a Spice Girl or a Dixie Chick?"; 
chicks[7]="Not only can the Chicks sing but they actually look good."; 
chicks[6]="Spices Grow Bitter with Age"; 
chicks[5]="The Chicks don't need dumb names to get attention."; 
chicks[4]="Spices are manufactured, but Chicks are natural. (They formed on their own!)"; 
chicks[3]="When was the last time you saw a Spice Girl playing an instrument?"; 
chicks[2]="You can actually understand what the Chicks are saying."; 
chicks[1]="The Chicks have fashion sense while the Spice Girls are entirely senseless.";
chicks[0]="The Chicks can actually sing!";

Make a <h3> heading declaring "Terry Brooks' Dixie Chick - Spice Girl Comparison
Use a style tag to make the <h3> heading text red
Space down a bit using <p>&nbsp;</p>
Write the word "Reasons" and make it bold with the <strong> tag
Following "Reasons" write the numbers 0 to 9. Place each inside a <span> tag and give each an id attribute. Each should look something like this; 
&nbsp;&nbsp;
<span id="0">0</span>

Create a little spacing on your page by writing another <p>&nbsp;</p> tag
Create a text box to show each of the reasons: 
<input type=text id="chickMessage" size=100>

Go up to the top of your page and inside the <script> block write a javascript function that receives a number and then writes the array element with the same number in the textbox: 
	function showChick(n){
	  var e = document.getElementById("chickMessage");
	  e.value=chicks[n];
	}

Finally, go back to each of the <span> tags around the various reasons and add a call to the javascript function on mouse over: 
.... onmouseover="showChick(0)">0</span>
Be sure that you get your numbers right. In this example the label is "0" and "0" is the number sent to the function. By analogy, if the label is "1" then the number sent to the function would be "1".

 

Display Pictures and Information about Earth's Neighbors


Use a <h3> heading to display "Earth's Neighbors by Terry Brooks"
Use these three images and note the educational message that goes with each one:

 

"Mercury is the closest planet to the Sun"

 

"Venus is the second planet from the Sun"

 

"Mars is the fourth planet from the Sun"

 

The three images are stacked to the left of the screen so arranged your code like this: 
<img src="mercury.jpg" align="left">
...fit more code in here
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<img src="venus.jpg" align="left">
...fit more code in here
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<img src="mars.jpg" align="left">
...fit more code in here

The following instructions are for the first image of Mercury, but duplicate them for the Venus and Mars images accordingly. Place your code right after the <img> tag as indicated above.


First write a break, e.g., <br> which will place the message box down a little bit in relation to the image
Use a <span> tag to create a message box for the word "Mercury"
For this <span> tag use a style attribute that sets: 
border: medium double black;
margin-left:20px;
padding-left:20px;
padding-right:20px;

Now create a second <span> tag. This <span> tag will include the short educational message that becomes visible when your user mouses over the first <span> (i.e., the message box with the planet's name).
The educational message is the content of the <span> tag
Add the following style attribute: 
margin-left:20px;
visibility:hidden;

Add the following ID attribute: 
id="mercury"
[Of course, you will have to use the appropriate message and appropriate id for the other two planets.]

This code is designed so that our user will mouse over a planet's name and then the educational message will pop into view. To accomplish this, we will need some javascript that receives the name of the planet and then turns it visibility attribute on.

Go to the top of your code and add this javascript:

function showMessage(name) {
	var e = document.getElementById(name);
	e.style.visibility="visible";
}

Have defined our javascript function, you can return to the <span> tag around the planet name and add the onmouseover attribute: 
onmouseover="showMessage('mercury');

And, of course, modify this for the other planets.

[It might be a good idea to test your code at this point and see if mouse overs work for all three planet name message boxes.]

If everything works, you will notice that mouse overs bring the message into view and the messages stay in view permanently. It would be more elegant if only one message was being viewed at a time. To accomplish this, we would have to devise code that turned one message on and then turned the other two messages off.

There are probably many ways of accomplishing this, but the following outlines one way to do it.

The strategy is to iterate through all the messages and for every message not in focus, turn its visibility attribute to "hidden." To iterate through all the <span> ids we could list them in an array. Add the following to the top of your javascript code:

var planets = new Array();
planets[0] = "mercury";
planets[1] = "venus";
planets[2] = "mars";

The name of the message box in focus is given to our showMessage function as the "name" argument. As it stands right now, the showMessage function turns on the message of the message box in focus. We can use the "name" argument and iterate through the array of all <span> ids and for each one NOT equal to name, turn the visibility attribute to "hidden". Add the following code to the showMessage function:

	for (i = 0; i < planets.length; i++) {
	 	
		if (name != planets[i]) {
			var other = planets[i];
			var f = document.getElementById(other);
			f.style.visibility = "hidden";
		}
	 }

That should just about do it. Good luck picking out all the bugs in your code!