The Web Diner Introduces Your First Web Page!

This first tutorial covers 5 basic HTML tags that will occur in the same order in every single web page you will ever create. We suggest memorizing these tags, as these are the most crucial tags in an HTML document. If they are missing or in the wrong order, they can prevent a web page from loading in the web browser.

What follows is a simple example that you can type within your text editor in order to create your first web page. You'll find the example contained between a set of "==" dashed lines. Open your text editor, and type the example exactly as shown. Be sure to include all of the tags, in the same order as they're shown within the example. This is a followed by a description of these tags, instructions on how to save the file, checking and troubleshooting advice.

HTML Example
HTML Tags Described
Saving the HTML File
Checking the HTML File
Troubleshooting
Printable Cheat Sheet

HTML Example

======================================
<HTML>
<HEAD>
<TITLE>
My First Web Page
</TITLE>
</HEAD>
<BODY>
Welcome to My Home Page!
<P>
This is my first web page. I'm learning the most important HTML tags.
</BODY>
</HTML>
=======================================

HTML Tags Described

HTML has standardized tags which Web browsers interpret for displaying a Web page.

All HTML tags start and end with the greater than and lesser than keys used as brackets, for example, <HTML>.

Most HTML tags use an opening and closing tag, for example, <TITLE> My First Web Page </TITLE>

Here's a description of the tags used in the example:
<HTML> identifies the page as an HTML document;
<HEAD> tells the browser that the header will be appearing;
<TITLE> tells the browser what to show in the title window of the browser;
"My Home Page" will appear in the top bar of the browser;
</TITLE> ends the title entry;
</HEAD> ends the header entry.
<BODY> tells the browser that the body of the page or document is next. The body portion of the HTML document is where most information will go: text, images, links, and so on.
<P> tells the browser there is a new paragraph. You can add some more text if you would like, just be sure to use the <P> to start each new paragraph. Merely using the Enter or Return key within your text editor will not create a new paragraph in the HTML document..

</BODY> closes the body of the page;
</HTML> closes the the HTML page.

Saving the HTML File

Select File/Save in your text editor. Use the filename index.htm, and if you have a choice of file types select whichever of the following your text editor offers:

Text Only
MS-Dos Text
ASCII Text

Make sure you know where you've saved the file to on your computer so that you can find it later!

Checking the HTML File

The next step is to check the file, and see how it looks in the web browser. Open your web browser, and select File/Open File, and select the file you've saved. You'll either hear a gasp of surprised elation at seeing your first web page, or a confused "whaaaa?" if the page doesn't appear as it should. You can compare it against our example here. If your page looks exactly the same, then you did everything right! Go to the head of the class. If something's wrong, don't worry, we've got Troubleshooting Tips below.

Troubleshooting the HTML File

Q. Why isn't the title (the words we put between the <TITLE> and the </TITLE> tag) on the page as a title?
A. Because the TITLE tag adds the title in the title bar of the web browser. You should see your title not on the web page itself, but at the very top of the web browser, above the URL window and icons on the web browser.

Q. There are funny blank rectangles and weird symbols on my page that I didn't type in. What happened?
A. You saved your file as a file type other than plain text. Those funky symbols are the web browser trying to interpret some of the coding from your word processor. Open the file back up, and make sure to save it as plain text. When you reload the page in your web browser, be sure to hit that "Reload" button on the browser to make sure that you're viewing the latest version of your page. The browser keeps temporary copies of pages you've viewed, and you want to bypass those temporary copies (called cached files).

Q. Why does the example show the HTML tags in upper case? Does it make a difference?
A. You can type your tags in as lower case, for example, <title> instead of </TITLE>. However, for troubleshooting purposes, it's a lot easier to find the HTML tags on a page if they're in upper case.

Q. Some (or all) of my page didn't show up. What went wrong?
A. You're missing some HTML tags, or have them out of order, or you've failed to use both brackets < around > a tag. Doublecheck your page against our example, and then join me in a chorus of the HTML song:

The HTML Song
HTML
HEAD
TITLE
My title here!
Oh, yeah!
CLOSE TITLE
CLOSE HEAD
BODY
Body of my web page here!
CLOSE BODY
CLOSE HTML
Sing out loud, sing it out proud! Memorize these tags!

Q. My page turned out perfect! Is it on the web?
A.Not yet. You'll need to upload your page - the next lesson!

All content copyright of Web Diner Inc., 2000. Do not redistribute or repost this content. Tutorials | Home | Glossary