Introduction
All of the websites on the Internet were written using HTML, which stands for "HyperText Markup Language." HTML is a good first computer language to learn because it is fairly simple to understand and because it allows you to instantly see results when you make changes to your HTML code. It also can be used for creating complex Web pages, especially when combined with Style Sheets or JavaScript or VBScript, so it allows for growth as you or your kids dig deeper into Web programming.
If you have a word processor such as Microsoft Word on your computer, then the easiest way to create a Web page is to use the various features of your word processor (large letters, colors, bullet items, etc.) and then save your document as HTML (under File/SaveAs). This will convert your document into a Web page which can be viewed in a Web browser such as Microsoft Internet Explorer, Netscape Navigator, Opera, Firefox, or any of the other Web browsers out there. However, this takes away the fun of learning how to do the programming yourself!
Terminology
Now for a quick note on terminology. The commands used in HTML are called "tags." For example, take a look at the following HTML code:
<I>Hello</I> world
The <I> and the </I> commands are called "tags." The <I> tag tells the Web browser to start using italics, and the </I> tag tells the Web browser to stop using italics. Therefore, the above HTML code will cause "Hello" to be displayed in italics in your Web browser, but "world" will not be displayed in italics. The <I> tag is often called a "start tag," and the </I> tag is often called an "end tag." You'll learn about other start tags and end tags in this Tutorial.
Probably the most common mistake you'll make is to forget to use an end tag. For example, if you use the <I> tag to display something in italics, you might find that everything is in italics from that point on in your browser. This simply means that you forgot the </I> tag to turn off italics.
Print Out the Tutorial
Click the following two links and then print out those Web pages (in color, if possible). After each one has finished printing, click the Back button in your Web browser to return here:
The "Lessons" page shows all of the HTML tags for a complete Web page, and it demonstrates how those tags are used.
The "Browser Results" page is the entire "Lessons" page as it looks when it is displayed in a Web browser.
Take a look at the HTML tags in each lesson (on the "Lessons" page), and see the results of those tags on the "Browser Results" page. This will quickly teach you the basics of Web programming in HTML!
Creating Your Own Web Page
To make a Web page, all you have to do is type in the HTML tags using Notepad (which comes free with Microsoft Windows).
Here's an easy way to create a file on your computer:
Here's how to open your file in Notepad and test your Web page in your browser:
After the Easy HTML Tutorial, Then What?
Take a look at the three Web pages at Johnny's Website. This is a fictional website of a fictional 9-year-old boy named Johnny, and it will give you some ideas of things that you can do with HTML. Except for several photographs, all of the pictures in these example Web pages were drawn using the Microsoft Paint application which comes free with Windows (click Start/Programs/Accessories/Paint). To see how these sample Web pages were made, look at one of the sample pages in your Web browser and then click on the View menu and then click Source. This will show you the source HTML code that was used to create that Web page. You can look at the source HTML code for any Web page on the Internet this way!
At the moment I have over 100 Web pages on the Internet (see Dave's Websites). With the exception of an extra HTML tag here and there, all of my Web pages were built using the information that you'll learn in this Tutorial and in the sample Web pages at Johnny's Website.
When you use pictures in your Web pages, they should be in the .JPG or .GIF formats, and you should try to make them as small as possible so that they will load quickly across the Internet. After using the Paint program to draw the pictures for Johnny's Website, I saved the pictures in the .BMP format and then converted them to the .JPG format using one of the free graphics programs at Graphics Editors. However, the newer version of Paint will allow you to save pictures as .JPG files.
When you create a new Web page, you should save the file with an extension of .HTM (as in "Lessons.htm") because this tells the computer that the file is intended to be displayed in a Web browser, although you can also use an extension of .HTML. Also, your "home page" (the starting page for your website) should be called Index.htm. This is not a requirement, but it simplifies your Web address. For example, to view my Christian website you can type "www.Layhands.com" into the Address line in your Web browser, and your computer will automatically look across the Internet to find http://www.Layhands.com/Index.htm. This allows me to tell someone that my website is at "Layhands.com," and they don't have to remember the full path and filename for my home page.
When you are ready to learn about some more advanced features of HTML, here is an HTML Reference Guide which might be helpful. If you have questions about HTML or making Web pages, your best bet is to go straight to the experts, such as at HTMLHelp.com (which is easy to remember). However, please feel free to ask me any questions, and I will try to answer them.
After you or your kids create some Web pages, you will probably want to put them on the Internet so that other people can see them. Fortunately, there are places on the Internet such as Geocities.com which allow you to put your own websites on the Internet for free! I don't use Geocities.com, so I won't be able to answer any questions about it.
Have fun with the Easy HTML Tutorial and then practice making some Web pages. See how creative you can be! Then when you are ready to put your Web pages on the Internet for your friends and family (and the rest of the world) to see, visit Geocities.com and read through their instructions. They also have Help links so that you can ask questions if you get confused.
Send me a link to the Web pages that you create using the information in this Tutorial!
Consider visiting some of my other websites!
You'll find a Christian ministry with dozens and dozens of articles and answers to many questions that I have received over the years (please feel free to send me your questions and prayer requests!); plus a collection of some of the best self-working card tricks around (no sleight-of-hand required!); plus instructions and pictures which show you how to tie dozens of the most useful rope knots; plus a bunch of amazing/funny/fascinating/interesting videos from around the Web which are all clean and family-friendly; plus lots of reviews of numerous fun and educational (and free!) computer games that you can download; plus a huge collection of cool science tricks and other fun stuff to try (using things around the house), and more!
For a complete list, go to http://www.Layhands.com/DavesWebsites.htm.
Hope you like 'em!
Modification History
| 02/12/2007: | Added a link to my new page called "Dave's Websites." |
| 01/01/2006: | Re-wrote most of the Tutorial in order to simplify it. |
| 11/02/2003: | New website. |
Dave Root
Houston, TX, USA
Send e-mail to: dave@Layhands.com