Oct. 18, 2006
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
Save the picture into your
Html folder. Make a mental note as to
whether the image is a GIF or a JPEG image.
notepadin 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.
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.
align="center"attribute to your
<h1>tag to center the level 1 heading.
<p>) to separate it from the next paragraph.
</b>) some text. Add tags to italicize (
</i>) some text. Make some text appear red (
<img src="pict.gif">) using the image file name 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.
<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>