Creating a Web Page

3. Creating a Web Page

I noted in the last lesson that "HTML (HyperText Markup Language) is a FORMATTING language . . . ." The question you might ask, is, "Why can't you just format a file in a text editor and put the extension .html on it? Well, you can, but . . . .

Let's look at a page of text formatted with HTML tags.. It will appear in a new browser window on top of this one, so when you are finished looking at it, click on the "CLOSE BOX" in the upper left corner of the window on a Mac or the upper right corner on a Windows PC.

Click here to see a page of text formatted with HTML.

Now let's look at the same page formatted in a text editor. In the original, if you could see it, it has all the same breaks, italics, color, bold, and large size print as the HTML formatted one. The difference, of course, is that all the formatting tags have been removed.

Once again, this will be in a new window on top of this one, so close it when you are finished looking.

Click here to see the same page with the HTML formatting tags removed.

OK, now you can look at the original. Open it again using the first link above, and use the VIEW menu. In Netscape there should be a choice called PAGE SOURCE. In Explorer under the VIEW MENU it is just called SOURCE. When you select it it will show you the orignal text file, and you will note that the formatting of the text includes page breaks.

It should be pretty clear from that why we must use HTML tags to make pages look like we want them too in a browser.

The Format of an HTML page

HTML pages (except FRAME pages which will be handled later) all have a similar form. We will call it the "boilerplate" of the HTML page. It looks like this:

**The HTML Boilerplate**
<HTML> <HEAD> <TITLE><!-- The title you wish to show in the title bar of the window goes here --></TITLE> <!-- Other than TITLE,things like JavaScript code can go inside the HEAD tags, but that is beyond this course --> </HEAD> <BODY> <!-- The substance of the page, that is text and graphics with tags goes here --> </BODY> </HTML>

Since HTML, HEAD, TITLE, and BODY are inside <. . .> they are TAGS, but not style tags. They are really SETUP tags for the HTML page. They break the page into regions where certain things need to take place. HTML inicates to the browser that this is an HTML page as opposed to a text or some other kind of page, and BODY indicates that here is the stuff that should be displayed.

The text in green with the  are called COMMENTS. Anything you enclose this way will be ignored by the browser when it is interpreting HTML tags. This gives you a good way of putting information in your page about how you have formatted it.

Writing your first HTML Page

Finally you are actually going to write your first HTML page. There are several things you need to do to prepare for this:

Be sure you have a formatted floppy disk, Zip disk, Syquest cartridge or some other removable storage medium. Put a folder (directory) called HTMLClass on it. Insert it in your computer and be sure the directory is recognized. You may use a folder (directory) on your hard disk named HTMLClass if you have access to the hard disk on the computer you are using.
Have your computers text editor (SimpleText, TeachText or Word Pad) open and ready to go.
Open a new Netscape Navigator or Internet Explorer window. That means you will have two browser windows open at once (one on top of the other).

You can find the way to do that in the FILE menu. There will be something associated with the word "NEW" there that will do it for you.
You will be able to switch back and forth between them by using the WINDOW menu in both Explorer and Netscape Navagator, and the COMMUNICATOR menu in Netscape Communicator.

Now you are ready to go. Follow the following steps carefully.

In your text editor, put in the HTML "boilerplate" as defined above in this lesson. You may type it in, which is a real pain, or you can SELECT it on this page with your mouse, COPY it, and then PASTE it into your text editor. You may remove the comment lines after you PASTE, if you wish.
Now save the file in your text editor to your floppy disk, etc. with the name HTMLstationary. That way, you can just open it and resave with an ".html" extension whenever you start to write a new HTML file.
Once you have saved it, use the SAVE AS ... in the FILE menu to save it as MyPage1.html if you are using a Mac, or MyPage1.htm on a PC . This is the file you are going to work with, so you need to save it with that extension so the browswer will recognize it as an HTML file.
Now SELECT with your mouse, COPY, and PASTE the following sentence between the <BODY> and the </BODY> tags on "MyPage1.html."

This is my first HTML page and I am so happyto finally be writing one.
Put in the appropriate STYLE TAGS so that HTML is bold and "happy" is in italics
Save your page.
Now you want to look at your page in your browser. Move to that new browser page you brought up. Under the FILE menu look for an item like OPEN A FILE, or OPEN A FILE IN THE BROWSER, or OPEN PAGE IN NAVIGATOR. These are all terms used with various versions of Netscape and Explorer to let you open files residing on your computer, rather than from distant web server. You may have something different from any of these on the version you are working with, but if you look around, you should be able to spot what you need.
Go to the Floppy, Zip, or whatever where you stored your page and open it. Voila! you should see a single line with "HTML" in bold and "happy" in italic. If it isn't, check that you have done everything in this list, and try again.

Now between the <TITLE> and </TITLE> tags, type in "My Very First HTML Page" (no quotes). This is what you want to appear in the title bar of your browser window. Save again.

Go back to your browser and click on the RELOAD button if you are using Netscape and the REFRESH button if you are using Explorer.

"My Very First HTML Page" should now appear in the title bar of the window.

The BREAK Tag

One more item before you get to work on some Exercises. If you remember, the unformatted text you looked at at the beginning of this lesson was all run together. That is because HTML does not recognize a RETURN (carriage return) in a text file. Obviously, you don't want all your sentences to run together, so there is a tag which will let you break between sentences, and even put in blank lines. The tag is the BREAK tag and it is  .

This tag is one of the few that does not require a closing tag. The others you have seen need to know when to stop, say, "bolding" text, but a BREAK cannot be misconstrued that way.

If you put in two s, that is , the second one will give you a blank line.

To test this, go to your text editor and SELECT and COPY the line you have entered in the BODY portion. Now PASTE it in under the line you already have there. SAVE, and RELOAD or REFRESH in the browser. Notice that the two lines run together even though they are typed on separate lines.

HTML page
formatting This is my first HTML page and I am so happyto finally be writing one.
This is my first HTML page and I am so happyto finally be writing one.

As viewed in
the browser This is my first HTML page and I am so happyto finally be writing one. This is my first HTML page and I am so happyto finally be writing one.

Now type   at the end of the first line you wrote. SAVE and RELOAD or REFRESH. You should see the sentences on two lines, one right under the other.

HTML page
formatting This is my first HTML page and I am so happyto finally be writing one. 
This is my first HTML page and I am so happyto finally be writing one.

As viewed in
the browser This is my first HTML page and I am so happyto finally be writing one.
This is my first HTML page and I am so happyto finally be writing one.

Now put a   right next to the last one and go through the process of viewing the page again. There should be a space between the lines.

HTML page
formatting This is my first HTML page and I am so happyto finally be writing one.  
This is my first HTML page and I am so happyto finally be writing one.

As viewed in
the browser This is my first HTML page and I am so happyto finally be writing one.

This is my first HTML page and I am so happyto finally be writing one.

Now you know how to write and view your own web pages. All the rest is just learning about other tags that will help you make your page more sophisticated.

Exercises 3

COPY and PASTE the following sentences from this page into your text editor. Put them underneath the work you have already done in the BODY portion of that page. When that is done, insert TAGS so that these sentences will appear in a browser, when you view your page, as they do here below (including spacing between the lines).

BILL: Why did you call me a werewolf at the meeting last night?
LINDA: I didn't say you were a werewolf, I said you were a vampire.

BILL: On what evidence do you base that claim. Have you ever seen me drink blood?
LINDA: I secretly video taped you doing that and then turned over the tape to the DA.

BILL: That is really showing friendship. You lure me into drinking blood,
and then you turn me in. I would call that betrayal.
LINDA: Well, I have to admit that I have been out to get you. Ever since
I read Dracula, I've wanted to do in a vampire.

If you want to see my answers, click here.

After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.

HTML page formatting	This is my first <B>HTML</B> page and I am so <I>happy</I>to finally be writing one. This is my first <B>HTML</B> page and I am so <I>happy</I>to finally be writing one.
As viewed in the browser	This is my first HTML page and I am so happyto finally be writing one. This is my first HTML page and I am so happyto finally be writing one.

3. Creating a Web Page

The Format of an HTML page

Writing your first HTML Page

The BREAK Tag <BR>

Exercises 3