navigation
Thomas Brunt's OutFront Hosting
 
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Microsoft MVP
 

Getting Started > A Very Concise Guide to HTML for FrontPage Users

Working with HTML in FrontPage 

Controlling your HTML Format
Setting the appearance of Thumbnails
Cross Browser Compatibility
Color Code Your HTML
Locating Code in HTML View
Links to More About HTML

There are a few configurations worth making in FrontPage that will affect the HTML which is automatically generated.

1. Controlling your HTML Format

To do this click Tools> Page Options > HTML Source

In most cases you will want to have the 'Preserve Existing HTML' box checked:

If you have a preference for the way your HTML is displayed you can choose the 'Reformat using the rules below' option and then choose how you want each tag to be displayed.

Top 

2. Thumbnail Appearance

When you use the auto thumbnail feature in FrontPage, some HTML is generated to control the appearance of the thumbnail image. You can change the default settings to have the generated HTML display the images as you want them to be seen.

To do this click Tools>Page Options > Auto Thumbnail

You can now set the width of any thumbnails generated, decide whether you want a border and how thick it should be and whether or not you want a bevelled edge on your thumbnails. Play around with changing these settings and creating a few thumbnails while checking HTML view to see the differences that changing the setting makes to the HTML.

Top

3. Creating Cross Browser Compatible Code

There is some help available within FrontPage for doing this, though it is far from infallible. However it is worth using.

Click Tools>Page Options > Compatibility

You have the option here to set compatibility to Internet Explorer only, Netscape only or both browsers. The last option is highly recommended. You can also choose the versions of the browsers you want your pages to be compatible with. What this will do is prevent you adding any FP feature that is not compatible with the browsers you have selected. If you try to add such a feature you will find the options for doing so are unavailable to you.

There are important limitations to this however. It is not retrospective, so if you are having a compatibility problem with existing pages rushing to change these settings will have no effect at all. It will not stop you creating incorrect code which is not readable by all browsers. This is especially true in the case of poorly created tables which are the most frequent browser compatibility problem encountered. 

Top

4. Color code your HTML

This is an underused facility that can really help a lot with reading your HTML. What this does is set the colors in which various parts of the page in HTML view will be displayed. 

Click Tools>Page Options > Color Coding

The default colors are quite muted and you can make your HTML quite a bit clearer by changing these to more garish selection.  Try it! Select your colors and then take a look at HTML view.

Top

5. Locating Code in HTML view

There are times when you need to add something to an existing page in HTML view, for example a piece of JavaScript or some code for an affiliate program. Looking at a page full of code it can be hard to see just where the new stuff should go, but a simple trick will overcome that problem.

Simply look at the page in normal view, decide where you need the code and write the word 'HERE' in that position. Now highlight the word 'HERE' and switch to HTML view - the word will be highlighted there also and you can simply replace it with your code.

Occasionally I have found that this results in all the text or a large block of text in HTML view becoming highlighted so here is an alternative method.

Place your cursor where you want the content to go in Normal View. Do Insert> Comment and type some text into the box that appears. Now when you go to HTML view this comment will appear in whatever color you selected above for comments and you will easily be able to find and replace it.

Top

Some Links to More about HTML

HTML Goodies
A huge site with a wealth of information about HTML and related issues written in a very easily readable form.

Webmonkey HTML Basics
A pretty comprehensive set of tutorials at a site that you will return to again and again.

Getting Started with HTML
An introduction to HTML, with links to more information, from the WC3 who are in charge of it all!

A Beginners Guide to HTML
A very thorough guide from the National Center for Supercomputing Applications which is available as a printable version, as a Zip file or as in PDF format.

HTML Home Page
The official WC3 HTML home page where you will find the most up-to-date information about HTML specifications.

HTML Cheatsheet
No cheating really - just a list of tags with a brief explanation of what they do.

Top

<< Part I  << Part II 


 


Microsoft Corporation in no way endorses or is affiliated with "OutFront." 
OutFront is published and edited by Thomas Brunt
440 Great Circle Dr., St. Matthews, SC 29135.  803-655-6151
© 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 All Rights Reserved
Click here to view our privacy statement.