Your Guide to Professional Web Site Design and Development	• HTML Tips • HTML Codes • Web Development	• Web Design Tips • JavaScript Codes • 216 Web Safe Colors	• CSS Tutorial • JavaScript Tutorial • ASCII Character Codes

| Web Site Development | HTML Codes | HTML Tips | Web Design Tips | Javascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Web Site Building If you're doing business on the internet, one of the most important aspects of your businesses success is your web site. If your web site doesn't look professional, no matter what product you're offering, your chance of success will be minimal. Take your time and make sure you understand the full picture before you begin. Before we begin this tutorial, the absolute best advice I can offer is this…If you really want to succeed on the Internet in the shortest amount of time, I highly recommend Ken Evoy's highly acclaimed online business building system, Site Build it. This highly professional system was specifically designed to enable anyone to quickly and easily create a successful online business - from building and hosting your web site, to publishing an ezine, developing products and marketing. The Site Build it system nearly guarantees your success. All the tools, all in one place, and all for one price, are all tied together into a straightforward, integrated, step-by-step process that succeeds. The following tutorial is an excerpt from Web Design Mastery, written by Shelley Lowery. The appearance of your website is one of the most important aspects of your success. Your product or service will literally be judged by the appearance of your website. Poor web design is one of the leading causes of small business failure. There are literally thousands of home-based Internet businesses struggling to make a living online. The problem is, they don't take the time to learn how to properly design their sites. Web Design Guidelines Your main page should specifically let your visitors know exactly what you're offering. If your potential customer can't find your product or service, they definitely won't waste a lot of time looking for it. They'll go on to the next site and probably never return. They're visiting your site for a specific purpose. They want something your site offers. Create a page to display your Privacy Policy in regard to the personal information you collect from your visitors. Explain your reasons for collecting the information and let them know if the information will be given to or shared with a third party. We'll talk more about this later. Create a page about you and/or your company. Include your name, company name, photograph, biography, address, phone number and email contact information. Display your copyright information at the bottom of each page. It's best to include both the word Copyright and the © symbol, as some countries don't recognize one or the other. Your copyright might look like this: Copyright © year Company Name All rights reserved. Keep in mind, your visitors may enter your site from pages other than your main page. Make sure you include good navigational links on every page. Place your navigation links together at the top, bottom, left or right side of the page. Use tables to neatly align your links and maintain a nicely organized and uniform appearance throughout. Try to keep the number of clicks required to get from your main page to any other page on your site down to three or four and place your company logo on each page. Use caution when selecting your background and text colors. Busy backgrounds make text difficult to read and draw the attention away from the text. In addition, always be consistent with your background theme on each page of your site. Select your colors very carefully, as colors affect your mood and will have an affect on your visitors as well. Bright colors such as yellow and orange, cause you to become more cheerful or happy, while colors such as blue and purple have a calming effect. Dark colors such as brown and black have a depressing effect. A good rule of thumb is to use colors based on the type of effect you're trying to achieve. ALWAYS check and double-check your site for spelling and grammatical errors, and make sure your images and links are all working properly. If you have several errors, this will make your site appear to be unprofessional. If you are designing your site using an HTML editor, use spell check. If you must use frames, use them sparingly. Frames, if not used properly, can make your site look unprofessional. Avoid making your visitors have to scroll from side to side to view your content. This can be very irritating and cause your visitors to leave. In addition, it is difficult for Search Engines to index sites made up of frames. If you must use Java on your site, use it sparingly. Consider using JavaScript instead. If you're using pop-up windows to display special offers or ezine subscription info, try to use a JavaScript that utilizes cookies. That way the window will only be displayed to your visitors the first time they visit your website. You can find one here. View your website through different browsers and screen resolutions so you can see how your visitors will view your site. Click here to test your site's browser compatibility. Always be consistent when using font styles and sizes. Avoid using large font sizes, as this looks very unprofessional. Never use tables with standard borders, as they look very unprofessional. If you'd like to use tables with borders, consider using a color border that is size one or two. You'll learn more about tables and borders later. Continually add new content to your site. Give your visitors a reason to keep coming back. Web Design Tips When designing your website's main page, instead of trying to cram all of your information into one page, consider creating sections. These sections can contain highlights of your information with a link to further information. You can set your sections up in tables with colored heading sections for information such as news, articles, products or whatever you'd like. It's much better to keep your main page down to the most essential elements. You can then use links to additional pages to provide the detailed information. A good rule of thumb is "less is more." In other words, keep your main page as small as possible, while at the same time, include your most important elements. To enhance your page, you can format your text using bold headlines, colored table cells, and graphic bullets and/or arrows. If you use the same graphic bullets and arrows throughout your page, you can enhance your page's appearance, but you won't add any additional time to your site's load time. When you reuse an image, your image only has to load once. When the image has loaded, it will instantly be displayed in all of the other locations. Web Design Mistakes Poor load time Poor overall appearance Spelling/Grammar mistakes No contact information Poor content Poor navigation Broken links and graphics Poor browser compatibility Large slow loading graphics Too many graphics Pages scrolling to oblivion Multiple use of animated graphics Animated bullets Too many graphic and/or line dividers Busy, distracting backgrounds Multiple banners and buttons Poor use of frames Large fonts Pop up messages Over use of Java Poor use of tables Poor organization Different backgrounds on each page Over powering music set to AutoPlay Confusing Too much advertising Large Welcome banners Multiple colored text Text difficult to read No Meta tags Multiple use of different fonts Under construction signs Scrolling text in the status bar Large scrolling text across the page Poor use of mouse over effects Take your time and design your site very carefully. It may take you a little longer, but it will be well worth the extra time in the long run. Getting Started If you're new to web page design, let's first begin with how a web page is created. A web page is created using a language called, Hypertext Markup Language, better known as HTML. You can write your own HTML within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you. HTML codes, also referred to as tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters. The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket. <font size=2> An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser. <font size=2> Attributes are only contained in the opening tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in quotes. <font size=2> Basic HTML Document Structure Below is a very basic HTML document structure. It contains the opening HTML tag, the TITLE tag enclosed between the opening and closing HEAD tags, the opening and closing BODY tags and the closing HTML tag. All of your text, graphics and any additional HTML codes will be placed between the <BODY> and </BODY> tags. <HTML> <HEAD> <TITLE>Your Web Page Title</TITLE> </HEAD> <BODY> </BODY> </HTML> Each HTML tag above contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets. Example: <HTML> The closing tag contains a forward slash followed by the command enclosed with brackets. Example: </HTML> The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action. The proper way to write HTML is to place your closing tags in sequence with the opening tags. This is an example of a properly written code: <B><I>Example</I></B> This is an example of an improperly written code: <B><I>Example</B></I> Creating an HTML Page Begin writing your HTML by creating your document's basic layout. Copy and paste this code into your text or HTML editor. <HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes and examples, visit our HTML Codes Chart. </BODY> </HTML> <HTML> - Begins your HTML document. <HEAD> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <TITLE> - The TITLE of your page. This will be visible in the title bar of the viewers’ browser. </TITLE> - Closes the <TITLE> tag. </HEAD> - Closes the <HEAD> tag. <BODY> - This is where you will begin writing your document and placing your HTML codes. </BODY> - Closes the <BODY> tag. </HTML> - Closes the <HTML> tag. For a complete list of HTML codes and examples, visit our HTML Codes Chart. Saving an HTML Document Once you've written some HTML, you will need to save your document with an htm or html extension. If the page you’re saving is the main or opening page of your web site, it must be saved as, index.htm or index.html. When you acquire your own domain, your server will look for a file called index when your link, http://www.yourdomain.com/ is clicked on. If you're saving a page other than your main page, try to save it using the page's primary keyword phrase for higher Search Engine ranking. Your file name should look something like this: index.htm Viewing an HTML Document If you’re using a text editor to write your HTML, and you'd like to preview your work, you must view your new page through your web browser. Open your web browser and go to "File" - "Open" on the browser toolbar and then "Browse" through the folders to locate the new page you created. Double click on the file to select it and click on "OK" WYSIWYG Editors If you decide to use a WYSIWYG (What You See Is What You Get) editor, which is highly recommended, here are a few of the most popular: Coffee Cup DreamWeaver HotDog HotMetal Pro HomeSite Microsoft Frontpage Although this mini tutorial provides you with a basic overview to assist you in creating your own web site, there is much more to creating a successful web site than simply learning the basics. For a complete step by step web design course, and over fifty free web page templates, visit my Web Design Mastery site. To your success! Web Design Information: Web Development HTML Codes HTML Tips Javascript Snippets 216 Safe Colors Symbols Web Design Articles: Selecting a Quality Domain Name Selecting the Best Web Design Language for Your Project Bring Your Web Site to Life With PHP The Birth of a Professional Web Site (10 part series) Increase Your Traffic by Recovering Your Lost Visitors Using HTML Tables to Format Your Web Page HTML Forms -- Back to the Basics and Beyond Part One - Basic Forms Tutorial HTML Forms -- Back to the Basics and Beyond Part Two -  Advanced Forms HTML Forms -- Back to the Basics and Beyond Part Three - Form Tips & Tricks 35 Deadly Web Site Sins that will Kill Your Business! Selecting A Quality Web Host Mini-Sites -- Highly Targeted Sales Generators Spice Up Your Web Site with JavaScript Use CGI to Automate Your Web Site Give Your Graphics A Professional Look without the Price Use JavaScript to Dynamically Update Your Website 10 Website Essentials to Increase Your Sales Is Your Domain Name A Trademark Infringement? Steps to Optimizing Your HTML Codes The Secrets to Building a Successful Website Tutorials: Creating an Ebook Internet Marketing Strategies Internet Marketing Tools Developing an Internet Business Developing a Professional Web Site Free Content Webpage Optimization Hosting Your Site Promotion Internet Marketing Web Site Building Listing Your Site Internet Advertising Developing Traffic Web Development Strategies Back