Very Basic HTML

Every new, or potential webmaster has had a moment of panic when he or she suddenly realizes he doesn't know a thing about writing HTML. There is even a rumor going around that it is a foreign language. It is NOT! The basics needed to write your first web page in HTML are very few and very simple.

There are many excellent HTML tutorials on line; and this brief one is not meant to teach you everything they will. But I hope to make the idea of writing HTML a little less scary to the beginning web author, and help the WYSIWYG ( What You See is What You Get ) user learn how to tweak what their software hath created.

One of the exciting things about the web is that it is constantly changing. Your web site will too. Don't worry if your first effort isn't exactly what you envisioned. Write your first, basic page in HTML and put it on line. I guarantee you'll be changing and improving it, over and over again.

What is HTML and why do I need TAGS?
TAGS you can't do without (the Basic Page)
The Tag Rules

How do I

Change the page background?
Change the appearance of the font?
Link my second page to my first page?
Add an image to my page?

What in the world are Hexadecimal Colors?
A DTD -- what is THAT?
META Tags
Top Secret

What is HTML and why do I need TAGS?

Hyper Text Markup Language 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 Window's NotePad. HTML is just plain english, written in a dialect that uses something called tags. Tags are those cryptic words or abbreviations you see enclosed in angle brackets < >when you view source for 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 page.

Table of Contents

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>

And it looks something like this in Internet Explorer:

A Basic Page

Everything else is just icing on the cake. Most of that icing is decorative, e.g. colors, layout, design, etc. and is explained below. But as any good cook knows, there are a few places where a dab of icing helps to hold the pieces together. Those are explained in Very Basic HTML, What Else do I Need to Know?

You can use anything you like for the title of your page (as it appears in the HEAD section of the HTML), but the file name of your home/entry page at Freepages should be index.htm or index.html.

Table of Contents

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 tag that is opened (turned on) must be closed (turned off). Close every tag just as soon as it has completed its job.

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

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

</html> </body>

Rule 3. Tags are closed in the reverse order from which they are opened. Tags usually 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 ...
</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, and alignment. Values are color names, fixed 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

For a chart of the basic tags and their attributes, click here.

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

This is the right way to do it:

Your text is here.

This is the wrong way:

Your text is here.

HTML is an exact language. Typos, forgotten or misplaced syntax ( #, ", < > ), or tags closed at the wrong time may cause your page to display incorrectly; or worst of all, some browsers may not display it at all!

Table of Contents
Basic Tags-Chart

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:

Tag to modify: body
Attribute: background
Value: URL

<body background="mybackground.gif">

If you have placed your graphics in a subdirectory, you will need to add the path (location) to the file name.

<body background="graphics/mybackground.gif">

"Paths" are explained in detail in More Than you Wanted to Know About LINKS.

Table of Contents

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 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 the color, size and face . . .

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 he does not have the designated font, his browser will display the default font as set in his browser. There is a trick you can use to be sure titles are displayed in your font of choice. See Fancy Fonts by Elsi.

Table of Contents

Adding a Link

Linking your pages to each other, and to other interesting and related sites make you a 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: anchor
Attribute: href (hyperlink reference)
Value: URL

Link to a page at the same URL (relative link):

<a href="samppg.htm">See a sample of a Very Basic Page</a>

Link to a page at a different URL (absolute link):

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

A variation of the HREF link is the name anchor. This link takes your visitor to a specific location on a page. See Moving Around a Page

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

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

Understanding how links work (and why they sometimes do not) is essential knowledge for any web author. For a more detailed explanation, see More Than You Wanted to Know About LINKS.

Most web servers, including those at RootsWeb, are Unix based and are case sensitive. They think

samppg.htm, Samppg.HTM, and SAMPPG.HTM

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. See Naming Web Page Files.

Table of Contents

Adding an Image

Adding an image is as simple as telling the browser what image to display and where to find it. (Remember to upload the image file to your website first before you call it on your page.) Together, the what and where make up the URL of the image. In other words, you'll be linking the image to your page.

Tag to add: image
Attribute: source
Value: URL

If the image you want to add is at a different URL, then you will need an absolute link as described above in Adding a Link.

While not required for the image to display on your page, adding the width and height attributes to the image tag will speed up the display in most browsers, and keep the page from shifting when the image finishes loading. The values for the width and height attributes are stated in pixels. Most graphic programs will tell you the size of your image in pixels. Add the appropriate attribute values to the image tag. The alternate tag displays text if the visitor chooses a "text only" view of your page or is unable to load the image. This tag has become more important as more people use mobile devices to access the internet. The value for the alternate tag is the text you would like to have displayed if the image download fails or is disabled.

The larger the size of the image file, the longer it will take to download. Try to keep your image files under 30Kb in size. If you must share a full screen view of Great Uncle Thadeus at 200Kb, use a thumbnail (file size under 10Kb) on your page, and make the thumbnail a link to the full screen version. It's also a good idea to warn your vistor they are accessing a large file that may take time to download.

Preferred image formats for the web are either GIF or JPG. Normally, GIF is for simple graphics containing only a few colors. JPG is for continuous tone photographs and can contain millions of colors; but JPG files can be compressed so the file can be downloaded faster. For tips on getting your photos ready for the web, see Scanning Photos for Web Publishing.

Table of Contents

What else do I need to know?

CREATING WEB PAGES

Basic HTML
Basic TAGS
Basic TABLES
HTML Editors
Links & Linking
Name ANCHORS
NAMING WebPages
SCANNING Photos
Your Genealogy Website
Photos at WorldConnect
HTML or XHTML?

UPLOADING

FTP
Drag & Drop
File Manager

FUN THINGS TO ADD

Add a Counter
Add a Guestbook
Family Group Sheet
Forms (MailMerge)
Date & Time Stamp (SSI)

MORE HELP PAGES

Freepages Help & FAQs

Customize the FP Banners

Change the Counter's Appearance

Betsy Mills:
REALLY Basic Help

Pat Geary:
Getting Started with Freepages
Website Design for the Genealogist

Marcia Hellam:
Website Building With No Hard Drive

Cliff Lamere:
The Basics of RootsWeb Counters

Robin Moore:
Web Editing & Genealogy Toolbox

Rod Neep:
WebPage Design

Cheri Zuber:
Genealogy Computer Tips

HOME