Lesson 2

Welcome back, 4-H Webmasters! Now that you have learned how to begin creating a Web page using a text program and learned how to view it using your Web browser software, now we'll start making your page LOOK like a Web page!

Once again, you do not have to be hooked up to the Internet while you are working on this lesson, so if you want to print out this lesson and then work in your text program, that is just fine. Like the last lesson, we will be moving back and forth between the text program you used to create myweb.htm and your Web browser.

First, of all, open up myweb.htm (the text file you created in Lesson 1) in the text program.

You are going to start adding some HTML tags to the text you have already written.

These are four different examples of what HTML tags look like:

Do you notice something about each of these HTML tags? They all begin with a left angle bracket (<) (also know as a "less than" sign) and end with a right angled bracket (>)(a "greater than" sign). In between those two brackets is the "code" that tells your computer what to do.

The first example above () tells your computer to make text bold.

Can you guess what the second example tells your computer to do to the text? That's right -- center it!

The third and fourth examples are more complicated: the third code is for adding a graphic to your Web page, and the fourth example creates a link to another page. We will only be dealing with the first two examples in this lesson.

First of all, at the very top of your myweb.htm text file, type the word HTML with a less-than sign on the left and a greater-than sign on the right of it. It should look like this:

<HTML>

This tells your computer that you are creating an HTML file.

Now...in your myweb.htm text file, choose a few words that you would like to be bold. (On my personal page, I decided to print my name and also go bobcats! in bold.)

Now, right in front of the words that you want to be bold, type the "bold" HTML tag, just like this:

And, at the end of the words that you want to be bold, type the same tag, only with a slash in front of the b, like this: That tells the computer to "turn off" bold.

Your text file should look something like this:

Hi! My name is Suzi Taylor, and I live in Bozeman, Montana.

Now for the moment of truth: Save your myweb.htm file (just like before -- in ASCII or plain text) with the new changes. You will be replacing the old file, so you will only have one myweb.htm file. If your computer asks if you want to replace the old file, say YES.

Now, open up your Web browser (remember--the word processing program can still be open if you want). Also, you do not have to dial in on your modem or be actually connected to the Internet in any way, just open up the browser. You are now going to use the OPEN FILE command to look at your Web page. When your Web browser is active, there should be a menu at the top of your screen. One of these menus says FILE. Pull it down and select OPEN FILE.... A box will pop up on your screen, and this is where you will select your text file myweb.htm.

It should look almost exactly like it did in Lesson 1, only this time, your name should be bold.

If your name is not bold, read the troubleshooting tips below.

If your name IS bold and everything seems to be the way you want it, skip ahead to the next part.

Some troubleshooting tips:

If your name did not turn out bold:

First, click the "Reload" button in your Web browser. Sometimes your computer stores an old version of a file. When you hit the reload button, you are sure to be viewing the latest version.
If that doesn't work, look back at your text file. Make sure you typed

--a less than sign (<)

--then a b

--then a greater than sign (>) The whole code you typed should look like this:

right in front of your name (or whatever other words you want to be bold).

If your name is bold, but everything after it is bold too, then something is wrong with your "turn off bold" tag. Make sure it is typed in just like this:

If you have the codes typed in right and you still aren't seeing your name in bold, maybe you saved the file under a different name and you are actually viewing the old file. Try saving your current file under a new name, such as test.htm. Then, go to the Web browser and open up test.htm. Make sure your file has .htm at the end of it, and make sure you saved it in plain text (ASCII).
If this still isn't working, send me an e-mail and describe what seems to be the problem.

If everything worked out above, then

You have just done your first HTML tag! Way to go!

We will try a couple more tags before ending this lesson.

The center tag looks like this: <center> and the tag to turn center off looks like this: </center>

Try putting center and center/off tags around some words in your text file.

Remember, always save your myweb.htm file after you have made changes and be sure to replace the old file. You don't want to have different versions of the file floating around on your computer! And, if you don't save the file each time you make a change, your Web browser won't pick up the new changes.

Now, go view your text file in the Web browser again. (If your last version of myweb.htm is still showing in the browser, you should be able to just hit the RELOAD button and it will pick up your newest version. Or, you can do it the way we did it earlier: pull down the FILE menu and select OPEN FILE.)

If that worked OK, we'll try one more HTML tag before wrapping up this lesson. This tag &ltp> means "start a new paragraph." You put this tag before every set of words that you want to form a new paragraph. For example, my personal profile page looks like this:

Hi! My name is Suzi Taylor, and I live in Bozeman, Montana. I am the leader of the Montana 4-H Webmasters Project. I am 29 years old and I am married. My husband's name is Scott, and we have two cats, Kahshi and Stevie Ray.

I work at Montana State University &ltb>(go Bobcats!) and I like all kinds of sports, traveling and the Internet.

See how the tags make separate paragraphs?

Try putting some paragraph tags into your text file, save it and then view it in your Web browser.

That's enough for this lesson. Learning HTML is a little confusing, but if you have done all this successfully, you are well on your way to being an HTML expert! If you had a few rough spots along the way, don't worry -- this stuff is tough! Keep trying, send me an e-mail with your questions, talk to your buddy or ask somebody to help you.

You can do it!

In the next lesson, we will learn how to add more codes for headlines and neat stuff like that.

Good job! You have finished Lesson 2

Go to lesson 3