HTML Basics

Typical questions visitors ask:

Commands? Huh?
There are versions of HTML?!
What's the "HTML" tag?
What are the "HEAD," "META," "BODY" tags?
How to I make tables?
How do I link pages?
How do I add horizontal rules and line breaks?
How do I make lists?
How do I put in images?
How do I change fonts?

Commands? Huh?
Tags are commands in a HTML document. Commands give certain features to items. For example, they make text bold and link-able. One job they can not do is work without a "<" and a ">". Inside these, are the commands and attributes that create the features you see on every Web page. A major point: many tags must be closed off with a "</tag>," where "tag" is the command. See the following examples.

Example 1:	This is bold, this is not.
HTML:	<B&>This is bold</B>, this is not.
Example 2:	This is linked, this is not.
HTML:	<a href="javascript:void(`')">This is linked</a>, this is not.

There are versions of HTML?!
There are four versions of HTML, to my knowledge. The difference? They all handle features differently, and newer versions have more features. The following tags should be written in the first line of a blank HTML document. All other tags should be written after.

For HTML...	Write:
2.0	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
3.2	<!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 3.2 Final//EN">

What's the "HTML" tag?
No matter what page, or what browser you have, you probably cannot view any page without an "<HTML>" tag. There are no attributes to give to this tag. For the sake of viewers who may still have old browsers, use it. Please feel free to view the source code of this page to see the placement of the HTML tags.

What are the "HEAD," "META," and "BODY" tags?
For many World Wide Web pages, HEAD and BODY tags are needed. The HEAD tag usually contains the title of the page and possibly any scripting (JavaScript, for exapmple). If you view the sources of some pages, you can see a "META" tag. Do not worry too much about these. Most of the time, they are used for creating slide-shows and keywords for an "inter-site" search engine (like Yahoo!). The BODY tag holds information about the background, font color, and link color. Here are some useful attributes:

HEAD		BODY
<TITLE>	Sets a tiltle for the page, visible at the very top of the screen and on the monitor's taskbar.	BGCOLOR	INSIDE the body tag, this attribute sets a solid background color. If you have an Image for a background, use a color as a default.
<SCRIPT>	If you use JavaScript, use this tag. Inside it, also state "LANGUAGE=JavaScript" if the code is in JavaScript.	BACKGROUND	This attribute is used INSIDE the body tag to show a background image. Set this "`=image.gif`", where "image.gif" is the location of the image for the background.
		LINK	This, when used INSIDE the body tag and set equal to a color, makes all links that color.
		ALINK	This, when used INSIDE the body tag and set equal to a color, makes all active links that color. Active link colors are only seen when the link is clicked.
		VLINK	This, when used INSIDE the body tag and set equal to a color, makes all visitied links that color. Visitied link colors are only seen when a user visits your page, exites, and then revisits later on.

Please feel free to view this page's source code to see how these tags are being used. Also, check out the Color Table page to see more colors.

How do I make tables?
You have seen them all over the site, and you are probably wondering how I made them. It is not too difficult.

Example:

1	2	3
Multiply!
2	4	6
3	6	9

HTML:

<TABLE BORDER=1 CELLPADDING=2 CELLSPACING=2>
<TR><TD COLSPAN=3>Multiply!</TD></TR>
<TR><TH>1</TH><TH>2</TH><TH>3</TH></TR>
<TR><TH>2</TH><TD>4</TD><TD>6</TD></TR>
<TR><TH>3</TH><TD>6</TD><TD>9</TD></TR>
</TABLE>

In the examples and HTML given, "#" can be replaced with any number from 0 and up. The tags themselves are self explanitory. "<TR>" opens a new row. "<TD>" opens a new cell. "<TH>" creates a heading cell, where the text inside it is in bold and already centered. If you want to make a cell span two rows, insert "ROWSPAN=2" into the opening tag of THAT cell. "COLSPAN=2" makes the cell span two columns. You can align the cell content by writing the "ALIGN" and "VALIGN" attributes. Set "ALIGN" equal to left, middle, or right, and set the "VALIGN" equal to top, middle, or bottom. Simple!

How do I link pages?
Ah yes! This is what makes web surfer's surf the web! Making links should be known by every HTML writer. A link is something the user (visitor) clicks to go to a different part of one page, or a different page altogether. There are many different types of links. Icons, buttons, and image maps - the latter is covered in the CGI and forms section of HTML Hell 2. To make a basic link, find the address you want, and insert it into the following tag.

Example:	HTML HELL 2! a link to the top
HTML:	<A HREF = "images/hh2tiny.gif"><IMG SRC="images/hh2tiny.gif" BORDER=0></A> <A HREF = "index.html">HTML HELL 2!></A> a link to the top (used when another part of the page is designated <A NAME="top"></a>)

How do I add horizontal rules and line breaks?
Horizontal rules are a great way to keep your page neat and organized. You can make them any height (1-8 pixels) and make them any width (measure in "%" or pixel width). Very simple. All <HR> tags do not use a closing </HR> tag. Also, <HR> tags include a line-break, so do not add any (unless you desire them). Be creative and make some designs [ie- a pyramid]. When it comes to separating text into paragraphs, you can do this three ways. One is to use a horizontal rule between paragraphs. Another is to use line breaks. The third is to use the <P></P> tags (which can be aligned left, center, or right).

Examples:
HTML:	<HR WIDTH="25%" SIZE=8> <HR WIDTH="15%" SIZE=4 NOSHADE> <HR WIDTH="9" COLOR="#FF00FF"> Use <BR> for line breaks. Use <P ALIGN=left></P> for paragraphs.

How do I make lists?
Lists are a good way to organise items on a page. Use them to group up your links as I have done up top! There are two basic types of lists, unordered and ordered. Unordered lists work on circles, dots, and squares. Ordered lists can work using numerals (both Roman and Arabic) and letters (both capital and lower-case).

Example:	Item 1 Subitem 1a Item 2 Item 3	Item 1 Subitem 1a Item 2 Item 3
HTML:	<UL> <LI>Item 1 <UL> <LI>Subitem 1a </UL> <LI>Item 2 <LI>Item 3 </UL>	<OL TYPE="I"> <LI>Item 1 <UL> <LI>Subitem 1a </UL> <LI>Item 2 <LI>Item 3 </OL>

How do I put in images?
Images make a page attractive! They're easy to put in a page. (If you want to put an image in a background, see this section of this page.) The VSPACE sets the number of pixles on top and bottom of the image. HSPACE clears x-number of pixles on both sides of the image. "ALT" gives alternate text in case the image cannot be seen. "ALIGN" is used to tell the browser on which side of the image to wrap the text (and how to align it with text). In the following example, please note that not all the attributes (ALT, VSPACE, HEIGHT, etc.) are not necessary. What is necessary is the "SRC" attribute.

Example:
HTML:	<IMG SRC="images/hh2tiny.gif" WIDTH=92 HEIGHT=22 ALT="An icon!" BORDER=1 VSPACE=2 HSPACE=2 ALIGN=top>

"ALIGN" may be set to "texttop," "top," "middle," "absmiddle," "bottom," and "absbottom." These tell the browser where to put the image relative to the text on the same line.

How do I change fonts?
To tell you the truth, there is way too much to tell you on one section. If you have not seen it already, browse the Text Tricks page.