Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Story on base tag.
base tag story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on managing links.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Reduce The Size Of Your HEAD

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
February 2002
Vol. 5, No. 3
 • Promotion Tip
 • Accessibility Tip
 • HTML Tip
  

Using JavaScript on your pages? Style sheets too? When you put complex JavaScript code and style specifications into the HEAD section, you may end up with more lines of code there than actual content in the BODY section! Use external files to make your pages load faster, reduce coding errors, and increase search engine appeal.

A W3C Approved Solution

Many good CSS and HTML techniques seem to require developers to dodge the guidelines recommended by the World Wide Web Consortium (W3C). Not for fun, but because many browsers don't completely support the W3C specifications. But the W3C guidelines endorse external CSS files!

Other external file advantages include:

  • Smaller pages: Use external files to replace many lines of JavaScript or style definitions with a single line of code that calls the external file. Less code equals faster loading pages - and happier visitors.

  • Easier maintenance: Easily include the same code or formatting information on every page. Need to change a font-family, color, or variable name? Just change it once in the external file and you see the change on every page.

  • Search engine friendly: Search engine spiders like to see important content at the top of the page. Some even rank earlier content as more important. Pages with important content close to the top of the page are more spider-friendly.

Before you start creating external files from scratch, look at the pages of your site first. If you're using the same text, background colors, pop-up windows, etc. on every page, those are your best external file candidates.

Creating External Style Sheets

It's important to thoroughly check your code anytime you want to include it in an external file. Put it on your Web page first and validate it to make sure it's error-free and gives you the effect you want. Once you place it in an external file (other than a server-side include), then HTML validators like HTML Toolbox won't be able to scan it for errors. Unless you validate first, you could waste a lot of time looking for errors.

Once you've decided what to include, you're ready to create your external files:

  1. Open a text editor such as Notepad.

  2. Either cut and paste your style definition from an existing page or create a new one.

    Here's a sample external style sheet. Note that there are no opening or closing STYLE tags!

    BODY,P,TR,TD {font:normal 12pt Arial;}
    H1 {color: red; size: 16;}
    H2 {color: blue; size: 14;}
  3. Save the file in text-only format. Name it anything you want, but sure to give it a .css extension.

  4. Include the file in the HEAD section of your Web pages. Make sure you use the correct file name, path, and spelling!

    <link rel=stylesheet type="text/css" 
       href="MainStyle.css">

Look for extra CSS and HTML formatting on the page when you attach the external style sheet. CSS specifications on an internal style sheet override the specifications of an external one and HTML formatting instructions (such as FONT) override all CSS definitions. Check your HTML code for stray FONT tags or inline style definitions if you a have a single element that isn't formatted correctly.

Creating External JavaScript Files

External JavaScript files are a great way to use the same JavaScript functions on every page and reduce space and maintenance problems.

Some webmasters think they can also use external JavaScript files to hide their source code because the code doesn't display when visitors use the View Source option. That might dissuade some beginning users, but more the experienced ones will simply retrieve them from their browser cache files.

Remember to validate your JavaScript code before you put it into the external file. Once the code works, create your external file like this:

  1. Open a text editor such as Notepad.

  2. Either cut and paste your existing JavaScript code or create new code. Don't include opening and closing SCRIPT tags inside the external file.

  3. Save the file in text-only format with a .js extension.

  4. Include the file in the HEAD section of your Web pages. You can include more than one external JavaScript file on the page. Just call each separately like this:

    <script src="ExternalJS_1.js" 
      language="javascript" 
        type="text/javascript"></script>
    	
    <script src="ExternalJS_2.js" 
      language="javascript" 
        type="text/javascript"></script>

Check with your hosting provider if you're having trouble getting your external JavaScript files to work. Servers must be configured to serve .js files.

External Files And Search Engine Promotion

The external files we've discussed seem to act just like Server Side Includes (SSI's), but they aren't quite the same. An SSI is an external file, but it displays differently than external .css and .js files. The server takes the content of the file contained in the SSI and adds the complete text to the Web page before sending it to the browser.

When visitors look at the document source code of a Web page they can't tell what part - if any - is contained in an SSI. But the text of .css and .js files doesn't display in the page's source code, just the LINK or SCRIPT command that calls them. That's the big difference between SSI pages and those that use external CSS or JavaScript files.

Include content you want indexed by search engine spiders in SSI's because the spider can read SSI content. Put the content that isn't important to search engines - like JavaScript code or style specifications - in .css, .js, or .txt files because search engine spiders won't see it.

External files help you remove the clutter from your page. They're an easy way to create pages that are easier to write, maintain, and index.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.