Sue's HTML Help Pages

Basic HTML Coding

What is HTML?

HTML stands for Hyper Text Markup Language. What does it mean? Just a techno-way of specifying the name of the language that the browsers read when surfing the World Wide Web. All it boils down to is the name of a file, or a file extension. All web documents have an extension of .htm or .html. There are some newer extensions in use now, but those are specific to separate things, and nothing we'll be learning here. You may have a fancy HTML WYSIWYG-type editor, which claims to put up a web page without the person knowing one lick of HTML, and that's fine. I use one of those too at times, for the preview capabilities, and also because I'm the Queen of Typos. But a basic understanding of HTML is necessary for the ability to edit, write a quick document and so forth. I use Edit Pad myself, and strongly recommend it if you have Windoze 95 to replace Notepad.

Tags

HTML is made up of Tags. All tags are enclosed in angle brackets, which are these: < and >. A good Rule of Thumb to remember is: If you open it, close it. Tags are closed with the slash /. This tells the browser that an HTML document starts and ends. Let's open up NotePad or Edit Pad and play in there. One more Rule of Thumb to remember before we go on is: Spelling and Case Sensitivity Count all the time in HTML.
We'll start with the first tag you're going to need. This is the <HTML> tag. Remember, if you open it, close it. So after you type in the <HTML> in EditPad, now type </HTML>. It should now look like this:
<HTML>
</HTML>
Congratulations. You have just created your first HTML Document, or Web Page. However, there's not much to it, so let's move on.

All other tags need to go inside the HTML tags. No exceptions. The next one you're going to add are the <HEAD> Tags. Again, if you open it close it, so you will need to add the closing tag now. Your document should now look like this:
<HTML>
<HEAD></HEAD>
</HTML>
For right now, we won't concern ourselves too much with what goes in the HEAD tags, other than your page's Title. This does NOT show up on your page. It DOES show up in the Browser's Location Bar at the top of the screen, and also what will show up if the page is Bookmarked/Added to Favorites. Again we add the opening and closing tags, so your document will now look like this:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
</HTML>

We're getting there. Now we have an HTML document with a title. Don't forget to put your own title in there. However, if we viewed it on the Web right now, we'd still show up nothing, so let's add the next tags, the Body ones.
<HTML>
<HEAD>
<TITLE>Sue's Home Page></HEAD>
<BODY></BODY>
</HTML>
Everything else on your page is going to go in between the BODY tags. And there can only be ONE SET of these tags.. This is where the meat of the page goes. Period. If it's not in there, and in proper coding, it won't show up, and this forms the basis of fully half the questions in the Geocities Help Forums. There is a problem in the Geocities Basic Editor adding two body tags if you want to use your own backgrounds. This is why you need to be able to do some editing, and why I'm writing these pages.

Okay, inside your BODY Tags type the following: This is a Really Awesome Page. Your document should now read thus:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
<BODY>This is a Really Awesome Page.</BODY>
</HTML>
You now have a viewable web page. Here is how it would look if you put this up right now. Use your browser's BACK button to return to here. Dull, but an actual web page. But of course, we want more. We want colors. We want images. We want a really awesome page. Let's take a look at the ATTRIBUTES (a techno-word for the cool things we can add to a tag) we can add to the BODY Tag.

ATTRIBUTES For the BODY

The first thing you'll probably want to do is get rid of that ugly gray background. We do this in the body tag by adding a six-letter code (RGB Hex Code) to it. For an example of the colors you can use, check out the Color Tester. But for now let's try black. The ATTRIBUTE will be BGCOLOR. Which is obviously an abbreviation for Background Color. HTML may look complicated, but it's really very simple. The hex code must be preceded by a pound sign (#) and by the way, those are zeroes, not o's. Okay, here is your document so far:
<HTML>
<HEAD><TITLE>Sue's Home Page></TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
This is a Really Awesome Page
</BODY>
</HTML>
You'll notice I've got the RGB Hex Code in quotation marks. This isn't technically necessary, but in some cases, certain browsers require it, and of course we want the Whole World Wide Web Community to be able to see our work. So please add them. and be sure to use both an opening and a closing quotation mark. In other words, If you open it, close it.
Go here to see what we have so far. Use your browsers BACK button to return.

Oooops...we can't see anything. Next we have to change our text color. It's kind of hard to see otherwise. This also is added to the BODY tag. All browsers have default settings, which if they aren't specified in the HTML document, is what will be displayed. The default background color is gray, the default text is black, which obviously isn't going to show on a black background. So we want to change our text now, maybe to cherry red. We add this ATTRIBUTE to the body tag:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FF0080">
This is a Really Awesome Page.
</BODY>
</HTML>
See What We Have now. Again, use your browser's BACK button to return.

Again, back to the default colors. You are going to add hyperlinks, or URL's that point to other web sites, or other pages in your site, so you will possibly want to change the color of them from the default blue, so you have control over how the page will look. We add this also in the BODY Tag, using the ATTRIBUTE LINK. Let's make our links a bright blue. Gee this really is easy, isn't it? Here's your document now:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FF0080" LINK="#80FFFF">
This is a Really Awesome Page.
</BODY>
</HTML>
We haven't added any links yet, so we'll wait to view it.

Next ATTRIBUTE is our visited link. These are so your visitor (or yourself) knows if they've visited a page recently. The default here is maroon in most browsers. This might not look too good on our page, so we'll add the ATTRIBUTE VLINK (for Visited Link) to bright purple. Our document now:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FF0080" LINK="#80FFFF" VLINK="#8000FF" >
This is a Really Awesome Page.
</BODY>
</HTML>
Again, no links yet, so we'll go on to the next ATTRIBUTE, the ACTIVE LINK. This is what will display momentarily when the link is clicked on. Again, not necessary, the default is red, but you may want to just for good design purposes. Here's your coding now:
<HTML>
<HEAD>
<TITLE>Sue's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FF0080" LINK="#80FFFF" VLINK="#8000FF" ALINK="#FFFF00">
This is a Really Awesome Page.
</BODY>
</HTML>
That color is yellow, by the way. This is it for the ATTRIBUTES in the BODY tag, until we get to the graphics section, which will talk about the BACKGROUND ATTRIBUTE, and how to add a background image to your pages. Click here to see what we have so far. You can use the Back link or your browser's button to return