Basic Web Page Design -- Lesson 2

Writing The Web Page:

    NOTE: Just a quick word about the "H" (Heading) Tags. I've never liked them and don't use them. When they first came out, they were Internet Explorer specific. They weren't picked up by the approval group (World Wide Web Consortium), but people did use them, they did get popular, and now we are more or less stuck with them. The MAIN reason that I don't like them is that they are unpredictable. What looks good in one browser may or may not look good in another. I've found it MUCH better to COMMAND the html to do exactly what I want it to do...and hey, it's not hard. The command is simple, just where "x" is the size font you want. There are a BUNCH of other font commands, such as style, color, etc.

Okay, hopefully) you did a lot of reading from Lesson One, and opened an account in 50 Megs from Lesson One...so now let's actually DO something!

As I mentioned there is a very easy protocol to writing a webpage. The first thing you want to do is declare that this is html, which is done in this format: < html>, then the Opening, including the Heading the Title, the Body, etc. Here's how I do it, just for convenience sake, and to make sure that ALL of the brackets are always closed.

ANY TIME I start writing a new web page, I make a series of brackets, like this <><><><><><> - Generally about six (or so) of them. Then INSIDE each bracket I put html, head, title, body, font, paragraph, and a closing /html at the end.

I KNOW when I begin a webpage that I will need some sort of font, and I will need a space between the title of the page, and the first line of "real" text about anything we write, so I just do it all in the first place.

I've found that it's a LOT quicker (and safer) to make the beginning and the ending of the brackets. So let's do this. Pretend we want to write a page about....oh, let's say, we want to write one about a cucumber. It could be anything you want, I'm just using this as a kind of 'nutty' example. We should have something that looks like this:

< html> < head> A Good Page About Cucumbers< /HEAD> < title> A good page about cucumbers < /title> < font color="black">< font SIZE="+2">, Then I just hit the "Enter" key a bunch of times to move the closing < /html> down past where I might say everything I want to say about cucumbers.

Now move back up to where the commands are and write something like this: "A good page about cucumbers"

*At this point I want to reiterate that for ALMOST EVERY command you "begin", you have to give a command to END it. For instance, < font color="red"> tells your page that you want to have letters in red. When you are finished with the red letters, and want to change to any other color, you have to END that command. The way you end every command is with the forward slash (/), so it would look like this < /font>. You can end every font command, even when they are "chained together" with a single < /font> ending.

    NOTE:*There ARE three commands that you don't really need to end. They all have to do with breaks in the text. The first one is the Paragraph < P>, the second one is the BREAK < BR> and the third one is called the "Horizontal Rule" < HR>. The Horizontal Rule only means that you want a line drawn across a piece of text from the left side to the right. (Hint: A big help if you are keeping track of where you are working on a large website.)

At this point, I'd advise you to SAVE the file AS index.htm Get in the habit of saving your work every so often. It doesn't automatically "save", like a word processor program might.

Now reopen the file (this doesn't need to happen like this once you get used to doing it. This is just "for the first time".)

When you reopen the file, you should see something that looks about like this:

A good page about cucumbers

Does that excite you? It does me -- or at least it did the first time I tried making a page. It showed that AT LEAST I could put something out there that people could see....and you can let your imagination and fantasies run wild from that point on!

Perhaps you'd like your page about cucumbers to have a little more "flash" though. (Some people are like that -- they want everything to look like Hollywood!) We can change the colors of the background easily enough, so let's do that first. The command for that is < Body bgcolor="some color">.

In the old days, we used to have to figure everything out using the 256 colors that come with the Red-Green-Blue spectrum and it was all hexadecimal and additive. To make red, you needed to type #FF0000...the highest hexadecimal value is FF and the lowest is 00. Colors were arranged red-green-blue, so you were saying you wanted MAXIMUM red, and MINIMUM everything else.

It still works the same way, and you can still use this technique, but now there are all sorts of "accepted" colors. One of my favorite websites is: html-color-names.com which shows you 140 different colors to choose from for your background.

A "for instance" would he < Body bgcolor="red"> (See how easy this is...I'll bet it didn't take you any time at all to figure out that "bgcolor" is the way to say "background color", did it??) , OR < BODY bgcolor="FF0000"> -- either way works fine to give us a red background. If you added ONLY that command, you would now have a nice red page looking at you, with
A good page about cucumbers

A good page about cucumbers

on the left side in black type approximately this size. Getting better, huh?

Play around a little with the text size. Protocol says that the Heading should be a little larger than the Title and the Title should be a little larger than the Text of the document you are creating. Here is an example < Head> < font color="red">< font size="+4">, < Title> < font color="blue">< font size="+3"> and for the text just do a < P> and begin with < font color="black">< font size="+2"> or whatever size and color YOU like it to be.

One thing to keep in mind though - just because it looks good on YOUR computer, DOESN'T mean that it will on everyone else's. Someone else's browser might make it look entirely different, especially when you think of things like screen resolution settings, etc. MOST people who do websites have three or four browsers, just to let them look at a few possibilities. Make it look the best that you can for YOUR computer.

On to Lesson 3!! You can do it!!!