Basic HTML

Basic HTML

An HTML file, at its most basic is composed of two parts. The Header section and the Body. Within these two sections, a series of HTML tags are used to designate various things.

Here is a stipped down HTML file:

<HTML>

<HEAD>

</HEAD>

<BODY>

This is a web page

</BODY>

</HTML>

Some web browsers will still display a web page if you leave off some of these tags, but to do so would violate standard HTML practices and may produce undesirable effects in some browsers.

Many HTML tags have a starting tag and an ending tag, for instance, <BODY> is a starting tag, saying that the body of the HTML file starts at that point. </BODY> is a closing tag, saying that the body of the HTML file ends at that point.

Elements of an HTML tag

All HTML tags start with a left angle bracket, which looks like this <.

All HTML tags end with a right angle bracket, which looks like this >.

Within the tag there is an HTML command, such as (a command used to bold-face text). In addition to the main command, there may also be various attributes you can assign to the command. Those attributes are often followed by a value of some type. For instance, the <BODY> tag, can have a background color attribute, to set the page background color to something besides the default gray. Attributes follow the main command, with a space between the command and the attribute. Values follow attributes, with an equal sign between the attribute and the value. So, continuing with the example above, the tag for setting a background to red would look like this:

As you can see, the attribute to set a background color is BGCOLOR. This is followed by the value or color we wish the background to be, in this case red. Notice that the value is in quotation marks. Quotation marks are not always essential, but they can be, so it is best to use them if there is any question.

One more note on HTML command attributes, it does not matter what order they follow the command. If you have several attributes you are setting for a given command, you can have them in any order after the command. This means that:

is the same as

Ending HTML tags will have a slash (/) before the command, such as </BODY>

You may wonder why sometimes you might see a tag in all capital letters such as <BODY> and other times you will see it in lower case, such as <body>. Does this make a difference? No, it does not, but it is considered easier to read HTML that has the tags written with capitals for the commands and attributes and then uses lower case for the values.

The Header Section

The header section is defined as the area between the <HEAD> tag and the </HEAD> tag. Within the header, the page title is set, and any META tags that are desired. The title tag is not seen on the actual web page, but it is often used by search engines to title a page it has categorized, so they are important to set. A title tag would look like this:

<TITLE>Jane’s Beginning HTML Tutorial</TITLE>

META tags are primarily used behind the scenes, mostly by search engines to help categorize and define a web page. GeoCities allows members to set a specific META tag called "mytopic" which will set a member’s website in the topic category of their choice. For more information on how this tag should be set up, go to http://geocities.datacellar.net/main/info/system/categorize.html.

META tags general have the attribute tags of NAME and CONTENT. Here is a sample META tag:

Search engines would use this tag to define a web page in a search engine return query.

The Body Tag

In the body tag, you have the option of setting several attributes that will then apply to the entire web page, unless over ruled by a tag within the body. In the body tag you can define the background color or graphic, the color of text and links, and the margins.

A couple things to note. First, if you set a background color and a background graphic in the body tag, the graphic background has the higher hierarchy and will display (since it can’t display both.) If you only want a color background, then you should not designate a graphic background.

Second, when setting colors for things like text, links and backgrounds, there are two ways to designate a color. The first way is to list the color’s name. This will only work for the 16 predefined colors which are: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow and cyan. Otherwise, you will need to use the hexadecimal value of the color you want. These are represented in 6 digit strings that have number and alphabetic letters in them, such as FF0000 (red). Most HTML books will have a chart of colors and the hex values for that color to use as an aid in selecting colors. There are also websites that display the color charts as well.

Here is how a color setting would look with the color name:

and here is how it would look with the hex code:

The attributes to set a background color and to set a background graphic are very similar, so it is easy to confuse the two. To set a background color you use the attribute BGCOLOR, to set a background graphic you use BACKGROUND. If you use a background graphic that does not fill up the entire page, it will tile and repeat itself to fill in the entire background.

Here is a sample BODY tag with a background color being set:

and here is a sample of a BODY tag that will display a graphic:

By the way, a page should only have one BODY tag. If you put more than one on a web page, you will confuse the poor web browser and get weird results when you view the page, that may or may not be what you really want it to display.

Graphics and Images on Web Pages

A web page can only display two types of graphic files on a web page. The first in know as a .gif and the second is called .jpg. Graphical files stored in any other format (such as .bmp) will not work. If a file is not in the .gif or .jpg format, you can not just rename them to get them to work. Instead, you would need to convert the file using a graphic editor such as Paint Shop Pro. You can get a 30-day trial version of Paint Shop Pro at www.jasc.com.

The tag for displaying a graphic is as follows:

IMG SRC stands for image source, and the "graphicname.gif" would be replaced with the actual file name of the graphic.

A Word on File Names

Just a couple things about file names that you should be aware of.:

First, file names are case sensitive. DOG.html is not the same as Dog.html or dog.html.

And second, HTML files can end in either .html and .htm, either is a valid file extension.

Creating Links

Links use a type of tag called an anchor tag. The most common links are text links, graphical links and e-mail links.

Text links are pretty simple, you just put an anchor tag before and after what ever text you wish to make into a link, like this:

<A HREF=http://geocities.datacellar.net>Click here to go to GeoCities</a>

The HREF attribute stands for "hyper reference" and it is followed by the URL of the page you want to link to.

To make a graphical link, you would sandwich the graphic tag in the middle of the anchor tags, like this:

A link made like this will automatically put a thin border around the graphic, if you don’t want the border you need to add a BORDER attribute to the IMG tag, like this:

And finally, to make an e-mail link, you would write the tag as follows:

<A HREF=mailto:geostaff@geocities.com>Click here to send mail to all employees</A>

Miscellaneous

The tag to go to a new line is (for break). The tag to start a new paragraph is . However, you can not stack or tags. Writing will not put 3 blank lines between two paragraphs, it will only put one. The other two tags are just ignored.

To boldface text, use the tag Example: This will be boldfaced

To italicize text , use the tag Example: This will be italicized