Welcome to the HTML Learning Page!
If you “right click” this page (right click with your mouse), and select View Source, you will see the “guts” of this page (text surrounded by HTML tags). All “web pages” are rendered in a special “language” called HTML or “hyper text markup language”.
If you have ever used the program “Word Perfect”, you know you can use the F11 feature to “view” how you have formatted your text. Any text, which is bold, had “tags” around it that looked like this:
[BOLD] Text [bold]
HTML uses “tags” in a very similar fashion.
Below you will find a table with some of the most common HTML tags.
Part I– Let's look at the Components of a Web Page!
Every web page is a document which starts with the tag
<HTML> and ends with the tag </HTML>.
Note how the “end tag” looks just like the “start” tag, except that it adds the forward slash, which translates as the “please-close-this-tag” element ( / ).
HINT: Most HTML commands require you to use both the start and end tags, otherwise the rest of the page will continue to have that same “modification”. That's a common error on pages, forgetting to add a close tag.
There are several parts to a web page:
A.) The HEAD
At the top of the document, you have the <HEAD> tag. This part of the page tells the “browser” how your page will look. Inside the “HEAD” tags, you may add several elements.
1. Meta Tags
The <TITLE> tag names your page, and this information will show up on the “toolbar” at the top of your browser, and on the BUTTON on the Windows toolbar at the bottom of the screen. Remember to use the “end tag” </TITLE>
For example, this page bears the Title: HTML LEARNING PAGE
The <META NAME="description" CONTENT="Add your Page Description Here"> tag. This is what shows up on many search engines as the "description" of your website.
The <META NAME="keywords"
CONTENT="Add your keywords here, separated by commas"> tag.
These "keywords" suggest what content may be found on your site, and are used by some search engines to help people locate your website.
The <META NAME="Author"
CONTENT="Frank M. Painter, D.C"> tag lets folks know who the author of the page is.
NOTE: Please check the “source code” for this (and other) pages to see how you might best use the above listed Meta Tags. Meta Tags no longer have much impact on how the major search engines list your website.
2. The Visual Characteristics of Your Page:
The <FONT COLOR="#000000"> tag can change the color of your TEXT. Look at this Color Chart for the six character [or Hexadecimal Notation] codes used to describe each color.
You end this command with the “end-tag” </FONT>.
Just “cut and paste” the code for the color you want inside the “formula” (replace the 000000 with the color “code” you want).
Make sure you don't erase the # when pasting in the code!
The <BODY BGCOLOR="#FFFFFF"> tag calls for the “background” color of the page itself. This page has a white background. ("#FFFFFF")
The <LINK="#8A2BE2"> tag calls for the color of the “unvisited links” on your page.
The <VLINK="#B22222"> tag calls for the color of the “visited links” on your page.
The <ALINK="#00008B"> tag calls for the color of the “active links” on your page.
NOTE: You will replace the six letter or number characters in the "#B22222" Tags with those from the Colors Chart to make each component look the way YOU want.
The <LEFTMARGIN=0> tag and the <RIGHTMARGIN=0> tag defines the location of the “left margin” and “right margin” of your page. That defines how close text or graphics can get to the actual “edge” of your screen.
A setting of "LEFTMARGIN=0" means that your text will start right at the edge of the screen. Personally, I usually like to stay off the edge, as it's tiring to read. If you selected =20, that would mean you has a border of 20 pixels. Play with this setting, until it looks right to you! If you leave MARGIN tags off of your page, the browser will set a standard margin width for you.