Show All

Hide All

by Connie Miller

You're working on a Web publication in Publisher and you want to link to a specific location on a page. You know that you can do this in Microsoft Office Word 2003, but is it possible to do it in Publisher? You can indeed create such a link to a bookmark in Publisher, but it takes a little ingenuity. Find out how you can create bookmarks in Publisher by using HTML code fragments.

A question from your comments

I've created a Web page that includes a section called Additional Information toward the bottom. I want to create a hyperlink from the top of the page to that section, but I can't find any way to create a bookmark or link to one. Help!

Advice from the Answer Box

To create a hyperlink to a bookmark in Publisher, you need to add HTML code fragments to your Web publication. If you don't regularly work with HTML code, that can sound daunting. But you can find all the code that you need in this column. You just have to modify it for your situation.

 Note   We chose the code samples specifically to solve problems that you face when you create Web sites in Publisher. They aren't suitable for all situations. If you're creating a complex Web site that you intend to update frequently or a site that includes interactive elements, consider using Microsoft Office FrontPage 2003.

What are HTML code fragments?

To add a code fragment to a Web publication, click the HTML Code Fragment command on the Insert menu. That opens the Edit HTML Code Fragment dialog box, where you can type or paste the code that you want to use.

When you close the dialog box, a code fragment object is added to your Web page. The object looks something like the following.

You can move the code fragment object around on the page the same way that you move other Publisher objects.

Anchors and links

To create a hyperlink to a specific location on a Web page in Publisher, you must add two HTML code fragments to the page:

• The first code fragment creates an anchor in the location that you want to link to. For example, if you want to link to a section called "Additional Information," you must add HTML code that includes the text for the heading of that section and defines the text as an anchor by giving it a name, such as "additional."
• The second code fragment creates the text or picture that links to the anchor.

 Note   Because each bookmark that you add to a Web page in Publisher requires two HTML code fragment objects, you might want to consider using FrontPage to create complex sites. FrontPage has built-in tools for creating hyperlinks and bookmarks.

Add the HTML code fragment for the anchor

1. Copy the following code.
   

   <p style="font-family:arial;font-size:100%"><a name="additional">Additional Information</a></p>
   

2. In Publisher, display the Web page where you want to add the anchor.
3. On the Insert menu, click HTML Code Fragment.

   The Edit HTML Code Fragment dialog box opens.

4. Select the placeholder text in the dialog box, and then paste the code that you copied into the dialog box. Now modify the code features a bit to fit your particular situation.
5. The

   <p style="font-family:arial;font-size:100%">

   part of the code statement sets the font for the text in the HTML code fragment so that it matches the rest of the text on your page. Replace

   arial

   with the font that is applied to the text on the page. You may have to experiment a bit with font size. For a heading, 100% will probably be right.

   To see the text size of the code fragment, click OK to close the Edit HTML Code Fragment dialog box. On the File menu, click Web Page Preview.

    Note   You can also set the weight of the text in the HTML code fragment by adding a font-weight attribute to the paragraph style statement. For example,

   <p style="font-family:arial;font-size:100%;font-weight:bold">

   makes the text appear bold.

6. In the

   name="additional"

   part of the code statement, replace the name between the quotation marks with the name that you want to use for your anchor.
7. In the

   Additional Information

   part of the code statement, replace this text with text on your Web page that you're linking to.

    Note   The text that you add to the HTML code fragment will show up on your published page, so you may need to delete text that's already on the page. For example, if your page already includes an "Additional Information" heading and you add a code fragment for an anchor that also includes the text

   Additional Information

   , that heading will show up twice on your published page unless you delete the original heading.

8. When the code in the Edit HTML Code Fragment dialog box looks the way you want, click OK.

   An HTML code fragment object appears in your publication. Drag it to the location on your page where you want the text in the code fragment to appear. You might have to experiment a bit to position the code fragment object so that the text appears exactly where you want it. You can change the shape and size of the HTML code fragment object by dragging the object's round handles.

    Note   To see how the code fragment text looks on the page, click Web Page Preview on the File menu.

Add the HTML code fragment for the link

The code that you use for the link depends on whether you are adding the link to text or to a picture.

Test the link

To test the link after you set up both HTML code fragments, click Web Page Preview on the File menu. When the preview page opens, click the hyperlinked text or picture. In the preview, the hyperlinked picture will look like a box with a red x in it. Don't worry. The hyperlink will still work fine, and the picture will show up when you publish your Web publication and upload the picture file to the server.

About the author

Connie Miller, a writer on the Microsoft Office User Assistance team, collects and responds to questions and suggestions you submit to the Publisher Answer Box. To submit a detailed question of your own, click Feedback.