Select A State

Basic HTML (v4.01 or earlier)

Hyper Text Markup Language (HTML) is the language of the Web. The most beautiful and complex web page is created with simple text commands that can be written in a plain text editor such as Windows NotePad. HTML is just plain english, written in a dialect that uses something called TAGS. Tags are those sometimes cryptic words or abbreviations you see enclosed in angle brackets [ < > ] when you view the source of a web page. The first time you look at a page of HTML code, it can look like a foreign language. But most tags are nothing more than the HTML equivalent of the formatting commands (bold, italic, line feed, etc.) in your word processor. They tell the browser how to display the content of your page.

There are many excellent HTML tutorials on line and this brief one is not meant to teach you everything they can. But I hope to make the idea of writing HTML by hand a little less scary to the beginning web author, and help the WYSIWYG (WhatYouSeeisWhatYouGet) user learn how to tweak what their software hath created. An understanding of the basics will make it much easier when you are ready to move on to more advanced formatting techniques such as Cascading Style Sheets (CSS.)

Tags you can't do without!

A basic web page requires only four tags. Surprised? Well, it's true! The HTML code for a basic page looks like this:

<html>
<head>
<title>My Page</title>
</head>
<body>
The terrific text and gorgeous graphics that appear on your page.
</body>
</html>

A Basic Page
And it will look something like this in your browser. Everything else is just icing on the cake. Most of that icing is decorative: colors, size, styles, layout, etc. But as any good cook knows, there are places where a dab of icing helps to hold the whole thing together. You'll find more about those dabs near the end of this page.

The Tag Rules

Well -- I told you it was a basic page, didn't I? You decorate your page by using the formatting tags. There are many more tags than the basic ones discussed here. But all tags follow a few basic rules. Think of them as switches that you turn on and off.

Rule 1. All tags are enclosed in angle brackets:   < >

Rule 2. Every (well, almost every) tag that is opened/turned on must be closed/turned off. Close a tag just as soon as it has completed its job.

The opening tag (turn this command on) looks like this:

<html> <body> <p> <font>

The closing tag (turn this command off) adds a forward slash like this:

</html> </body> </p> </font>

Rule 3. Tags are closed in the reverse order from which they are opened. Except for a few "empty" tags (those without an enclosed element, e.g. <meta> <img> <br>), tags will occur in pairs and are often nested one pair inside another. Read backward to the left to find the last tag you opened. Close it first. Then close the one before that, etc. Each pair of tags in the example below is a different color, so you can easily see the sequence in which they are opened and closed.

<p> <b> Rule 3. </b> Tags are closed in the <b> <i> reverse </i> </b> order from which they are opened. Tags usually occur in pairs and are often nested ... </p>

Rule 4. Tags must tell the browser both what to do and how to do it. The what is called an attribute and the how is called a value. Attributes are things like color, size, alignment, or a web address. Values are color names, specific or relative sizes, alignment values like left|right|center, or a URL, and are preceded by the equals ( = ) sign. The value should be enclosed in quotation marks. To align (attribute) a paragraph (tag) in the center (value), the HTML is:

<p align="center">

Rule 5. Multiple attributes should be added to a tag in series.

The wrong way:

<font color="#FF0000"> <font size="5"> <font face="Arial, Helvetica, sans-serif">
Your text is here.
</font> </font> </font>

The right way:
<font color="#FF0000" size="5" face="Arial, Helvetica, sans-serif">
Your text is here.
</font>

HTML is an exact language. Typos, forgotten or misplaced syntax # " / < > ? & or tags closed at the wrong time may cause your page to display incorrectly, and less forgiving browsers may not display the affected parts at all!

For a list of basic tags and their attributes, as well as new tags available in HTML5, visit the W3Schools Tags Reference.

Changing the Background

One of the easiest things you can do to make your page unique is to change the background. To change the color of your background:

Tag to modify: body
Attribute: bgcolor
Value: hexadecimal color name

<body bgcolor="#CCCCFF">

To use a tiled image (texture or picture) for your background, you will first need to upload the image file to your web host's server, then insert the HTML that tells the browser where to find it for display on your page (see Adding a Link)

Tag to modify: body
Attribute: background
Value: URL

<body background="mybackground.gif">

Changing the Text  Color, Size and Face

The color of the text on your page is another easy thing to change. To change the default color for all of the text on the page:

Tag to modify: body
Attribute: text
Value: hexadecimal color name

<body text="#FF0000">

To make local changes to text within the body of the document, use the font tag:

Tag to add:  font
Attribute:  color, size, and/or face
Value:  according to attribute
To change all three . . .

<font color="#0000FF" size="7" face="fontname">Your text is here</font>

Use caution when changing the font face from one of the defaults (Times, "Times Roman", serif; or Arial, Helvetica, sans-serif). Your visitor must have the named font on his system to display that font. If s/he does not have the designated font, the browser will display the default font as set in their browser.

What are Hexadecimal Colors?

By now you are probably wondering about the "hexadecimal" colors mentioned above. The hexadecimal code is a fancy name for the simple solution the HTML wizards came up with to tell a browser what colors to display. Based on the Red-Green-Blue palette, each color of the palette is given a two digit value, expressed as #RRGGBB. Valid numbers are zero (0) through nine (9) and the letters A through F. The possibilities are almost endless. Just to give you the idea --

Red
#FF0000
Green
#00FF00
Blue
#0000FF
Aqua
#00FFFF
Yellow
#FFFF00
Magenta
#FF00FF
White
#FFFFFF
Off White
#F3F3ED
Cream
#FFFFCC
Peach
#FFAA80
Mint Green
#CCFFCC
Black
#000000

Adding a Link

Linking your pages to each other, and to other interesting and related sites make you part of the wonderful World Wide Web. Links can be relative (to another page at the same URL), or absolute (to a page at a different URL).

Tag to add: a (anchor)
Attribute: href (hyperlink reference)
Value:  URL (Uniform Resource Locator)

A relative link uses an abbreviated path/web address, supplying only the location of the linked page relative to the page on which the link appears. For example, if both files are in the same directory:

<a href="tips.html"> Tips, Tricks & Miscellaneous Info</a>

An absolute link uses a complete web address so the browser can locate the linked file anywhere on the web:

<a href="http://wc.rootsweb.ancestry.com/cgi-bin/igm.cgi?db=ambrose">My Family Tree at World Connect</a>

Another useful link allows your visitor to send you an email, just by clicking the link. The HTML is similar to a page link, but changes http:// to mailto:

<a href="mailto:your_email_address">Send me an email</a>

Most web servers, including this one, are Unix based so are case sensitive.  They think index.html, Index.HTML, and INDEX.HTML are three different files. When writing the HTML for a link, be sure the UPPER and lower case letters in your link match the file name eXacTLy.

Adding an Image

To add an image to your page, you need to tell the browser what image to display and where to find it. (Remember to upload the image file to your web site before you call it on your page.) The what and where are the URL of the image. In other words, this is just one more type of link. If you keep your web site organized, you will probably keep your image files in a subdirectory named "images" or "photos" so the code will look something like this:

Tag to add:  img (image)
Attribute:  src (source)
Value:  URL

<img src="photos/your-image.jpg">

While not required for the image to display, adding the "width" and "height" attributes to the image tag will speed up the display in most browsers, and keep the page from shifting as the image loads. The values for the width and height are stated in pixels.

The "alternate" attribute displays text if the visitor chooses a "text only" view of your page or is unable to load the image for some reason. This tag has become even more important as more people use mobile devices to access the internet. The value for the alternate attribute is the text you would like to have displayed if the image download fails or is disabled.

<img src="your-image.jpg" alt="My Pretty Picture" width="420" height="500">

Image formats for use on the web are GIF, JPG, or PNG. GIF use lossless compression and is preferred for simple graphics containing only a few colors. The maximum palette for a GIF image is 256 colors. JPEG/JPG is the choice for continuous tone photographs and can contain millions of colors; but JPG uses lossy compression to create a much smaller file so it can be downloaded faster. PNG is becoming more popular and can be used instead of GIF, but should not be used for photos since the lossless compression will create a much larger file on the disk.

Last, But Not Least

The DTD

A DTD is the Document Type Definition (DocType) statement that must be placed as the very first line of the HTML for your page -- before anything else.

Why do you need one? The DTD is one of those dabs of HTML "icing" that will help your page display in various browsers as you intended. There are many types of (X)HTML and your visitor's browser needs to know what version you want to use to display your page. For example, the first version of this page was written several years ago using HTML4.01 and the original DTD was:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This updated version has been written to conform to HTML5 requirements and the DTD now is <!DOCTYPE html>

There are other DTD statements for other versions of (X)HTML.  If you do not include a DocType for your page, most browsers will revert to something called "quirks" mode which means the browser will render the page to the best of its ability, but it may not look at all as you intended. And since validators check your code against the DTD, you must have one to validate your code. For more information, and a list of valid DocType statements, visit the W3C site (they are the folks who create the standards for HTML) at http://www.w3.org/QA/Tips/Doctype

Meta Tags

META tags are inserted between the HEAD tags. They are not displayed on the page, but are used by browsers and search engines. They can identify you as the author, tell search engines how to index your page, tell web spiders they are welcome or to keep out, etc. They also should include the character set in which the page was written so a browser knows how it should be rendered. Effective use of META tags can make a difference in the amount of traffic your site receives. While not all web designers agree, the ones shown here are probably the minimum that should be included. You can copy and paste these META tags into your own HTML. Replace the colored text with your own.

<head>
<title>Title of your Page</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="description" content="A brief (20 words or less) description of the content of your page">
<meta name="keywords" content="A few key words, separated by commas, that will help a search engine index your page">
<meta name="author" content="Your Name">
</head>

Try It!

Writing HTML by hand is not difficult, but the first time can be a little scary, so try this.

  1. Open the page in your text editor.
  2. Use the "save as" command to save your page with a different file name, "PagenameVersion2.html" for example. You can experiment to your heart's content on this copy without corrupting your original HTML.
  3. Make your first edit to the HTML in the copy (only one change at a time, please), and save it.
  4. Open the page (or refresh it) in your browser.
  5. Evaluate the results of the change you just made.

Does it look as you intended? Great! Make your next addition or change, save, and check it again in your browser. If it's not quite right, you'll know what part of the HTML you have edited, and should be able to find the mistake quickly. Look for forgotten or mis-placed syntax, mis-spellings or typos like <img scr= instead of <img src= , and forgotten closing tags. Reviewing each addition or change as you go can catch a minor error before it becomes a major problem. Happy Coding!

submitted by Pat Asher


Quick Links
Contact Us

The USGenWeb Project, Free Genealogy OnlineComments and administrative-type problems should be emailed to the National Coordinator. For suggestions, concerns or complaints regarding a specific web site within the USGenWeb Project, please use the Contact Form.

Direct comments, technical difficulties or suggestions about this web site to the Webmaster.