HWG.Org
Resources
Lists
Classes
Services
Books
Interact
Join!
News
Events
Contact
Sitemap
Search

HWG

Resources

FAQs

Basic HTML FAQ

1. What is HTML?
2. How do I start?
3. How do I change the color of my background or text?
4. How do I use a picture as the background?
5. How do I add music to my page?
6. How do I align text next to a graphic?
7. How do I make a graphic a link?
8. How do I begin a new paragraph?
9. How do I make headings and text larger or smaller?
10. Where can I find graphics to use on my page?
11. How do I make text show as bold
12. How do I make text show in italics?
13. How do I know if my HTML is correct?
Reference Links

1. What is HTML?
HyperText Markup Language:
HTML is a plain text file with commands <markup tags> to tell the Web browsers how to display the file.
Tim Berners-Lee created HTML while at CERN, (the European Laboratory for Particle Physics) in Geneva.

2. How do I start?
Here's a basic HTML document layout:

<HTML>
<HEAD>
<TITLE>Snowi's Stuff</TITLE>
</HEAD>
(Note: The words between the TITLE tags, in this case, "Snowi's Stuff" will show up on the header line of browsers viewing the page; and also, it will be the default title when the page is added to a browser's favorites or bookmarks.)

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">

<H1>Snowi's Stuff</H1>

Type the "stuff" here.

(Note: The following is how to make the word "Snowhawk's" a link to the Web page http://www.snowhawk.com/)
<A HREF="http://www.snowhawk.com/">Snowhawk's</A>

</BODY>
</HTML>

That's the basic beginnings of writing an HTML file. You save it in notepad, word, whatever text editor, as yourfile.html (or .htm if your system doesn't allow 4 characters for the file type). Then you FTP the file to your server. [Your ISP (Internet Service Provider) will give you their FTP address of where to upload your files. If your service doesn't offer Web site space, there are several that offer free Web space.]

3. How do I change the color of my background or text?
Include the element "bgcolor" with a color code in your body tag:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
BGCOLOR: is the color you want for the background
TEXT: the color you want to designate for regular text
LINK: the color for new text links (pages that have not been displayed by the reader's browser)
VLINK: the color for text links to pages that the reader's browser has already displayed
ALINK: the color a text link will change to during the process of choosing it (as it is clicked with the mouse)
* Color codes: Web Safe Color Chart and also Non-Dithering Colors by Hue

To change the color of a word, or sentence, you put <FONT COLOR="#cc0000"> before the text you want colored, and </FONT> at the end. (substituting the "cc0000" with the code for the color you want)
In the color code "#CC0000" - the "CC" position is red, center "00" position is green, and last "00" position is blue.
Web Safe Colors use lower numbers for darkest colors, going 00, 33, 66, and 99, then cc, and ff... with 'ff' being the lightest.

4. How do I use a picture as the background?
Include the element "background" with the name of the graphics file:
<BODY BACKGROUND="gumby.gif" BGCOLOR="#ffffff" TEXT="#000000" LINK="#cc0000" VLINK="#000066" ALINK="#ffff00">
(Note: the "bgcolor" element remained along with the added "background" element. This way, the browser will display the color you designate while the background graphic is loading. Not required, but using a color similar to the background file will ensure viewers can see your page well enough to begin reading while the background graphic is loading.)

5. How do I add music to my page?
Some people use the Netscape specific &/or Explorer specific code, however I recommend you make it a link and let the reader choose whether or not they want to hear music.
Like this...
<A HREF="http://www.snowhawk.com/sounds/hvnearth.mid">Heaven on Earth</A> would allow the reader to choose the link Heaven on Earth. Then the reader's software will open the link for them to hear the midi. Some people do use the other method, however it is only operational to that specific browser. (Like only Netscape users could hear it for Netscape's specific code.. or the same for Internet Explorer's code.)

6. How do I align text next to a graphic?
By including the "align" element in the "img" tag.
<IMG SRC="wflower.jpg" WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0" ALT="wildflower photo"> Photo of wildflowers in Texas</A>
(The align="top" would align the text "Photo of wildflowers in Texas" next to the graphic at the top. - Other options are "middle" or "bottom.")

7. How do I make a graphic a link?
Including the "img" tag between the "a href" tag and the "a" closing tag:
<A HREF="http://www.snowhawk.com/wildlife.html"><IMG SRC="leopard.jpg" WIDTH="25" HEIGHT="25" ALIGN="top" BORDER="0" ALT="link to wildlife"></A>

8. How do I make a new paragraph?
Inserting the <P> tag at the beginning of your paragraph will drop the text down two lines. (If you insert the <BR> tag, it will drop your text down one line.)

9. How do I make headings and text larger or smaller?
There are 6 sizes to the heading tags:

This is using the <H1> tag

This is using the <H2> tag

This is using the <H3> tag

This is using the <H4> tag

This is using the <H5> tag

This is using the <H6> tag

You would type this as follows:
<H1>Heading here, ending with the closing tag</H1>
The next text you type would then be displayed 2 lines below.

The Heading tags will default align to the left. If you want to center the heading, you would use:

<H3 align=center>Heading here</H3>

...to have the heading aligned to the right, you would use:

<H3 align=right>Heading here</H3>

To adjust the size of any text, use the <FONT SIZE="-1">to go smaller one size, ending with closing tag</FONT> And <FONT SIZE="+1">for text one size larger.</FONT>

To center any text, or image, you begin the line with the center tag: <CENTER><FONT SIZE="-1" COLOR="#009900">text</FONT></CENTER>
Always close the last tag first... such as "font" was closed before "center" above; otherwise the browsers have a "field day" with your text.

10. Where can I find graphics to use on my page?
There are many sites offering free use of graphics, although most will require a link to them, showing credit. You can do a search at any of the search engines and get thousands of places to look. You can also buy CDs with graphics on them. Check to be sure they state "royalty free" on the CDs. Here's my collection of graphics links, which includes how to make your own graphics, and where to find graphics offered by folks for public domain.

11. How do I make text show as bold?
Placing the <B>tag before the text will make everything bold, until you close the tag with</B> (Or using <STRONG>tags</STRONG > will do the same.)

12. How do I make text show in italics?
Placing the <I>tag before the text will make everything in italics, until you close the tag with</I> (Using <EM>emphasis tags</EM > will do the same.)

13. How do I know if my HTML is correct?
It's good to validate your HTML. Just because you can see the Web page ok on your browser doesn't mean every browser will show it that way, or even be able to access the Web page. Browsers attempt to "work around" HTML errors, and the differences can be subtle or drastic. That's why the folks at WC3 have worked up the specifications of what works for every browser. Although some may display it a little different, at least you know they can access your page. (The different browser programs have their own set of "whistles and bells" that just won't do the same... especially Microsoft Internet Explorer and Netscape Navigator.)

You can check your HTML by entering the page URL at http://validator.W3.org/.
First, at the very top of your HTML page, before the <HTML> tag, add the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Then when you check it at the validator, it knows that you are checking for "HTML 4.0 Transitional."

Reference Links:
Introduction to HTML
NCSA-A Beginner's Guide to HTML
HTML Goodies - HTML Primers
So you want to make a Web page? - Beginner Tutorial
HTML Tag Listing - Element Index
Building Web Pages (my "private" collection)
HTML 4.0 Specification - From W3C

If you have questions, or suggestions, e-mail me... webmaster@snowhawk.com