WebMastersLoom

Ever since I’ve been doing SEO work, I’ve always griped and complained about FrontPage and all the extraneous code it puts in the section of the page, etc.

Then recently, I had the opportunity to visit with a group of advanced search engine optimizers, and I was shocked to find that many of them use FrontPage and love it.

FrontPage

The first thing I learned is that there are ways to keep out the extraneous code! With FrontPage, you can remove the code, but it keeps comes back again and again and again. But, there’s a way to get rid of it forever.

How to Get Rid of Extraneous Code and Headers

Dave Barry, Webmaster of SmartCertify Direct (http://www.smartcertify.com), explains how:

• FrontPage 97 or 98 users:
• Click on Start, then Find, then Files or Folders. Search your hard drive (generally your C drive) for a file named frontpg.ini. Click on the file.
• When it opens, look for a line that says, Version 3.0.?
• Add this line under Version 3.0:
• HTMLREFORMAT=0

The next time you use FrontPage, remove the extraneous code and headers, and they won’t come back.

FrontPage 2000, 2002, or XP users:

• Look at the menu bar at the top of the Open Web. Click on Tools, then Page Options.
• You’ll see an option box. Under HTML Source, at the top of the page under General, you?ll have this choice:
• When saving file(s):
• Preserve existing HTML or Reformat using the rules below
• If you choose Preserve existing HTML, and if you delete any extraneous code and headers, you won?t see the code or headers on your pages again.

(To view an example screen shot showing the above, click here: http://www.academywebspecialists.com/newsletters/fp2.gif)

Dave added:

To disable the HTML changing of FrontPage 2000, a registry entry is also needed. This registry file (http://www.academywebspecialists.com/newsletters/noreformat.zip) will do it automatically. Just open the file with Notepad to verify its authenticity before using it.

The attachment and registry entry must occur on the server.

Or, if you want to edit the registry manually, here is the code:

[HKEY_LOCAL_MACHINESOFTWAREMicrosoftShared

ToolsWeb Server ExtensionsAll Ports]

“ReformatHtml”=”0″

Add-In that Generates META Tags

FrontPage also has an Add-in that will delete META tags without going into the source view. It?s called META Tag Maker 2002, and it will create and manage META tags through one dialogue box, without having to go into source view.

http://www.microsoft.com/frontpage/downloads/addin/searchdetail.asp?aid=80

In fact, the FrontPage site has an amazing number of Add-ins for FrontPage that are free for the taking. http://www.microsoft.com/frontpage/downloads/addin/def ault.asp

Some of the more popular Add-ins include:

Multimedia/Special FX, Windows Media Add-in, that will easily embed audio and visual into your Web pages;

Clear Teal Template, that is a 16-page easy-to-use Web template that lets you easily create a Web site;

Scripting/Database Tools, J-Bots Plus 2002 Trial. According to the FrontPage site, J-Bots components make FrontPage Web sites more customized by adding JavaScript-enabled features, but you don?t have to know how to write code or cut and paste. Simply fill in dialog boxes, click Generate, and the JavaScript is created for you.

Other Advantages for Using FrontPage

* Server side includes are easy with FrontPage. Before we go on, let me explain what ?server side includes? are.

Server side includes (SSI?s) generate parts of Web pages dynamically on the ?server side.? They allow you to add customization features to your Web pages, such as an e-mail form. Unlike other forms of dynamic content, or content that?s created on the fly, server side includes have a normal URL that?s easy for users to remember and doesn?t create problems for the engines.

In other words, SSI?s embed special commands into an HTML document that tells the server to perform specific actions when a user requests the page. The server then creates the Web page on the fly by merging files or inserting requested information.

How might you use SSI?s on your Web page? Let?s say you want to add a form to your Web site for your users to complete to sign up for your newsletter. You could create the form using SSI?s.

For more information on creating SSI?s with FrontPage, visit: http://www.microsoft.com/frontpage/using/default.htm and click on FrontPage Server Extensions.

* Dave Barry, who recently created two major sections of the Dell Web site using FrontPage, manages 40 to 50 Web sites at SmartCertify, and he easily moves back and forth between those sites using FP. With that many sites, there is a lot of duplicity, and he can effortlessly share objects with FP or edit multiple Web sites. With FrontPage, you can cut and paste between the sites, use shared borders, and easily drag and drop files, thus saving a lot of time versus handling each site separately.

If you?ve ever wanted to experiment with Cascading Style Sheets (CSS), FrontPage also makes using them a breeze. You can even create DHTML using FrontPage.

Dave created a video on how to copy and paste, how to use Cascading Style Sheets, and how to use shared borders with Front Page:

http://www.smartcertify.com/seo/frontpage.asp

(Author Note: When viewing these videos, make sure you have the latest version of Microsoft Windows Media Player. To download the latest version (7.1), click here (http://support.microsoft.com/default.aspx?scid=kb;en-us;Q299321). Also, I found that I was unable to view the videos if my firewall (Zone Alarm) was running.)

* Another benefit to using FrontPage is being able to create virtual directories with ease. As you know, when you specify a home directory, all of the subdirectories beneath than home directory automatically become subdirectories of the Web site as well. However, you can also designate a folder located elsewhere on the system as a subdirectory of the site by creating a virtual directory out of it. A virtual directory is a directory or folder on a server that is not in the actual server directory structure.

Again, Dave created a video on how to create virtual directories using Front Page:

http://www.smartcertify.com/seo/iis.asp

* If you want to create a database, it?s no problem with FrontPage. It will virtually create a database for you and import data without any database knowledge at all. The program works with Access, SQL, Oracle, and ODBC, and you can set up an SEC-compliant database within 30 seconds and begin working with asp pages with no prior knowledge whatsoever.

Click here for Dave?s video on how to create a database using FrontPage:

http://www.smartcertify.com/seo/dwizard.asp

* To Lee Davies of #1 Internet Marketing (http://www.1-internet-marketing.co.nz), the main advantage to FrontPage is that you can so easily manage all your html pages from the folders section.

For example, ?If you were to rename an image, which is something that needs to be done when optimizing, it will rename the links to the images from every page,? he explains.

* What I kept hearing again and again as I interviewed users of FrontPage is that FrontPage saves you time in creating Web pages, because it?s so easy to use. Don Hammond with DonOMite (http://www.donomite.com) explains,

?Straight HTML pages are a breeze with FP. I know a lot of programmers scoff at using it, but it means I can crank out a basic HTML page in seconds rather than minutes. And when I get paid by the job, it means more $/hr to me.?

* Dawn Rowlett with Web Submission Services (http://www.internetmarketingwebsites.com) explains further:

?From the first day that I was introduced to FrontPage, I was instantly able to catch on to some of the many features because it was so easy to use. I think the most beneficial factor to the program for me was that I was able to go in and design a page, knowing nothing at all about HTML. I could include hyperlinks, tables, images, change colors, backgrounds, insert text, create paragraphs, etc. with absolutely no background in coding. I was able to do all of this on my first day with the program!

?I remember one time in the beginning when I was involved in a discussion with a designer who was using another HTML editor and was completely stuck on the coding of how to create a simple table. My first thought at the time was, using Front Page, that is such a simple task.?

* Many professional SEO?s also like to use FrontPage because it?s a program that?s simple enough for their clients to use. So, when the SEO turns the site back over to the client, the client can easily make changes with FrontPage without having to know HTML. As Tom Altman with RSM McGladrey, Inc. (http://www.rsmmcgladrey.com) explains,

?Most of the folks already have the office suite, so they are used to using Word and the like. FrontPage is not that much different, and it lets them maintain their own site.?

Make FrontPage Work the way YOU Want it to!

At the Microsoft FrontPage Server Extensions Resource Kit, you?ll find links to all of the possible ways to make FrontPage work for you, instead of the default values after installation.

http://officeupdate.microsoft.com/frontpage/wpp/serk/apndx03.htm

Take a Free Course in using FrontPage!

Dave Barry at SmartCertify Direct (http://www.smartcertify.com) created a free course in using FrontPage. Simply register at the following URL, and take the free course:

http://www.smartcertify.com/seo/register-seo.asp

In Conclusion

As you?ve seen, some very experienced Web designers and search engine optimizers use FrontPage as their ?editor of choice.? Its ease of use and variety of ready-made templates make it a program that?s easy for beginners yet has the functionality that advanced designers need.

It also allows the designer or SEO to get a page designed quickly and easily, and time adds up to money for a busy SEO.

As Nancy Nelson with Search by Design! (http://www.search-by-design.com) said,

?Is it a perfect tool? Certainly not, but FrontPage combined with minor HTML knowledge can take you a long way…?

So FrontPage users, don?t be ashamed to admit that you use FrontPage! Some of the best Web designers in the industry use it, with good reason.

Special Thanks to Dave Barry

Dave Barry with SmartCertify created the videos, screen shots, and free tutorial available in this article. Plus, he gave me the work arounds for getting rid of extraneous code, and he verified the accuracy of the content. Thank you Dave ? there?s no way I could have created this article without your help.

Copyright 2002 Robin Nobles and Dave Barry. All rights reserved.

As a webmaster you already know how important it is that your web pages download fast. In a nutshell, if your pages are slow, then you’re losing visitors. And if you’re losing visitors, you’re losing money.

To speed up your download times, most web design experts will suggest that you optimize your GIFs and JPGs so that they download faster. They’ll suggest that you make your images smaller or remove them altogether. Or they’ll simply suggest that you put less stuff on your pages.

All of these methods work. The problem, however, is that they all involve doing things that you don’t want to do. You don’t want to squeeze any more quality and color out of your images. The same goes for your content - you put it there because you want it there. Basically, there’s only so far you can go with these approaches before you really start to ruin your page.

Fortunately, there’s one way to get your pages opening faster without having to compromise your images or your content. This is a simple and effective method, but one that is rarely discussed by the web design experts.

To understand this approach, it’s important to recognize the difference between “perceived” download time and “actual” download time. The perceived download time is the time it takes to have enough stuff displayed on your page for the visitor to be able to start studying your content. The actual download time is the time it takes for the entire page and all its contents to be fully downloaded.

The perceived download time is the one that really counts. Why? Because once your visitor has something before his/her eyes to read or look at, then there is much less risk that he/she will click away because your page is taking too long to load.

So how do you improve your perceived download time?

Simple, you break the content of your page down into two or more tables.

You see, web browsers will not start displaying the contents of a table until it has compiled the entire table to the end. Once a table is compiled it will display, and the browser will start compiling the next table.

That means that if you place the entire contents of your page inside one big table, the browser will have to compile the entire contents of your page before anything will be displayed. The result: your visitor spends all that time staring at a blank screen.

However, by putting some of the content towards the top of the page into a table of its own, the rest of the page can be downloading farther down, while your visitor is busy studying the stuff that’s already displayed.

I’ve used this method to great effect on my own website. I went from an actual download time of up to 20 seconds (staring at a white screen) down to a perceived download time of rarely more than 3 seconds (often as low as 1 second)!

The ironic thing is, my page is now bigger (in terms of Kilobytes) than it was before I made the change. That’s because 2 tables take more HTML than one.

But boy has that extra bit of HTML paid off!

Make a test page now and try it out. Your hit counter will thank you for it!

CSS or Cascading Style Sheets allow you to implement a few neat effects on your webpages easily. You can implement these CSS effects on your site by simply copying and pasting the code.

ROLLOVER COLOR TEXT LINKS

Have your text links change color when the mouse passes over them by inserting this code into the HEAD of your document:

<style type=”text/css”>
<!–
A:hover {color:red}
–>
</style>

LINKS WITH NO UNDERLINE

Remove the underline from any or all of the links on your page by putting this in the HEAD of your document:

<style type=”text/css”>
<!–
A:link {text-decoration:none}
A:visited {text-decoration:none}
–>
</style>

Or, remove the underline form individual links by forming them like this:

<a href=”page.html” style=”text-decoration: none”>link</a>

LINKS WITH A LINE ABOVE AND BELOW THEM

This is an interesting look that works especially well as a hover attribute for your links, but can also be applied to all of your links. It will show the normal underline and a line above the link:

<style type=”text/css”>
<!–
A:hover {text-decoration:overline underline}
–>
</style>

HIGHLIGHTED TEXT

Highlight important text on your page or words you want to stand out, easily:

<span style=”background-color:yellow”>highlighted text</span>

Try adding it to your link hover for a neat effect:

<style type=”text/css”>
<!–
A:hover {background-color: orange}
–>
</style>

BACKGROUND IMAGE THAT ISNT TILED

This will create a background image that doesn’t repeat:

<style type=”text/css”>
<!–
BODY {background: #ffffff url(bg.gif) no-repeat}
–>
</style>

You can also center it, however it will be centered as the background of the entire document, not centered on the screenful:

<style type=”text/css”>
<!–
BODY {background: #ffffff url(bg.gif) no-repeat center}
–>
</style>

When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.

<span style=”color:yellow;”>Text</span>

Colors can be specified according to their names, for example “yellow”, “green”, or “blue”. In many cases, these simple color names will work. But what if you want to specify a more sophisticated color like “cornflowerblue”? A particular browser may not recognize a particular color name. It’s more reliable to specify colors with an “RGB triplet”.

An RGB triplet specifies a color based upon the amounts of red, green, and blue, on a scale from 0 to 255, required to create the color. For example, to create the color cornflowerblue you need red=100, green=149, and blue=237. We could then specify the color of the text within a span using the rgb function as shown below.

<span style=”color:rgb(100,149,237);”>Text</span>

This will work fine with style notation, but what if you want to use straight html. Html doesn’t recognize the rgb function. In that case, you can specify color using “hexadecimal” notation. Whereas the decimal numbering system uses the characters 0 through 9 to get 10 values, the hexadecimal numbering system uses the characters 0 through f to get 16 values. (After 9 the characters a, b, c, d, e and f are used, as shown below.)

Decimal Hexidecimal Equivilants

dec hex
0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

On first appearance, this looks pretty simple but you need two hexadecimal characters to represent all decimal values from 0 to 255. When you increment decimal 9 by 1, you change the 9 to 0 and put 1 in the ten’s place. When you increment hexidecimal F by one, you change the F to 0 and put 1 in the “sixteens” place. Sometimes it’s not easy to convert between decimal and hexadecimal in your head.

RGB Triplet for Cornflowerblue

color   dec   hex
red     100    64
green   149    95
blue    237    ED

We could then specify the color of text within a span using the hexadecimal notation as shown below.

<span style=”color:#6495ed;”>Text</span>

Note that when we indicate the use of hexadecimal notation by placing a pound (#) sign in front of the number, and we don’t use commas to separate the color components.

If it’s not easy to convert between decimal and hexadecimal in your head, then how do you do it? You can use a calculator that has a decimal to hexadecimal coversion function, or you can learn to think in hexadecimal. For example, what’s the next number after CE? That would be CF. what’s the next number after CF? That would be D0. Which hexadecimal number is higher 99 or B2? B2 would be higher than 99. It gets easier with experience.

Here’s Java Script code for a simple decimal to hexidecimal color converter

function convert(decvalue)
{
var num = parseInt(decvalue);
if(num >= 0 && num < 256)
{
var hexnum = num.toString(16);
alert("#" + hexnum);
}
else {alert("Error!");}
}

It’s important to use hexadecimal notation to specify colors when you use DHTML with visual effects, because to create a dynamic color change you have to increment or add a value to a color. The vast amount of color specification on webpages is in hexadecimal notation, so it would be wise to become familiar with it.

Copyright(C) Bucaro TecHelp.

Permission is granted for the below article to forward, reprint, distribute, use for ezine, newsletter, website, offer as free bonus or part of a product for sale as long as no changes are made and the byline, copyright, and the resource box below is included.

We’ve all seen them, you’ve been browsing a website and you click a link and nothing loads apart from the words ‘404 Error’ along with the usual stuff.

So what is a 404 Error page? The 404 Error page, basically informs the user that the server cannot find the file they are looking for. However, instead of using the default 404 Error page you can create your own, this is how you do it.

First, you need your .htaccess file which should be within your web site directory. If you cannot find it you will need to create one. You will have to contact your host asking them how you would go about creating or editing this file. They may want you to use a text editor and then upload it, or they may want you to use a PICO editor and create or edit the file on the server.

How you have access to the .htaccess file lets edit it. Add this line to the .htaccess file:

ErrorDocument 404 http://www.yourdomain.com/404page.html

Make sure this line is kept on online. This is where your 404 Error page is kept.

Now you’ve change the .htaccess file you need to create the page. This is simply a normal HTML document. Once you’ve created the HTML document, save it and call it 404page.html. Now the next step is to upload the .htaccess file and the page to the server.

Now that is done your next step is to turn it on. This is done by setting the CHMOD attribute to 644. You can do this via telnet or some FTP programs. If your going to telnet into your server, use the following command:

chmod 644 .htaccess

Now test to see if it’s worked. Just go to a page that doesn’t exist on your server and you should see your new 404 Error page. If not, then make sure the CHMOD is set correctly, and if that doesn’t help, you may want to ask your hosting company for support.

What is CSS?

CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Why to use it and how to use it properly

If you don’t use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite big. Fact is that we live in a busy world, and people are not will to wait more than 5 seconds web page to load.

From the other side some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:

<html>
<head>
<title>My Page</title>
<style>
A
	{
	font-family: Verdana;
	font-size:8pt;
	color:black;
	text-decoration:none
	}
</style>
…..

What is wrong with this technique? Well, imagine that you have site with more than 50 pages. One day, you decide that you want to change font color and colors of the links on your site. You will have to edit ALL the pages on your site, and do to that you will need time, because you place your CSS in your web page.

Better way is to save your visual attributes in separate, external CSS file, and to link that file with your page like this:

<html>
<head>
<title>My Page</title>
<link href="myStyle.css" rel="stylesheet" type="text/css">
….

Using this technique, you can change the look of your site within minutes, regardless of the number of pages, because your visual attributes are saved in ONE external CSS file. Edit that file, and you are done.

Benefits

Which are the benefits of using CSS? List is quite long and I will list here only the most important.

• Your web page will load faster
• Web page will become more search engine friendly
• You can change you site appearance within minutes
• You can write separate CSS file for handheld devices which will be called up instead of the regular CSS file
• You can forget about creating printer friendly version of your site using separate CSS file when user chooses to print the web page.

Avoiding standard HTML commands like:

<font color="#0000ff"><font size=2>Product</font></font></font>

will help us to reduce file size, but that is not the only benefit. Using CSS word product in this example will be moved more close on the top of the document. Search engine will pick up more content and less code.

Imagine that you have 3 columns table on your page. When you see the code, you will notice that first come code for your table, and after that it come your content. Positioning your 3 columns using CSS instead of standard inline elements:

<table width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="381" height="150" valign="top" bgcolor="FFEDD4">
My Product
</td>
    <td height="150" valign="top" bgcolor="FFEDD4">
…..

When CSS is used, your code might look like this:

<div id="leftcontent">
My Product
</div>

Again your code is much more clear, and your content is moved on the top of your document, making your HTML page search engine friendly, and reducing your file size.

Content is one of the most important factors in Search Engine Optimization, and you will benefit with removing the unnecessary code in your HTML and create search engine friendly web page.

Validate it

Browser war is far behind us. Reality is that most of the people today use Internet Explorer, but you should try to be on safe side and ensure that your CSS code is valid. Not all browsers interpret the CSS on same way. You can validate your CSS here: http://jigsaw.w3.org/css-validator/

As any Web Business startup knows, creating a Website is a bunch of work! You have to bother with content, layout, graphics and HTML links, just to name a few. What about your Meta Tags?

Meta Tags are words that are placed in your web page to provide a title, description and keywords to the Search Engine spiders or crawlers. They are not visible to visitors. To see a sample, open any website and click “View” on the menubar, and choose “Source.” You’ll see the Meta Tags up top, within the Head section of the web page.

Most Search Engines will rank your site on how well your Meta Tags provide a description of the content of your web pages. Google is the exception; it also take’s into account the number and quality of backward links to your website. Here lately, there’s been differing opinions on the relevancy of Google’s Page Rank system. Some experts don’t consider it accurate or necessary.

Yet and still, there are many other Search Engines and a further study of Meta Tags is in order. We are going to base our Meta Tags revision on a tool known as a word Frequency Counter. It counts and separates the words in a web page or document, giving you an idea of what words are used most.

Here are some Web based Frequency Counters:

• http://www.mytranslate.com/wordfrequency.htm
• http://rainbow.arch.scriptmania.com/tools/word_counter.html
• http://www.writewords.org.uk/word_count.asp
• http://www.writewords.org.uk/phrase_count.asp
• http://web4future.com/free/wordcount.htm
• http://www.keywordcount.com/

Each one of the Frequency Counters above has different uses and qualifications. The Writewords counter has two flavors: word and phrase count. The Web4Future counter is Web based or a standalone download.

How to use them:

Copy and paste the content of the web page in question and see what the top word frequencies are. You can eliminate most articles and modifiers and concentrate on pure words. As an example: If your web page is about red and blue widgets, the words “red/blue/widgets” should have the highest frequency.

A Word of Caution About Writing Content:

Use the Frequency Counters AFTER you write the web page content. Don’t allow word frequency to get in the way of your natural writing style. Do NOT attempt to hit a certain frequency percentage; you’ll be penalized by many Search Engines for too much keyword usage.

In Closing

Though the word Frequency Counters are good tools for a quick check, nothing compares to laser-focused writing for good Meta Tags information. Let your writing flow naturally and stay concentrated on your subject keywords. If you do that, you’ll find it easy to weave your keywords into your content and Meta Tags.

by Francisco Aloy

(C)2004 Francisco Aloy

When it comes to designing a Website, there are several modern programming techniques that can make the designer’s task much easier. Once the content and focus of the Website is decided, layout should become the focus of development. What fonts will be used for the various links and text? Which color will be used to make certain links more prominent than others? Most importantly, how will the designer ensure the entire Website has an isometric appearance? If used properly, CSS can accomplish those tasks, while reducing bandwidth and increasing page-load timeframes.

WHAT IS CSS AND HOW CAN IT BE USED?

CSS is an abbreviation for Cascading Style Sheet. It can consist of several lines of text to control content appearance within a Webpage, or multiple pages within a Website. There are two common ways that a Style Sheet can be used. First, it can be added to the, “head,” of each individual Webpage. A more efficient way to implement a Style Sheet, is to up-load the file into a Directory on a Website, and utilize an include tag.

Posting the style sheet within the head of each page will increase the amount of bandwidth used and slightly affect the download speed of pages. This is dependent on the size of a particular site and the number of styles included on the CSS. If a change-of-style is decided upon in the future, each individual Webpage will require editing, to affect the entire Website. For example, if a designer wished to apply a holiday theme around Christmas, he or she would need to edit the CSS on every page for the change to take affect.

In contrast, a CSS file can be uploaded onto a Host. Once uploaded, a designer can use a simple include tag, to call upon the style sheet. This method-of-use can reduce the amount of bandwidth used and increase speed times, as some visitors will have the CSS stored on their computers following the first page load. Additionally, it will make style changes much easier as only one file needs to be changes to affect all relevant pages within a given Website.

DEVELOPING A STYLE SHEET

Open any text editor with a blank page. Save the page as, something.css”. If it was decided to upload the file for use, this will be the actual file uploaded. Additionally, a designer can copy and paste from this file, if it is to be included within the head of each Webpage.

Before beginning to add actual tags, consider how links should apppear and the various sections of the Website or Webpages. If a Style Sheet becomes sloppy, it will make the designer’s job difficult. Therefore, start simple and keep the CSS clean. The Style Sheet should begin with simple grouping. For example, all pages may be utilizing an identical header and left menu. If the text styles are going to be different, this could be are first two simple groups, along with link formats.

MANAGING HYPERLINKS WITH CSS

With our first two groups we can add five lines to the style sheet. These are (alphabetized) A:LINK, A:HOVER, A:VISITED, .head, and .leftmenu. With these five lines, we can control the appearance of links, visited links, mouse-overs on links, the header of all pages, and the left menu.

Now we are going to add some basic variations to the text. After, A:LINK and A:VISITED,” add a space then, “{color: #004080}”. Notice that no font attributes have been added. This is because we are going to utilize different fonts within the other tags. The only thing being changed on linked text is the color. Change the color to reflect the desired appearance. Note, this can be adjusted to personal preference.

ADDING THE HEADER AND MENU TEXT TO THE STYLE SHEET

Once the desired link colors are decided, the font attributes can be associated to the header and left menu. After the .head and .leftmenu, add a space then, “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: normal; text-transform: capitalize;}”. To explain, we are specifying any area of text with the .head style will use one font (font-family), be a uniform size (font-size), have a uniform weight (font-weight), and regardless of typing be transformed to capitals (text-transform). A modified version should be added to the left menu.

Here is how the CSS should currently appear:

A:link {color: #004080}
A:visited {color: #004080}
A:hover{color:ff3300}
.head “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
.leftmenu “{font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: normal; text-transform: capitalize;}

IMPLEMENTING THE STYLE SHEET

If it was decided to past the style sheet onto each page, add:

<STYLE TYPE=”text/css”><!—
A:link {color: #004080}
A:visited {color: #004080}
A:hover{color:ff3300}
.head {font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
.leftmenu {font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
font-weight: normal; text-transform: capitalize;}
–></STYLE>

- to each page of the site that will utilize the Style Sheet. The style sheet should be placed between the <head> and </head> tags of the document.

If it was decided to upload the sheet and call upon the file on each page, add, “<LINK href=”http://links.mjmls.com/ name of the file” type=text/css rel=stylesheet>”. Once again, this should be placed between the <head> and </head> tags. Change the link location to where the style sheet is located on the Web Host.

CALLING THE STYLE SHEET ON WEBPAGES

There are a variety of ways to call upon the different text attributes. This depends widely on site layout. If the site is designed using tables, we can simply specify the style for each cell, rather than each word. For example, the table code could appear as:

<table width=”100%”>
<tr>
<td CLASS=”HEAD”><a href=”http://links.mjmls.com”>Home</a></td>
<td CLASS=”HEAD”>Next link</td> etc…
</tr>
</table>

As a stand-alone link, within the given Webpage, we can add the class tag to the Hyperlink:

<a href=”http://links.mjmls.com” class=”head”>Home</a>

To modify an entire group of stand-alone text, the CSS tag could be added to the paragraph tag:

<p class=”head”>The entire paragraph of text is affected</p>

It could be suggested that calling the style tags are experimented with, prior to modifying an entire Website. By adding class=”head” or class=”leftmenu” to various tags, a new designer will learn how the style tags can work, reduce the size of a Webpage, save bandwidth, and provide a uniform appearance throughout a Website.

In part two, we will demonstrate some other attributes that could be added to different tags and applying CSS to tables.

There is nothing wrong with making your own website if you are looking to save some money. Be prepared however, for your finished product to resemble an after school project; cutesy, homemade touches and all. It is pretty hard to make your own website and have it look professional; but, there is an easier way that will leave you with fewer headaches in the long run.

You must first do some web research. Click around and find websites that have the look you are going for. Make some notes and jot down what it is you do and do not want representing you. You should also start thinking of some keywords that will help people find you if they were to type them into a search engine.

After you have a rough idea of what you would like your site to look like, you should contact a professional who will take care of all the hassles that come with making a webpage. I recommend contacting Global Presence in Tucson, Arizona, http://www.saeler.com; they do great work and pay special attention to detail.

Your website will be created so that you can make changes when and if you see fit. To do this, you should purchase a web authoring program, and learn how to properly navigate the system to make revisions on your site. After the site is up, you only need to know how to do 4 things in order to keep your site up to date.

1. Be able to add a new page, complete with all of the navigation buttons from previous pages.

2. Have the ability to add text.

3. Be able to add a graphic.

4. Know how to make a hyperlink.

These are 4 easy steps that will be repeated numerous times throughout your website’s existence.

Not everyone uses the same browser, so your webpage may look very different from one computer to the next. To get a quick look at how your site may appear on other browsers, go to http://www.anybrowser.com/. When choosing a font, use something standard like Times New Roman; one that virtually every computer has. A good resource to help guide you through all of your website problems is Robin Williams’ (no, not that Robin Williams) book, The Non Designers Web Book.

*Remember to keep your site simple, so that customers don’t get confused by all the buttons, and click away.

The most popular method to build webpages today is to use WYSIWYG (What You See Is What You Get) software. Microsoft FrontPage and Macromedia Dreamweaver are prime examples of WYSIWYG software. Both programs allow you to create webpages as though you were creating a document with your favourite word processing software like Microsoft Word or WordPerfect. Its as simple as entering paragraphs, headings and inserting clipart or images.

WYSIWYG software like those listed above are prefect for beginner webpage builders who want webpages constructed quickly without having to learn HTML (Hyper Text Markup Language).

All webpages are brought to life using HTML codes, regardless what webpage building software is used. WYSIWYG programs simply create the HTML codes as you construct a webpage (in the background, without you knowing), so you don’t need to understand them.

This is without a doubt the biggest advantage over any other type of webpage building programs. It means that if you can press keys on a keyboard, you have what is required to create your very own webpage!

However, most WYSIWYG programs don’t give you absolute, total control over webpage design (ie, exactly the way you want the page to look). There are design limitations.

For example, you may want to place headings, sub headings and a navigation menu in a particular arrangement on the webpage, but no matter how many times you try, the program won’t permit such placement or position them correctly. This is one big disadvantage of WYSIWYG programs if you desire a custom look to all your webpages.

Knowledge of HTML, however, can assist you to overcome such design shortfalls in WYSIWYG programs. How is this possible? Let me explain.

If you understand HTML codes, then you understand why webpages appear the way they do in a web browser, such as Microsoft Internet Explorer or Mozilla Firefox. This is powerful stuff because the moment you change/modify HTML codes, the webpage will take on a new design/appearance.

And don’t forget that HTML codes are exact, giving you total freedom over how everything appears on the webpage. Most WYSIWYG programs allow you to view and modify the HTML codes. As you can see, knowledge of HTML is beneficial.

The downside to HTML is the learning curve. It takes time to understand how HTML works and why, but once you know, using HTML to create totally custom designed webpages is easy. For the beginner, HTML can be challenging, but don’t despair because there are HTML tutorials available that teach you basic and advanced HTML in a matter of days!

So the question is - Should you bother learning HTML to build webpages? The answer - yes and no.

It is obvious that WYSIWYG software speeds up production of webpage development regardless of your knowledge on how to build webpages. However, to further refine and tune your webpages exactly to your liking, it is usually necessary to add and modify HTML codes. So yes, HTML is worthwhile learning if you are unsatisfied with the webpages produced by WYSIWYG software.

There is little point learning HTML if you are 100% satisfied with the webpages made with WYSIWYG software.

One thing is certain. Using WYSIWYG software and learning HTML codes is the answer for those of us who want webpages made exactly to our requirements. Learning HTML is not as hard as you think. To get started, simply search any major search engine like Google, Yahoo or MSN using the search phrase “html tutorials”, its that easy!