Open up a text editor, such as Notepad or Wordpad, or even the MS-DOS Editor will work. Start a blank page and this is what you will be typing the code into. Just make sure it is saved as plain text. WordPerfect documents will NOT work!
All HTML files should be saved with a proper extension. These include .html, .htm, and .shtml. Out of all these, .html is the most common. .shtml is for a server-side include HTML file, which you will NOT be making, so do not use that extension. You should save your home page or the default page as index.html (it IS case sensitive!). This will make your address shorter, in that when your page is uploaded to the internet, they do not have to type the index.html in the address. For example, if my home-page is saved as index.html, when I upload it to the internet, the address for the page will be http://www.inconnect.com/~mkbarrus/ rather than http://www.inconnect.com/~mkbarrus/index.html.
Great, your webpage is only on your hard drive! How are people going to see it? No, people DO NOT connect to your computer and look at your page from your hard drive, you will need to upload all the files to your internet server. Using an FTP program, such as WS_FTP, you will need to put all HTML files, images, sounds, etc. that are used in your web page on the internet.
Every HTML file follows this basic structure:
<HTML> <HEAD> <TITLE>Your Title</TITLE> </HEAD> <BODY> <!-- INSERT YOUR CODE HERE --> <!-- END OF CODE --> </BODY> </HTML>
If you copy this code exactly how it is into the text editor, save it as an HTML file (filename.html) and open the page in your browser, you will see a blank page with a title of "Your Title". WOW! Don't worry, you WILL learn how to make stuff ACTUALLY APPEAR IN YOUR WEB PAGE!
Notice how each line has < >'s. These and what's in-between are called "Tags", and tell the browser what to do. HTML is basically like a programming language, where you write code and the compiler (browser) converts it into what you see on the screen.
You will also see <!-- and -->. These are "comments", and the browser will ignore these. You don't need to have any of these in your web pages. One exception to this is in JavaScript, where the comments serve the purpose of hiding the script from non-compatible browsers. But let's not get into this yet.
The body tag tells the browser that your page is starting. It also specifies the colors and background to use. Therefore, you may have a BODY tag like this:
<BODY TEXT="Black" BGCOLOR="White" BACKGROUND="bg.jpg" LINK="Blue" VLINK="Red" ALINK="Navy">
The order you put them in does not matter, so you could do the same thing above like this:
<BODY BGCOLOR="White" TEXT="Black" VLINK="Red" LINK="Blue" ALINK="Navy" BACKGROUND="bg.jpg">
However, you should always have the BGCOLOR BEFORE the BACKGROUND, that way
your page will be readable before the background image loads. You do not have to have a background
image, in that case you should just omit the BACKGROUND="bg.jpg" from the tag. Also,
you do not have to specify ANYTHING in the body tag. You may just keep it as
<BODY> and the browser will use the default colors.
Parameters:
| Parameter | Description |
|---|---|
| TEXT="Color" | Specifies which color to make the text in the document. |
| BGCOLOR="Color" | Specifies the color to use for the background. |
| BACKGROUND="name.ext" | Specifies a .gif/.jpg picture to use for the background. |
| LINK="Color" | Specifies the color to make links that HAVE NOT been visited. |
| VLINK="Color" | Specifies the color to make links that HAVE been visited. |
| ALINK="Color" | Specifies the color to make the ACTIVE link, a link that is being held. For example, hold the mouse button down here and notice the color change. This page has an ALINK of Orange. Move the mouse away from the link before letting go of the button. |
For some of the built-in colors you may use, click here. You may use any kind of color you want, but if they aren't already defined by HTML like Yellow, Red, etc., you will have to use the Hex value. We will talk about this later on in the tutorial.