Feb. 28, 2003
In this lab, you'll create a small web page using Notepad, adding features
as you go and observing the changes. The purpose of this lab is for you to
``peek behind the scenes'' and see what the HTML language looks like and
how it works.
- Create a new folder on your
G: for this work. I suggest
naming the folder
- Start Internet Explorer and open a Web page (any Web page will do)
with an image on it. Click the right mouse button on the image and choose
Save Picture As... from the menu.
Save the picture into your
Html folder. Make a mental note as to
whether the image is a GIF or a JPEG image.
- Start notepad. From the Start menu, choose
notepad in the text box and click OK.
- Using Notepad, type the basic framework of a web page:
Save the file into your Html folder, using the name "index.htm"
(this is one of those few times when you should type the quote
characters). Find the file in your Html folder and double-click the
file icon; the file should open in Internet Explorer. Pretty boring page,
right? Well, we're just getting started here.
- Let's give your new Web page a title, a heading, and change the
default color scheme.
Save the web page, return to Internet Explorer, and refresh the page. If
you don't refresh the page, you won't see your changes! It looks a
little better now, right?
- In the head block, add the title My First Web Page.
- In the body start tag add the attributes
text="white". Or, choose your own colors from the list at
(Some of these colors work better than others --- I always type them in
lower case characters, with no spaces between words. The color names
that end in a number don't seem to work for me.) Or, try the obvious
colors such as red, green, yellow, etc.
- In the body block, add a level 1 heading: My First Web Page.
- Now, we'll add a few more improvements.
Again, save the page and view it in Internet Explorer, refreshing the page
so that you see the new changes.
- Add the
align="center" attribute to your
<h1> tag to
center the level 1 heading.
- Type a short paragraph of text following the level 1 heading.
- Finish your paragraph with a paragraph tag to separate it from the
- Type a short second paragraph. Make sure this paragraph contains
the sentence I attend
Goucher College somewhere.
- Add tags to bold some text. Add tags to italicize some text.
Make some text appear red.
- Change the font of the entire page body to Arial.
- Let's add a few multimedia effects:
Save the page and view the results.
- Surround Goucher College with a pair of link tags, linking
the text to the College's home page at
- Following the last paragraph tag you added, add an image tag using
the image file you saved earlier as the image on the page. The file
extension has to be
.jpg, depending upon the image
type: GIF or JPEG, respectively. (You did note the type of
image, didn't you?)
Insert paragraph tags before and after the image tag.
Almost done. Just a couple more things:
Save the file and view the page. You're done. How's it look?
- Add a horizontal rule tag following that last paragraph tag and
then add another paragraph tag.
var modiDate = document.lastModified;
document.write("This page last updated on " + modiDate);
- Now that you're a ``Webmaster,'' feel free to experiment with the
page and see what happens.
Thomas P. Kelliher
Tue Feb 25 11:12:54 EST 2003