Jeff T.S.'s Homepage

Site Designed By
J.T.S. DESIGN, INC.

I. HTML

Introduction
I've been working with HTML for over 6 yrs. now. With the following pages, I hope to share what I've learned about the HTML language. In the future, I may expand this section to other languages and web-related technologies.

There are 2 ways to begin learning HTML. You can begin learning HTML by coding by hand using programs such as Windows Notepad, CoffeeCup HTML, BBEdit (Macintosh Only), Macromedia Homesite or many other HTML editors. You can also you use what is called a WYSIWYG (What You See Is What You Get) program. Some examples of WYSIWYG programs are Microsoft FrontPage, HotMetal and Macromedia Dreamweaver. My suggestion is to start out by hand coding because a WYSIWYG program doesn't always do everything for you. With a WYSIWYG program, there are many times when you must go into the actual HTML and do some tweeking which, if you aren't familiar with HTML, you may become lost. If you do go with a WYSIWYG, I recommend Macromedia Dreamweaver. It offers a great array of features and, from personal experience, Dreamweaver is the WYSIWYG that is least likely to alter your code.

There is one key point that you should understand before you start designing web sites: most computers are different. There are many factors included in this rule.

For one, most computers will have different fonts installed on them. There are only a select few fonts that most computers have: Arial, Times New Roman, and Courier New. It is a good rule of thumb when formating your text to use one of the aforementioned fonts as well as variations of them such as Helvetica, Verdana and Sans-Serif. This will hopefully ensure that at least one of those fonts will be installed on the users computer. If none of the three fonts are found on the user's system, the text will be displayed as a default font - usually Times New Roman. Try avoiding the less common fonts such as Comic Sans, Futura, etc. You may develop a site that looks great by using one of these fonts, but what if the user that is viewing the site doesn't have one of these less common fonts installed on their system? Your page could still look good...or it could look really bad.

Another factor to remember is that there are many different browsers - Netscape Navigator and Internet Explorer being the primary ones. Both Internet Explorer and Netscape Navigator have many similarities but they also have their differences. What looks good in one browser may look different in the other browser due to how the browser lays out information. It is best to check the pages that you create in both browsers. Also keep in mind that there are PC users and there are Mac users. Although a large majority of the people surfing the web are PC users, you should try to create your pages with the Mac user in mind as well. The Mac version of Netscape Navigator is almost up to par with the PC version but Internet Explorer on a Mac has it's bad points. Case in point, DHTML that works extremely well on the PC version of Internet Explorer may not work at all on the Mac version. But then again, why would any Microsoft product run well on their competitor's operating system?

^^-Return to Top-^^

HTML Tags
HTML consists of what are called Controls or what is more commonly known as Tags. These tags tell the browser how to display a webpage. There are many different tags but all tags include brackets (< >). Most tags also have two parts - an opening tag (<html>) and a closing tag (</html>). For a majority of the tags that are used in the HTML language, please see my HTML Tags Chart.

^^-Return to Top-^^

The First Tags
Now I will start introducing and explaining the tags used to make a very simple text-based webpage. The first tag in most HTML documents is the <html> tag and it's closing counterpart, </html>, is always the last tag in an HTML document. The <html> tag allows the browser to open and interpret the contents of the document properly.

The next peice of code is the <head> tag. This tag is only necassary if you are going to be using Stylesheets, JavaScript or VBScript within your pages. For JavaScript and VBScript, this area is usually used to define variables and functions. Within this tag, you can also define the title of the page. The tags used to define the title of a page is as follows: <title>The name of my page</title>. The title of the page will then appear in the bar at the very top of the browser window. If you chose to use the <head> tag, you must also close it with </head>.

The final tag needed to make a text-based webpage is the <body> tag. Within the <body> tag, you will place all of your content - text, graphics, links, etc. After you finish entering your content, you must close the <body> tag with it's closing tag, </body>.

So here is what your HTML code should look like by now:

<html>
     <head>
          <title>The name of my page</title>
     </head>
<body>
     The content of my page
</body>
</html>

The <body> tag also has several attributes that can be used. These attributes are used to set the colors of your text, links and background. It is not necassary to use these attributes but if you don't, your background, text and links will be their default colors - white background, blue links, black text and purple visited and active links. Some attributes for the body are: BACKGROUND, BGCOLOR, ALINK, LINK, TEXT and VLINK. Below is a brief description of each attribute:

BACKGROUND	Sets an image as the background
BGCOLOR	Sets the background color of a webpage
ALINK	Defines the color of an active link
LINK	Defines the color of the links within the page
TEXT	Defines the color of the text on the webpage
VLINK	Defines the color of visited links

Inserting these attributes within the <body> tag is fairly easy. You simply insert the attribute, or attributes, that you'd like to use within the <body> tag itself. Below is an example of how you would do this:

You'll notice that the value for the BACKGROUND attribute is "url". This will be replaced with the location of the image that you want to use for your background. For an example, let's say that you have an image called mybackground.jpg which resides in a folder called images in your root directory. In order to use that image for your background, your code would look like this:

You will also notice that for all the other attributes I have a value called "RRGGBB". This value will be replaced by either a pound sign (#) and a hexadecimal number or the actual name of the color you want to use. A hexadecimal number, for our purposes anyways, is six numbers that equal the value of a certain color. A few examples of hexadecimal numbers and the values that they equal follows:

#000000	White
#FFFFFF	Black
#FF0000	Red
#0000FF	Blue

For the above examples, you can either use the hexadecimal number or the actual color name. There are other color names that you can use, rather then their hexadecimal counterparts, but I would suggest sticking with the hexadecimal codes because they offer more of a variety of colors. For a more extensive list of hexadecimal codes and their values, please see my color chart.

Now for an example on how to implement this. Let's say that you want your page to have a black background, blue text, white links and red visited links. Here is what you would do to accomplish this:

Now let's take a look at what your HTML code should look like put together:

<html>
     <head>
          <title>The name of my page</title>
     </head>
     <body background="images/mybackground.jpg" bgcolor="#FFFFFF" text="#0000FF" link="#000000"      vlink="#FF0000">
          The content of my page
      </body>
</html>

Now that you have a basic understanding on how to structure an HTML document, I will next introduce how to format your text. This will include alignment, font types and color and some other miscallaneous things that you can do with text.

^^-Return to Top-^^