Lyn's Resource Center Header Logo
Menu

Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
What's New
Contact Me
Feedback Form
Basic HTML



Intro to HTML

HTML, or HyperText Mark-up Language, is the standard language for making homepages on the internet. It consists of many codes or tags. These codes tell your web browser (such as IE or Netscape) how to display the page. On this page, and all the following pages on this site, I hope to show you, the viewer, enough HTML to make a basic homepage of your own. This page will also serve as a reference guide for those who already know HTML.

Return to index
Basic document layout

There are standard tags that are in every HTML document. The layout for these tags is as follows:

<HTML>
<HEAD>
<TITLE>Title of Document</TITLE>
</HEAD>
<BODY>
Body of Document
</BODY>
</HTML>

Now we'll break down each tag......


<HTML>
This tag indicates that you are using the HTML to write your document. It should be at the top of every HTML document.
<HEAD>
This indicates the heading of the document. Your title and META tags are some of the things that appear within these tags.
<TITLE>
This is the tag to give a Title to your page. This is what will appear to a homepage visitor in the title bar of the page.
</TITLE>
This is the closing title tag. This goes after the title of the document.
</HEAD>
This is the closing header tag. It goes after the heading of the document.
<BODY>
The body tag is what you put before most of the content on your page. To indicate colors on your page, you have to add certain body attributes to this tag.
</BODY>
This is the closing body tag. It goes after the body of your document.
</HTML>
This is the closing HTML tag. It goes at the very end of your document.
Now that you know the basic layout of an HTML document, you can start learning more complicated commands.

Return to index
Body Attributes

Not only does the <BODY> tag start the body of your document, but it also sets the colors for your page. Here is a sample body tag:

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008080" VLINK="#0000ff" ALINK="#00ff00">

Here's what the attributes mean:


BGCOLOR
This sets the backgorund color of the page.
TEXT
This sets the color of the text.
LINKS
This sets the color of the links that the viewer of the page has not visited.
VLINK
This sets the color of the links that the viewer of the page has visited.
ALINK
This sets the color of the links that the viewer of the page is presently at.
The # symbol, and the 6 character codes that are after each attribute tell the web browser what color to display. In the sample body tag, you'd replace the codes I put in with the color codes you want to use. If you need to know some color codes, use my color chart.

Return to index
Aligning Text

These tags tell the browser how to align text on a page.

Left aligned text:
This can be done by simply leaving the text alone. Text is left aligned be default. The text would be aligned as this is.

Centered text:
There are two ways to do this:
<center>This is centered text.</center>
or
<DIV ALIGN="center">This is centered text.</DIV>
would look like this:

This is centered text.


Right aligned text:
<div align=right>This is right aligned text.</div>
would look like this:

This is right aligned text.


Return to index
Changing fonts, font size, and font color

The following tags let you change the font and text size within a document. There's also one to change the font color from what was specified in the <BODY> tag.

<FONT SIZE=n>text to be changed</FONT>
This changes the size of the font. The "n" is to be replaced with a number between 1 and 7. This is how the sizes would appear:
1 2 3 4 5 6 7


<FONT FACE="font name">text to be changed</FONT>
This specifies what font is used. Where I typed "font name" above, you'd put in the name of the font you are using (like "arial").
<FONT COLOR="#000000">text to be changed</FONT>
This would change the color of the text from what is specified in the <BODY> tag. Just change the 6 character HEX code to your own color choice.


<I>text to be changed</I>
Causes the text to be italicized. Above tag makes this output:
text to be changed

<U>text to be changed</U>
Causes the text to be underlined. Above tag makes this output:
text to be changed

<B>text to be changed</B>
Causes the text to be bold. These tags: <STRONG>text to be changed</STRONG> would have the same effect. Above tag makes this output:
text to be changed

<BLINK>text to be changed</BLINK>
Causes text to blink. This tag only works on certain browsers, however. (Netscape, I think.) Above tag makes the following output:
text to be changed

(Note: If the above text is not blinking, it means you're using either too slow a browser, or IE)

Return to index
Other Misc. Tags


<Hn>heading text</Hn>
These tags are used when you have a heading that you want to be prominent on a page. The "n" is a variable that stands for any number from 1-6. Here is how each size would appear:

1

2

3

4

5
6

<BR>
This is a line break tag. It ends the line you are on, and skips to the next.
<HR>
This puts a horizontal line on your page, such as the ones that divide each section on this page. By default, horizontal lines are set at 100%. You can change the size of the lines. By typing in <HR WIDTH="50%"> you'd get a line like this:

Page and graphics design and content © Copyright 1998-2009 Lyn Knarr.
Please email me at lionkingfanatic@netscape.net if you need help with your page/site.
Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission.