Basic Web Page DesignBasic Web Page Design

Basic Web Page Design

When I first wrote this page, back in about the year 1 A.D., it was appropriate, and hundreds of people have written to tell me that it helped them build their first websites. (Hopefully a lot more have used it that didn't write to me.) However as I look at the site today I see that it could stand some "modernization".

We've come a long way since the year 1 A.D. when it comes to writing html.

So here goes!!

Some miscellaneous "stuff" before we start. First of all, this isn't an exercise to help me type better...you need to be able to follow along with me and do what I tell you to do, AS I tell you to do it. For that you'll need a place to put the instructions as you read. I recommend one of the free web page servers, my favorite is http://www.50Megs.com

All you need to do is sign up and they'll give you FIFTY Megs of FREE web space. Don't just read -- DO! (Note - I have been using them for about 15 years, have one website that has 106 web pages, plus a LOT of other "stuff", and just checked. I have used 21.6% of my fifty megs.)

So go sign up for your account...I'll wait right here for you. Once you sign up, you won't need to do anything else to it for a little while, just come back here and read.

Now we're going to be working with "Notepad"...I write all my html in Notepad and haven't found a better program, the way I write it.

Notepad has several advantages: It's on EVERY PC - just do a "search" on your computer for Notepad, then, when you find it, make a shortcut to your desktop. The second advantage that it has is that ALL html has to be entered as "txt" format, which is natural for Notepad. Yes, I know that there are a lot of word processors that allow you to save in txt format, but why not use one that is "natural" - which leads to the third reason: It is a good, quick little word processor for when you just want to copy info, to save somewhere.

When we begin writing html, you will need to create and name the file so you can save it. With every html program that I've seen, the first file HAS to be an "index"...so save your first work in that file (you can always go back and over-write it, or edit it in any way you want to.) To do that, click on the "New File" tab, put some data in the file you are creating, and click Save As. This is where you'll name the new file "Index.htm" (without the quotes). The difference between htm and html is slight, but it does exist. I am not going to explain the difference at this time, just trust me, okay? I'm NOT trying to sell you a car!

Now just one more quick little explanation about what html is: It stands for Hyper Text Markup Language. Hyper is what you need to be to write good webpages, Text is the format you'll be using, Markup is what you'll probably be doing a LOT of (marking it up), and finally Language is what will come from your mouth when you find a website not working as you wrote it to do!

Finally - just so you'll appear to be really bright - the difference between a Web PAGE and a Web-SITE. Correctly speaking one page of a site is a Web Page. However if the site only consists of one page, then, obviously it would be correct to call that one page a website.

Don't be confused, by now everyone calls them either one, interchangeably.

Parts of a Web-Page:

1. Beginning, Heading, Title, Body and Closing:

We MUST discuss what the parts of the webpage is called. Just like a letter, you have different parts - so here are the basic parts for the webpage:

First of all, you need to tell the page that it will be written with html, so it will know what all of these commands, etc. are.
Secondly, just like in a letter, you'll have a HEADING.
Next will be the TITLE,
Then the FOURTH thing will be the BODY of the page you are creating, where all the text will be and the pictures will be.

Then, finally, just like any letter, you'll need to CLOSE it when you're finished. It's VERY important with html to ALWAYS close everything that you open!

EVERYTHING written in html has to be inside brackets like this: <>. The instruction that you give the page to make it properly display consists of a command (what you want to do) with an instruction (HOW you want it to be), separated by an "equal" sign.

A good example would be < font color="red">. Did you notice the quotes above the command? Get in the habit of putting them there.

Yes, there are some that don't need the quotes, but it would be much better to just get in the habit in the first place and not worry about whether or not they're needed. One other thing; you can write html in either case, upper or lower, and you can even mix them, and html will accept it okay.

2. Images:

Generally, I believe that most images on websites are still in JPG format. JPG formatted pictures take up a LOT less space than most of the other picture formats that exist. They need to be assigned names, before they are uploaded, i.e. Cucumber.jpg, for a picture of a cucumber. There are a LOT of things that can easily be done with pictures using html, i.e. pictures can conveniently be resized, without losing image, frames can be created, etc. We'll talk more about the "how to" with pictures later.

3. Links:

1. Links are what join YOUR page to other pages you have created, or other pages on the web. A good idea is to link your page to others of similar interest. (It's really proper "Netiquette" to ask permission of another web site before you link to it, ESPECIALLY if you are linking ONLY to a picture on another person's site.)

         1A. A special link is the "e-mail me" link..to let people click onto your mailbox and send you e-mail. The format for this one is just a bit different than the typical link.

4. Search Engines/META Tags:

1. For any web-site that you want to list with a search engine you must first write a META tag. Actually there should be at LEAST three META tags written. More about these later, too.

2. NOTE: If you don't care to have the page listed, of course, META Tags are unneccesary -- however if you DO want them listed META tags should be a "tell-all" about your web-site.


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


One World One People
Page Created by MorningStar@Chickasaw Graphics Web Creations! Custom-made Web-Sites and Pages to YOUR Satisfaction. Come See Us HERE!