UW UB Math/Science Lab #2

Introduction to HTML

 

In today’s lab we will roll up our sleeves and start working directly with html.  We will go back-and-forth between FrontPage and the html code to make the process as painless as possible.

 

  1. Open FrontPage (FP) if you haven’t already.  FP should open up a new blank page.

 

 

  1. Type in the following (1 item per line; hit the Enter key between lines.)

 

Your Name

Your School

Your Grade

A favorite saying or some words of wisdom you’d like to share with everyone.

Your favorite color

 

 

  1. Find the tabs at the bottom of the FP window.  Try clicking on each tab to see how the view changes.

 

 

The three views are:

            Normal The standard WYSIWYG FrontPage editor view.

            HTML             The actual html code that is sent to the browser.

            Preview            A preview of how things would appear in the browser.

 

4.  Go the File menu and choose Save.  Save the file in My Documents with your name (less than 8 characters, all lower case, no symbols.

 

5.  Exit MS FP, and let us know when you are done.

 

UW UB Math/Science Lab #2

Introduction to HTML

 

Next you will do a number of exercises to learn some html basics.

 

1.  We will show you how to open your new page in a text editor.  We will also open the same page in a browser window and set up your screen so you can work with both at the same time.

 

2.  What we will do next is to work with the page open in the text window and immediately see the changes appear in the browser. We will give you a cheat sheet with a few of the html tags and attributes you’ll need for this lab.

 

3.  The first thing we would like to do is to get rid of a bunch of unnecessary propaganda that FP added to our page.  Using what you learned from the HTML tutorial, remove the unnecessary information from the document head.  Be careful not to remove the Title- you’ll need it for the next step.  To see what, if any, changes occurred in your web page, you have to do two things.  First,  save your changes in WordPad.  Next, click on the Refresh button in the browser to load the updated page.

 

4.  How about that Title?  You want users to bookmark your page, so give them a name to remember.  Change the title, save and refresh.  What happened?  It might be subtle, so look all over your browser screen.  Let’s see if you’ve become memorable- try adding your page to Favorites and see how different things appear.

 

5.  Don’t you think your name should stand out more on this page?  Try making yourself bigger (hint- see the cheat sheet)!

 

6.  Do you know your school color/s? Change your school’s name into one of  it’s true colors.

 

7.  Make a bold statement of your grade.

 

8.  Your words of wisdom should be expression of your inner-most self.  Choose an appropriate font (again, see the cheat sheet (but use something more interesting)).

 

9.  Choose whatever special formatting you want for your favorite color.  Try nesting at least two tags.

 

10.  Now it’s time to have some fun (if you have time).  We will give you the URL for a site that lists a huge number of html tags.  Try out as many as you can.  Add more text to your page and go wild.  Show us what you come up with.