File Naming Tutorials

An important part of designing your website is the name you give to each of your files. The first part is the actual file name and the last part is the file extension or the format in which it is saved. . The last part is in all probability going to be .htm or .html for the actual pages in your site. Whichever you choose will work but be consistent. Graphic files will have a file extension of .jpg or .gif or .png. Again the extension will depend on the format of the graphic image.

There are some rules you should follow in actually naming your files whether they are graphic files of html files or any other file type for that matter.

Do NOT use special characters in naming your files and do NOT use spaces. File names with spaces are going to appear with a %20 in place of the space.

Example: sarah smiths will.html will appear when viewed in a browser as sarah%20smiths%20will.html.

You should use hyphens – or underscores _ to separate words in file names rather than spaces.

Example: sarah-smiths-will.html or sarah_smiths_will.html.

Do not make your files names excessively long. sarah-smiths-will.html is better than sarah-smiths-last-will-and-testament-march-1792.html

Most web servers are case sensitive so My-File-Name.html and my-file-name.html are two different names. If you get used to using all lowercase letters in naming your files then you have one less thing to worry about.

For most servers your Home Page is going to be named index.html but make sure and check with your particular host on what it should be for your server.

The State Library of North Carolina has created a four-part video tutorial which covers the following:

Part One: Why is file naming important.
Part Two: How to change a file name.
Part Three: What not to do when changing a file name.
Part Four: Best practices for file naming.

All four of the video tutorials can be found on YouTube on the State Library’s channel at I took the opportunity to watch the entire series and think that it is very well done.

Important Note: If you are working with a web editor like Expression Web or Dreamweaver, do NOT change files names outside of the program or you may break you hyperlinks to those files. Changing file names within the program will keep any links to those files intact.

A Guide to Website Design Patterns

A good navigation system is a MUST for any website, especially a genealogy website.
The larger your site, the better the navigation should be. Six Revisions, a blog
for web developers and web designers had a very insightful post by Cameron Chapman
titled Guide to Website Navigation Design Patterns. The article covers covers popular site
navigation design patterns. For each of the navigation design patterns, he discusses
what they are, the characteristics of each, when to use each one and the drawbacks
of each one.

Top Horizontal Bar Navigation

The top horizontal bar navigation is one of the two most popular kinds of site
navigation menu used. It is most often used as the primary navigation for a site
and is most commonly located either directly above or directly below the masthead
or banner of the site. The top navigation bar is sometimes paired with a drop-down
menu which reveals a second-level child navigation menu when an item is hovered

Example of Top Bar Navigation.

When to Use Top Horizontal Bar Navigation

Top horizontal bar navigation is good for sites that only need to display a limited
number of items in the main navigation. It is the only option for single column
layouts. If the top horizontal bar navigation is combined with drop-down sub-navigation,
the the navigation bar can accommodate more links as in the site shown above. [Read more…]

Seven Super Quick Tips for Beginner and Amateur Web Designers

Web design is a tricky art that combines both the creative and the analytical skill sets to create something unique and visually compelling. At the end of the day, good web design is more than the sum of its parts. Beginner and amateur designers may think that web design consists of finding a web host that’s reliable and simply uploading a pre-designed template, but there’s more to it than that, much much.

The above is the introduction to a post that recently appeared online at speckyboy Design magazine.  I thought it appropriate for this blog since it deals with beginning web design which many genealogists are trying to do. It does not matter whether you are hosting your site on RootsWeb servers or are paying for hosting somewhere. These seven tips offer some good advice.

  1. Site Navigation – One of the most important aspects of designing your site is the site navigation. Your menu should appear on evey page of your site as who knows where you visitor will enter – maybe by a side door rather than the front door. Can he or she get to other parts of your site or only back to the Home Page. Spend some time thinking about and designing your Site Navigation.
  2. Typography – Eye catching fonts that are not distracting allow you to do a lot with a little. Don’t overdo it with too many font changes or use fonts that you viewer may not have on their computer.
  3. Page Layout – A clean and well organized layout will keep your visitors from getting lost and confused. Spend some time organizing your site with plain old paper and pencil before you actually start the design process.
  4. User Interaction
  5. The Color Palette -Color selection can make a big difference when it come to designing an attractive website. Choosing colors that go well together and compliment your design can take time but it is well worth it in the long run.
  6. Page Optimization – Speed and responsiveness are both a front-end and a back-end issue. Everything on your site does not have to appear on the Home page. Make sure you use good search engine optimization techniques when building your pages.
  7. Overall Focus and Goals –  Ask yourself what your site is trying to accomplish and what message you want to communicate to your audience, and you’ll have a better idea of how to proceed.

You can read Seven Super Quick Tips for Beginner and Amateur Web Designers in its entirety.

Limiting Window Size

A recent question on the RootsWeb Freepages Mailing list was:

For some files on a Freepages site I’m in the process of developing, I would like to restrict the size of the page window to a fraction of the normal size. The problem is whether this is possible and, if so, how to accomplish it.

Barry Carlson, a frequent contributor to the list, proposed the following with examples.

The Pseudo Window is totally generated using CSS, and though more complex to get going is faster and doesn’t need a call to the server each time a link is clicked.   Both versions use JavaScript, but those familiar with commerce on the internet will know that you can’t do anything without JavaScript enabled.  Both versions work down to and including IE5.01, while Firefox 3.5, Safari 4 and Chrome 2 will show rounded corners for the Pseudo Window version. ~Barry ~

Absolute vs. Relative Links

Do you know the difference between an absolute and a relative link? Do you know which is your best choice for SEO  (Seatch Engine Optimization) purposes?

Absolute Link

An absolute link is created when the href value is a fully qualified URL, including:

  • the transfer protocol: http://
  • domain name: e.g.
  • and filename: e.g. your-page.html

An absolute link to the Expression Web Tutorials & Templates homepage looks like this:

<a title=”Expression Web Tutorials &amp; Templates.” href=””>Expression Web Tutorials &amp; Templates</a>

If you are linking between websites, you must use an absolute link. If you are linking to the Home Page of your site OR the index page in any directory, then you do not need to include the file name. Why? When the path does not include a filename, the server attempts to open the directory index, or default file. The default file name will depend on what your server requires.

<a title=”Expression Web Tutorials &amp; Templates.” href=””>Expression Web Tutorials &amp; Templates</a>

will take you to the same location as the link shown above.

Relative Link

A relative link is created when the destination href value is relative to the location of the current webpage or source anchor.

A relative link to the Expression Web Tutorials & Templates homepage, from any webpage in the SAME directory, looks like this:

<a title=”Expression Web Tutorials &amp; Templates.” href=”index.html”>Expression Web Tutorials &amp; Templates</a>

This tells the browser to look in the current directory and open the file index.html.

A relative link can only be used when linking within a website; or when the source and destination anchors are under the same domain name.

Which is Best SEOwise?

Page rank is determined by the quality (PR) and quantity of incoming links to a page. In most cases the homepage will have far more incoming links than other pages on the site. Links from your own site to other pages are also part of the equation. Google sees the following as totally different pages:

Cricket Walker, who offers free classes on SEO Techniques recommends using absolute links ESPECIALLY for your Home Page. You can read Absolute vs. Relative Links to understand why.