Do not open from index. See Basic HTML Course

A t the bottom of every one of our main pages, 1, 2, 3, 4 and 5 there is a link for [ HTML Tags & Codes ]. From this page you can copy and paste all the codes we have used in the preparation of this tutorial.

A t the bottom of all our main pages, we also will have a link for a [ Code Tester ]. From here you can paste any code you want to test it and see how it will appear.

W e have also included on the bottom of all the main pages a link for most of the
[ Error Messages Defined ] you may of had the unlucky experience to of viewed at one time or another.

W e have used many different codes and scripts in the making of our tutorial that were not included in the finished "My First Web Page". If they were not included in the finished page, you can find them at the below link.
[ HTML Extras ]

HTML is short for Hyper Text Markup Language. It is actually nothing more than the language when used properly a computer understands to create a Web Page.

Basic Structure Tags

T he below structure tags are used in every HTML document that you will create. This group of tags defines a documents structure. These tags are always used in pairs, with an opening tag and a closing / tag. The "Backslash" / denotes you are closing that particular tag. There are some exceptions to the use of the closing tag that we will cover later.

B efore we go any further, we feel obligated to tell you that if you are building your page with a host such as "Angelfire", you must select the "Advanced" editor as opposed to the Basic editor. Reason being is that in the basic editor, the text box only reflects the <BODY> section of the document.

Below is basic HTML web page with nothing but a complete body tag

<HTML>
<HEAD>
<title>Title Of Your Page Here</title>
</HEAD>
<BODY bgcolor="#000000" text="#ba55d3" link="#ff8c00" alink="#ffff00" vlink="#ff0000">
<basefont size="3">
<div align="center">
</BODY>
</HTML>

Note On Basic Structure Tags

T he above structure tags for all intensive purposes are used only once. Everything on your page will be set within the confines of the singular set of above tags. In other words, if you have for example 3 different scripts that all require parts to be inserted into the <HEAD> section of the document. You Do Not have 3 sets of <HEAD> tags. See the below example for clarification.

<HTML>
<HEAD>
<title>Title Of Your Page Here</title>






</HEAD>

<BODY bgcolor="#000000" text="#ba55d3" link="#ff8c00" alink="#ffff00" vlink="#ff0000">
<basefont size="3">
<div align="center">

Everything that goes in the BODY section of your document goes between this 1 set of BODY tags!

</BODY>
</HTML>

T he above also holds true for anything that is in the <BODY> section of your document. Only 1 set of <BODY> tags.

L ets define all the above structure tags and what purpose they serve within an HTML document.

<HTML> </HTML> These tags define the document as an HTML document. They enclose everything within the document. In other words, they are the first tag on the page and the last tag on the page. If these tags are not present, the document will only be seen as text, nothing more.

<HEAD> </HEAD> These tags include introductory information about the document. Also if these tags are not present, some browsers cannot identify the document.

<TITLE> </TITLE> Between these two tags goes the description of your page. This should be as descriptive as possible to define what is being told on the page.

<BODY bgcolor="#000000" text="#ba55d3" link="#ff8c00" alink="yellow" vlink="#ff8c00">

The above is a complete <BODY> tag that defines what colors (page color, default text, and default link colors) will appear on the document when viewed. Notice we used both the HEX codes and words. Both will work. With words, you need to leave off the # character.

Markup Description For The Above Complete Body Tag

BGCOLOR="color here" The background color of the document

TEXT="color here" The text color unless otherwise specified

LINK="color here" A text link color before being clicked on

VLINK="color here" The visited link color after being clicked on

ALINK="color here" The active link color while being clicked on

A s with all color codes, you can use either the HEX code number or you can use the word for the color instead of the HEX code. If you are going to use the HEX code, you need to have the prefix character of # and then the 6 numbers and letters. If you are going to use the word for the color, do not use the prefix. The below link will give you a color chart with both HEX codes and words for the colors.
[ Color Picker ]

<basefont size="3"> This tag defines the default font size within the document unless superceded by other full font tags incorporated within a certain area of your choice.

<div align="center"> This tag will define the position of what is on your page. This can be either left, right or center. When you want to change from one position to another, you must first close the </div> tag where in your document you want to redefine the position and then insert another tag with the position defined as either left, right or center. This we will cover more in detail on the next page.

</BODY> This is your closing BODY tag that is at the bottom of your document. All the elements of your document will be enclosed within the opening and closing of these tags. It is located just above your closing HTML tag.

</HTML> This is your closing HTML tag. This denotes the end of the document for all intensive purposes.

< > Greater than and Less than. For all intensive purposes, these two little characters are what make everything happen on a web page work. As you notice everything within a document is enclosed by these characters. Without them, the page does not work properly.

L ets recap what we have just read and put it into a simple code on a blank black page.

A t the bottom of every main page, there is a link for HTML Tags And Codes. These are all the codes we have used in the preparation of your first web page. You can copy and paste them into a notepad and or save them to a floppy for future reference.

N ow that we understand that, lets go to the next page and get our feet wet so to speak and start to put it together.

[ You Are Here ] [ Page 2 Is Next ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ HTML Tags & Codes ] [ Error Messages ]
[ Code Tester ] [ Credits ]

Introduction To HTML Web Page Design

Introduction To HTML
Web Page Design