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

Intro to HTML

Basic document layout

Body Attributes

Aligning Text

Changing fonts, font size,
and font color

Italic, Underlined, Bold and Blinking Text

Other Misc. Tags

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 tells 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:
<center>This is centered text.</center>
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.

text to be changed: 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

text to be changed: 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").

text to be changed: This would change the color of the text from what is specified in the <BODY> tag. Just change the 6 character code to your own color choice.

Return to index

Italic, Underlined, Bold and Blinking Text

text to be changed: Causes the text to be italicized. Above tag makes this output:

text to be changed

text to be changed: Causes the text to be underlined. Above tag makes this output:

text to be changed

text to be changed: Causes the text to be bold. These tags: text to be changed 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

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

Return to index

Page and graphics design and content © Copyright 1998-2000 Lyn Knarr. Sections of these help pages are also available at Hollywood's Community Center.

Webmaster is a Yahoo! GeoCities Community Leader in the neighborhood of Hollywood. Please email me at knarrly@yahoo.com if you need help with your homepage, or Yahoo! GeoCities in general. Community Leaders are always glad to help! Please visit Hollywood's pages made by your CLs: Hollywood's Community Center and Hollywood's Committees and Special Events Center.

Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission. If you are looking for a logo or header for your own website, use the request form at Graphics Source.

The webmaster is not responsible for any banners that may appear on the GeoGuides or LinkExchange banners on these pages. I am not endorsing any ads that come up in the banner rotations, and my apologies in advance if anything comes up in them that is unsuitable for younger audiences. Thank you.