English | Deutsch | Italiano
Home Plan du site Qui sommes nous ? Infos Presse Trust ICRA?
Contacts Webmestres Parents Enfants Complaints FAQ Etiquetez votre site ICRAplus (filtre) Formulaires
 d'étiquetage
Tester d'étiquetage Filigrane Membres Partenaires Adhérez l'ICRA Affiliés Cas concrets Points de contact Liens

Désolé, mais cette page n'est disponible qu'en Anglais

Applying an ICRA label using Microsoft® Front Page

Microsoft® Front Page is a powerful tool with which you can create some very impressive web pages without having to know much about HTML or any other web site coding language. Every time you add an image or type something into your web pages, Front Page automatically takes care of the HTML for you. You can create a sophisticated web site without ever having to look at the HTML tab at the bottom of your Front Page screen. To add an ICRA label however, you need to.

This page takes you through the process step by step and includes screen shots taken from Front Page 2000. Earlier versions may differ but the principles remain the same.

The help page here has been written for users with little or no experience of web authoring or wider computer knowledge. Where appropriate, tips for more advanced users have been included. The main piece of information relevant to more advanced users of Front Page is Don't just copy and paste the ICRA meta tag directly into the HTML source code. Click here to skip to the crucial section.


I've created a simple 3 page web site with a home page and 2 pages off that as shown below:

Front Page Navigation

For demonstration purposes, I'll take the simplest case - a single ICRA label which is going to be applied to the whole site. This needs to go in the file Front Page has created for you called index.htm. There's a potential point of confusion about the differences between a home page, a splash page, a frameset, a default file - these terms all have their uses but the important thing here is that whatever "friendly" name you or Front Page uses for it, the key file is called index.htm which is why I've highlighted it above. Select that file by double clicking it in the Folder List.

In this simple case, I've added a graphic and some text to the page as shown below:

index page, normal view

Now click Tools > Page Options, then click the HTML Source tab to bring up the dialogue box shown below:

HTML Source dialogue box

Make sure that the "Preserve Existing HTML" option is selected. Then click OK.

Now you're ready to copy and paste your label into the HTML source code of your site.

Fill in the questionnaire on the label generator page and click the "Generate ICRA label" button.

NB There are several versions of the label generator on this site. The screen shot below shows the version you are likely to see if you use Microsoft Internet Explorer (4.x+). Just click the "Copy to Clipboard" button. Netscape 6.x users won't have that option (this particular function doesn't work in Netscape browsers so we don't tease you by showing you a button that doesn't work!) Just click and drag your mouse along the full length of the label, then press Ctrl + C. Be sure to catch the characters at the beginning and end of the line!

If you've generated extra meta tags, include those as well.

Extended Label Generator screen shot

Older browsers or those with JavaScript disabled will see a different version of the label generator altogether. Your label will be presented in the way shown below.

Basic Label Generator screen shot

Just click and drag across the whole label as shown and press Ctrl + C.

One way or another, your label will now be copied onto your computer's clipboard.

Switch back to Front Page.

Do NOT now just paste the label into the head section in the HTML window. I know that's the obvious thing to do but if you do it that way, Front Page rewrites the whole label and makes a complete hash of it!

Instead, click Insert > Advanced > HTML... as shown below:

Insert - Advanced - HTML

Now press Ctrl+V to paste the label from your computer's clipboard into the window that has just opened, then click OK and select the HTML tab as shown below:

Paste the tag

If this is the first time you've see the HTML source code for your site, don't panic! We just need to carry out a couple more steps and the job will be done.

The code for this simple demonstration page is shown below with the key elements circled. Your site will have more HTML code than this!

first look at HTML

Advanced users Yes, it's in the wrong place for the time being ... patience!

Front Page puts its own tags either side of the ICRA label you've just inserted which effectively say "I don't know what this is but the author just stuck it in there so I'd better leave it in." These are colour coded grey and need to be removed in order for the ICRA label to work. Just delete the <!--webbot bot="HTMLMarkup" startspan --> and
<!--webbot bot="HTMLMarkup" endspan --> tags to leave the ICRA label on its own line as shown below. Notice that the label is all on one line despite having been spread across several on the original e-mail you received from ICRA and in the HTML input box. That's good!

webbot tags removed

Here's the clever bit

Now click the Normal tab at the bottom of your Front Page window, then go back to the HTML tab.

Front Page has recognized that the ICRA label is in the wrong place and has moved it to where it should be - in the <head> section of your page as shown below. Smart.

ICRA label in correct place

Just check that... the label should be on a single line, just above the <head> tag. It should look identical to the text in the e-mail we sent you.

Now go back to the Normal view and we'll add the ICRA logo button (remember this is optional!)

A variety of ICRA logo buttons area available from a special page on the ICRA web site which you can access here. Choose the button (and the spelling!) which best suits your site and save it to your hard drive by pointing at the logo button you want and RIGHT clicking. Choose Save Picture As (see below)

Selecting a button

Save the logo button in the images folder Front Page has created for you in your web.

Now you can add the logo button wherever you wish in the normal way, so either click Front Page's insert picture button or click Insert > Picture > From File, then open the images folder. In this demonstration case there are 2 images in this folder, the ICRA logo and the button I've just downloaded. See below:

Click OK to insert the logo button.

To link this back to the ICRA web site, please then Right click on the logo button and select Picture Properties from the menu. This will bring up the dialogue box shown below:

Linking the logo button back to ICRA

Please fill in the two text boxes as shown. The first one is the text a visitor sees in the space the logo button occupies before it loads and the second box is the special url we have set aside for just this purpose. Please note that that's zero two, not oh two! Visitors who click the logo button will be taken to the About ICRA page on our site, although in future, we may add additional features to this url.

I would recommend that you click the little pencil button to the right of the "Target Frame" line and select New Window. That way the ICRA web site will be displayed in a new window of its own and not take visitors away from your site.

Click OK, and that's it! Now you can get on with the rest of your site.

Once you've uploaded your site to the internet, you should be able to test the ICRA label. Set up Internet Explorer's Content Advisor and make sure you have chosen not to allow access to unrated sites. Then visit your own site and you should be allowed in according to the rating you applied. See the Content Advisor set up page here if needs be.

If you are still having difficulty...

... I'm afraid we are unable to troubleshoot every web site! Hopefully there is sufficient information here and in the more general walk through for you to enjoy success! If we can help we will, however, it is usually much easier, quicker, less frustrating and more pleasant to stock up on beer/wine/chocolate/coffee and ask a (computer confident) friend over!

Return to FAQ Index
Return to main FAQs page


Powered by CI Host ICRA