HTML FAQ by Snowhawk


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 center headings and text, and make them 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 index.html (or .htm if your system doesn't allow 4 characters for the file extension). 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 ISP doesn't offer Web site space, there are several that offer free Web space, and free Internet access.]

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) If the link is clicked it remains highlighted [anchored] on the page if viewer returns via the browsers' back button.
* 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. (All "FF", <FONT COLOR="#FFFFFF"> is white, and all "00", <FONT COLOR="#000000"> is black.)

- When combining several font elements, you only need one font tag, for example:
<FONT FACE="arial,helvetica" SIZE="+1" COLOR="#CC0000"> Here is red text at one size larger than medium, in Arial, or Helvetica if you do not have the Arial font.</font>

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 and/or Explorer specific code; however, I recommend you make a link, and allow your viewer choose whether or not they want to hear the music.
Like this...
<A HREF="http://www.snowhawk.com/sounds/xrevlutn.mid">Revolution Midi</A> would allow the viewer to choose the link Revolution Midi. Then the viewer's software will open the link for them to hear the midi. Some people do use the other methods, but it is only operational for the newer browser versions. (Like for some versions, 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 center headings and text, and make them 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 the HTML for 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>
(This is an example of the standard, or medium sized text.)
You need to add font tags each time you begin a new paragraph, after the <P> tags. (The closing </P> tag is not required as yet, but may be used for the sake of habit.) If you use the paragraph tag to align text, you would want to close it where you want your alignment to stop:

<P ALIGN="right"><FONT SIZE="-1" COLOR="#CC0000"><B> Would align the paragraph to the right rather than the default left. </B></FONT></P>


To center text, or images, you begin the line with the center tag:
<CENTER><FONT SIZE="-1" COLOR="#009900"><B> text</B></FONT></CENTER>

Always close the last tag first... such as "bold" was closed before "font" which was closed before "center" above; always use the "font", "bold", or "italic" tags, after the "center" and/or heading tags; otherwise the browsers have an "E-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 each have their own set of "whistles and bells" that just won't always do the same...)

You can check your HTML, after the file is on the Web, 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.01 Transitional//EN" "http://www.w3.org/TR/html401/">
Then when you check it at the validator, it knows that you are checking for "HTML 4.01 Transitional."

Reference Links:
WDVL: Introduction to HTML
HTML101: Back to Basics
Introduction to HTML
W3: Introduction to HTML
HTML Goodies - HTML Primers
HTML Tag Listing - Element Index

Building Web Pages (more of my HTML, graphics, & Web design resources)

all things internet | home | eclectic gateway | site directory

Copyright © 1998-2010 by Snowhawk
URL: http://www.snowhawk.com/htmlfaq.html
Page Title: HTML FAQ by Snowhawk
Contact Snowhawk

Valid HTML4.01     Valid CSS!