Return to my Computer Pages
Go to my home page
© Copyright 1998, Jim Loy
Intro:
HTML is text. You can create it with an ASCII text editor, like Windows Notepad. For a while, let's pretend that we are doing just that.
On the World Wide Web, you see text documents, mainly. But there is more. There is also formatting info (among other things) scattered among the text, so that these documents don't look like boring text that your old tractor-feed printer used to print. Such text with formatting info is called hypertext. There are various forms of hypertext. HTML 2.0 is about the simplest that there is.
HTML may look like a jumble of text and < >'s. But just remember that it is merely text with some formatting info. It's simpler than it looks. As you get used to it, it will even begin to look simple.
Your HTML document file should have an .htm or .html file extension. In many cases, any extension will do. But, the user (your intended audience) may have Windows, and an .htm file extension will alert Windows that his Web browser should be used to view your HTML document. Your Internet provider may insist that your main HTML document have a specific name. They will inform you what that name should be. Mine is "index.html."
The following will work fine, as an HTML document, with some Web browsers (like Netscape).
This is an HTML document. But, it is a very short document.
But, the above is not official HTML, and may not work on some browsers.
The following is a real HTML document:
<HTML> <HEAD> </HEAD> <BODY> This is an HTML document. But, it is a very short document. </BODY> </HTML>
All that the above does is show the following, on the user's Web browser:
This is an HTML document. But, it is a very short document.
Notice that this text is displayed on one line. The user's browser will ignore your carriage-returns (the "Enter" key). We will deal with that soon.
Now, all of that stuff within < > is not absolutely necessary. But, you should have it anyway, as some browsers may require it. As you can see, each < > is paired with a </ >. This is not always true, as we will see later.
Anyway, the items within the < >, are called tags. They are commands to the user's Internet browser, telling it things about your text.
In the above case, the tags mean:
<HTML>...</HTML> This is an HTML document. <HEAD>...</HEAD> Info about the whole document. <BODY>...</BODY> The main part of your document.
Now, let's get slightly fancy. Here is a better-looking HTML document:
<HTML> <HEAD> <TITLE>Beginner's HTML Document</TITLE> </HEAD> <BODY> <H2>Beginner's HTML Document</H2> <HR></HR> <P>This is an <B>HTML</B> document.</P> <P>But, it is a very short document.</P> </BODY> </HTML>
First, we have added a title to the document: "Beginner's HTML Document." This title will appear at the top of the User's screen. The title of this article is "Beginner's HTML Guide," which may appear at the top of your screen. We also typed that title, as a heading, into the top of the body of the document. You see it between the <H2>...</H2>. These tags tell the user's Web browser to make that into a fairly large heading. <H1>...</H1> would be even larger. <H6>...</H6> produces a tiny "heading."
Below the heading, we have a <HR></HR>. That is called a horizontal rule. This is a horizontal line, as you see in this document. The closing </HR> tag is not necessary. You can always leave it off. But, it doesn't hurt, either. And my HTML editor puts it in, automatically.
Each of the two lines of my text is enclosed within <P>...</P>. These are paragraph tags. The user's Web browser puts a blank line (a gap) between paragraphs. The </P> tag is actually not necessary.
A tag that I did not use is the line break tag, <BR></BR>. This puts a carriage return into your text. You do not get a blank line between the lines of text, with this tag. Again, the </BR> is not necessary.
Finally, we see that "HTML" is enclosed in <B>...</B>. This makes HTML bold. We could have made it italic with <I>...</I>.
The text part of our improved document now looks like this:
Beginner's HTML Document
This is an HTML document.
But, it is a very short document.
Once you have created an HTML document, you upload (copy) it to your Internet provider's computer, probably with FTP. Your Internet provider will tell you how to do that. Then anyone with a Web browser can view your document, if they know your URL. Again, your Internet provider can tell you your URL. Mine is http://www.mcn.net/~jimloy . "Http://" is a command that tells your Web browser to actually view an HTML document.
Now, I said that you could do all of this with Windows Notepad. But, most of us use an HTML editor (maybe a free version of HTML Assistant). The simpler HTML editors are just simple text editors which let you enter a tag or two at the click of your mouse. It saves time, and you will never misspell those tag names ("body"). Better HTML editors will do checking to see if you did things right, and will even prevent you from doing things wrong. And the really fancy editors will show your graphics on the screen and make you think that you're using a fancy word processor.
There are a couple of simple tags, that I used in this article, which I haven't mentioned yet. One of them is the <PRE>...</PRE> or preformatted tag. This tag makes the enclosed text appear in a mono-spaced (fixed character width) font, so the text can stand out or so you can keep things in columns without using more complicated tags.
It looks like this.
The other tag, that I used, is the <BLOCKQUOTE>...</BLOCKQUOTE> tag. This merely makes the enclosed text appear indented from both left and right margins.
It looks like this.
Basic format:
<HTML>
<HEAD>
</HEAD>
<BODY>
text
</BODY>
</HTML>
Useful tags:
<B>...</B> make text bold.
<BASEFONT SIZE=2> defines the default font size.
<BLINK>...</BLINK> makes the text blink.
<BLOCKQUOTE>...</BLOCKQUOTE> indents the text.
<BR> line break (not double spaced).
<CENTER>...</CENTER> center text.
<!--...--> comments which will not be displayed.
<FONT>...</FONT> change font.
<H1>...</H1> heading (H1 is largest, H6 is smallest).
<HR> horizontal rule (line).
<I>...</I> make text italic.
<NOBR>...</NOBR> no line breaks (user may have to scroll right to read your long text line).
<P> new paragraph (with extra blank line before the paragraph).
<PRE>...</PRE> pre-formatted text (makes the enclosed text appear in a mono-spaced (fixed character width) font, so the text can stand out or so you can keep things in columns without using more complicated tags).
<SUB>...</SUB> subscript.
<SUP>...</SUP> superscript.
<TITLE>...</TITLE> in the header, tells what title should appear at the top.
That should get you started. More advanced things, like links, images, lists, tables, and other things, will be covered in later articles. Read about links (targets and anchors) in Part II - Links of this guide. Read about lists in Part III - Lists of this guide.
Other people have written guides to HTML. I like the Guide to HTML Commands. Check that one out.
Addendum: As you can see above, you have some control over the form of your WWW page. But, one of the difficulties of HTML is that you, the author, have no control over the dimensions (also colors) of the user's screen. If your page is just text, then you may not care much about formatting. But, if you are positioning graphics, tables, or columns (with tables), then your formatting task can be difficult, maybe impossible.
There are three main approaches to this difficult task:
I, personally, would suggest that you lean toward approach #1, don't worry. And, when you have a page that you do want to format more precisely go for either #2 or #3.