Make My Own Web Page

Free HTML Tutorial

Basic HTML Code


Walk Before You Run

     If you were publishing a book, you wouldn't release the rough draft, then every revision after that to completion. As a reader, you would consider that a waste of time. Likewise, with a web page, we like to tune things up before we go public.

     For a basic html text editor, I just use the windows NOTEPAD program. It's always conveniently available to windows users. Simply look in Start, Programs, Accessories. It's usually there. Otherwise, just go Start, Run and type notepad.exe.

Make a Directory using Notepad

     To make your own web site, we need a location on our local hard drive to store our work. Let's make a directory called C:\WEBPAGE. Then we can start a beginning page file called "index.htm".

     You can make a directory right in NotePad using the Create New Folder button. Make sure you create the directory where you want it. To make C:\WEBPAGE, you would create it from the root directory (C:\).

more details...



Tag Structure in Basic HTML Code

     The tags in the HTML language are contained by < > symbols. Most of the tags include a starting <tag> and a closing </tag> (notice the '/' in the closing tag). Anything between the tags is affected by the tag function.

     There are a few tags, which only have a start tag. The <br> tag is like this. The <br> is a line break or hard return. You don't need a closing code.

     The closing tags are optional for some tags. The <p> tag is like that. It assumes that when you start a new paragraph, the last one must be over. I prefer to close a function, just to be safe.


HTML tags

     The simplest HTML page is a blank page. All of the code for the current page goes between the <html></html> tags.
<html>
</html>

more details...



BODY tags

<html>
<body>
</body>
</html>

     The <body></body> tags define an area for coding the viewable part of our web page. The <body></body> tags are entirely within the <html></html> tags. We still have a blank web page.

more details...



Background Color HTML tags

<html>
<body bgcolor="yellow" >
</body>
</html>

     The <body></body> tags also control the background color of your web page using the bgcolor modifier. You can also put in background textures using the background modifier.

more details...



HEAD and TITLE tags

<html>
<head>
     <title> This is my Web Page! </title>
</head>

<body bgcolor="yellow">
</body>
</html>

Web page should look like this.

This is my Web Page! - Netscape






     Notice <head></head> tags are outside the <body></body> tags.

     While the <body></body> tags indicate what is seen within your web page, The <head></head> tags define what is seen from the outside, like the search engines.

     When you find your page listed in the search engines, the <title></title> tag definition is what you see, which is within the <head></head> tags.

     Did you notice the indentation in the code? You can indent with a tab. It has no effect on how your page works. I like to use it simply to help keep track of starting codes and ending codes. This becomes more valuable as our program code grows.


How do we look at the page with our browser?

     Many of you are asking, how do we look at the page with our browser? It's very simple. Every browser has a window line to type in the address. It usually refers to something like http://www.makemyownwebpage.com/. Rather than http, use file instead, like file:///c|/. Notice we use the pipe | character instead of the colon :. This is usually on the same key as your backslash \ key, but shifted. If you have trouble with this, try cutting and pasting from this page.

     Once we find our local hard disk, navigate around to the directory you have chosen to work on your webpage (ie; C:\WEBPAGE).

     Hmm.... Yep, you still have a blank page, except for the background color. You will notice the title text appears on your top status bar for your browser program.

more details...



add some TEXT

<html>
<head>
     <title> This is my Web Page! </title>
</head>

<body bgcolor="yellow">
Make My Own Web Page!
</body>
</html>
Web page should look like this.

This is my Web Page! - Netscape
Make My Own Web Page!





     Now you have some text on your page! A real web page. It isn't spectacular, but it also wasn't too difficult to create, was it?

Main - Making My Own Web Page HTML Text NEXT HTML Images HTML Tables HTML Lists HTML Links


Phone: (208)467-6236
FAX: (208)463-9363
mtg@makemyownwebpage.com
mtg@makemyownwebpage.com
MTG EnterPrizes
511-9th Ave. N.
Nampa, Id 83687-3347

Page Created and
Maintained by
MTG EnterPrizes
All Rights Reserved © 2002-08
www.makemyownwebpage.com/tutor/html-basics.htm