Creating Good Webpages

General Information

When creating your page remember the KISS principle. Keep It Simple Stupid. And yes I know I'm not practising what I preach. But it is really good advice for the web. People have a short attention span on the web. Use other pages you like as a model for what you would like your page to do. By the same token learn from the sites you don't like. If you think puke green is a bad choice for background colors, don't use it.

Good Images Are Nice But...

While good images really make pages sparkle, bad images make a page look pathetic. And some pages that have too many images, take so long to load, people will hit go somewhere else rather than wait. Always keep in mind, not everyone has a DSL connection. Some are still connecting with 10-year-old 14k modems. If you want these people to visit your site, you need to take into account what they can & cannot do.

More Things To Do

Test your pages and your links often. Links become outdated on the web quickly. A page that was there yesterday, may well be gone tomorrow. A link to a dead page may cost you tons of visits.

Update your site. I rarely go back to sites that never change. And the sites that do change have high traffic. But don't only update, update it with as much worth while content as possible. A good use of graphics and multimedia will bring in a lot of visits. That's not covered here, but worth looking into.

I Like Links But...

A collection links related to your page really helps & is useful to visitors. However, pages that are nothing but links are annoying. Pages that link to everyone & everything become a confusing jumble of information. When choosing links, be selective. I realise more people will link to you, if you link to them. But if visitors can't find anything on your site, the only people who visit will be other webmasters trying to get links.

Who Is Your Audience

Consider who your audience is. Very few people play to a general audience. If your site is about economics, include stuff to help other economist. If I find it boring, my opinion's not relevant. The site wasn't created for me. A lot of people will never create a web page.

Be Original & Careful Who You Contact

Like anything else most content on the web is copyrighted. You need permission to use someone else's photo. You can't just download Yesterday by the beetles, & play it as background music on your homepage. You need permission first. Also, you can e-mail friends about your site. You can tell webmasters with related content. You can't e-mail everyone with an e-mail address. That's considered spam & can get you in a lot of trouble. If you want to create a voluntary mailing list go to: Listbot. It's a great service, and the people on your mailing list will want to be there.

Some Final Words

Finally don't abuse and overuse graphics. They don't load quickly. And a lot of times when people wait they hit stop and go somewhere else. Most importantly, if you really want a great web page. Take the responsibility to create it yourself. That means picking up at least four books. One on creating web pages, one on HTML, one on JavaScript, and one on DHTML. When you've learned all that, the sky will be the limit. And you might even make money creating pages for people in your spare time."); webWindow.document.close(); } function htmlWin() { htmlWindow = window.open("","",",width=380,height=400,scrollbars=yes"); htmlWindow.document.write("

HTML Help & Guidelines

General Information

HTML stands for hyper-text mark up language. Thats the complicated part. All HTML [the type of documents you see on the web] are simple text documents. When you see a character in italics on a word processor, you just take it for granted somebody highlighted them, and chose italics from a menu bar. The web can't really do that.

When you want a part of a document to be in italics on the web you have to put two containers around it. The first looks like this: <I>. This tells the computer, italics start here. The second container looks like this: </I>. This tells the computer the italics end here.

Exercise: Click on the B in the yellow part of this page. What appeared in that text field to the left? Probably: <I>. Now type some more text. Now hit B again. Now what appears. Probably: <I>. Type some more text. Then hit generate, and view. What do you see? What do you think the B stands for.

B if you haven't already guessed stands for bold. If you did it write you should have seen some bold text, and some normal text. Underneath that you'll see a line and information about the page generator.

Other Tags/ Containers

All the tags are similar in form. They're in every document you see on the web. The browser interprets them so you don't see them. If you're ever curious what a web document looks like before the browser translates it: click on view source from the view menu.

Here are some other common tags. These first ones are the most common:

1. <B></B>: Start & end bold face text.
2. <I></I>: Start and end italics.
3. <U></U>: Start and end underlined text.

There are several others in the yellow window. Using them once will tell you what to do. Remember each time you choose a style for the text, you need to tell the computer to stop with a closing tag that includes this symbol: /. <U>: Start underlining. </U>: Stop underlining. If you don't use the second symbol. The computer will keep underlining everything, from the point you inserted <U> until the end of the document. That can get to look ugly.

What Is A Header?

The other major thing to know is what a header is. It's like a headline. HTML defines six headers: <H1> to <H6>. The bigger the header, the smaller the number. Text that appears like this <H1>This is some text.</H1> will appear much larger then this: <H6>This is some text.</H6>.

The blue menu allows you to enter all six types of headers and assign the color and style of the text. However, the more tags you add, the easier it is to loose the stuff you'll actually see on the browser in the shuffle. So don't add too many affects until you start to understand them. When you understand them good enough, you probably won't need this page anymore.

What's A Paragraph?

<P ALIGN = "CENTER"> What do you think this tag will do. Will it align text to the right, left or the center of the page?</P>

If you guessed it aligned the paragraph to the center, you're right. You also had the answer right in front of you, so I'm still not impressed. What hidden tag, do you think is causing this paragraph to act like this. Hint, you've already seen it.

Here are the HTML tags you don't see that tell your " + bName + " what to do.

<P ALIGN = "CENTER">If you guessed it aligned the paragraph to the center, you're right. You also had the answer right in front of you, so I'm still not impressed. What hidden tag, do you think is causing this paragraph to act like this. Hint, you've already seen it.</P>

Adding Links

You don't see the tag that tells the computer this because " + bName + " hides all tags. But if you could see it, this is what it would look like: <A HREF = "http://rainbow.arch.scriptmania.com/">This Is A Link</A>. In this case the closing tag, </A>, is required. Otherwise, your whole page will become a link, & that looks real messy.

What tags that you can't see do you think are around <A HREF = "http://rainbow.arch.scriptmania.com/">This Is A Link</A> that you see up above. Answer: <B> & </B>. That's why they appear to be bold.

Adding Images

Images are the last basic part of HTML. They've been part of webpages since webpages first started. The tag to add an image to a webpage is: <IMG SRC = "URL">. URL stands for the folder or server area the browser can find the image. If the image is stored with the rest of your page, you can refer to the image simply by it's file name.

For instance the file might be called, "myPicture.gif". In this case to add the image to your page, you add the tag: <IMG SRC = "myPicture.gif"> if it's stored in the same location as the page that's calling on it. If it's not, you need to tell the broswer the exact location: <IMG SRC = "http://rainbow.arch.scriptmania.com/myPicture.gif">. Pictures for the web will most often end with the extension, gif or jpg. Quiz, what tag did I just use to create those italic letters? <I> & </I>

If you want to tell the broswer to resize the image, you add the words HEIGHT= & WIDTH= to the image tag. <IMG SRC = "http://rainbow.arch.scriptmania.com/myPicture.gif" HEIGHT= "30;" WIDTH= "30;" BORDER=HEIGHT= "3;"> I didn't explain the BORDER attribute, take a guess what it does. If you answered adds a border around the image, you're right. See how straight forward that is?

Some Final Words

But why would I want to, when I can use Page Mill and never see another HTML tag. Because doing it this way gives you access to every aspect of a page, and WYSIWYG editors sometimes overlook aspects you would like to change. I started with an a WYSIWYG editor, but my page became much better when I stopped using it. This setup is ideal, since it runs in the broswer it gives you an exact replica of how your page will look in the end. And that's worth it's weight in gold. Of course a program doesn't really weigh anything..."); htmlWindow.document.close(); } function helpWin() { helpWindow = window.open("","",",width=380,height=400,scrollbars=yes"); helpWindow.document.write ("

The Page Builder Help Window

Important Note

    IMPORTANT: For some reason using file save, when PB opens the viewing window & using 'FILE SAVE' saves the build2.htm & not the file you've created. To best save your work, copy it into a text editor and save your work, until I can figure out why.

General Instructions

    Note: this page builder was created by a person with extensive knowledge of HTML. It is meant to be as easy to use as possible. However, a basic knowledge of some HTML will really help you use this page and all it's features.
    Colors usually group functions. To help you understand each button, if you have IE: a little bit of text will appear each time the mouse is placed over a button. That text is meant to help you understand what each button does.

General Everyday Notes

1. Fill out the table with stuff you want to appear on your page.
2. Click on Generate Source.
3. Make adjustments if you want in the text area.
4. Click on View to check out your page.
5. If you want to save the source as a file you will have to cut and paste to a text editor.

The Blue Menus

1. The blue menu is divided into two parts the top and the bottom.
2. The top blue menu creates a title, background color, list of links, and meta tags.
3. Aside from the page title, email information and links, a lot of stuff from the top will not be displayed by the browser.
4. The bottom blue menu allows you to add things to your page.
5. It's divided into headers, paragraphs, lines, and inserts.
6. Adding a tag, [which stands for formatted text], will add cause the computer to add the tag to the end of the body field.

Two Ways Of Adding Tags To The Middle

1. Putting ## anywhere in the body of the document will tell the computer add the tags here.
2. Placing $$ will cause the computer to place the tags before the $$ symbol. The computer will keep adding tags to that location, until the dollar signs are erased.

The Required HTML Tags

The Yellow Window

1. The first time you click on a tag in the yellow window, you will start the tag.
2. If you punch 'I' it will insert and italics tag.
3. Then you insert the text to be italics manually in the body field.
4. All other paragraph and header functions in blue will ask you for the tag.
5. The second time you punch the 'I' tag, the computer will insert an end italics tag.
6. There are similar functions in the yellow window for all text formatting tags.

The Form Builder

Special Characters

1. For those of you who want to use another language, notice there is a special character typewriter.
2. This type writer is write above the help menu.
3. Typing any key from that type writer will insert the character code for that special character in the body of the document.

Creating Marquees

The List Generator

Using The Color Palette

    Use the color palette to assign one of 64 different colors. You choose the color first, then you select palette when assigning colors to text and headers. This will always assign the last color chosen with the palette.

The Meta Tag Builder

    The Meta Tag builder can not only eliminate duplicate keywords, it can generate plural keywords and find related search terms for over one-thousand keywords. For the best results, click the thesaurus button before you generate your Meta Tags. Then set the generator to create plural keywords. The generator knows the basic rules of English, so you will not have to do a thing.

The Resume Generator

1. Start with your contact information.
2. Then add a homepage and email if you have one.
3. Enter your work experience, then click on the exp button.
4. If you've worked more than one place do this twice.
5. Repeat the step for the schools and education you received.
6. Notice check marks appear by everything you've added data for.
7. When your done click [CREATE My RESUME] at the top.
8. When the check appears next to that button click [ADD RESUME] at the bottom.

    It's actually much easier than it sounds. And the finished product is well worth taking the time to learn, how to get there. The current version of the resume creator allows four references and five entries under experience & education.

Adding JavaScripts

"); helpWindow.document.close(); }

Rainbow Arch: Script Mania JS: Page Builder This JavaScript program runs best on IE 5+. Page Builder is a JavaScript-based HTML generator that can create cascading style sheets, resumes, marques, etc. Its Meta tag generator can add popular search items, eliminate duplicate words, and form plurals on its own. It also features a WYSIWG display that can show you how the code will appear as you type, a javaScript library, a marquee builder and much more.

     This script makes creating HTML documents easy. It will code headers, tables and even cascading style sheets for you. That way you can create the best webapge possible without being an expert in HTML. It will also automatically generate links for several different subjects at the touch of a button. After you create the source code for your page [generate/ & view], you will still save the page on your computer and find a server to host that page. There are several free services including: Geocities, Tripod, Xoom, and Angelfire. After doing that I would recommend picking up a book on HTML and one on the web in general, and jazzing your page up a little.