WHAT IS HTML?

Actually, HTML is not a programming language and you don't really "program" web pages. Instead, HTML is a markup language, much like some of the older word processing applications. With HTML you simply insert "tags" which specify how the particular text or image should be displayed on the screen. You also can add tags which specify the destination of a link or what should happen when someone clicks on a button or "hot" image.

The use of HTML started in 1990 with the creation of the World Wide Web. Originally, the web was intended to be a communication channel for scientific research, hence its creation by CERN, the European Particle Physics Laboratory in Switzerland. The need was for a world wide capability to exchange scientific documents among individuals with all types of computers. HyperText Markup Language (HTML) was developed for this purpose. Anyone, using any computer platform, can write HTML documents and post them on the WWW. Similarly anyone with any browser can download and display those documents (oops, pages). So you could say that HTML is a general purpose writing tool for the WWW.

How do I get it?

You really don't have to get or buy it, just learn the HTML tags and conventions. There isn't any application program to purchase or computer software to download. All you need is a standard word processor (and not a very fancy one at that). HTML code is just the tags you put in any electronic document. The fact that you identify the document right up front as an HTML document means that the browsers and servers that encounter it will do what the tags say, that is, interpret them as HTML code and display them on the screen.

Actually, the fancier the word processor, the more problems that can arise because some high-end word processing programs insert their own code to do special things and sometimes that can interfere with the HTML. On the other hand, many new word processors allow you to save your document as an HTML file but you really need to know a little HTML to understand what you are doing and to fix any problems or special needs that may arise. So, fire up your word processor and lets get started.

Browsers, again

In the previous module, you probably remember reading that different browsers display HTML code differently and that any user can reconfigure the preferences of their particular browser to display text and images in even more different ways. This is very true, so why, you might ask, do I have to learn a standardized code like HTML. The reason is that HTML provides some degree of basic standardization. The standards committee at CERN is constantly trying to improve and update HTML standards and version 4 is about the latest standard at this time. These standards work pretty much the same on every browser, but there are a few times when certain browsers differ in their display formats. Right now, the two most popular browsers are Netscape and Internet Explorer. Netscape is pretty much the common standard, but Internet Explorer may give them a run for their money. There are some differences between the two products and we will identify them as we encounter them. The most serious problem may be the user's ability to customize their browser because you have no control over this. If your students are working in a classroom or lab, then the browsers can all be configured the same, but home computers present a few difficulties. Since you can't standardize everybody, all you can do is write HTML that will display about the same and let it go at that.

WRITING HTML CODE

Every HTML document has the same structure and a few required tags which make it an HTML document. The first tag (and the last closing tag) are <HTML> and </HTML>. these indicate that a particular document should be interpreted by the browser as an HTML document and also indicate when to stop or end the document. A standard page format is shown here.

THE HTML DOCUMENT OR PAGE

<HTML>
<HEAD>
<TITLE>{This is the title of the page.}</TITLE>
</HEAD>
<BODY>
{This is the main text of the page. Formatted in HTML.}
</BODY>
<ADDRESS>
{This part includes your address.}
</ADDRESS>
</HTML>

You can see that the document begins with the <HTML> tag, which is followed by a <HEAD> tag. Within the <HEAD> and </HEAD> tags is the title information enclosed in <TITLE> and </TITLE> tags, which will not show on the page, but will appear in the header bar at the top of the browser. After the </TITLE> , the </HEAD> tag closes the head part of the document.

The next part is the body or main part of the document which is enclosed by <BODY> and </BODY> tags. All of the content of the pages is included between these two tags (well, most all). Everything that is in the body part of the page must be formatted in the HTML code that specifies how it should be displayed. That is what you will learn in the next sections.

The last tag pair is the <ADDRESS>, </ADDRESS> combination. Between these two tags is where you usually place the e-mail address of the webmaster or person responsible for the page. Often however, this information is placed elsewhere on the page, so you can pretty much forget about the address part and tags.

Lastly, you will see the closing </HTML> tag which is required and ends the document.

Basic HTML formats

There are a few general HTML guidelines that you need right away. These include:

You can use any text or word processing editor you like (as long as it saves documents as "text" or as "ASCII", and they all do).
HTML is not case sensitive, which means that you can write tags in CAPITAL letters or in lowercase letters. Most people use lowercase, but it really doesn't matter. Of course the actual text that goes on the page should be in caps and lowers just as you would normally type it. For easy visibility in these modules I'll use upper case letters so you can spot the HTML quickly.
Use double spacing for all of your text to make it easier to read. Line spacing is ignored by HTML which always uses single space unless you include a tag to insert a line break with space. (See, you have already learned an HTML tag, , for paragraph.
Most HTML tags come in two varieties, The open tag which appears before the text that it controls (such as for bold, and the close tag which indicate the end of that action and appear at the end of the text segment, such as, . Closing tags always have a slash ( / ) before the command. A few tags have no closing, such as because there is no need for one. Until you learn which ones need no closing tag, if you accidentally put one in it probably won't make much difference.
You can include "comments" statements which are ignored by HTML, but allow you to place notes right in your document which explains the reason for a bit of code or tag. The HTML tags for comments are  for the closing tag. Any text you place between these will be ignored when the HTML is displayed on a web page, but you will see it in the HTML code itself. Kind of like "Notes to myself".
Don't use "smart quotes", you know those quotation marks that are curvey up or down (sometimes called printer's quotes). Set your word processor to the regular ones, which will read accurately in HTML.

TEXT IN HTML

Headings

Web sites can become very boring and difficult to read if text runs on and on. It is a good idea to breakup the text with headings which also indicate something about the content to follow. Headings in HTML are easy to create, you just have to understand that, like other text, heading sizes are not described in point size but rather in the same 1 - 6 scale that regular text is described by. The only difference in headings is that they are always in bold text. The tags for creating headings is quite simple, just include the heading text between heading tags such as these. <H2>, </H2>. The H represents heading and the number indicates the relative size of the heading. Of course, you need to show when the heading text ends and that is with a closing tag. The chart below show how the different headings look.

EXAMPLES OF HEADING SIZES

This is heading size number 1.

This is heading size number 2.

This is heading size number 3.

This is heading size number 4.

This is heading size number 5.

This is heading size number 6.

Text sizes and fonts

A good deal of the content of a web page is text material, so it follows that many HTML tags specify how text should be displayed on the page. In writing with word processors, we have become accustomed to having a huge variety of letter fonts, styles and sizes available in any document. This is not always the case with HTML and for very understandable reasons. Each individual computer has many different fonts or letter types installed in it so that we have a variety to choose from, but when one considers all of the computers accessing the web, it is impossible to find a set that works for everybody. In HTML, standards have been set so that most everyone can display text with a reasonable set of fonts, styles and sizes. In doing this, however, we do lose some flexibility and that limits our ability to author with HTML. The following are some standards and formats you should know about HTML text.

Font choice

Your choice of fonts may be limited by those available on other computers so it is wise to stick with a few, commonly used fonts such as Times, Palatino, or Helvetica on the Macintosh and Times New Roman, Arial or Helvetica on Windows machines.

It is easy to specify the font using the tag (no closing tag required). Now here is the glitch, If you are using Netscape Navigator or Internet Explorer all of the above works, but with other browsers, the choice of fonts is up to the browser.

Font sizes

Other font related criteria are a bit easier to work with, but still not as versatile as it is when you are using your word processor. For instance, font sizes can be specified, within limits, by using the tag. The sizes you can select are numbers from 1 which is tiny to 7 which is fairly large. The default is 3 or regular typing (without tags) which will always result in about 12 pt text. You can see that there is no relationship between the size numbers and standard font sizes that you may already be familiar with, so you just have to experiment. The chart below will help you select sizes you need.

EXAMPLES OF FONT SIZES

This is Font Size number 1.

This is Font Size number 2.

This is Font Size number 3.

This is Font Size number 4.

This is Font Size number 5.

This is Font Size number 6.

This is Font Size number 7.

Text styles

At this point, you probably are asking yourself "How do I get bold and Italics in my text?" This is not difficult as long as you remember to use both opening and closing tags around any text that you wish to bold or italicize There are also styles for underline or teletype, but you would be wise to avoid these because underlining can be confused with "hot" links and teletype looks like typewriting using the courier font which is kind of crude looking (unless you want the text to look that way). The chart below shows you some of the styles you can incorporate in your text.

HTML TAGS FOR FONT STYLES

 Bold

 Italics

 Underline

TT></TT. Teletype (Monospaced)

<B> </B>	Bold
<I></I>	Italics
<U></U>	Underline
TT></TT.	Teletype (Monospaced)