This is a Useractive HTML Learning Lab, which means that you learn by trying the suggestions and experimenting on your own. In these labs, you will learn the language of the web - HTML (Hyper Text Markup Language) by making your very own web page right here, right now. Let's get started!

First, click Here

In the bottom half of the window, you should see the CodeRunner® Editor. See where it says "Erase this line and Type here. Use HTML mode to create HTML, JavaScript, and DHTML files"? Delete this line and replace it with "HELLO WORLD." Be sure that HTML is the Mode selected from the drop-down menu.

In HTML mode, type the following into the Editor below

HELLO WORLD

After you type "HELLO WORLD", click on the PREVIEW button, which looks like this

Another browser window should pop up and show you your first web page.

It should look something like this:

HELLO WORLD

Anytime you click PREVIEW, you will see the results of your code in a new browser window. This is how you will be able to read the lessons, try out the examples, and experiment on your own.

Making the Page More Exciting

Of course, as web pages go, that was a really boring one. Let's make it more interesting by adding some HTML tags. Put <H2> in front of "HELLO WORLD" and </H2> (notice the backslash) just after "HELLO WORLD."

In HTML mode, type the following into the Editor below

<H2>HELLO WORLD</H2>

Remember to click on PREVIEW. What happened? The text should have gotten bigger and bolder. We added tags to our page. Tags tell the web browser what to do with the text. They do the "Markup" part of the Hyper Text Markup Language (HTML). I'll tell you more about web browsers and HTML later on. For now, let's have some fun!

Try using some other header tags. There are six such elements: H1, H2, H3, H4, H5, and H6. Delete what you have so far so you can see them in action.

Type the following into the Editor below

regular <H6>small bold</H6> <H5>bold</H5> <H4>bigger</H4> <H3>even bigger</H3> <H2>next to biggest</H2> <H1>biggest</H1>

Click PREVIEW.

It should look something like this:

regular small bold bold bigger even bigger next to biggest biggest

The tags are telling the web browser what to do with the text between the beginning tag (<H2>) and the ending tag (</H2>). For example, we can use the center tag to center some of the text you've written. Type <center> in front of the line that says "regular," and type </center> after the the line that says "bigger."

In HTML mode, type the following into the Editor below

<center> regular <H6>small bold</H6> <H5>bold</H5> <H4>bigger</H4> </center> <H3>even bigger</H3> <H2>next to biggest</H2> <H1>biggest</H1>

Questions to think about and experiment with:    

Does it matter whether the tags are capitalized or not?

   

Do lots of spaces between words matter much?

   

What does adding carriage returns (hitting the ENTER key) do?

   

What happens if you remove one of the ending tags? (Try removing the ending </center> tag.)

   

What are the "<" and ">" doing? Try putting any word in between them, and see what happens.

You should experiment and answer these questions for yourself!

Saving and Retrieving Your Page

NOTE: Unless you have an account with Useractive, you will not be able to save or retrieve files.

Let's practice saving your page on the Useractive server. Go ahead and click FILE ->SAVE TO SERVER from the menu selection, or simply click on the button. There will be instructions on what to do when you get there. You may be asked to enter your username and password if you have not done so already. Be sure to type these in exactly as you did when you registered.

Pretty easy, eh? After successfully saving your file, you should have seen something that told you the URL where your document is located. This URL is just like any other - anybody can go on the web, type this address in the location bar of their browser, and see this page.

You can also quick save by clicking on . This saves the file using the current file name and type without popping up the dialog box.

To retrieve your page click FILE -> OPEN FROM SERVER from the menu selection, or simply click on the button. Again, there will be instructions on what to do when you get there.

You're Ready to Go!

At this point you should be comfortable using the Preview button and with saving and retrieving your files. You're going to use this a lot. So, if you want, go do it a couple more times.

Throughout the rest of these learning labs, whenever I want you to type something into your document, I'll put it into a white box. When I want you just to look so I can show you something, I'll put it into a gray box. You will probably want to save your page after each lesson so that you can go back and get it later, but that's up to you.

You can get to the next tutorial by clicking on above.