Lesson 1

Introduction to HTML

This is my the first in a series of tutorials on html and web design. A lot of times, when I am discussing making a web site with someone, they want a site, but do not have an idea of what they want, or who they are going to reach. If you are going to reach teenagers, your site will be different in design and in its focus from an e-commerce site. If you are just planning to share some photos on line, it will be different yet. A church or ministry site needs to know its target area. Different things for different people.

Once you have decided on your purpose, and have your plan, then you start on your foundation. This page will go over the basic foundation of a web page... the very building blocks that a web page rests upon. So... on to the basics!

HTML

What is "html"? Hyper Text Markup Language is the code that you use, written in a text file, and when loaded onto the internet, these codes tell a browser how to display the file. It tells the browser where to put your text, your images, etc. This is the code that you are going to learn here. On this page we will learn about how this code is used, put into tags, and make your first web page.

Building Blocks

There are four basic components for a web page. Every page has a html tag, a title tag, and head tag and a body tag. These tags are enclosed in angle brackets like this:

<html>

<head>

<title> </title>

</head>

<body> </body>

</html>

And you will see that for every opening tag such as <html> there is also a closing tag with a / before the name of it, such as </html>. You will always find two <html> tags, two <head> tags, and the same goes for almost every tag... one to open and one to close.

If you forget one of your tags, you will get an error on the page, or it will not display at all. You might see a yellow warning sign on the bottom of the browser that says that there is an error on the page. This means that someone forgot part of their code... Usually something like a parenthesis, or an <. Every part of the code is important, and if you forget something it can make a huge difference in how your page displays.

Exercise

Now we are going to do a little practice exercise, and you will make your very first web page.  If you do not have your own web server, you can get one for free on Geocities or Tripod or Angelfire.  If you have a web server, you will be uploading your pages and graphics there.  A server is like a big filing cabinet.  All of your files need to go somewhere, and you load them onto their servers, and when your web page is loaded into a browser, it calls up all of the files that are needed for the page to display.

Now open your Notepad.  I do not recommend Word Pad or Front Page, so for these exercises we will use Notepad.

Type in your first tag...  Your first tag will ALWAYS be your <html> tag.  Do not use upper case letters.  Many people do, but within the next year or two, html will not accept upper case letters, so get used to typing your tags in lower case.  Remember, for every opening tag, there is a closing tag, so type in your </html> under the first tag.

Now for the head tag...  That comes in between the html tag.  So, under the opening html tag, type <head>.  Now type the closing tag </head> under the opening tag.

Next, we need to add our title tag.  This tag goes inside the two head tags.  Add <title></title> to your Notepad.  Now we are going to give our page a name.  This name will be displayed on the top bar of the browser, but you will not be able to see it in the page body.  In between the two title tags, enter -- SAMPLE WEB PAGE -- or give it any name that you wish.

Now, under the </head> tag you will enter <body> and the closing </body>.  Now put a simple sentence in between the body tags.  How about -- This is my first web page.  Now your page should look like this:

<html>

<head>

<title>SAMPLE WEB PAGE</title>

</head>

<body>This is my first web page.</body>

</html>

Now, to display your web page in a browser and see what it will look like, first go to file/save and save it as sample.html I always save it in My Documents, but you can save it on your desktop, or where ever it is handy and you will remember where you put it. Now, go to the file where you saved it, and click on the file. The browser should come up, and you will see your first web page. Notice the title bar on top... You should see the word SAMPLE WEB PAGE just as you typed it in the title tag. And you should see your message in the browser window. There isn't much color yet, but we will go on to color and backgrounds in the next lesson.