CS 102
Oct. 8, 2004
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.
G: drive for this work. I suggest
naming the folder Html.
Save the picture into your Html folder. Make a mental note as to
whether the image is a GIF or a JPEG image.
notepad in the text box and click OK.
<html> <head> </head> <body> </body> </html>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.
<head> <title>My First Web Page</title> </head>Note how we added this to the block, not the tag.
bgcolor="blue"
and text="white". Or, choose your own colors from the list at
http://phoenix.goucher.edu/rgb.txt
(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. The body start tag should now
look something like this:
<body bgcolor="blue" text="white">Note how we added this to the tag, not the block and that the attributes are added between the angle brackets.
<h1> and </h1>.
align="center" attribute to your <h1> tag to
center the level 1 heading.
<p>) to
separate it from the next paragraph.
<b> and </b>) some text. Add
tags to italicize (<i> and </i>) some text. Make some
text appear red (<font color="red"> and </font>).
<font face="Arial"> and </font>).
http://www.goucher.edu/
(<a href="http://www.goucher.edu/"> and </a>).
<img src="pict.gif">) using the image file name
you saved earlier as the image on the page. The file extension has to
be .gif or .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.
<hr>) following that last
paragraph tag and then add another paragraph tag.
<script><!--
var modiDate = document.lastModified;
document.write("This page last updated on " + modiDate);
// --></script>