Don Southwell - Delta College Faculty Web

Lab Activity: Creating a Frames Webpage

For this activity, you will create a frame based webpage that includes content from three other web pages.

Step 1: Create myframes.html using the following HTML code:

Step 2: Next create title.html using the following HTML code:

This frame will appear on the top left of your web page and will simply act as a title frame for your page. The HTML syntax should look like this: (Replace ?.gif with the name of your own background gif file and #?????? with your desired text color.)

</BODY>
</HTML>

Step 3: Create list.html using the following HTML code:

This frame will appear in the left menu frame of your web page and will simply act as a menu listing for your page. The HTML syntax should look like this: (Replace ?.gif with the name of your own background gif file and #?????? with your desired text color.)

<HTML>
<HEAD>
<TITLE>My list</TITLE>
</HEAD>
<BODY BACKGROUND="?.gif" TEXT="#??????">
<A HREF="bio.html" TARGET=target> <CENTER> About Me</CENTER></A>
 
<A HREF="email.html" TARGET=target> <CENTER> Email Me</CENTER></A> 
<A HREF="welcome.html" TARGET=target><CENTER>Welcome </CENTER></A>
</BODY>
</HTML>

Step 4: Create welcome.html using the following HTML code: (Remember to add your preferred background image and text color.)

<HTML>
<HEAD>
<TITLE>Welcome to my web page</TITLE>
</HEAD>

Step 5: Create bio.html using the following HTML code. Add some information about you. (Suggestions: Job, hobbies, interests, educational major...etc.)

<HTML>
<HEAD>
<TITLE>About me</TITLE>
</HEAD>

</BODY>
</HTML>

Step 6: Create email.html using the following HTML code. (Page should inform your visitors how to contact you through electronic mail.)

<HTML>
<HEAD>
<TITLE>About me</TITLE>
</HEAD>

</BODY>
</HTML>

When you are done, you should have 6 new web pages:
1) myframes.html
2) title.html
3) list.html
4) welcome.html
5) bio.html
6) email.html

Step 7: Upload all of the files to your student.delta.edu directory and test your page.

Step 8: Now that everything works....make it look cool! Play with the backgounds, colors, etc. Add some graphics if you want.

Step 9: When your happy with what you've done. Print the page you've created for turn-in and mail me a link to your myframes.html file.

Now take a look at your new web page! It should all make sense now. If these procedures did not make sense to you as you were going through the motions, take a few minutes to re-trace your steps and think of the logistics behind this setup.