Table of
Contents

What do I want to say?

The very first thing to keep in mind when creating web pages is to try to concentrate on content and not design. Try not to spend too much time and effort on how your page will look, but more on the content you want to get across. It seems like every HTML and Web Development book and expert try to pound this into your head and they have some good points. Here are a few things to remember.

• First of all HTML, or hypertext markup language, is not yet really geared towards fancy effects and pretty looks. The internet was first created by the Department of Defense and then adopted by the academic world as a means to exchange information and documents. So, although the things are changing at a mind blowing pace you will save yourself a lot of head banging on your key board if you have something interesting to say and concentrate on that.

• Second there are a lot of different browsers out there and they all read the codes differently. So a marquee message that scrolls across the screen saying "I am cool" may look good on your IE browser but could turn out pretty lowsey on Netscape. Probably about 90% of web visitors use either Internet Explorer or Netscape, but there are still a lot of old or off brand browsers out there.

• Also there a lot of users out there who have set their browsers to text only, to save downloading time. So for documents that are dependent on images this can cause a big loss in your reader base. Even if the users do have image enabled browsers it can still be very time consuming to download large pictures and multi-media, which can cause click happy users to move on to faster and more informative pages.

All of this being said, there are a lot of things you can do to make your pages more interesting and appealing to the eye, and many times images and multi media are important to the content of your page. So the first step in publishing is figuring out who your audience is and what you want to say. Are you publishing to let family and friends keep tabs on you? Do you want to get publicity for your buisness or organization? Maybe you just have a lot of interesting stuff to say and need an outlet for your philosophy? Just decide what you want your end product to be and keep it in mind as you go along.

It is also a good idea to check your document using several different browsers (at least Netscape and Internet Explorer) to see how they turn out. And if you must use fancy shmancy code or images on your page, just keep in mind that you may be alienating some of your viewers.

The HTML standard is determined by the World Wide Web Consortium or W3C and is constantly changing. As I am writing this the current edition is 4.O, although I haven't checked this morning yet so it may have changed. That is practically the way the internet codes are changing. There are many tags that have been taken out of the standard that are still widely used, and there are many things that are suggested by the standard and not accepted. So some of the HTML 4.O is not yet supported by the new browsers let alone the older ones and there are some old tags that are not read by the new browsers either.

Editors

There are numerous HTML editors that let you create web pages without ever knowing the code. For example, Microsoft Front Page Express is a wysiwyg (what you see is what you get) editor that is fairly simple. Most HTML authors will tell you that this is a very bad idea. There are several perfectly good reasons to use an HTML editor like Front Page: It saves a lot of time, alows you to see how your document will look as you create it and most importantly it is free. There are also several bad reasons. First of all when using a wysiwyg editor what you see is really never what you get. The HTML is sometimes written wrong and it has very limited capabilities. The biggest problem is that if something where to go wrong you wouldn't be able to locate the problem and correct it--and believe me, plenty will go wrong. The best thing to do is to learn the basic HTML code first, and then when you feel comfortable, you can use a editor to save yourself a little time. There are many more editors out there, and you can get tons of them for free. You can download many of them at www.softseek.com

HTML Baisics

HTML or hypertext markup language is a language designed to "mark up" regular text files or (ASCII files) for display on the world wide web. Think of HTML as a code that, when read by an internet browser, makes a suggestion to the browser on how to display the text. The language makes this suggestion with the use of tags. These tags normally have two parts. One part to turn on the effect and one to turn it off. For instance, if you look at the source code before and after this word: "Hypertext" you will see the tags <s em> before the word and the tag </em> after the word which most browsers interpret as "diplay in italics". You will also notice that the quotation marks are replaced by the special characters for them so as not to confuse the browser. Now I'm sure you are beginning to get the picture.

Starting Template

To get started all you really need is text editor, preferably a notepad. All HTML documents have the same baisic structure shown below. They begin and end with <html> start and end tags, and the content of your page is nested inside the <body> tags. First you need to open a text editor, a notepad usually works the best. You will also probably want to open a new folder on your desktop and name it something like "HTMLdocuments" to save your HTML documents and images. Next highlight and paste the template into the notepad, or if you learn better by doing, type it in manually. Then click FILE, SAVE AS, and for the file name type "template.htm" and save it in the new folder.

<HTML>
<HEAD>
<TITLE>The title of your page: A small description of your page</TITLE>
</HEAD>
<BODY>
<H1>My First Document</H1>
</BODY>
</HTML>

If you have followed the steps--Congratulations you have created your first HTML document!

There are a couple of points to be made here. First of all, the HTML standard is to put all tags in capital letters. Personaly I think it is a pain to do so, however, it does make them a little easier to spot when editing and it is always a good idea to follow the standard. Second, there are two filename extensions you can use to save the documents and either one will work just fine: .htm or .html. Just make sure that whatever you start with, you stick with and remember that filenames are casesensitve so watch the capitalization.

Viewing your document

As you are creating Web Pages you will want to check your work on your browser-- probably at least two browsers. Once you have created a document you can view it as you go by saving the notepad file as an html extension (*.htm or *.html) then go to where you saved the document and open it. If this does not work you may have to open your browser (it will be better to work in "off line mode" so that you dont have to stay connected to the internet) and then open the file from there. You may go ahead and do this with your document now if you wish to view your first, albeit very simple, web page.

Here is a little warning. You will probably want to view the document often with a browser, then when returning to edit the HTML you can choose "view", "source" and it will open the notepad for you. Keep in mind, however, that more than one of the same notepad can be open at a time. So it is a good idea to close the notepad first before jumping over to the browser.

Baisic Tags

Now let's go through the tags in order. The <HTML> open tag and it's counter part </HTML> tell the browser that this is an HTML document. Everything must fall in between these tags.

The <HEAD> tags can be an important part of your document. It contains information about your HTML file, some of which can be used by search engines to help users find it. Among the tags that can be placed inside the <HEAD> tags are <META>,<LINK>,<SCRIPT> and <BASE>. For now we will just worry about the <TITLE> tag. This is obviously the name that you would give to your document. This is what people will see if your file appears as the result of a search and it is nested within the <TITLE> and </TITLE> tags.

The <BODY> tag contains the content of the document. Any text, images or mulitimedia that the viewer will see will be nested inside the <BODY> and </BODY> tags.

The <H1> tags display the text inside it as a level one header. Most browsers alow for 7 header levels. The level one header is the biggest and is usually displayed in bold type. To see the sizes on your browser add the following code below the H1 header line.

<H2>This is a level two header</H2>
<H3>This is a level three header</H3>
<H4>etc.,etc.,etc.,</H4>

And your example should turn out like this:

This is a level two header

This is a level three header

etc.,etc.,etc.,

It is difficult to predict exactly how the headings will be diplayed. Internet explorer sets the level 4 heading the same as bold regular text. Once again we go back to content. Use headings to describe different levels or sections of your document. Some browsers for the blind use the heading tags to find their way and some search engines may use them as well.

Congratulations! You have completed your first web page and now know the basic workings of an HTML document.

In the pages to come I will show you:

• The most common HTML tags
• How to insert images and media into your documents
• How to create tables, lists and, and forms
• And finally how to publish your pages on the internet

Continue Tutorial