Do-it-yourself, work-at-home how-to website design webmaster resources -
web design issues, HTML, CSS, metatags, tables, frames, formatting and more.

how-to information for beginner webmasters -- do-it-yourself
website design, development, promotion & maintenance at little or no cost.

last revised 12/29/05
the wannabe webster
or,
the adventures of a new kid in cyberspace
website design & webmaster resources
for the e-business beginner


trapped in a frame?
flipbucks.jpg - 2513 Bytes
...best resource links
...best check-up links

3. website design, website creation
Do-It-Yourself Website/Webpage Authoring
How-to Information

a website, a webpage

two target audiences
target audience - customers
target audience - search engines

the basic website design
if you do it yourself
pay for services
the pages for your site
portal page
home page
links page(s)
who-are-you page

speeding up load times
load time: size matters!
crunch it or not
optimizing graphics
recycling graphics is good
table formatting trick for speed

html, css
html resources
steal this code
pay for services
no errors allowed
css - cascading style sheets
css resources
html codes for colors
nesting errors
using frames vs. not
using tables to organize
codes for special characters
code checking, spell checking, etc.

meta tags
check your metatags
metatags: description & keywords
turn off Microsoft smart tags
automatically send surfer to different page
stop browsers from caching page
meta tag resources

keywords
keywords: metatag AND text
a strategy for building a keywords list


"see"-ability
resolutions
browser compatibility
accessibility
filters

add bells & whistles
counters website design counter
adding audio
adding a bulletin board
adding a site search engine
adding a form to gather info
adding a guestbook
adding a pop-up window
passwording pages
more stuff

uploading your webpages
from your computer to the internet: ftp client


page check-up services, programs

web site design resources

the Wannabe Webster home page
   1. a product to sell
   2. domain names, registration
   4. accepting payments online
   5. search engines & rankings
   6. website maintenance
   7. webmaster & website etceteras

free check-ups & useful code page
the best of links
website design & development links
ecommerce quintessentials links
add URL/reciprocal link
search engine submission urls
quintessential websters
email the Wannabe Webster
Site search Web search

powered by FreeFind
a website, a webpage

A small web-based business relies on the design of its webpages to be readable to browsers and search engine spiders, as well as the surfers who find their way to its site. Website design has to arise from a combination of concern about search engine submission and search engine listings and clear, effective, human-oriented, interesting content.

two target audiences

Your target audience: surfing customers
You want a page that is enticing, impressive, informational, easy and quick to load and easy and quick to understand. Your web page design needs to make it easy to find information, navigate and (if selling) make purchases. Web sites with lots of content -- information, articles, links to related sites, contests and/or freebees -- are most likely to be bookmarked and remembered and returned to.

Your target audience: search engines
Search engines will be your largest source of hits to your site. Most hits on your web site will come from surfers checking out no more than the first 30 listings on whatever search engines they use. No matter what types of surfers you believe will be your best customers, most of them won't be your customers until a search engine has referred them.

Your website must be optimized to be understandable and attractive to the search engines and their spiders. This makes it very important to find out what the search engines look for, what strategies they use to understand the content of a site, what results in higher ranking, and what the search engines might misunderstand, ignore or punish a site for. This tends to change with time and thus is an ongoing task.


the basic website design

The design of your website, of course, gives an impression about you, your product, your general level of success and esthetics. You can have a service or other individual design your website and it's webpages or you can do it yourself. There are many very competent companies with skills in putting together polished websites for what you may or may not believe to be affordable rates. If you do your own site, this will be much less expensive on the one hand, but you need to balance it against the possibility that you may miss ecommerce opportunities if your site looks too slapped-together homemade and doesn't have enough enticing content to offset that impression.

If you decide to design your own site, then the issues are basically 1) what information, offers, etc. do you want to have on your site? 2) how do you want to organize the information? 3) what colors and graphics do you want to use? 4) what parts of what you want to say and do on your web site should be on your main page (your home page) and what should be on other pages? 5) will you use CSS, frames, tables, or what to organize it? and 6) how careful and patient do you have time for over the next year?

The pages for your site: the great divide. In addition to the various pages you decide to have with additional content, specific focus on products or information, etc., there are some pages that are helpful to have on your site. If you make sure you have lots of your keywords in meaningful sentences on these pages, each one can end up spidered and listed on the search engines and thus each can function as an alternative entry portal to your site.
Portal page. Some webmasters have chosen to have a simple introductory page -- often referred to as a "portal page" -- that loads quickly and is intended to be a simple portal to the site. Be aware that search engines cannot "spider" (explore and record information from) graphics and may not feel your portal page is worthy of much attention. The search engines' spidering activities aren't designed to take responsibility to take a lot of time figuring your site out. Portal pages are also especially impractical when referred to as home pages and linked back to throughout the site -- because they don't usually have any real information on them.

home page. Your home page is website central. It should have the gist of your site, incorporate all your keywords in meaningful text, and have the most important links to other pages in your site.

links page(s). Your links page is where you offer resources that you believe would be helpful to visitors (links you've scoured the web for and compiled as a service) or your reciprocal links (links you've scoured the web for and compiled as a reciprocal agreement with each listing's webmaster). If you have a variety of aspects to your site and a variety of links to resources or reciprocators, you might consider having more than one links page. All links pages should be linked to from your home page so that visitors find them easier and so that search engines take them more seriously. All links should have text descriptions. If they do, the search engine spiders will see them as pages focused on the particular topic and list you in their data bases for the keywords they see there. If you have a lot of banners, your links page will load slowly and the spiders will not see the links as topic information (they don't read graphics).

Explain who you are. In spite of all the issues about anonymity on the internet, if you're going to ask people to buy your products, believe your advice and/or give you their credit card numbers, you're probably going to have better results if you explain a little of who you are. Even though credit cards are reasonably well-backed up by the companies behind them, very few people are going to trust a post-office box and a url. The conventional wisdom is that you need to offer a little background of who you are and where you can be reached by phone, snail mail and email if something goes amiss. (See Who is Dr. J?.)

speeding up load times

With websites loading time is important. We live in an immediate gratification world where people are known to lose patience if a site takes to long to load.Generally speaking, the "wisdom" is that it's important for your page to load in 15 seconds or less for a 33.6K modem. You can speed load times by minimizing the size and number of graphics and by minimizing the amount of text, comments and formatting tags. Reducing even the number of unneeded spaces and carriage returns can speed your page a bit. You can also speed the loading of the first part of a page so that the initial information can be viewed while the rest of the page is loading. (If you have other ideas, please email me.)

load time: Size matters! Believe it: size matters. The most immediate way size will matter will be in the loading time of your webpage. The more stuff you have on it, the longer it takes to load. The more different graphics you use, the longer the load time. The bigger the graphics you use, the longer the load time. Another general rule of thumb is that each webpage, graphics included, should not be much more than 40K bytes in size. (This site is a good example of slow load times.)

Crunch it or not. There are some sites and some software that offer to optimize your pages by eliminating all unnecessary carriage returns, spaces and comments. They cruch your page code down to a bare minimum -- as much as 20%, depending on how much of those extras you use in writing your pages. This can save a chunk of file size but can make editing tougher because you lose line breaks, indents and comments that otherwise contribute to by-human read-ability. Yook seems to do the best job of the options I've found. It's online, it's quick and it's free. Check your within-page links, though, because Yook decided to remove quotation marks which rendered them inactive.

optimizing graphics. Optimizing graphics comes in two flavors: as few as possible and as small as possible. Generally, if you can stick to a very few graphics, you're going to be better off. And any graphics you intend to use should be optimized for internet by a graphics program that can make them as small as possible without losing a lot of their quality. You can often get a graphic down to 1/3 or 1/5 of its original size. Optimizing may cause a degradation of the quality of your graphic, so be aware that it may be a trade-off of speed for sharpness of image.

Most good graphics editing programs that come out now have a web optimization option. There are also some on-line services that will optimize your graphics for free. The best I've found online is (website designNetMechanic). It condenses your graphic and shows you 12 different versions (of increasing degrees of condensation) so you can decide how much of the clearness of the graphic you are willing to give up. NetMechanic has some very helpful services you can use free.

Recycling graphics is good. Keep graphics to a minimum, but once you decide to use one, you can use it as often as you like. Load time is pretty much the same whether the graphic appears once or twenty times -- and whether it is presented the same size every time or different sizes.
web design website design website design website design website design website design


Table formatting trick for speed. Okay, so a page should be no more than 40K and load in no more than 15 seconds for a 33.6 modem. This goal doesn't work for me, personally. The pages on this site are all pretty size intensive. One day I may break it all down into tiny pages but for the present I find it is much easier for me as the writer to have a lot on one page so when I want to add or edit something I don't have to hunt through many little pages. Though I haven't read or heard this from anyone, I found a way to accomplish what I hope is at least the next best thing -- that is, to be sure that something is loaded within 15 seconds so that the surfer can start reading while the rest of the page loads. This can be accomplished -- at least for the browsers I've used -- with tables. (If you're not familiar with what tables are and how they are used for formatting, briefly take a look at the section on tables, below.)

Browsers, it seems, load up various parts of the pages they come across in the order that they find them. As soon as a browser has completely loaded a graphic or a table or whatever, it displays that part of the page. If you have a graphic at the top of your page, all by itself without being within a table, it will appear to the visiting surfer as soon as the browser has all the information on that graphic. If you have a table, browsers will present them to be viewed as soon as they are completely loaded. If an entire page is within one table for formatting purpose, the whole page -- the entire table -- will need to load before the viewer sees anything. On the other hand, if you divide a page up into three or four separate tables (which can be invisible to the eye if border="0"), when the first one is loaded, the browser will present it to be viewed while it begins to load the second -- and it will present the second table to the viewer while it begins loading the third... etc. In this way if you have a large page, you can still set it up so that the surfing visitor can be seeing and can be reading the first part of the page while the rest of the page loads.


HTML, CSS

HTML (hyper text markup language) and CSS (cascading style sheets) are the means to put together -- format -- your pages with the paragraph indents, font changes, bells and whistles that make it look like you want so that browsers can interpret it. Like the basic text editing programs before Windows, HTML code can be easily learned with some practice.

WYSIWYG html editing software. Since Windows, many people like to use WYSIWYG (what you see is what you get) programs that simply show the finished product without showing code. Microsoft Word has a WYSIWYG webpage editing option. Microsoft's FrontPage is a polished WYSIWYG html editor that I have not used myself but many people have recommended to me.

Hands-on html text editing.  Like the text editors before the days of Windows, you can use html editors that allow you to directly write code to the webpage's html file by keystroking it in on your keyboard or clicking on buttons for little subroutines that add formatting codes (tags that change font face, font size, font color, background color or image, text centering, text underlining, page breaks, etc.).  This is basically "WYSIWMWYG" (what you see is what makes what you get).

It's very handy to understand and be able to edit the code that makes the webpage come alive on the internet.  It's easy to learn.   You only have to learn a half dozen things to start and then you end up learning as you go -- usually learning a new little formatting option every day or so.

The two leading hands-on html text editors that I have run across are Coffee Cupsmall blinking star and HotDog.  Both allow you to very easily access your html files, write and then tinker with the code and access detailed help. I use HotDog 6.0.   Coffee Cup,small blinking star which I only decided to try in recent weeks, lets you download a free shareware version to try out that seems to do pretty much everything that my paid-for version of HotDog does.

FreeHostingWeb.com
E-commerce hosting from $14.95 per month   null


There are also many free hosting services that may attract your attention. There are many free sites available where they will host a limited sized website for you and offer online html editing in return for allowing ads on your site. Beware of the possibility that free sites may not be optimal for ecommerce because they may not be taken seriously or accepted by some of the search engines and online services. Another issue is that some sites present your page within a frame with their ad on top. This confuses or defies some of the search engines. Otherwise, free does seem possibly a good price.

WYSIWYG vs. hands-on. Though it is much easier in some ways to use a WYSIWYG program -- either online or via WYSIWYG html editing software -- this can cause you endless troubles in adding special codes for affiliate programs, general tinkering and looking for errors -- because you can't trouble shoot code if you can't see the code. Like many places in life, one needs to make a choice between one set of potential hassles and another. Much of the information below is only valuable if you can tinker with code.

html resources
2CreateAWebsite's very basic HTML Tutorial
Annabella's HTML Help
Boogie Jack's HTML Tutorials
NCSA Beginner's Guide to HTML
WebEnalysis HTML code
Computerhope.com cool tricks HTML code
Computerhope.com HTML code & Web Design
w3schools.com HTML 4.01 / XHTML 1.0 Reference
http://www.sfsu.edu/training/guides.htm
http://javascript.internet.com/clocks/


Steal this code. You can view the code of most pages you see on the internet very easily. This enables you to view and copy codes for special formatting strategies that you might see. This is often a much more effective way to find out how to do what you want to do without pouring through the many available tutorials. (It is said in some circles that this is plagiarism, but it is difficult to understand why it would be -- any more than looking in a novel for an example of how a word is abbreviated rather than looking it up in a dictionary.) In Netscape on the upper menu bar click on View and then Page Source. In IE on the upper menu bar click on View and then Source. If you use Netscape you can highlight the part of the page source that you want to copy and then hit Ctrl + C. Copying the IE page source is even easier. A nice article from Tom Dahm and NetMechanic covers this strategy: See Reverse Engineering Page Layout.

pay for services. If you are willing to pay more to have someone else deal with these hassles, check out services like WorldMall and Better Web Design.

no errors allowed. It is very important that the code be right. Some browsers may forgive little errors that search engine spiders do not. It is very easy to make a nice looking page that looks great on your monitor at home but that has multiple coding errors that might turn away a search engine.

css. Cascading style sheets -- are formatting information files. A cascading style sheet is formatting information that is kept on a separate page and accessed by the surfer's browser when the page loads. Cascading style sheets are intended to offer more control over the appearance of the webpage with greater readability for people with accessibility problems (see accessibility below). If you haven't already designed your pages, you might look into cascading style sheets to manage your formatting. Some predict that much of the formatting of webpages in the years to come may be expected to be on cascading style sheets as current on-page html codes are phased out to make pages easier to read by search engines and people with visual impairments.

css resources
Boogie Jack's CSS Tutorials
CSS Pointers
Webmasters Library CSS Tricks
House of Style - Cascading Style Sheets: CSS1, CSS2 Tutorials, Resources, Help
MaKo 4 CSS - CSShark answers Frequently Asked Questions
CSS Check


Color-coding - codes for colors. When you add color to background or text, you have the option of naming a few colors by name. Otherwise, colors have 6-digit codes that are preceded with a "#." Green, for example, might be coded as "color=green" or "color=#007700." My understanding is that at least some of the search engine spiders don't like colors to be named.

color  codes  in  various  chart  formats 
Webenalysis' HTML Color Chart
Nutrockers' Web HTML Color Code Chart
WebMonkey's color codes
Calvin Kyle Bobbitt's color codes
Heartland Plains
www.html-color-codes.com
HTMLGoodies color codes
Lynda.com Color Chart by Hue
Lynda.com Color Chart by Saturation
HiTMilL color codes


Nesting errors. Nesting errors are HTML errors where one tag (tags direct changes in font, etc.) is opened and then another is opened and then the first one is closed and then the second one is closed (e.g., open TAG A, open TAG B, close TAG A, close TAG B -- ABAB). Tags are intended to encompass (e.g., open TAG A, open TAG B, close TAG B, close TAG A -- ABBA). Nesting errors can cause you problems with browsers and search engines.

Using frames vs. NOT. Frames are an organizational strategy for presenting various information in various parts of a webpage. Everything I read says to stay away from using frames on your website. Though nifty in some ways for the organization of a website, they can be very frustrating, aggravating and confusing for the surfer and spiders that visit. They make adding a page to Favorites or bookmarking a page impossible or unpredictable, they make browsing impossible for the visually impaired, they confound search engine spiders, and they frustrate and aggravate surfers when they can't click on links without staying trapped inside a referring site's frame.

code to add to your page to allow surfer to escape a frame
<A HREF="http://www.wannabewebster.com/" target="_top"escape a frame</A>


Using tables to organize. Tables are an organizational strategy for presenting various information in various parts of a webpage. Tables allow you to have some information on one side, other information on the other, and still other information in between. This website is organized with tables. The index above and the codes below are small tables with invisible borders (border="0").

Take a look at this little table formatting demonstration in which the difference is the code <table border="0" and <table border="1" (takes about 15 seconds - loads in a separate window - use your stop button to halt the loop).

A speed of loading note: When using tables, many browsers seem to want to display each table as soon as it is completely loaded. This means that if you have a page that is encompassed by one table, the entire page will have to load before anything shows up on the surfer's screen. On the other hand, if a page is formatted using a number of separate tables, each will display immediately as its code is understood by the browser program. If you have a long page that is a bit excessive in loading time, by dividing the page into separate tables you can assure that at least the beginning portion of the page begins to display for the surfer while the rest of the page is loading.

Some decent resources on tables: TutorMatrix: tables; HTML Clinic - tables.

here is the codehere is the table
<table border="1" align="center" cellpadding="6" width="180"><tr><td align="right">
WORDS<BR>WORDS
</td><td align="left">
WORDS<BR>WORDS
</td></tr><tr><td align="left">
WORDS<BR>WORDS
</td><td align="right">
WORDS<BR>WORDS
</td></tr></table>


WORDS
WORDS



WORDS
WORDS



WORDS
WORDS



WORDS
WORDS




here is the codehere is the table
<table border="0" align="center" cellpadding="6" width="180"><tr><td align="right">
WORDS<BR>WORDS
</td><td align="left">
WORDS<BR>WORDS
</td></tr><tr><td align="left">
WORDS<BR>WORDS
</td><td align="right">
WORDS<BR>WORDS
</td></tr></table>


WORDS
WORDS



WORDS
WORDS



WORDS
WORDS



WORDS
WORDS





Codes for special characters. There are many special characters that are not directly written into your text when coding html. The sign for copyright, the ampersand, greater than, less than, and many more characters require special coding because these characters are used in html code with other meanings. Webmonkey's complete guide to special characters is an excellent resource. Below are codes for some frequently used special characters.

for thistype thisfor thistype this
<
&lt;
>
&gt;
©
&copy;
"
&quot;

many more codes for special characters



Code checking, spell checking, etc.

Once you get your page done, you need to be certain the code doesn't have problems. There are several ways to check your pages and I recommend you do them all.
First, view your pages with multiple browsers. Take a look at your page with both Netscape 4x and IE 5x, at least. You can have both browsers on your computer and up and running at the same time. These, it is my understanding, are the two most popular browsers and versions, accounting for the vast majority of web browsers. IE is used by most surfers but Netscape is used by somewhere around 20%. Your page should be viewable by both.

Second, use every spell checking program you have available. This is tedious if you use a regular text-editing program because the code will pop up as spelling errors. Microsoft Word checks spelling while ignoring code. HotDog has a good spell check that takes code into consideration.

Third, use a code checking program. I use CSE HTML Validator. I've tried a few, but CSE does a very good job. It's also available in a "lite" version as shareware which you can try for an indefinite period of time.

Fourth, use an on-line check-up. There are several available. One I've found helpful is website designNetMechanicwebsite design. Others: WDG HTML Validator

Fifth, ask others to look at your pages on-line and check for errors using their computers at home or at work.

Sixth, Validate your html online As still another check, validate it using W3C HTML Validator Service.
You have to remember to do some or all of this periodically because you will tend to make little changes to your sight fairly frequently.


Meta Tags

Meta Tags (AKA, "metatags" without the space between) are part of the code that needs to be in place before the page is launched onto the server.

FREE
Web Site
Analysis
http://
Enter Your Site Then Press Button
Takes 1 Minute

SiteSolutions.Com
Metatags are mostly intended to be seen by search engine spiders. They're invisible to the surfer (unless viewing Page Source in Netscape or Source in IE). Meta tags are not essential to viewing by the surfer but may be required by the search engine to begin its categorization of your keywords, url's and content.

Meta tags tell the search engine the title of your page, the description of your page, the keywords, the publisher and copyright holder and other things you might want the search engine to know. Meta tags can also be used to redirect a surfer to another page or authorize or reject viewing by the surfer on the basis of adult content or kid-safeness. the basis of adult content or kid-safe.

Meta tags are also used to tell browsers whether to cache text and graphics. Some sites want a browser to refresh each time it's loaded -- though this turns off a browser's ability to more quickly load pages if it returns later. Meta tags can also be used to inform browsers about whether the page conforms to kid-safe standards so that the browser can decide if it displays the page or not.


Metatag checker. Get a Free check of title, description and keywords metatags at ABS Metatag Analyzer.

metatag: description & keywords These are important metatags used by search engines. Keywords lists are apparently fading somewhat in importance, but description remains very important (and is likely to be the description used when a search engine lists your page. In your description metatag, try to use as many of your keywords as possible and try to have the best information within the first 195 characters. The description and keywords metatags looks like this:
<META NAME="description" content="This is where you put the description.">
<META NAME="keywords" content="keyword1, keyword2, keyword3, keyword4">

Note: When you type in your description or keywords or anything else on a page of HTML, make sure all information between quotation marks is on the same line (no carriage returns). This is a coding rule. If you use an HTML editor that uses word-wrap, this is okay -- a line may look as if it is broken onto two or more lines on your screen. Simply be certain that there is only one line number for any material between two quotation marks.

1     <HTML>
2     <HEAD>
3     <TITLE>The Wannabe Webster - Website Authoring</TITLE>
4     <META NAME="DESCRIPTION" CONTENT="Do-it-yourself web
        site authoring, promoting and maintenance how-to info for the
        wannabe work-at-home e-commerce webmaster - web page
        design, search engine ranking, credit cards, HTML, metatags,
        keywords, etc.">
5     <META NAME="KEYWORDS" CONTENT="webmaster resources,
        beginner, authoring, website, webpage, design, web site
        development, how-to, webmaster, do-it-yourself, e-commerce,
        credit cards, HTML, metatag, affiliates, search engine,
        ranking, webpage design, keywords, publishing, submission,
        code, free, tips, internet, e-business, optimization, small
        business, starting up, start-up, e-marketing, commerce, web-
        based business, work at home, free stuff, web site,
        ecommerce, ebusiness, marketing, wannabe webster">
6     </HEAD>

metatag: turn off smart tags To turn off Microsoft's new Smart Tags to keep them from enticing visitors away from your site, you need the following metatag:
<META NAME="MSSmartTagsPreventParsing" content="TRUE">

metatag: automatically send surfer to a different page If you want to automatically move surfers that arrive on one page to a different page altogether (if you change an address but maybe someone has the first address bookmarked or you have it cited throughout your site and can't be sure to change them all), you need the following metatag placed in the metatags on the first page:
<META http-equiv="refresh" content="1; url=http://www.domain.com/page.html"

metatag: to stop browsers caching a page or using the cached version of a page. If you make a lot of changes to your site and want to be sure browsers get a fresh view each time they visit, you need to either turn caching off or indicate to browsers that cached information is outdated. To turn off visiting browsers' caching of a page or to mark the page as expired add one or both of the following metatags:
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
OR <META HTTP-EQUIV="Expires" CONTENT="-1">

Metatag Resources. There are several sources of good information about meta tags.
bearzweb.com lists the most widely used metatags & explanations & options.
meta-tags.com offers a hodge-podge of metatag information (sprinkled with a lot of ads).
webdeveloper.com provides a good-sized links page of many sources of detailed info on metatags.
scrubtheweb.com offers a metatag builder.
submitcorner.com offers explanations and guidelines for various metatags.


keywords

Keywords are the keys to a site's success. Keywords are the "key" words that the search engines believe represent your web site. These are the words that search engine users (surfers) will find your site with -- the words and short phrases that a surfer might put into the little search engine input box that starts the search process. If you sell widgets on your site and a particular search engine has your site url associated with the word "widgets," then anyone who types "widgets" into that search engine's input box will get a list of sites that will include yours. You may be the 37,000th url on the list, but you will be there. (Position ranking on search engines is discussed in greater detail in the discussion of search engines.) If the search engine doesn't have your web site url associated with the word or phrase that the surfer plugs into the input box, the search engine won't be offering your site's url.

keywords in a metatag AND keywords in text. Keywords are only "keywords" if the search engines decide they are. Though it is a good idea to put keywords in a metatag, this is important but perhaps not as completely crucial as as in the past when search engines relied on keyword lists to inform them of a site's content.

The current wisdom is that search engines decide what a site's keywords are on the basis of the text (meaningful text) on a webpage -- sometimes, perhaps most times, with guidance from the keyword list in the metatag.

With regard to the metatag keywords list, keep in mind that some search engines may not read past the first 200 characters, while others may read on no matter how long your list is. Search engines don't publish their procedures and this is basically a rumored suspicion. To be safe, have your most powerful keywords listed in the first 150 characters.

Separate keywords with commas. Keywords don't need to be single words (for example, "hypnosis tapes,stress management,relaxation" in the metatag would be considered to be three keywords).

Avoid repetitions of keywords unless used in coherent sentences. Your keywords should be everything relevant but the list in your metatag or the list you furnish search engines when you manually submit -- and anywhere else on your pages -- avoid meaningless repetitions. Search engine spiders ignore words that seem repeated without purpose. They are programmed to watch out for "spamming" -- repetitions of words to artificially make certain words seem more important. This was a very successful tactic in the earlier years on the internet and spidering programs try very hard now to avoid getting tricked like this.

A 5 step strategy for your keywords list. First write out a list of the words you think should be listed as likely keywords for surfers. (Keyword Thesaurus) Then go to a couple of the more popular search engines and do a search for those words. Go to the sites listed in the first few rankings, look at the Page Source for each and see what other keywords they use. You'll find a bunch of new ideas for important keywords. Then use one or more of the keyword frequency tools that can help you see how many times those words get searched for -- and what other similar keywords there are that might be more or less surfed -- Overture's Tool, BrainFox.com's tool, Google's Zeitgeist. Then write the text for your page, including all the information you want to use and using the keywords on your list. Then put together your keyword metatag, using the keywords you think are going to be your primary targets for high search engine listings and put them in the first part of your metatag list. (By the way, as explained elsewhere on the site, if you pick words that pit you against millions of competitors you probably won't ever get yourself into the top rankings. If you pick words that only a handful of people ever search, you won't be getting much traffic even if you get number one position on all the search engines. If, however, you initially target keywords that put you in competition with 40-60K other sites, you may have a good chance of getting into top search engine rankings within a few months of gathering reciprocal links. If you have a site that people will want to bookmark and return to, ranking high on these moderately competitive words can then pull you up on rankings for words that have a much greater competitor base.)


"see"-ability

Resolutions. Design your page so it looks good and sells whether the viewer is looking at it at 640x480, 800x600, 1024x768 or whatever. July, 2001 data on resolutions suggested that 61% of the browsers were browsing at 800x600. If it looks okay at 640x480, it will probably look okay, just smaller, at any of the other resolutions -- but the other way around is not the case. Text that looked like it was okay at one resolution can be pathetically broken up at a lesser resolution. Relationships between text and graphics can change radically. Unless you build your site using 640x480 resolution, its a good idea to check different resolutions every once in awhile to see what they do to your page.

Browser compatibility. Not only do webpages look at different resolutions, they load and look differently on different browsers. Some browsers don't understand the code that others do or may interpret it in different ways. Most recent info articles site Internet Explorer 5 as the most popular browser and Netscape 4x as the second. These two account for the vast majority of browsers with IE5 being about 3 times more popular than Netscape 4x. If you make sure you are compatible with those two browsers, you've covered most of the surfers.

If you don't already have website designwebmaster resourcesNetscape, download it and install it. You can run both Netscape and IE at the same time. (Note: Netscape 6x is out but not as popular.) If you have both IE and Netscape loaded on your computer, you can check how your site looks on both as you work on it. Also, use a service like website designNetMechanicwebsite design, which -- among other tasks -- reviews your pages on the basis of compatibility with Netscape 2.x, 3.x, and 4.x and IE 3.x, 4.x, and 5.x. There is also information about WebTV surfers and the differences in formats at Webreferences. And you can download a WebTV browser simulator at MSNTV.com.


Accessibility. As with curb cuts and elevator labels of Braille, the internet can be browsed by individuals with visual impairments if the website is handicapped accessible. That is, if the website makes itself accessible through an avoidance of certain coding problems, like using ALT= with images, etc. These links can help you meet the standards: Bobby and Accessibility Guidelines.

restrict-kids filter - ICRA This is important if your site is NOT an adult/XXX site. Internet Explorer and some other browsers and several filter programs designed to keep kids from being exposed to pornography may refuse access to any internet page that doesn't have a meta tag labeling the site as kid-safe by the Internet Content Rating Association (ICRA). It's free. Just visit the site for explanation, how-to's and code to place on your pages.


add bells & whistles

Some little tips
Mouseover Link Description
Similar to the image alt tag, links can take a "title" or description attribute that can be seen when the user hovers over the link. This may be useful for search engine optimization because some may credit you for more relevant keywords in the title.
Syntax: <a href="http://www.wannabewebster.com/" title="Free Webmaster Info">wannabewebster.com</a>
example: wannabewebster.com

Status Bar Description
When a user's cursor hovers over a link, a message can be displayed in the browser's status bar (at bottom left of the screen), instead of the usual link url. In the example below, the words "Free Webmaster Info" will appear.
Syntax: <a href="http://www.wannabewebster.com" onmouseover="window.status='Free Webmaster Info'; return true" onmouseout="window.status=";return true">Free Webmaster Info</a>
example: Free Webmaster Info

Remove Link Underline
To remove the underline from hyperlinks:
Syntax: <a href="http://www.wannabewebster.com" style="text-decoration: none">Check out WannabeWebster.com</a>
example: Check out WannabeWebster.com

Open Page in a New Window
For use when you want a hyperlink to open a new page for wherever it is taking the browser. When you do this, a site visitor that clicks on a link will open a new page, keeping your original page open. This avoids the situation when visitors (especially customers) follow a few links and can't easily get back to your site.
Syntax: <a href="http://www.performance-anxiety.com/" target="_blank">performance-anxiety.com</a>
example: performance-anxiety.com

Stop Page Caching
Web browsers store Web pages on a user's computer so they load faster on repeat visits. However, these cached pages mean new content may not reach the visitor. To prevent page caching, we can use a simple Meta Tag, inside your page's <HEAD> tags.
Syntax: <META http-equiv="Pragma" content="no-cache">

website design counterCounters. Counters allow you to determine how much traffic you're getting on your various pages. There are several kinds of counters. Counterguide gives what seems to be a good overview of the different kinds of counters available. Adbility offers a links page of brief reviews of several counter services -- free and fee. I have found Jinko does a great job affording me 120 counters for a minimal fee, though they have no statistics available for you as to where people have come from, etc. website design123counts offers (for a small fee) to keep track of real-time statistics on how many page views your web site is receiving overall and for the last seven days and how many unique visitors your web site is receiving each day, month and all-time.

Counters/trackers website design counter: Webstats and Site Meter keep track of how many visitors you get, where they come from, how long they stay, where they go. You can get their counters for free or, with a few more features, for a small fee. website designIndexTools.com - Live Web Tracking and Traffic Analysis keeps track of how many visitors you get, where they come from, how long they stay, where they go and offers a wide variety of very cool services to track your visitors and how long they say. This one costs about $10/month but you can get a free limited-time trial to check it out before you buy. website designHitsLink offers for a small fee to keep track of real-time statistics on how many page views your web site is receiving overall and for the last seven days and how many unique visitors your web site is receiving each day, month and all-time and tracks where visitors come from.

Adding audio. Adding audio to your site can be an iffy idea. Many people find background music invasive. Many block audio because of fear of viruses, etc. If you do have a need to put audio on your site, the following may be helpful: nch.com.au, hitsquad.com. If you have an urge to put music on your site, check out Music for Web Pages 101 for free add-audio resources for webmasters and free 6 to 60 second WAV songs that are encoded, making them smaller and easier to load. (Check out this site's use of sound -- time4somethingelse.com.)
Audio Adding Resources:

flashaudiowizard.com offers a try-for-awhile, inexpensive-ish ($67) software that makes a .wav file into streaming flash audio for the website, complete with nice CD-player -like controls. This still takes a bit of time to download. A three minute vocal file on my website is a 3M flash file that needs to download. I put these on separate pages after seeing how long they took to download. Check out this example of flashaudio added to my website so that customers can listen to an excerpt of a hypnosis recording.

blazemp.com offers a try-for-awhile, inexpensive-ish ($50) software that makes a .wav file from MP3 or CD. I used this to take brief 1-3 minute excerpts from 30-45 minute long CDs, after which I used the above flashaudio to put it on my website.

SitePal offers an animated little person presented via streaming audio and video that is done through the SitePal site. I initially was introduced to this idea by a fellow webmaster but decided that I would do it myself without the animation. But check it out.



Adding a bulletin board. Adding bulletin board to your site can be a popularity building idea. If your site focuses on any sort of topic, a bulletin board can be a place for people to post ideas, concerns, questions and answers. This is an area that I am toying with, myself, so I can't readily give a comparison of how hard these are to set up but they are bulletin boards that are available for free or very little: BOARDhost.com, CoolBoard.com, CustomizedCGI.com, Dream-Tools.com, Everyone.net, EZBoard.com, ForumCo.com, HomePageTools.com UltraBoard, MyComputer.com, and SiteGadgets.com.

Click here for Instant Community

adding a site search engine. You can add a search engine to your site, too. Check out the search box at the top of this page in the page index. If you plug in a word or phrase, it will return results on which pages those words appear. FM SiteSearch offers the cgi code and instructions to add free search engine capability to your site (for small to medium sized sites). WhatUSeek offers free search engine capability that you can add to your site (searching your site or searching the web through Chubba search). FreeFind offers free search engine capability also. FusionBot offers free search engine capability and, for a fee, with more features.

Adding forms to gather info. Information about adding forms to gather comments, information or other data: Web Designers' Paradise; Forms Tutor; iDocs Forms Resources; TutorMatrix Forms Tutorial; Weballey.net; HTML Clinic.

Adding a guest book. You can set up a guest book for people to list their comments and leave their urls. The utility of this feature is a little iffy, but if it sounds good, here are some sites to check out: Alxnet.com, DreamBook.com, GlobalGuest.com, Guest Gear, GuestPage.com, HomePageTools.com GuestBook, LPage.com, and theGuestBook.com. .

Adding a pop-up window. You can have a little window pop up at the same time as your webpage. Advertizers call these "pop-unders." Here's the code to add at the bottom of your page of html code, just before the </BODY> tag and adjusting the variables as needed:
<script language="Javascript">pop1=window.open("http://www.website.com/popup.html",
"pop1","toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars= no,
resizable=no,width= 450,height=180" ); window.focus()</script>


Passwording pages. You can set up a sub-directory on your server that requires passwords for pages. This requires having a separate area (easy to set up) for pages that you want to restrict access to. When someone tries to access a page in this area a box appears and asks for a user name and password. I found several links on the internet that briefly discussed setting up passwords but basically found that the assumption was that I had a lot of knowledge that I didn't have, but you should look them over if you want an idea of the procedure to use: htmlgoodies.com, mirage.golden.net, alts.net, HTML Writers Guild. I ultimately found it was most effective to speak to tech support at my server. They set it up within a few hours.

More Stuff.

Non-underlined Links

Add the following code between </TITLE> and </HEAD> tags:

<STYLE TYPE="text/css"> <!-- A:link {text-decoration:none} A:visited {text-decoration:none} --></STYLE>
Mailto link with subject

<a href="mailto:billg@microsoft.com?Subject=Heya">Email Billy Boy</a>
Adding Music

One tag that will work with Netscape, and one tag that will work with Internet Explorer. To place the code for background music that will work with both browsers into your web page, simply use this code:

<EMBED SRC="soundname" AUTOSTART=TRUE LOOP=TRUE WIDTH=145 HEIGHT=15>
</EMBED>
<NOEMBED>
<BGSOUND SRC="soundname">
</NOEMBED>


Change the attributes to this tag by changing the AUTOSTART, HIDDEN and LOOP attributes from TRUE to FALSE, by changing the WIDTH and HEIGHT attributes per your preference and eliminating the CONTROLS="hidden" attribute.
put today's date on your webpage


<font color="brown">
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
document.write("<center>" + lmonth + " ");
document.write(date + ", " + year + "</center>");
// End -->
</SCRIPT></FONT>



Uploading your webpages to your server

From your computer to the internet: ftp client. Uploading your website's pages to the "webhost" (also called "server") you've chosen for your website is also called "launching" your web pages. (This is a task that is already done if you have a server/webhost where you create and edit your pages online.) Launching/uploading your site's pages in their basic form as html files and graphics files is done by way of a program that resides on your computer and is called an "ftp client." The most popular ftp programs are available as shareware or as functional free demos -- usually named something-FTP or FTP-something. I like WS_FTP, available from most shareware sites (i.e., Tucows, Sharewarejunkies). Another very popular ftp client is cuteFTP.

When you sign up with a webhost, they will work out with you an account name and a password and will give you the the host name of your account. You plug these into the ftp program you are using at the program connects you via the internet to the server and gives you access to the directory on the server where your pages will reside. You then upload each page's html file and any graphics that are involved on each page. The ftp program functions as a file manager -- like the one you use on your computer -- allowing you to make, delete and rename subdirectories and add, rename and delete files.


Page check-up services, programs

As already mentioned above, it is very important that your code is right, your graphics are as compressed as practical, your spelling is checked, your page is browser compatible and your load time is brief. Of the programs that reside on your computer, CSE HTML Validator has so far been very valuable while the others I've found aren't worth mentioning.

There are several programs that check your page, but the best I've found is NetMechanicwebsite design which, for a small fee, checks all my pages each week and sends me an email directing me to the results of the analysis. Weekly has been very helpful because I find reasons to tinker with and tweak several pages every week -- but you can get it to check your site for nothing (though not weekly) -- check it out.


WebSite Design Resources

software
HTML Library 4.0 by Stephen LeHunt
An excellent free library of HTML facts and how-to's that is no longer being updated -- but it's still a great resource to have. Download it!

CSE HTML Validator
A great utility to check webpage code for errors before you load it onto your server. Available in a great Free version or a much more functional version for a moderate price.

online
Baby Steps
A website focused on the beginner webmaster's needs. Lots of resources.

Web Site Owner
Has a wealth of information and recommendations for beginners and more advanced webmasters.

Bears Webworkswebsite design
Web site design, graphic design, submission services, site consultation, meta data implementation. Affordable web site design services for small and large businesses and individuals needing a unique site design. Bearz guarantees "an affordable site design."

Colin.Mackenzie.org Web Design Tips
Some brief tips on website design.

Dan's Web Tips
Lots of resources for the beginner and intermediately skilled webmaster as well as some stuff that advanced folks might find helpful. Lots of bells and whistles info and down-to-earth info on dealing with coding issues while using WYSIWYG editors.

DMOZ Web Authoring Guides
Listings for web authoring resources on the DMOZ directory.

GrantasticDesigns.com
Website design tips, banner design tips, graphics design tips, online marketing tips.

iDocs
An extensive HTML resource with information and a nicely detailed tutorial on coding forms so you can have a form for gathering information on your site.

the Wannabe Websters Links
A compilation of ideas and information about a variety of webstering issues.

Web Designers' Paradise
A compilation of ideas and information about a variety of webstering issues.

Webmaster-Resources
Just a hodge-podge of a few resources for websters. Not extensive but worth siting here.



Note:   Recommendations on this or any other page on my web sites are candidly made on the basis of what I really believe, but keep in mind I'm not suggesting I'm all-Knowing and I'm offering no guarantees or warrantees.    website designThe little blinking star next to text links and graphic ads indicate services or products from sites that will pay me a commission if you purchase something -- if you arrive on their site from this site. If you decide you're going to try or buy something refered to on this site, you can support this site by trying and buying services through the links on this site.                g. johnson




the wannabe webster home page
a product to sell  domain names, registration  website design, website creation
accepting credit card payments online  onto search engines  website maintenance  webmaster & website etceteras  free check-ups & useful code page
the best of links  website design & development links
ecommerce quintessentials links  quintessential websters
search engine submit page urls  add URL/reciprocal link  wannabewebster@pain-drain.com  about the Wannabe Webster







Labeled with ICRA
    


this site made, managed, mangled & muddled by the Wannabe Webster