McWebber HTML Help

HTML HELP

HTML (hypertext markup language) is the formatting language (or code) the Web is based on.
An HTML document looks quite different from the Web page the browser shows.
The Web page you see on your screen is the browser's interpretation of an HTML document.
The images you see are called up by the HTML document, but they aren't part of it - they're separate documents.
The browser reads the location of the images from the HTML code, then places them on the Web page alongside the text and other elements that are within the main document.
Similarly, audio or movie files can be part of the set of documents that are called by an HTML file and assembled by the browser.

Here are some of the basic tags that make up an HTML document.

<html>...</html>
<head>...</head>
<body>...</body>

             <HTML>
             <HEAD>
                  <title>TITLE</title>
             </HEAD>
             <BODY>
                  Body of the document
             </BODY>
             </HTML>

Even though it doesn't look like it, the above is actually a valid HTML page.

If you're going to register your pages with any of the search engines, you should consider using "META" tags in the head of your page. Not all search engines use META tags to index your page. A couple of the larger ones, including "Infoseek", do use them.

There are several different types of META tags to use, but the two most important ones are:

<META name="description" content="A short (200 character) description of your page."> <META name="keywords" content="keywords, separated, by, commas, that, relate, to, your, page">

Some people advocate using tons of unrelated keywords just to hope to get a hit. That may have worked in the past, but now search engines have wised up and will rate your site lower for "Spamming" the index, or delete you completely.

Another tag that's in demand is the one that will take your visitor to another page or cause your page to refresh every x number of seconds. Here's that tag:

<META http-equiv="Refresh" content="15;URL=http://www.nextpage.com/">

That tag will take the visitor to http://www.nextpage.com/ in 15 seconds. You can change it to just a relative URL like next.html, or the absolute URL as above. If you put the content="0; then when the user clicks the back button the page that took them to the next page will be skipped.

If you'd like to prevent your page from being cached, use these two codes:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
Place them in the HEAD section of your page.

TOP

The first thing in your document after the </HEAD> tag should be the BODY tag with the attributes. Here's a basic body tag for a page to give you an idea of what it should look like:
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#FF0000" VLINK="#808080" ALINK="#0000FF" BACKGROUND="file.gif">

You should only have one BODY tag on your page, it should control all of the attributes of the page as listed below.

body bgcolor=# text=# link=# alink=# vlink=#

bgcolor --- background color 
text --- text color 
link --- link color 
alink --- active link color 
vlink --- visited link color
background --- background image

TOP

#=rrggbb Color is specified with a hexadecimal red-green-blue. Each one can have 16 numbers or letters: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. You have thousands of colors to choose from, but keep in mind the background color of your document when picking a text color. If you don't know the color # you want, the newer versions of MSIE and Netscape also recognize color names. So you could say: <BODY TEXT="BLACK" BGCOLOR="WHITE" LINK="BLUE" VLINK="GREY" ALINK="RED"> on your page. If you know the color numbers from your paint program and want to convert them to the HTML for your document, here's a page for you.

TOP

To have an Image on your page for the background, use the following tag.
<body background="image-URL">
just add the background="image-URL" within your basic BODY tag.

Non Scrolling Background <body bgproperties="FIXED">

This will keep your background fixed in place, only the text will scroll on it. Like a "watermark" as in this page. (Supported in Internet Explorer only)

Linking to another page.

Basic link: <a href="URL"> ... </a>
This is how you make a <a href="sample.html">link.</a>. Push it! Which appears as:

This is how you make a link. Push it!

If that was to be a link to another web site instead of a relative URL within your own site, you would just put in the complete or absolute URL in place of "sample.html" Be sure to include the http:// when making a link to an outside domain.

TOP

Anchor Tag

Jump to part of a page <a href="#name"> ... </a><a name="name"> ... </a> <a href="#jump-test">Jump to next "Link Target"</a><P> <a name="jump-test">Link Target</a>

In your HTML, you simply add an <a name="sometext">Here's an anchor link or bookmark</a>

Then to link to that, you simply add <a href="#sometext">Jump to there</a> You can also link to the middle of another page.

Jump to a link target. Will jump you to an anchor on another page.

That's how the links in the right column are made to jump within this page. Microsoft FrontPage calls them "Bookmarks" while everyone else calls them anchor tags.

You'll notice all the TOP tags on this page. Those are especially handy on a long page where the user may wish to quickly return to the menu at the top of the page. You don't need to place an anchor tag for that. It's built into the browsers. Just link to #top. Must be lower case. #TOP may not work in all browsers.

TOP

Horizontal Rule

In order to save some time on a download, instead of using an image for a line on a page, consider using the <HR> tag. Obviously those few bytes to make the tag will download and display faster than an image. You can also use some variations for some browsers. You can combine many of the following codes to modify your horizontal lines.

Basic

<HR size="x"> in this case "x" equals "10"

<HR width="50"> 50 will be read as 50 pixels

<HR width="50%">

<HR align="left" width="50%">

TOP

BULLETS AND LISTS

If you want to have a list of items on you page using a numbered list or bullets, you can do this without typing the numbers or using an image for the bullets.

This uses the <UL> (Unordered List) or
<OL> (Ordered List) tags.

<UL> <LI>Item One</LI> <LI>Item Two</LI> <LI>Item Three</LI> </UL>	Item One Iteim Two Item Three
<OL> <LI>Item One</LI> <LI>Item Two</LI> <LI>Item Three</LI> </OL>	Item One Item Two Item Three
Roman Numerals <OL type="I">
<OL type="I"> <LI>Item One</LI> <LI>Item Two</LI> </OL>	Item One Item Two
A, B, C <OL type="A">
<OL type="A"> <LI>Item One</LI> <LI>Item Two</LI> </OL>	Item One Item Two
a, b, c <OL type="a">
<OL type="a"> <LI>Item One</LI> <LI>Item Two</LI> </OL>	Item One Item Two
i, ii, <OL type="i">
<OL type="i"> <LI>Item One</LI> <LI>Item Two</LI> </OL>	Item One Item Two
Add type="square" to the <UL> tag:
<UL type=square> <LI>Item One</LI> </UL>	Item One
Try type="circle"
<UL type="circle"> <LI>Item One</LI> </UL>	Item One