ABC ~ All 'Bout Computers
The Online Web-azine for Computer Enthusiasts
-- brought to you by

contents page for this issue

Cleaning Up Your FrontPage Code
~~Tina Clarke, AccessFP - FrontPage Resource Centre

• Setting up your site
• About Optimizing Code
• Specify automatic formatting settings for code
• FrontPage Accessibility Checker
• Authoring modes
• Linking to your homepage and other index pages within your website
• Removing Generator and Progld tags from within FrontPage
• Removing Word code from your FrontPage web
• How to fix links coded incorrectly
• Span Language tags in the HTML
• Tools and links to help you optimize your site
• Tips on working with code
• Exclusive Offer for Complete Comprehensive Website Review

Setting up your site

If you set up your FrontPage website from the beginning you will have less problems down the road. FrontPage is a great tool and if the user knows how to manipulate it they can achieve clean code, fast pages, optimized sites and more time for other pursuits! This article aims to get you started along this road.

In 'Design View' Go to Tools | Page Options | Code Formatting and make sure that

• 'Tags names are lowercase' is ticked
• 'Attribute names are lowercase' is ticked
• 'Allow line breaks within tags' is NOT ticked
• 'Indent:' is set to 0 spaces
• 'Right margin:' is set to 2000 characters which will prevent wrapping

By making sure the 'Allow line breaks within tags' is NOT ticked you won't have the problem of hanging </p> or </td> tags which can cause spacing problems in the content.

NOTE: Any new pages will maintain those properties, unless you modify them of course. Pages that have already been built won't have the new settings applied.

You can also delete the generator and progID tags and if you click the 'Base on current page' button once you click ok and save the page they won't reappear.

You should then go to 'Code View' and right click the mouse button then choose 'Reformat'

NOTE: Sometimes after you've written code or pasted it from another source, the code isn't formatted very well. That is, the child tags aren't neatly indented under the parent tags. However, by using the Reformat HTML feature, everything gets indented properly.

NOTE: In older versions if you view the 'Custom tab' on 'Page Properties then press ok the two tags will be reinserted, so you just have to watch out for this. There are more ways to get rid of the tags below.

FrontPage, by default, shows the code in long lines which is sometimes impossible to select or view as the page seems to 'snap back'. By setting the wrapping to 2000 characters you avoid this problem.

NOTE: When you open a page with existing code, Microsoft FrontPage 2003 preserves the code formatting of that page by default.

About Optimizing code

FrontPage now has a feature whereby you can manage a set of optimizing features which can be run in a couple of ways.

You can optimize your code when you author your pages, publish the pages to your Web site, or both. If you choose to optimize your code when authoring your Web pages, FrontPage removes specific types of code from those pages when you edit them. You can select which features you want to use by ticking the box next to the feature.

• Style information generated by Microsoft Word
• Vector Markup Language (VML) graphics generated by the Microsoft Office Drawing Tools
• Meta tags added by other programs, including Generator and ProgID tags
• Cell formatting attributes
• Tracing image attributes
• Comments for scripts, Dynamic Web Templates, or HTML
• HTML tags that do not contain content
• HTML leading white space or all HTML white space

In addition to removing code, you can enable FrontPage to merge tags applied to adjacent page elements. For example, if you encounter side-by-side <b> tags in code, such as <b>Example </b><b>1</b>, you can have FrontPage remove the redundant adjacent tags, resulting in the cleaner code <b>Example 1</b>.

NOTE: Some code optimization settings are designed specifically for authoring Web pages, while others are designed specifically for publishing pages. Therefore, some settings may not be available for both authoring and publishing pages.

Before you can optimize HTML when publishing a page, you must set up a remote Web site.

In Remote Web Site view, on the Web Site tab, click Optimize Published HTML.

On the Optimize HTML tab, select ‘When publishing, optimize HTML by removing the following elements’.
Select the settings that you want.

NOTE: Microsoft FrontPage does not apply these settings to Web pages that you have already published to your Web site. To apply the settings to a page, publish that page to your site.
You can optimize HTML when you publish from the local Web site to the remote site, but not from the remote site to the local site.
If you select the All HTML comments check box or the Dynamic Web Templates comments check box, FrontPage removes any dynamic Web template code for that page when you optimize HTML. Therefore, any content the page shares with the dynamic Web template will no longer be visible to site visitors.

Specify automatic formatting settings for code

Do one of the following:

Define formatting settings according to the current page

Tools | Page Options | Code Formatting tab.
Under Formatting, click 'Base on current page'.
Specify formatting settings for new pages

Tools | Page Options | Code Formatting tab.
Under Formatting, select the options you want.
For example, if you want all tags to appear as lowercase instead of uppercase, select 'Tag names are lowercase'.

Under Tags, select the tag attributes you want.
For example, if you want to show only opening paragraph tags (but not closing paragraph tags), select p, and make sure the 'Omit end tag' check box is selected.

Important Each tag has unique attributes.

Reset formatting settings for new pages

Tools | Page Options Click the 'Code Formatting' tab then click 'Reset'.

NOTE: When you open a page with existing code, Microsoft FrontPage preserves the code formatting of that page by default. The FrontPage formatting settings will be applied only to new content that you add.

FrontPage Accessibility Checker

Use the Accessibility Checker to select the guidelines ( Microsoft Office FrontPage 2003 features a new accessibility checker for Web pages. By running the accessibility checker, you discover issues that are identified as being in conflict with the World Wide Web Consortium (W3C)  Web Content Accessibility Guidelines (WCAG) or the accessibility guidelines for Section 508 of the U.S. Rehabilitation Act. WCAG outlines priorities for making Web sites accessible to people with disabilities. Section 508 outlines the U.S. government accessibility standards for a wide range of information sources and technologies. For more information about the FrontPage accessibility checker features, see FrontPage Help. ) you want to follow on your site. Get a list of suggestions to improve accessibility, and jump back and forth between that list and your site to address the issues.

By checking your Web pages for accessibility issues and fixing them, you improve the site visitor experience for people with disabilities.
In addition to many other types of accessibility concerns, people with disabilities can have difficulty reading text or might not be able to use a keyboard or mouse.

By not complying with Priority 1 guidelines, "One or more groups of users will find it impossible to access information." An example of a Priority 1 issue is, "Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content)." A non-text element is a graphic, a Macromedia Flash animation, a Java applet and so on.

By not complying with Priority 2 guidelines, "One or more groups of users might find it difficult to access information." An example of a Priority 2 issue is, "When an appropriate markup language exists, use markup rather than images to convey information."

The Accessibility Checker in Microsoft Office FrontPage 2003 helps developers design Web sites that address accessibility issues. However, the Accessibility Checker does not address all accessibility issues. This article Adding rules to the Accessibility Checker explains how you can extend the functionality that is built into the Accessibility Checker.

~ Run an accessibility Report

Tools | Accessibility.

Specify the pages you want to check for accessibility issues.
How?

Open the page or site you want to check and then do one of the following:
To specify all pages in a Web site, under 'Check where', click 'All pages'.

To specify only the pages you have open, under 'Check where', click 'Open page(s)'.

To specify pages from the Folder List, select the pages you want , and then under 'Check where,' click 'Selected pages'.

If the Folder List is not available, click the arrow next to Toggle Pane, and then click 'Folder List'.

To specify the active page, under Check where, click 'Current page'.

Specify the accessibility guidelines you want to check for conflicts.
Specify the types of items you want to include in the accessibility report.
How?

Do one or more of the following:

• To include items that are considered errors, select the 'Errors' check box.
• To include items that may need to be adjusted, select the 'Warnings' check box.
• To add check boxes to the report to create a checklist you can use while addressing the issues in the accessibility checker report, select the 'Manual checklist' check box.

Click Check.

NOTE: The check may take some time to complete, depending on the number of options you selected.

To move up or down in the list of issues, click Previous or Next.

TIP: The status bar of the dialog box displays the number of problems and the number of pages checked.

To create a Web page that contains the results of the accessibility check, click Generate HTML Report. The page opens in Design view. You can print the report or save it as a Web page.

Authoring modes

Authoring modes enable you to turn support on or off for groups of features or for one feature at a time.

By using authoring modes in Microsoft FrontPage, you can design your Web pages for compatibility with specific browsers and technologies, as well as control the types of code that are added to your pages.

By designing your pages for browser compatibility, you can help ensure that your site visitors have a better experience browsing your Web site. By having control over the types of code that FrontPage adds to your pages, you can edit your pages more easily in Code view.

When you choose an authoring mode, the authoring mode appears in the lower right portion of the status bar. It is important to note the authoring mode you are using, because some FrontPage features are unavailable in specific authoring modes.

NOTE: If you choose a specific authoring mode, menu commands that are not supported will be unavailable as long as you are in that authoring mode.

~ Specify authoring mode settings

Tools |  Page Options, and then click the 'Authoring' tab.
In the 'FrontPage and SharePoint technologies' list, select the authoring mode you want.

• Select the main browsers that you plan to support. You can choose Microsoft Internet Explorer, Netscape Navigator, or both.
• In the Browsers versions drop-down list, select the earliest browser version that you plan to support.

NOTE: Depending on these settings, certain check boxes in the dialog box may become selected or cleared. You can change these check boxes to override the browser-related settings.

NOTE: When you turn on support for author-time Web components, support for link bars and shared borders is not automatically turned on as well. To turn support on or off for link bars or shared borders, select or clear the Navigation or Shared Borders check box.

~ To set the design and preview page size based on a target screen resolution

• Open a Web page.
• On the View menu, click Page.
• At the bottom of the document window, click Design.
• On the View menu, click Page Size.
• Select the page size you want from the available page sizes in the list, or select 'Modify Page Sizes to add a new size or change an existing one'.

When the page size value is changed, FrontPage will automatically resize the design and preview display areas.

NOTE: Changing the page size only allows you to approximate the display size in a browser at a given screen resolution. The page sizes supported by default roughly correspond to the amount of real estate available when the average Web browser is maximized on one of the common Windows screen resolutions. The only way to truly verify that a page layout will be displayed correctly is to change the screen resolution to the target resolution and preview in the supported browsers.

Linking to your homepage and other index pages within your website

You might not think of this as cleaning up your code, but it does a twofold job for you. FrontPage does not do this automatically you have to do it manually.

When visitors click on your home link in your menu on your website they might be presented with a link in the browser address bar such as http://somesite.com/index.htm this is considered messy and not very stylish. This occurs because you used a <a href="index.htm"> syntax when making your internal links, this is normally good because FrontPage can automatically update all your links for you if you should change the name of the file or extension and if you should move it to a folder. However for index pages in your root web, folders and subwebs you should configure things a little differently.

Instead of using the above syntax you should use the full URL for any index page in your site including your homepage.

NOTE: For SEO (Search Engine Optimization) purposes it is best to use the SAME link for your homepage EVERYWHERE.

• In your signature lines
• When submitting sites to search engines
• When having your website URL printed on hard copy material
• In your internal links to the homepage page and other index pages

In fact anywhere you use it. This also includes the www part, if your domain host serves your domain without the use of the www, then do without it, it makes for a shorter URL and the shorter your URL is, the easier it is to remember. There is a large ISP in the UK that can’t use their domain without the www, a major drawback. Make sure your domain host serves your domain without the www.

Instead of

http://www.addonfp.com/index.html
http://www.addonfp.com
http://addonfp.com/index.html

The best way to present my URL is http://addonfp.com short, sweet and to the point.

NOTE: You might think you could use <a href="./"> however FrontPage won’t allow you to do that. It will change the code to <a href=" index.htm">

What the browser does with your link when you use the <a href=" index.htm"> syntax is to present the index.htm page also, E.g.
( http://addonfp.com/index.html ) Not only does it look ugly, the browser will think it’s the same page and therefore won’t show the ‘visited’ hyperlink colour and neither will it use cached copies. Not only that, worse still, visitors might bookmark your page and that means they save it with the index.html file name included and your link ends up presented differently which is detrimental to your websites seo potential.

NOTE: If you want to learn more about SEO I recommend you join SEO_Techniques a free search engine optimization techniques class. If you don’t fancy a class, check out the comprehensive E-Book SEO Techniques – Step by Step

Removing Generator and Progld tags from within FrontPage

For FrontPage 2003 you can go to Tools | Page Options | Authoring Tab and make sure the Generator and ProgID tags box is not ticked and the

<meta name="GENERATOR" CONTENT="Microsoft FrontPage 6.0">
<meta name="ProgId" CONTENT="FrontPage.Editor.Document">

above tags won’t appear.

For earlier versions 2000 and 2002 you can obtain the free FrontPage Addon No FrontPage Meta. FrontPage will often add the Meta tags back when a page is opened in FrontPage. Therefore, this add-in is designed to remove the Meta tags right before a page is saved. If you view the source of your page in your Web browser or view the source in an editor other than FrontPage (such as Notepad), you will see that the Meta tags are indeed gone. It will also work with FrontPage 2003 but, as mentioned above, it’s not needed.

Removing Word code from your FrontPage web

When you create content in Word, PowerPoint or Excel and then copy and paste the content directly into FrontPage you bring with it some extra code that many people mistake for ‘FrontPage bad code’

<p class="MsoNormal"><span lang="EN-GB" style="font-family: Arial">&nbsp;</span></p>

that FrontPage makes, this is not the case. To prevent this you can do one of several things.

Copy and paste Word content first to a blank notepad file then copy and paste to FrontPage Design View, this will strip the unwanted extra code. However this will lose any formatting you made in Word.

You can also copy the content in Word then in FrontPage go to Edit | Paste Special.  This will have the same effect and there are a number of options to choose from after pressing Paste Special.  Most give the same layout, just experiment to see which is best for you.

FrontPage 2003 is supposed to clean up your word code but when I tested it, the page still retained the Word code. This is done through Tools | Optimise HTML, then ticking the Word html box and pressing ok.

The best method is to use Paste Special, I think.

For earlier FrontPage versions there are also some Microsoft addons that will filter the HTML for you.

Using Office HTML Filter to remove Office-specific markup
Using Office HTML Filter to Save Space on Web Servers
Using Office HTML Filter at the command prompt
Use Office HTML Filter to Create Web Pages that Download Faster

How to fix links coded incorrectly

Sometimes FrontPage does not save internal links and links to other files within the website such as graphics properly, the coding appears as below. If you save pages in Design View this rarely happens, but it can happen when you save in Code View so be sure to save in Design View.

<img border="0" src="file:///F:/My%20Documents/My%20Pictures/mypicture.jpg" width="519" height="368" alt="my picture">

To find such errors you can run a broken links report. View | Reports | Site Summary | Broken Hyperlinks | Verify, Select a link, right click and press ‘Edit Hyperlink’ then browse to the correct one, select the file press ok, then click the Replace button after selecting ‘Change in all places’.

Span Language tags in the HTML

When the default language of the page and the default language of the keyboard are not the same, FrontPage will start inserting <span lang="en-gb"> in the HTML or whatever the language being used en-us for example.

To stop this from happening go to:

Tools | Site Settings | Language Tab
Where it says 'Default Page Encoding' make sure it is set to 'US/Western European (Windows)'. If this is selected and your still getting the span tags then make sure the option 'Ignore the keyboard when deciding the encoding of new pages' radio button is selected, press ok.

For FrontPage 2002, it's Tools | Web Settings | Language Tab, then repeat as above.

Tools and links to help you optimize your site

1. Integrating HTML Tidy into Microsoft FrontPage
By Michael Suodenjoki, Version 1.8 May 2003

This is not a FrontPage Addon as such.  You have to do a lot of work to get HTML Tidy to operate from within FrontPage and it will be beyond most users, however there is a TidyGUI for Windows available which can be used directly from the desktop and one can easily work with the application and FrontPage together.

TidyGUI is a Windows GUI encapsulation of Dave Raggett's HTML Tidy, a free utility application from the World Wide Web Consortium that helps you clean up your web pages. Learn more about Using TidyGUI

2. CSE HTML Validator for Microsoft Windows is the most powerful, easy to use, and user configurable HTML, XHTML, CSS, link, spelling and accessibility checker available. There are Lite, Standard and Professional versions available. There is also a online Checker available from the above link.

3. FrontPage Power Edit is a FrontPage Addon that will help cut the bloat in your code. The great thing about this addon is that you can apply settings to just one page or the entire web and it works from within FrontPage.

EXCLUSIVE FLASH: A new version will be out shortly and those that buy the current version will receive the upgrade FREE!

FrontPage Power Edit currently has the following features

• Remove FrontPage META Tags
• Remove all META Tags
• Remove redundant FONT Tags
• Merge <p> and </p> Tags
• One Liner
• Remove Selected Tag

Look out for the new version in the near future.

4.  Links that will help you clean and maintain your code

Guide to clean coding
Current Issues in Web Usability
Free and Trial/demo Accessibility FrontPage Addons
Free Accessibility Course
TagCheck
W3C CSS Validator
W3C HTML Validator

Tips on working with code

• Make sure you name your files without spaces, illegal characters and always use lower case. The reason for this is some browsers and some servers won't display your pages properly if at all. INDEX.HTM is different to index.htm. File names for seo purposes should always be used with hyphen's for example. frontpage-formatting.htm not frontpage_formatting.htm or frontpageformatting.htm.
• Always add the trailing slash / to your urls, this reduces the load on the server by eliminating one communication between the browser and the server, if the browser does not see a slash / it thinks it's a file when it realises it's not it has to take another look  of course don't go adding the slash to urls ending in file names e.g. myfile.htm/ all you will get then is a 404.
• If you select content you can either go to Format | Remove Formatting or use the keyboard shortcut Control + Shift + Z this should remove most formatting, it won't for instance remove a book mark on piece of selected text that has been formatted with a h2 tag, but it will remove the formatting of the h2 tag.

Microsoft FrontPage provides a variety of features that help you edit HTML more easily. When all is said and done however if you can't validate your code completely don't obsess over it, as long as your code degrades gracefully and is accessible sometimes you need to go for design over validating just use your common sense.

Exclusive Offer for Complete Comprehensive Website Review

If after all the above configuration your still not sure your code is as clean and validating as you want it to be, consider ordering a Complete Comprehensive Website Review which covers:

• Comprehensive Website Review and Evaluation
• Intensive Internet Marketing Consultation Report
• Search Engine Optimization Consultation Report
• Extensive Outline of Corrective recommendations

Special Introductory Consultation Fee of ONLY $44.99 for an exclusive offer for ABC Readers ONLY. Arranged by Linda Johnson and Tina Clarke.

Upcoming:

• IntelliSense provides you with a list of available choices when you're adding tags or attributes.
• The Quick Tag Selector enables you to select entire tags, or the contents of tags, without having to switch to Code view.
• All of the standard editing commands are also available for editing code. For example, you can Copy, Cut, Paste, Find, and Replace while editing your Web page.
• The properties of HTML tags are displayed so you can change them yourself.
• Line numbering helps you to locate and move between specific lines of code.

We will discuss these features and more in the next issue.

Tina Clarke - Microsoft MVP - FrontPage, is the Webmaster of AccessFP - FrontPage Resource Centre http://accessfp.net/  and http://addonfp.com  She is also an editor of AnyFrontPageBytes Ezine. Subscribe to the ezine http://groups.yahoo.com/group/AnyFrontPageBytes  and get FREE FrontPage E-Books upon joining. And don't forget to subscribe to get Weekly FrontPage Tips. Tina is also an artist and the owner of http://clarke-abstract-art.com/