Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g.
<TagName>the affected text</TagName>The tag name itself (here, TagName) is enclosed in brackets (< >).
The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser.
This is a <STRONG>basic</STRONG> tag tutorial.will be displayed as:
This is a basic tag tutorial.Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list.
All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document.
The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links.
HTML
The <HTML> </HTML> tag tells your browser that the contents between the tags contains HTML-coded information. The file extension .html (or .htm) also indicates that this is an HTML document. The appropriate extention must be used. (If your operating system, e.g. WIN 3.11, is restricted to 3 character extensions, use .htm for the extension.)Thus an HTML document has the following structure:
<HTML>
...page contents...
</HTML>
HEAD
The <HEAD> </HEAD> tag identifies the first part of your HTML-coded document. The HEAD section contains the document's title.The structure of a page is:
<HTML>
<HEAD>
...title section...
</HEAD>
...remander of page contents...
</HTML>
TITLE
The <TITLE> </TITLE> tag contains the document's title. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server.For example, you might include a shortened title of a book along with the chapter contents: HTML Tutorial Guide (Windows): The Basics. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Basics. Generally you should keep your titles to 64 characters or less.
The structure of a page is:
<HTML>
<HEAD>
<TITLE>
...page title...
<TITLE>
</HEAD>
...remainder of page contents...
</HTML>
BODY
The second--and the largest--part of your HTML document is the BODY section. The <BODY> </BODY> tag contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.The structure of a page is:
<HTML>
<HEAD>
<TITLE>
...page title...
</TITLE>
</HEAD>
<BODY>
...contents of page body...
</BODY>
</HTML>
Background Color
By default, browsers display text in black on a gray background. However, you can change both colors if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.Always preview changes in colors to make sure that your pages are easy to read. (For example, many people find red text on a black background difficult to read!)
You change the color of text, links, visited links, and active links using attributes of the <BODY> tag.
For example, enter:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).
The six-digit number and letter combinations represent colors by giving their RGB (red, green, and blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, and blue to be "mixed" to make up the color. Each number is a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, and FFFFFF is white (fully saturated with all three colors). These number and letter combinations are cryptic. Fortunately an online resource is available to help you track down the combinations that map to specific colors:
Background Graphics
Newer versions of Web browsers can load an image and use it as a background when displaying a page (instead of using a background color). Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. This is baecause a browser takes the image and repeats it across the screen and down the screen to fill the window. In sum, you generate a small image, and the browser replicates it enough times to fill the window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND="filename.ext">
The above thin image is an example of how thin an image can be (with a corresponding small file size) and still give the desired results. The above image is 7K. You can view this background in Example 1 below.
Another example is a small image which is replicated or "tiled" to give a background pattern. You can view this background in Example 2 below.
This is a geometric background example. Because it is geometric, and the sides match, it produces a seamless background. The image is a good example of a seamless background, but over all it is a poor background, because it is difficult to read text over this background.
Background Examples: