Visit Your Local PBS Station PBS Home PBS Home Programs A-Z TV Schedules Watch Video Donate Shop PBS Search PBS
header
html

all about html
Click on any of the terms below to get a full explanation of that topic.
•  Things You'll Need to Start Writing HTML
•  Tags: The Building Blocks of HTML
•  Head and Body Tags
•  Fine Tuning The Text
•  Graphics
HTML is cool—it's a computer language that helps you make Web pages, those pages seen on the Internet. And the Standard Deviants will help you with HTML! To make an HTML document, you'll need a few things. The first thing you'll need is a computer. It doesn't matter if you're not a computer person. HTML is easy to learn. If you can find the "on" button of a computer, you can make a Web page.

Things You'll Need to Start Writing HTML

The next thing you'll need is something called a text editor. A text editor is a program (get this) where you can edit text. Duh. In simple terms, a text editor is basically a word processor. Microsoft Word and WordPerfect are two popular text editors. Notepad and SimpleText are very basic text editors, which makes them ideal for learning HTML.

You probably don't even realize it, but most computers already have these basic text editors built in. On PC's it's Notepad and on Macs it's SimpleText. These two text editors don't have any bells or whistles, so they're known as simple text editors.

We'll assume you're using Notepad, because it comes free as part of Windows on PC's and it's very similar to SimpleText, which comes free on all Macs.

To open Notepad in Windows, click on the "Start" button on the taskbar on the bottom left of the screen. Choose "Programs," "Accessories," and then "Notepad." (To open SimpleText on a Mac, click on the apple on the top left corner of the screen and SimpleText will be one of your options.)

The next thing you'll need is an Internet service provider (ISP). An ISP is a company that provides you with Internet service. For a monthly fee, an ISP will let you surf the World Wide Web as much as you want and also give you space on their Internet server for your home page. Most ISP's will give you about 2MB of space on their server and that should be plenty for a basic home page. If your ISP doesn't provide Web space as part of their basic package, they probably sell it for an additional cost. But before you pay more dough, you can get free Web space from some Web sites.

You may've heard about some programs that will make your Web page without having to write the HTML yourself. This type of program is called a WYSIWYG editor. WYSIWYG stands for "What You See Is What You Get." This type of editor lets you make a home page without having to type in all the HTML code yourself. You just click on the buttons and the program does all of the HTML for you.

When you're coding HTML in a simple text editor, all you see is lines of text. When you look at the page with a Internet browser, the browser translates the commands into something visual. But with a WYSIWYG editor, you create the Web page exactly as it'll look in a browser.

The WYSIWYG page looks just like a finished Web page viewed in a browser. So, the text page and the WYSIWYG page will look exactly the same in a browser, the only difference between the two is the type of program in which the page was constructed.

There're a lot of WYSIWYG editors out there, like Netscape Composer, Frontpage, Pagemill, Dreamweaver, and others that you can download from the Web. As with everything else, they range in price and power.

WYSIWYG editors are good for people who plan on staying beginners, because they're easy to use. But as you learn HTML, you'll find that you have better control over the page if you use a text editor rather than a WYSIWYG editor. And because one day soon you'll be an HTML poohbah, we're gonna stick with the simple text editor rather than the WYSIWYG editor. If you use a simple text editor you'll be able to see all the behind the scenes stuff that you wouldn't see if we were using a WYSIWYG editor. This way you really learn HTML.

The last thing you'll need is an Internet browser. There are many out there, but the most popular are Netscape Navigator and Microsoft Internet Explorer. You can download both for free on their respective home pages. Netscape's home page is at www.netscape.com and Microsoft's homepage is at www.microsoft.com. There are differences, but, for our purposes, these two browsers are pretty much the same. We flipped a coin and decided that we'd use Netscape.

Tags: The Building Blocks of HTML

HTML is a computer language consisting of commands, known as tags. HTML tags are English words or abbreviations that are sandwiched between a less than (<) and a greater than (>) sign. These signs don't have any mathematical value in HTML—they're basically just brackets.

HTML tags usually come in pairs, a opening tag and a closing tag.
Here's an opening tag: <HEAD>.
Here's a closing tag: </HEAD>.

The only difference between these two tags is that the closing tag has a forward slash before the "H." In the table below, all of the tags on the left are opening tags. All the tags on the right are closing tags because they have the forward slash.

Opening Tag Closing Tag
<BODY> </BODY>
<I> </I>
<U> </U>

Tags are what HTML is all about. When writing an HTML document, we put the text we want displayed on our Web page between an opening and closing tag to make the text look a particular way—a certain color, underlined, italicized, a certain size, or any number of other things. The Internet browser reads the tags and makes the text look the way we have programmed it.

Let's look at an example to see how this works. To start off, we can underline some text. To do this, we type <U> in our text editor. The single letter "U" between brackets in HTML means we want to underline. To stop underlining, we go to the end of whatever we typed in, and insert the closing underline tag, </U>. All the text between our opening and closing underline tags are underlined in the browser. There are some other tags we need in there to actually get that to work, but we'll get to those in a sec.

We can do the same thing if we want our text italicized instead of underlined. We just use the letter "I" instead of the letter "U." We tell the browser to start italicizing with the beginning italics tag, <I>. We type in the text we want italicized. Then we type in the closing italicizing tag </I>.

This is how HTML tags work. You start a command by using a particular opening HTML tag, depending on what you want to have happen. Next, you type the text you want to be modified. Finally, you tell it to stop by using the corresponding closing HTML tag. HTML pages on the Web are a bunch of these opening and closing tags. Internet browsers read these HTML tags from left to right, top to bottom, to create HTML pages that you view through your Internet browser.

Now let's dig a little deeper into the format of an HTML document.

Head and Body Tags

The format of an HTML document is a lot like that of a letter. With a letter, you start off with some sort of header—like the address of the person to whom you're typing. Then you move into the body of your letter, the "meat" of your letter. Well, it's the same with an HTML document.

In HTML documents, we use the head tag to show where the header is and the body tag to show where the body is. The opening head tag is <HEAD> and the closing head tag is </HEAD>. The opening body tag is <BODY> and the closing body tag is </BODY>. We also need to tell the Internet browser that we're creating an HTML document. We do this by using the HMTL tag at either ends of the entire document. The opening HTML tag is (are you getting the hang of this?) <HTML> and the closing HTML tag is </HTML>. And to tell the browser that it's an HTML document, we need the HTML tags around the whole thing. Take a look at this:

<HTML>
<HEAD>
</HEAD>
<BODY>
meat meat meat meat meat meat meat meat meat
meat meat meat meat meat meat meat meat meat
</BODY>
</HTML>

Notice that the HTML tag is at the very top and at the very bottom. Then we have the opening head tag, and the closing head tag (we'll stick something in there soon—a title for the Web page). Next, we have the opening body tag, then a big space in the middle where the meat of the document is, then our closing body tag. That's the basic format of an HTML document. Now we'll get a closer look at the head and then the body of the document.

The head of an HTML document is where you can put the title of your page. Maybe you've noticed titles on Web pages before; they usually appear at the very top of the browser screen. To add a title, we need the opening and closing head tags. Then we can add the title by using the title tag. The opening title tag is <TITLE> and the closing title tag is </TITLE>. In between the opening and closing TITLE tags is where the title of the page goes, say, "My Home Page". Check it out:

<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
<BODY>
meat meat meat meat meat meat meat meat meat
meat meat meat meat meat meat meat meat meat
</BODY>
</HTML>

You'll notice on this page that all of the tags are capitalized. In HTML it doesn't matter if the tags are capitalized or lowercase because HTML is case insensitive. This means that it doesn't make a difference to the browser if you use uppercase or lowercase letters in your tags. However, it's considered good style to write all your tags in either upper case or lower case, rather than mixed and matched. There are case sensitive languages and operating systems out there, but HTML is not one of them. We'll use uppercase letters for all the tags to make them easier to read. (This applies only to the HTML tags themselves, not the "meat" of the document.)

You'll also notice that some tags are indented. This doesn't affect how the browser reads the tags, but indenting is a good trick because it makes the HTML tags easier for you to read. HTML documents can get long and sometimes you may have an opening tag, but forget the closing tag. With indenting, you can vertically line up each opening tag with its closing tag, so you'll quickly be able to find out if you forgot to add a closing tag.

To look at your page, you need to save it. To save a page in Notepad, save the page as an HTML document with an ".html" extension. An extension is the group of usually three or four letters after the dot in a filename. If you're using a Mac, you still need the ".html" extension even though Macs don't normally require an extension. We'll save ours as "Myhomepage.html".

To view the saved file, we go to Netscape and open the file we just made. Holding "Alt" and then pressing "Tab" at the same time is a great time-saver for switching back and forth between the simple text editor (Notepad) and the Internet browser (Netscape). With both Notepad and Netscape open we can make edits to our page in Notepad, save it, and then check it out by clicking on the "Reload" button in Netscape. If you're using Internet Explorer, this is the "Refresh" button. Remember to save the edits in Notepad before you check them out in Netscape. If you don't save, you won't see your newest changes. Also, you don't need to be online when you're checking out your edits in Netscape.

Okay, we've got the skeleton off our page. Say we want to type in some "meat" between our body tags. We'll type in two sentences, with the second one below the first:

<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
<BODY>
This is the body of the document.
This is where the meat goes.
</BODY>
</HTML>

If we save this in Notepad and reload it in Netscape, we find that both of our sentences are on the same line! The two lines of text appear on the same line because the browser doesn't know to separate the two lines. We have to tell the browser to do it. We use one of two options—a line break tag or a paragraph break tag.

Remember, when writing HTML in a text editor as we're demonstrating here, what you see is not what you get. You have to tell the browser everything you want it to do. The line break tag tells the browser it's the end of the line and the following text should start on the line directly below. It's like hitting "Enter" or the "Return" on the keyboard. The HTML tag for a line break is <BR>.

A paragraph break tag tells the browser pretty much the same thing, except to put the text a full line below as if you were double spacing. It's like hitting the "Enter" or the "Return" key twice. The paragraph tag is <P>. Please note: the paragraph and line break tags are two of the few exceptions where you don't need a closing tag.

What if you want two or more spaces between the lines? Can you just add more paragraph breaks? No. There are some quirky things like this that you'll figure out as you learn HTML. But what we can do is add a line break after each paragraph break and then it'll work.

In HTML, it doesn't matter what line you have the tags on. You could even put the whole document on the same line. What matters is that the tags are in the correct order. Writing the page vertically helps you visualize how it will look.

Let's put the title of the page, "My Home Page", in the body section. To make our title look nice, we'll center it. To do this we use the opening and closing center tags: <CENTER> and </CENTER>.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<BODY>
<CENTER> My Home Page </CENTER>
This is the body of the document. <BR>
This is where the meat goes.
</BODY>
</HTML>

Notice that we'll have "My Home Page" centered at the top of our page, and that our second sentence will be on a separate line because of the line break tag.

Fine Tuning The Text

Not only can we change the location of text on our page, we can also change its size and color. Let's make the centered text, our title, bigger than the rest of the text, because it's important. To do this we use the heading tag. There are six variations of the heading tag: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. Why the variation? Each number makes the text a different size—1 makes it the largest and 6 makes it the smallest. We'll use the largest heading tag, <H1> and stick our title inside of it. We also need to remember to use the closing heading tag. We can stick all this in between the center tags.

So we type <H1> and close it with </H1>. It's OK that we're using two tags around the same text with 'My Home Page'. It doesn't matter to the browser which tag comes first or which ends first. All that matters to the browser is what is inside the tags. We save and reload in Netscape.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> My Home Page </CENTER> </H1>
This is the body of the document. <BR>
This is where the meat goes.
</BODY>
</HTML>

If there's other text in the body that you want to make larger or smaller, you can use the font size tag. Font sizes range from 1 up to 7, with 7 being the largest and 1 being the smallest (the opposite of the heading tag!). Font size 3 is the default setting, which means that it's the automatic size of the font unless you change it. The font size and header tags do basically the same thing, but the header tag is used only when you're changing the size of important titles or sections on your page. Use the font size tag for the rest of the text on the page.

We can change the color of the font with the font color tag, which looks similar to the font size tag, but with a color chosen instead of a size. There are two ways to choose colors. The first way is by typing in one of eight primary colors—red, orange, yellow, blue, green, white, black, or purple. The second way is to type in a hexadecimal number.

A hexadecimal number is just a number where each digit has a base of 16, rather than a base of 10. In the normal base 10 system, we count "0 1 2 3 4 5 6 7 8 9," then we jump to 10, which is a repeat of two of those digits—1 and 0. With the hexadecimal system, when you get to 9, you don't jump to 10. Instead, we count "0 1 2 3 4 5 6 7 8 9 A B C D E F." If you count up all those numbers and letters, you'll see there are 16.

Now in HTML, these hexadecimal numbers are used six at a time. Check out these two six-digit hexadecimal numbers: EE33AA or EEEE22. Each of these two numbers indicate a color. You don't really need to remember all this stuff about hexadecimal numbers, just recognize them when you see them, and know that each six-digit grouping represents a certain color.

With the font color tag, you can either type in the primary color or the hexadecimal number. If you want to type the actual name of the color rather than its hexadecimal equivalent, browsers will understand red, orange, yellow, green, blue, purple, black, and white. You should be fine sticking with these colors, but, if you want a different shade, use a hexadecimal number because it will give you about 248 more choices. If you're using a hexadecimal number, remember to use the number sign first, then the number.

So that's font color, now what about the background color of our pages? Do you think we can change that too? You bet! Depending on your browser, the default background color of pages you create will be either gray or white. But now that you know how to change color, you can also change the background color of your pages. To do this we use the background color tag, written as BGCOLOR. It goes within the body tag, like this: <BODY BGCOLOR=yellow>

We don't need to add a closing background color tag anywhere because the whole page will be the same color. Just like the font color tag, you can type in either the primary color or the hexadecimal number. So, a background color of yellow will make the background look…yellow.

Graphics

Text is important for home pages, but too much text can make a page boring. That's what graphics are for. They can really spiff up your Web page, and make people remember it. To put graphics on our page, we use the image source tag.
It looks like this: <IMG SRC="image_name_here.gif">

Like every tag, we start it off with the left bracket, then we have "IMG SRC". Next, an equals sign (=), then the name of the image in between quotes. We put the image in quotes because that's our variable. We can put any image we want in there as long as we have access to it. Finally, we close it with the right bracket. Image tags don't require a closing tag, because the image is placed directly where you tell it to appear.

The graphics you use depend on what you have. You can use artwork that you've made, you can buy packages, or you can use graphics that are on the Web. Because you'll use a lot of graphics on your pages, it's a good idea to put all of them in the same folder on your computer. This will come in handy later when you have to transfer files to a server.

There are two types of graphic formats that you can use in your pages—jpeg and gif. We won't get into the difference between gif and jpeg, other than to say that it mainly deals with file compression, or how small the images can be packed up. But it is important that you know that graphic files for the Web must be either a gif or jpeg. You can tell which format the graphic is in by looking at its extension. The extension is the last couple of letters after the dot. Quite logically, a gif will end in "gif" and a jpeg will end in "jpg".

So let's say our graphic is of a cow. It's called "cow.jpg" and it's located in the "images" subdirectory. How would we go about putting that on our Web page? First, we'll stick some spaces above and below our image. Remember, for that we use the combination of line break tags and paragraph tags. Now bring on the cow!

We start the image tag (<IMG SRC=>), then we show the location of the image, which is "images/cow.jpg", then we end it with another quote and the end bracket. There's no need for a closing image tag because the image only appears once. Here's what the HTML looks like:

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<BODY BGCOLOR=yellow>
<H1> <CENTER> My Home Page </CENTER> </H1>
This is the body of the document. <BR>
This is where the meat goes.
<P> <BR>
<P> <BR>
<IMG SRC="images/cow.gif">
<P> <BR>
<P> <BR>
</BODY>
</HTML>

Now that you know how to put images on your home page, you need to know where you can get the images. First, you can surf the Web for graphics. If you go to a search engine and type in something like "clip-art" or the specific type of images you're looking for, like "planets," you should have plenty of sites to chose from. There are lots of sites out there where people let you use their graphics for free.

Or let's say you're surfing and you find a picture you'd like to use. To download it, click and hold your right mouse button and a little menu will pop up. Choose the "Save Image As" option and save it to your "images" directory. Be careful what images you download, because some are copyrighted. It's always a good idea to ask permission to use a graphic, if you're not sure. Another good source for images is a computer store. There are many packages out there that offer clip-art and photographic images.

The third (and perhaps best) option is to make images yourself. There are great programs out there like Adobe Photoshop, Corel Draw, and Paintshop Pro which allow you to create your own graphics. Graphics programs like these range from being free downloads on the Web to the expensive programs that the professionals use. A scanner is a swell tool you can use for your home page. You can scan in a favorite photo, and you can get your photos developed and put on a disk as digital images that you can scan onto your home page.

Graphics look nice on a page, so people like to use a lot of them. But be careful not to add too many to your page—it'll take way too long for people to download. They might get tired of waiting for the page to download and leave your Web page.

Now you know how to put an image on your page. But what putting an image in the background? To put an image in the background, you have to use the background tag. It goes in the body tag like the background color tag. And just like the background color tag, you don't need to turn the background tag off.

So, in the body tag we insert the background tag, which is simply the word BACKGROUND, then an equals sign (=), then the location of the image on your computer. So it looks like this:
<BODY BACKGROUND="images/name_of_file.gif">

Since the background image is smaller than the actual background that we are trying to fill, the background image will be tiled, or repeated, until it reaches the bottom of the page. So for a good background, try to find an image that will look smooth when tiled. There are lots of sites where you can download images that were specifically made to be background images. Unfortunately, you can't make the background image not tile. However, if you make the background image as big as your page, technically the background is still tiling, but it only uses one tile because of the size of the background image. Notice that when you have both a background image and a background color in the HTML code, the background image wins out and appears on top of the background color.

Well, that's about it for this crash course on HTML. You've learned the basics, like how to set up a simple Web page, and how to manipulate the text and add graphics. Now go out there and start building Web pages!

Now that you've read All About HTML, test your knowledge with our Sample Test.

Back to Top