HTML Code for Frames by Don Pedro

When you make a collection of webpages in frames, the result is, you will have your Menu fixed, usually on your left hand side of the screen. All search engines cannot read frames, which is why frames are very suitable for your C.V. (résumé).

Only the most common browsers (2007) and screen readers / search engines can handle frames pages, but still they have problems with finding and reading the "menu frame". This means even if a search engine through a link happens to find one frames page, the others will still stay hidden.

When you prepare your C.V. for the Web do NOT include your certificates on your C.V. page(s). Of course you have to include them on your website. First you scan in every certificate as a picture (.jpg or .gif). After packing, you include them in your "images" folder together with your "normal" pictures. Then you make a new webpage for each certificate separately.

In this "document" page you put only the picture "call-up" code: <img src="images/cert1.jpg"> and normal meta tags (incl. "no index") for the browser. Then in the appropriate places in your C.V. you make a link to each "document" page: <a href="cert1.html">Certificate1</a>
More on this, see Don Pedro's How to Change my Pictures and Photos.

Basically what you do is that you divide the screen into two parts, for instance 20% and 80%. While your Menu stays in the narrow part, all other pages will open in the wider part. Of course you can make the Menu part horizontally on top, but you have two tool bars on your screen already - one on top and one at the bottom.

Some people have further added an extra toolbar. This makes the "result window" wide and very slim, especially on small screens. In this kind of frames you can get problems exposing your Menu too if you don't use JavaScript and that causes it's own problems.

The advantage of frames is the Menu stays in the visitors view all the time, which otherwise can be a problem, especially with long pages. This page is not made in frames.

DOCTYPE for Frames

DOCTYPE (DOCument TYPE declaration) for simple HTML (Html 3.x) is just <html> at the beginning and </html> at the end of the page, also for frames.

The browser manufacturers are under strong press to make new browsers to more strictly adhere to W3C standards (HTML 4.0). To be on the safe side you should add the DOCTYPE transitional code at top before the <HEAD> section of your code. When you use the transitional code the browsers will interpret it to mean you are using both HTML 3.x and HTML 4.0. In other words, you can keep your HTML code mainly in simple HTML and by and by add and experiment with a few .css and HTML 4.0 commands.

When using frames you have to add an extra code string; the transitional frames code is: <!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd">
I have added this code only on my "control" ("frameset") page. In the DOCTYPE tag on your other frames pages you change the "http:...../frameset.dtd" string to "http:...../loose.dtd".

With this transitional code you can continue using layout tables, which otherwise may be could cause some display problems in very new browsers. I think this transitional tag is good at least until year 2010.

DO not copy and paste the code from this page - if you do the browser will display the code and it won't work. You must type it in the code page exactly as it is.

The HTML Code

You need a minimum of three pages:
- Menu page,
- "Control" page ("Frame Set" page),
- Contents page.

First you make your Menu page (menu.html). Every page need the normal meta tags for the browser. On this page you put only your Menu in the <BODY> section.

Second you make your "display control" page. This is the page that opens up all the other pages in the same wider window. It means this page is never displayed as such.

In simple HTML the code looks like this:

Do not use the <body> tag - "Frameset" replaces <body> completely.

This is all that is needed on the "control" page. If you later need to change or add something in this "control" page you open it with Notepad. When you save it you add .htm or .html extension (whichever you use) and save as "All Files", not as text document.

Third you add in the <HEAD> section of all your frames pages (except Menu): <Base target="frames"> The "base target" tag will steer the text pages to the right hand side window (in this case). Instead of "frames" you can use any other word as long as you use the same word on all pages. If you use something else you must also change: Name="...".

If you have outgoing links on your frames page(s) always include "target" in the link reference code:
<a href="http://www.example.com/" target="new">
Instead of "new" you can use any word you like (except "frames") as long as you use the same word with every outgoing link on the same page. The "target" makes the other site open in a new window. If you don't use it you can risk getting an other site embedded in your frames pages and "somebody" (person or browser) can get confused. You will this way also make it easier for your visitor to print your documents (if it's a C.V.)

The standard expressions with target are: "_self", "_parent", and "_top"; with these the link will open in the same window - using target with these is therefore unnecessary. Target="_blank" will open the link in a new window same as any other word, except for the standard ones already mentioned.

No Frames Page

Screen readers cannot read frames, they are same as the search engine spiders. Also some Internet surfers can still be using old browsers, that are not frames capable. For these you should use a No Frames page. As a suitable "no frames" page you can use a site map written in simple html - this helps the search engines also. Include links to all your content webpages with descriptions. As descriptions you can use the content of your meta description tags.

You add in the code in your "frameset" page (the "control" page) after the second Frame src="..."

<noframes>
<a href="site-map.html">Site Map</a>
</noframes>
and then the rest as in the code above:
</FRAMESET>

Then on every "frames page" you include at least one link to your "no frames" page - in this case your Site Map. Visitors from search engines can come to any one of your content pages. Even if the spiders cannot read the "frameset page", somebody can link to one or several content pages. You could, of course, make a redirect to your "frameset page" but that's not very nice toward your visitor, who easily gets annoyed.

Such a link you can write most easily as a "breadcrumbs" link. If you start that one with "Home", then "Home" should point to the "frameset" page.

If you use the frames only for your CV - then you want to keep the content hidden from search engines and in this case you of course don't use the no-frames.

Menu Page Links

Fourth you add to your webpage reference links in your Menu: target="frames" or whatever word you use. When you use the target="..." in connection with any link on your pages (incl. regular webpages) the new page will open in a new window.

Menu page reference link example:
<a href="education.html" target="frames">Education</a>
On your frames pages you don't include any Menu because you have it already on the left hand side. In the frames included here as examples the pages are basically without any much meaning, they just show you how frames work.

When you make layout tables for your frames pages you have only (in this case) 80% of screen width available. So if you make your table width="100%" and your visitor uses a 800 x 600 pixel screen, then your page width is 80% of 800 = 640 pixels only.

Uploading your Frames

Before you start uploading your frames on your server check with the webmaster first if there are any problems making your "control" page the "index" page. Also check with the webmaster what file name you should use for your "control page" (Frameset page).

When you choose a free server may be you have to upload a simple index page first and then from there refer to your C.V. frames pages. If that is the case remember to include a "no index tag" on your "index" page, just so that the search engines don't bother your website.

Then when applying for a job, instead of attaching your C.V. you can simply refer to your C.V. website. Many agents do not accept attachments from unknown people because of the virus risk.

Due to restrictions on the free server I used before, the "frames control page" together with one "frames" page are on a different server, while the Menu and "frames" page # 2 still have to be moved to this server.