In short HTML is the language that we used to create this web page you're looking at right now. If your web browser supports a View menu, you should be able to select a menu item Document Source that will bring up another window that will allow you to view the HTML code used to create this page.

Warning: include(/home/stimulus/www/education/adsense/box-ad.php) [function.include]: failed to open stream: No such file or directory in /home/content/36/11024436/html/swellgames/education/html-basic.php on line 58 Warning: include() [function.include]: Failed opening '/home/stimulus/www/education/adsense/box-ad.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/36/11024436/html/swellgames/education/html-basic.php on line 58

Aren't computer languages difficult to learn?

Three words, NOT THIS ONE! Your first impression might be that since HTML is a "computer language" it must be hard to learn. We promise you, it isn't. It is actually almost identical to some word processors that were used less then 10 years ago. HTML was actually created from another language called Standard Graphical Markup Language (SGML). Now SGML is a rather difficult language, but from that language scientists took the most basic commands and created HTML.

How does HTML work?

SIMPLE! You take a document that contains all the information that you would like to display in your web page, when you're done you can then start to "add" the HTML commands to make sure that your web browsers (like the one you're using right now) can understand and display your document to a user across the world.

Although displaying text to other users can be exciting the first time you do it, it still lacks the graphical look that you would probably want in your page. HTML comes with all kinds of very simple commands to change the fonts color, font size, font style, add pictures, and all kinds of other features. What we're going to try and do with this lesson is introduce you to the more basic set of HTML commands. These commands will allow you to format text, add images, and link one HTML page to another HTML page.

What is my first command?

The first thing we want to teach you is how to format text styles. When we say text styles, we mean things like bold, italic, underlined, strike-though, bold italic, bold italic underlined, and so on. This is done very easily so don't be disappointed when you find out it's not too hard.

Remember how we said the first step was to type your document in your favorite word processor? Well that was more than half the work. Your next step is to add the command text to the document. Let's say for example you typed the following sentence in your document:

When my dog jumped over the lazy fox, I didn't know what to do!

Now let's say you want to add some emphasis on this sentence. Like perhaps bold the word "dog", underline the words "lazy fox" and italicize the word "what." The concept behind HTML is that you tell HTML where to start the effect you're looking for, and where to stop the effect you started.

HTML does this by having your wrap commands inside "<" and ">" characters. HTML is assuming that your document won't have any of these characters. Therefore it looks inside the symbols to find commands of what to do. In this case, the sentence in question now becomes:

When my <b>dog</b> jumped over the <u>lazy fox</u>, I didn't know <I>what</I> to do!

which will look like this in your web browser:

When my dog jumped over the lazy fox, I didn't know what to do!

As you might have already figured out, the commands are started by mentioning the command inside "<" and ">" signs, and then stopped (terminated) with almost the same command, but with a "/" just before the command name. To review, the command for starting the bold process is <b> and the command to stop the bold process is </b>. If we didn't stop the bold process, the rest of the HTML page would be bolded.

Okay, I've created an HTML sample like you said, how do I view it?

Before you can view your document in a web browser, you must add some commands at the top of your document, and at the bottom of your document. These commands tell the web browser where your HTML document starts and where it ends.

At the top of your HTML document type:

<html>
<head>
<title>The title of your HTML window</title>
</head>
<body>

At the bottom of your HTML document type:

</body>
</html>

Once you've added these commands to the top and bottom of your document and saved the file, you can open it up with your web browser! The one trick to getting your file ready to be viewed by a web browser is to save the file with the suffix ".html" at the end of your file name. This will allow you to easily open the file from your favorite web browser. Most browsers have an Open File... item under the File menu. The browser will open your document and let you look at how it appears so far.

Cool! Give me more commands!

As you wish!

<b>bold</b>
<i>italic</i>
<u>underline</u>
<em>emphasis</em>
<strong>strong emphasis</strong>
<pre>

preformatted

block quote

Warning: include(/home/stimulus/www/education/adsense/box-ad.php) [function.include]: failed to open stream: No such file or directory in /home/content/36/11024436/html/swellgames/education/html-basic.php on line 172 Warning: include() [function.include]: Failed opening '/home/stimulus/www/education/adsense/box-ad.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/36/11024436/html/swellgames/education/html-basic.php on line 172

Okay, I see Bold and Italic, but nothing for "Bold Italic"?

This is because there are no commands for the two mixed together. You simple use both of them at once on the area of text you wish to effect. Let's say we wanted to bold the word "what" along with the already italicized version. We would simply add the bold command in addition to the italic command. Making our code look like:

When my <b>dog</b> jumped over the <u>lazy fox</u>, I didn't know <i><b>what</b></i> to do!

which will look like this in your web browser:

When my dog jumped over the lazy fox, I didn't know what to do!

Hey! I typed two paragraphs and it all came up lumped together! What's up?

Well, in order for you to keep your HTML document looking nice amongst all the commands, HTML has elected to ignore your carriage returns. It also has to do with the fact that different computers use different computer characters to recognize carriage returns. So in order to cure this problem once and for all, they've ("they" being "them" of course) created commands for single and double spaces. Without further ado, here they are:

<p> - For a double space
<br> - For a single space

How do I change the font size?

No problem. The font size and color can be changed by using the <font> command. Of course this command is terminated with the </font> command. Inside this command you can issue other "sub-commands" for instance:

<font size="4" color="red">My Red Text!</font>

This example changes the font to one size bigger than the normal display size "3" and changes the color to Red. Now you might be asking yourself where you issue this command. You just insert this command where you would like the effect to start, and insert command </font> where you would like the effect to stop.

Now for clarity's sake, we're displaying everything in this document at size 4. So if you don't notice a size change, that's okay. You'll notice the change in your document. NOTE: Sizes are rather strange. The smallest size is 1 and the largest size is 7. You'll have to experiment with the sizes before you'll probably know which size to use where.

Okay, I'm seeing Black text on a Gray background. How do I change the background color?

Remember how we added "sub-commands" to the <font> command in order to make the text colored? You use the same idea for the <body> of the HTML page. What we're talking about here is changing the color of the <body> of the HTML page. So naturally we will add "sub-commands" to the <body> command at the top of our HTML document. Remember when we added the <body> command to the top of our HTML page? Okay, go there and add another command just inside the ">" character making it look something like:

<body bgcolor=white text=black>

You'll notice that after you reload the HTML page from your web browser the background color has changed to White, and the text has remained Black.

How do I add an image to my page?

To add an image to your HTML page, you need to understand one thing: The image is not stored inside your document. Now we know that most word processors can add images to documents, but for the sake of other computers that are different than yours, HTML has to keep your images separate from the HTML document.

So where do your keep the image?

You keep the image on your hard drive, and eventually on the Internet machine where your HTML document will be stored. The way HTML references files on your hard drive is relative to where your HTML document is currently located. Let's say for simplicity's sake, that the image you want to use is in the same folder or directory as your HTML document.

Now let's say the image you want to use is the apple just like the one on the cover page of the Internet 101 site. The command you use is called <img>, however there is a sub-command called src which stands for source, which is the relative path to the image. If the image is inside the same folder or directory as the HTML page, then you only need to reference the image by name. An example would be:

<img src="apple.gif">

which would give us:

If the image was in a folder called "images" just inside the same folder where your HTML document was located, you would reference only the path from the HTML page. For example:

<img src="images/frontpage/apple.gif">

If you would like to reference an image from another place on the Internet, you could use:

<img src="http://www.stimulus.com/education/images/v2/internet101-apple-small.jpg">

How do I link my page to another page?

Linking a page to another page uses a command called <A> which stands for Anchor. Anchors look similar to image command. Instead of a sub-command called src, it has a command which means virtually the same thing called href which stands for HTML Reference. An example of the Anchor command would be:

<a href="http://www.stimulus.com/"> Go to STIMULUS! </a>

Which will look like:

Go to STIMULUS!

How do you get your page out to the world?

Well, this is slightly more involved. You need to get some server space to keep your HTML pages. This means that you need to contact your Internet Service Provider (ISP) and get some space on their machines to keep your HTML files. Typically when you purchase a basic e-mail account from an ISP, you get a directory on their computers with a base of 2 to 5 megabytes of hard disk space. This is plenty of space to put up a couple HTML pages. Watch out, pictures can start to eat space like crazy, so you might need to get more space later.

Don't forget, you can create your entire web site on your local computer. Once everything looks great, you can move those files to the ISP's machines.

Creating Headers

There are six levels of headers; here is what they look like:

Have you ever seen lists of information with bullets like this?

• Item one!
• Item Two!
• Item Three!
• and wait, Item Four!

In HTML these are called "Unsorted Lists" and look something like this:

<UL TYPE=DISC>
<LI>Item one!
<LI>Item Two!
<LI>Item Three!
<LI>and wait, Item Four!
</UL>

Notice how the <ul type=disc> command starts the list and how the </UL> command ends the list. Each item uses a command <li> (standing for list item) for each line without a terminating command.

Now you're probably wondering what the type command is all about. Well that is a nice feature that allows you to change the kind of "bullet" that is used when displaying your list. Here are the options:

• DISC
• SQUARE
• CIRCLE

So what does an Ordered List look like?

Like this:

1. Very important statement
2. Second vitally important statement
3. Fifth, I mean third important statement
4. Fourth most incredible piece of information

<OL TYPE=DISC>
<LI>Very important statement
<LI>Second vitally important statement
<LI>Fifth, I mean third important statement
<LI>Fourth most incredible piece of information
</OL>

The only command we changed was the first command <OL TYPE=DISC> and the last command </OL>. The web browser took care of the rest. It added the numbers.

What other list types are there?

Boy you guys ask great questions! There are, in fact, two other main types of lists (I say main, because if you manipulate the TYPE command, you can end up creating a couple of other types. Try substituting A,a,I,i instead of DISC and you'll see what I mean). These would be MENU and DIRECTORY, and they look like this:

MENU

Now if you're viewing this through a web browser (Netscape or Explorer), these two lists probably look the same. They are actually lists that display differently when viewing this page via Lynx browsers which are completely text based. By specifying a list as a menu or a directory, you allow the Lynx browser to change the way the lists are displayed. A Menu is displayed with * for bullets, while the Directory list is displayed like a UNIX directory list. For you Macintosh users, just forget I mentioned this entire section. If you don't know what Lynx is, then you don't have to worry about these two list types.