HTML--the Basics

Pat's
Web Page
Tutorials Very Basic HTML

CREATING WEB PAGES:

COPYRIGHT&PRIVACY ISSUES:

UPLOADING:

FUN THINGS TO ADD:

MORE HELP:

Betsy Mills:

Pat Geary:

Marcia Hellam:

Cliff Lamere:

Robin Moore:

Rod Neep:

Cheri Zuber:

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 page 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 page to another page?
Add an image to my page?
Hexadecimals! Why not Red, Green and Blue?
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 format 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

TIP 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 jazz up your page by using the formatting tags. There are many more tags than the basic ones discussed here. But all tags follow certain 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:

<html> <body> 

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 ...


</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. Attributes are added to a tag in series.

This is right :-)

 Your text is here. 

This is wrong :-(

 Your text is here. 

TIP 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: background color
Value: hexadecimal color name

<body bgcolor="#000080">

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 your 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 --

TIP 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 or her 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: hyperlink reference
Value: URL

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

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

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

<a href="http://wc.rootsweb.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.

TIP Computers can be dumb about some things. The computer that is your server thinks 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 :-) 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

<img src="swan.jpg">

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, adding the width, height, and alternate attributes to the image tag will speed up the display in most browsers. 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. The value for the alternate tag is the text you would like to have displayed if the image download fails.

<img src="swan.jpg" alt="Columbus Zoo entrance" width="217" height="138">

The larger the size of the image file, the longer it will take to download. Try to keep your image files under 30K in size. If you must share a full screen view of Great Uncle Thadeus at 200K, use a thumbnail (file size under 10K) 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.

<a href="graphics/swan.jpg"><img src="graphics/ swan-t.jpg"></a>

TIP Preferred image formats for the web are either GIF or JPG. Normally, GIF is for small 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 quickly. For tips on getting your photos ready for the web, see Scanning Photos for Web Publishing.

Table of Contents

Hexadecimals! Why not Red, Green and Blue?

The Hexadecimal Code is a fancy name for the simple solution the HTML wizards invented to tell a browser what color 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) then A through F. The possibilities are practically limitless. You can have fun with this one!

Just to give you the idea --

Red #FF0000	Lime #00FF00	Blue #0000FF	Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF
White #FFFFFF	Off White #F6F6F0	Cream #FFF9DE	Peach #FFCCCC	Mint Green #CCFFCC	Black #000000

Table of Contents
Back to Change Background

Sample META TAGS

META tags are often overlooked by the beginning web author, but they are important and should always be included in your HTML. The META tags are inserted between the HEAD tags and may identify you as the author, tell the browser what to show in the title bar at the top of the browser window, tell search engines how to index your page, tell web spiders they are welcome or to keep out, etc. 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="author" content=" Your Name "> <meta name="keywords" content=" Key Words, separated by commas, that will help a search engine index your page "> <meta name="description" content=" A brief (about 25 words or less)description of the content of your page "> </head>

Effective use of META tags can make a difference in the amount of traffic your site receives. The ones shown here are the minimum that should be included. An excellent tutorial on META tags, how search engines use them, and how to get search engines to list your site, is Jim Keebaugh's Search Engines and Directories or, How to Get Found on the Web.

Table of Contents

Top Secret!

Actually, there is nothing secret or difficult about writing and editing HTML by hand. Top Secret just makes a catchy header for this section ;-) However, you must remember that HTML is a very precise language, and many browsers are unforgiving of even minor errors. Since it is oh, so particular about the way it is written, I recommend OESOE ;-)

O pen the page in your text editor.
E dit the HTML. (Only one change at a time, please)
S ave the change.
O pen the page (or refresh it) in your browser.
E valuate the results of the change you have just made.

Does it look as you intended? Great! Make your next addition or change, save, and check your browser again. If it's not quite right, you'll know what section of HTML you have just added or changed, and should be able to find the mistake quickly. Reviewing each addition or change as you go can catch a minor error before it becomes a major problem.

This technique is also an easy way to experiment with "what if" changes. When you save your change, use the "save as" command in your text editor. You can experiment to your heart's content without corrupting your original HTML.

To learn more about HTML, see these tutorials:
Me? Learn HTML?
Very Basic Tables

Table of Contents