FutureQuest, Inc. FutureQuest, Inc. FutureQuest, Inc.
Knowledgebase: HTML
The Basics of HTML Code
Posted on 08 December 2003 05:51 AM

HTML is made up of tags and attributes, which work together to identify document parts and tell browsers how to display them.

There are five important things to know about HTML tags:

  1. Tags are always surrounded with angle brackets (less-than/greater-than characters)--for example, <HEAD> or <B>.

  2. Most tags come in pairs (called tag sets in this tutorial) and surround the material they affect. They work like a light switch--the first tag turns the action on and the second turns it off. (There are some exceptions. For instance, the <HR> tag creates a horizontal rule (the line separators you see on many pages) across your page and doesn't have an "off switch" (aka closing tag) as once you've made a horizontal rule, you can't "unmake" it.)

  3. The closing tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with <B>, shout your piece, and go back to regular text with </B>.

  4. First tag on, last tag off. Tags are embedded, so if you try, for instance, to do this: <HEAD><TITLE>Your text</HEAD></TITLE> it won't work. The <TITLE> tag must be inside the <HEAD> tag therefore, by typing </HEAD> before typing </TITLE> you have turned off the <HEAD> tag before you completed the tags within it. The correct order is <HEAD><TITLE>Your text</TITLE></HEAD>.

  5. Many tags have optional attributes that use values to modify the tag's behavior. The <P> (paragraph break) tag's ALIGN attribute lets you change the default (left) paragraph alignment to something else. For example,
    <P ALIGN="CENTER"> centers the paragraph following it.

HTML code allows you to make text <B>bold</B>.
The above in your text editor looks like the sentence below in a browser.
HTML code allows you to make text bold.

However, you cannot start writing like this immediately. Every HTML file must have a set of special tags, which tell the browser it is looking at a web page and not a text document or an image. These tags divide the page into two sections - the HEAD and the BODY.

The HEAD section is the place for META tags, JavaScript, and the TITLE of the page (this is what appears at the top of your browser). The BODY section is what will actually appear on the user's screen and this is where the bulk of the content goes. Let's take a look at the tags needed to make a very basic web page:

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

Anything between the <HTML></HTML> tag set is part of the web page code. The first <HTML> tag tells the browser it is to display the document as an HTML document. The last tag </HTML> tells the browser it is at the end of the file. Always begin and end your HTML document with this tag set.

The next line defines the beginning of the <HEAD> area of the page. Between the <HEAD></HEAD> tag set is where we placed the <TITLE></TITLE> tag set, which obviously defines the title of the web page (remember this doesn't show up on the page itself, only at the top of the browser). The <HEAD> tag set holds many other items as well but those will be discussed in other tutorials within this section.

After the head area comes the <BODY></BODY> tag set, which contains a sentence. This sentence is the only thing the user will see on the page. Notice that to display normal, plain text no special tags are needed; you just type whatever you like. However, you will have to manually control the line breaks and paragraph breaks, as noted in the other tutorials.

If you have been an active participant so far then you should have the above code typed into your text editor. Save your document as somename.html. If you want this to be the home page on your FutureQuest site, save the file as index.html. To save the file, if you are using Windows or Macintosh, choose File|Save or File|Save As.

Now, open your browser and click FILE|OPEN, select your new html file to view it as an HTML document in your browser. If you copied the code exactly as shown above you should see Hello World! in the main window, and if you look at the very top of your browser you should see My First Web Page showing as the title.

If everything is as it should be, pat yourself on the back and continue with me through these tutorials. If not, please take the time to scroll back up and locate the problem.

"Ok, great! I can make "Hello World!" show up on my browser. I kind of had more in mind than that!", may be what you are thinking by this point. But wait! There is more! Don't give up on me now. In this section we are going to talk about creating an entire content-filled web page with headings, centered and bold text, and we'll even toss in a table and special formatting. The more tutorials you read within the HTML section, the more content your web site will contain!

For additional HTML guides, we suggest visiting the following sites:
W3Schools
thesitewizard™
davesite.com