Wealth is worthless in the day of wrath, but righteousness delivers from death.
- Proverbs 11:4 NIV

The Basics

The basics of HTML are all you need to create an excellent web page!

To begin, HTML stands for Hyper Text Markup Language. The idea behind it is that you can click on words or even pictures that will take you to another page (anywhere in the world!). If you are at this site, then you have already experienced it. And the only tools you need are a computer and a text editor*. (Nothing fancy is necessary.) So, let's get started!

Just like essays are made of three parts (the introduction, the body, and the conclusion), HTML is made of two parts: the heading and the body.

The heading contains the 'title' of the page, which is only seen when someone 'bookmarks' your page, adds it to their 'favorites' (depending on the browser being used), or looks at the title bar of the browser.

The body of the page contains the words, pictures, and anything else you wish the person to see. It is made up of begining and ending tags with your message somewhere between. (A tag is code that is placed between the < and > symbols.)

The basic tags include:

<HTML> . . . </HTML> -- This denotes the beginning and end of an HTML page.

<HEAD> . . . </HEAD> -- This denotes the beginning and end of the head of the webpage.

<TITLE> . . . </TITLE> -- This denotes the beginning and end of the title that is seen in the title bar.

<BODY> . . . </BODY> -- This denotes the beginning and end of the body of the page.

 . . . -- This denotes the beginning and end of a paragraph.

 -- This will add a 'break', which is like a 'return'.

<CENTER> . . . </CENTER> -- This will center anything between the tags.

<A> . . . </A> -- This links the text or graphics that fall between the tags to another site or location. A link is typed as such: <A HREF="http://www.YourWebsite.com">. This example says to 'anchor' a link that can be 'referenced' at 'www.YourWebsite.com'.

<IMG> -- This places an image on the page. For the image to actually appear, the location of the image must be given: <IMG SRC="http://www.YourWebsite.com/YourAnimated.gif">. This example said that the source of the image is at the site that was given.

<HR> -- This places a horizontal line on the page.

<UL> . . . </UL> -- This creates a bulleted list of items that are denoted with the 'list item' tags.

<OL> . . . </OL> -- This creates a numbered list of items that are denoted with the 'list item' tags.

<LI> . . . </LI> -- This is the 'list item' tag that is used for an "unnumbered list' or an 'ordered list'.

Example Code

(If you would like to try this code for yourself, just highlight the code, copy it (Ctrl + C), and paste it (Ctrl + V) into your text editor. Save the file as a text file with the extension '.html' and open it up in your browser. If you really want to play, try changing some of the code to see what it does!)

<HTML>
<HEAD>
<TITLE>Example Webpage</TITLE>
</HEAD>
<BODY BACKGROUND="http://www.rachelpautler.com/images/backgrnd.jpg">
<IMG SRC="http://www.rachelpautler.com/images/RPbanner.gif">

This is a simple RachelPautler.com example.


It shows the following:
<OL>
<LI>How to begin and end a page</LI>
<LI>How to begin and end the head</LI>
<LI>How to begin and end the body with a picture tiled as the background</LI>
<LI>How to add a title to the title bar</LI>
<LI>How to add an Image</LI>
<LI>How to form paragraphs</LI>
<LI>How to create an ordered list</LI>
</OL>

</BODY>
</HTML>

And this is what the page will look like:

*A text editor is anything that will save a file as a pure text file. Notepad is a good example of a text editor. (Since HTML is read by browsers, it does not matter what kind of computer you like to use.)