Free HTML Tutorial
The HTML language is the basis of all web pages. All programs that help you create your web page, still use HTML code as the basis. Some Web Page building programs claim to do all the HTML for you so you don't have to learn. This works fine until you find something you want to adjust.
Other languages you might want to learn would include JavaScript, Php, MySql, JQuery, CSS, Ruby, Drupal, Word Press, etc. Every one of these programming languages eventually create HTML code from something. If you want to learn any of these, you need to learn HTML first. It's fairly simple to learn with this free HTML tutorial.
Create Local Host
on Windows
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.
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
button. Make sure you create the directory where you want it. To make C:\WEBPAGE, you would create it from the root directory (C:\).
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).
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 HTML code for line break. It only has a single tag. 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. This is the simplest HTML page that can function.
</html>
HTML BODY Tags
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.
<body>
</body>
</html>
HTML Background Color Tags
The <body></body> tags also control the HTML background code to adjust the color of your web page using the bgcolor modifier. You can also put in background textures using the background modifier.
<body bgcolor="yellow">
</body>
</html>
HTML HEAD Tags
HTML TITLE Tags
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.
<head>
<title>Make A Web Page!</title>
</head>
<body bgcolor="yellow">
</body>
</html>
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.
