|
HTML Tip:
Reduce The Size Of Your HEAD
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
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:
- Open a text editor such as Notepad.
- 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;}
- Save the file in text-only format. Name it anything you want, but sure to give it a .css extension.
- 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:
- Open a text editor such as Notepad.
- Either cut and paste your existing JavaScript code or create new code. Don't include opening and closing SCRIPT tags inside the external file.
- Save the file in text-only format with a .js extension.
- 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.
|
