nodivisions

The Basics

Now, the first thing you need to do is create a folder on your hard drive where you will store the webpages that you create. I have one called websites where I store all of my websites. So double-click on My Computer, then your hard drive (probably the one with the c: in its name), and then click the "File" menu, then "New", then "Folder" and give it a name like websites. Now double-click on that.

Now you're ready to begin making webpages. Since a webpage is just a text document with an .htm extension, you need to create a new text document. Click the "File" menu, then "New", then "text document" and name it mypage.htm. If Windows asks you "Are you sure you want to change the file extension?", click "Yes". Now, if you double-click on this file, it will open in your web browser, because Windows knows that the web browser is the correct program to use for .htm files. But right now we want to edit the file, so instead of double-clicking on it, hold the Shift key on your keyboard and then right-click on the file, and choose "Open with..." Now choose Notepad (but don't check the box that says "Always use this program"). Now you're ready to type the html code for this webpage, also called the source code.

[Another way to edit the source code of a webpage is to open the page with IE, and then click the "View" menu, and choose "Source" or "View Source". This will open the webpage in Notepad. Netscape has a similar feature on its Edit menu, but it doesn't open in Notepad, so you can't change it, you can only view it.]

Now, you're ready to begin typing html code. All webpages have this basic layout:

<html>
<head>
<title>
the title of the window goes here
</title>
</head>

<body>

the bulk of your webpage goes here...

</body>
</html>

The words inside angle-brackets < and > are called html tags, for example, <title> is called "the title tag". Notice that they come in pairs (with some exceptions); the first one is called the opening tag, and the second one, which starts with a slash, is called the closing tag.

So type that code, exactly as you see it, into your mypage.htm through the Notepad window. When you're done, click the "File" menu, then "Save", and then double-click on the file mypage.htm in the My Computer window. This should open it up in your web browser, where you can see that it's a very simple webpage.

Now, leave the web browser window open, and go back into the Notepad window. Change the body tag so that it looks like this:

Now that you've changed the source code, click "File" then "Save". Then go back to the web browser window and press the F5 key to "refresh" the window, so you can see the changes you've made since the page was loaded. You should see that the background is now black, and the text is now blue.

Another way to accomplish this same thing is to use hexadecimal color codes, or hex for short. These are 6-digit codes that represent colors, and hexadecimal just means that instead of only using the digits 0-9, we also use the letters A-F as if they were numbers. [For example, 44BBFF does not look like a number to us, and indeed, it's not a valid decimal number. But it is a perfectly valid hexadecimal number. Hexadecimal means that there are 16 symbols (0-9 and A-F), as opposed to decimal, which uses only 10 symbols (0-9).] The reason for all this confusion over colors is that you can only use the words for very basic colors like black, red, blue, white, etc. You can't use "burnt sienna" or "mauve" here... you can use them, and they make colors, but not the right ones. Try it and see. For this reason, we use color codes, which allows you to get very precise shades of colors from black (which is 000000 in hex) to white (FFFFFF). The format of the code is Red-Green-Blue or RGB, with two characters for each color. 00 is the least amount of any color, up to FF, which is the full amount of that color. For example, FF0000 is red, 00FF00 is green, and 0000FF is blue. And to get different shades, you mix them, like FFAA00 is orange-ish, CC00FF is kinda purple, or F83DA1 which is pink-ish.

Here are three helpful pages that show lots of HTML color codes: one two three huge

Anyway, to make the background black and the text blue using hex codes instead of the color's names, you just put the hex code, preceeded by a number sign (#), in place of the color's name:

So type that into your document in place of the old body tag, save the file, and then go back to your browser and press F5 again to refresh it. It should look pretty much the same, since you used the codes for black and blue. Try changing them to this and refresh it to see what happens:

Now, text. Whenever you want to display some text, you can just type it, but instead you should place text within paragraph tags, like this:

<body>

here is some text!

here is some more! ye ha!

</body>

Note: everything you want to be displayed on your webpage must go between the opening and closing body tags. From now on, I'm not going to type them in my examples, because it is understood that they are present in every html document.

If you want text to be on a new line without a space between the two lines, use the break (br) tag:

hello there... 
hi again.

Note that you can put as many blank lines and spaces as you want in the html code, without affecting the output in your browser:

hello there...

hi again.

When you load that page, it looks just like the one before it, because in html, to make a new line, you need to use the or tag, and to make more than one space, you need to use the non-breaking space character ( ):

there is one space between these words

there    are    three    spaces    between    these
   words

Type that into your document (or better yet, copy and paste it) and see what it does.

Now, I'll show you three text formatting tags: bold, italic, and underline:

this is bold text
this is in italics
this is underlined text

Pretty simple stuff. To indent a section of text, enclose it in blockquote tags:

<blockquote>
this text is indented.
</blockquote>

<blockquote>
<blockquote>
<blockquote>
this is triple-indented!
</blockquote>

This is only double-indented :(

</blockquote>
</blockquote>

This is back at the left margin.

Note that you must close every blockquote that you opened, in order to get back to the left margin.

Now for some fun stuff: hyperlinks. Use the a tag to make them, and within the a tag, use href="address" to specify where the link goes to.

<a href="http://www.go.com">here</a> is a link to go.com.

To link to other files in the same folder as your html document, or elsewhere on your website, do this:

<a href="myfile2.htm">this webpage</a> is another page in the same folder as the webpage you're viewing right now.

<a href="other/myfile5.htm">this</a> page is located in the subfolder called "other".

<a href="../myfile9.htm">this one</a> is located one folder-level above the webpage you're reading right now.

You can change the color of your links, the color of visited links, and the color of active (the one that's currently clicked) links in the body tag:

To put an image on your webpage, use the img tag:

here is a picture: <img src="mydog.jpg" height=149 width=187 border=10 alt="my dog Max">

I think height, width, and border are self-explanatory. Alt is the text you see when you hold your mouse over the picture. If the picture is in the same folder as the html document, then you can just put the filename for the src (which means source of the image). If it's in a subfolder called mypics, for example, you'd do this:

here is a picture: <img src="mypics/mydog.jpg" height=149 width=187 border=10 alt="my dog Max">

If you want to use a picture that's on another webpage, you put the full address of the picture as the source:

here is a picture: <img src="http://www.mywebsite.com/mypictures/pets/mydog.jpg" height=149 width=187 border=10 alt="my dog Max">

Note that there is no closing img tag.

If you want to put a horizontal line (also known as a "horizontal rule") like this:

...on a page, use the hr tag:

here's a line:

The width can be a percent of the window like the one above, or it can be in pixels, in which case you just type the number without a percent sign (%). Note that the hr tag also has no closing tag.

Back: Part 1 - Setup

write to me for help

Next: Part 3 - Advanced