If you followed the last chapter and even opened this chapter to read, then I know I haven't bored everyone to death (well, at least not you...yet!) What will follow is as much a tutorial on coding your web pages as it is a style guide. I'm not an expert, by any stretch, but I know what I like and don't like. So I'll be passing along some of my personal opinions as well as some of what I've learned about web pages in the last year or so. If you're worried that you can't do this then forget it! About a year and a half ago I had to ask Cindy for some basic help and that sparked my interest to learn more and eventually led me to having my own home page. This stuff isn't tough and you don't have to be a rocket scientist to do it. Just learn some basics, get a little curious and explore.
In the last chapter I told you about the basic tools that you would need if you were serious about getting in to the biz. Hopefully you have already tracked down these resources. I will be using some technical terms throughout the rest of this series. These computer types really like to use initials (it must be something in their genes - I.M.B.S.I.T.G.) and in most tutorials you'll see complete definition of what every letter stands for. Not in this series. If you're really that interested in knowing what HTTP means, then get a dictionary. That's not what this is about. This is about style and the basic knowledge you need to express that style.
Your It!
At the end of the first part of this series I included a little block of text that you could cut and paste to make your first web page. I just know that you all did it. Just in case one or two of you just ran out of time, I'll let you see what you would have gotten. Click here to see. Wasn't that special? Pretty boring actually, but it served a couple of purposes. First, it showed you what the basic format of a HTML document is and it got you to do something besides looking at the pictures of the pretty girls featured here on TG Forum! You might have noticed that each of the lines from this example had some words in angle brackets. Those are called tags and are the core of the HTML language. There are only about 13 thousand different tags that you have to memorize, and they are continually adding new ones, so it shouldn't be too tough. But there are a few things that you need to know about tags.
Just Like Mommy Said!
If you open it, close it. Every HTML tag (with only one exception) requires a close. A tag is like a light switch. If you turn one on you better turn it off when you're done with it! Not only that, you had better turn them off in the reverse order that you turned them on! Simply put, a tag like <head> requires that you include a close to the tag. A closing tag is the same word, in the same angle brackets just with a slash before the word. So, the closing tag for a <head> command would be </head>. So, tags are the crux of programming your web pages. The basic structure for any web page must be:
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
</body>
</html>
You can save this for future use as every page we create in this series will begin with this basic template. Notice the tags. First, I open with <html> and then open a <head>, the open a <title> and close the </title>. Then I open the <body>, close the </body> and finally close the </html>. Each was closed in the reverse order that it was opened.
Let me explain a bit about each of the tag sets in our template. <html>...</html> simply tells your browser that everything between the tags is HTML codes. Between the <head>...</head> is usually reserved for special commands that browsers use to format the stuff that follows. The one requirement in the <head> section is for a <title>...</title> tag set. Between this tag you include any text that you want and it is usually displayed on the title bar of the browser. Then there is the <body>...</body> section and this is where you layout the text and graphics for your page that the browser will display. This is the section where most of the action is!
It's All In The Options
Most tags also have options and the options are what you use to make your page unique. It helps to have a photographic memory or a good reference book (or file) to remember all of the options for each tag. For example, the <body> tag has an option to set the background color for the page. Amazingly, it's called 'bgcolor'! Let's assume that you've decided to do a black background and white letters. As options are always specified in the opening tag, your body tag would look like this: <body bgcolor="black" text="white"> This tells the browser that will be viewing your page, that this whole page will have a background color of black and all text (unless otherwise specified) is to be white.
It doesn't matter either if the tags are typed in upper or lower case letters, the browsers today handle either. I like to use lower case tags myself as I think it's a little easier to read. You do what is easier for you. All of the tag options follow the general format of 'option name="some value"' The option name can again be upper or lower case, followed by an equals sign, then the value is enclosed in quotation marks. Current generation browsers don't always require the quotes, but I try to always include them for consistency.
The multitude of options is much more challenging than the number of tags. This is where a good HTML editor comes in handy. I mentioned in the last chapter that I use an editor called HomeSite for my coding. Well, it's so smart it knows all of the tags and all of the options for each of the tags. This helps me remember what options go with what tags and helps make short work of typing each of them out. (HomeSite has a trial version available at their web site at www.allaire.com)
What a Body!
As I mentioned before, the bulk of the text and graphics for your web page are placed in between the <body>...</body> tag set. At the very least web pages are made up of text and graphics. There are a ton of other things that one can include in their web page (like music, video, forms - but that's way too much to hit you with now), but most "home grown" web pages simply contain text and graphics.
So, as you might except, many of the tags we need to get familiar with deal with formatting text and displaying graphics. I won't be able to cover every tag and every tag option in this series but I will cover the ones that you're likely to use the most.
Let's Get Nosey
Part of the learning process of HTML is exploring what other's have already done and most browsers freely allow you to peek at the code for the page you are viewing. Your browser should have a View...Source option on one of it's menus. If so, activate it to look at the source for this page. It's a lot more complex than the simple beginning template I showed you above. But that's because here at TG Forum we like make it pretty and easy for people to navigate around to different areas that we have available. But if you examine the source for this page very closely, you will find that all of the elements of the basic template are there. Don't worry if you don't understand everything you see yet, that knowledge will only come with time and practice.
This is part of being nosey. Find a page that you really like and look at the source and see how the code is formatted and what tags and options were used. I keep a 3-ring binder with many of the tips I've "borrowed" over the last year or so. Now when I encounter a situation where I want to do something a little bit special, I flip open my binder to see how others have done special things.
Also, in the vein of being nosey, there are plenty of HTML tutorials available on the Internet. This series will teach you enough to be dangerous, but not an expert. So do some searches of the Internet for HTML tutorials. Microsoft and C/Net have areas of their sites dedicated to teaching beginners how to write HTML code. Plus there are many independent sites as well.
A Word About Browsers
Unless you live in a cave, you know that the "browser wars" aren't over. Microsoft and Netscape have been battling away at this for a few years now. Both companies have given away their product to user's for years in hopes of dominating the browser market. I'm sure that once a clear winner emerges you'll be expected to pay for the product. Until then, enjoy the freebies. But as a budding HTML writer you need to know some of the sneaky things these companies have down to try to "corner the market."
Some tags have options that aren't supported by the other company's browser. I understand that Netscape, for a long time, pioneered many early advances in the HTML language and there is an official specification available for different versions of HTML (yes, there is some place that actually controls the language!) You just need to be aware of some tags and options that won't work as you expect in one browser that do work on the other. I keep both the latest versions of Microsoft Internet Explorer and Netscape Communicator/Navigator on my system and view my pages using both browsers so I can avoid these traps.
Hey, Wadda Ya Know?
Well, so far we know that we have to have a plan for what we want our pages to look like. That HTML files are simply text files stored on an Internet server someplace. We are starting to get into the details of HTML tags and their options.
We have also learned that it's okay to "borrow" from existing pages that we've seen and we like. Not only can you borrow code snippets but it's generally considered fair game to "borrow" clip art and backgrounds. The line that you don't want to cross is to "borrow" someone's picture. People will get mighty upset if they find their picture on your web site without their permission!
What's Next?
Well, my little future budding HTML geeks -- go forth and learn. Start viewing the source for pages, get yourself a decent HTML editor, search for some tutorials and see what you can learn on your own, because you aren't going to learn everything from me. I'll be glad to help answer any of your questions, but I won't do your web pages for you!
I've been beta testing the new upcoming TG Forum web site service and you're free to visit there (and view the source) for any of the pages. Just click here: http://members.tgforum.com/stefmatthews/default.htm
Until next time....
