5.3. Creating Hyperlinks and Bookmarks

One of the most common operations that you perform on a Web page is to create hyperlinks to content. Hyperlinks provide navigation for Web sites and link content placed at different locations inside a Web site. The basic attributes of a hyperlink include display text and a URL that the hyperlink points to. When you click hyperlinked display text, the Web browser directs you to the URL connected to that hyperlink. You can create hyperlinks to almost any type of content, including pictures, Web pages, documents, executables (.exe, .dll, etc.), and bookmarks.

You create hyperlinks in SharePoint Designer by using the Insert Hyperlink dialog box, as shown in Figure 5.15. You access this dialog box by choosing Insert Hyperlink or pressing Ctrl+K. This dialog box is also used for editing hyperlinks (although the name changes to Edit Hyperlink).

The Insert Hyperlink dialog box allows you to create hyperlinks by using these panes:

• Existing File or Web Page: The default pane allows you to choose a file from the Current Folder, Browsed Pages, or the Recent Files list. The files or Web pages that are currently open in SharePoint Designer show up with (open) at the end of the filename. You can use the Look in dropdown menu to locate the content you want to create a hyperlink for.

• Place in This Document: Allows you to create hyperlinks to bookmarks on the Web page you currently have open in SharePoint Designer. If no bookmarks have been created, the list is empty.

• Create New Document: Allows you to create a hyperlink to a new document. The interface allows you to change the location of the new document and then specify a target frame for the hyperlink. You can also choose whether you want to edit the newly created document right after creation or later.

• E-mail Address: This option allows you to create a hyperlink to an e-mail address and specify parameters.

Figure 5.15. The Insert Hyperlink dialog box

Also, there are a number of buttons in the Insert Hyperlinks dialog box that allow for these operations:

• Screen Tip: Allows you to specify the screen tip displayed when you hover over a hyperlink. A screen tip can be used to display information about the content that the hyperlink points to.

• Bookmark: Displays the list of bookmarks present on the document that you've chosen as the URL for the hyperlink and allows you to add the bookmark to the hyperlink

• Target Frame: Allows you to choose the frame where the target document of the hyperlink should open

• Parameters: Allows you to specify parameters sent along with the hyperlink. These parameters form the query string in the hyperlink and can be used by the target document for performing various operations. This is especially useful in performing form-based operations by using ASP, ASP.NET, and FrontPage components.

• Remove Link: Removes the link from the Web page

Bookmarks act as anchors that you can insert on Web pages at specific locations of interest and later use hyperlinks to navigate to those locations. They're especially useful if you have a long Web page and you want a Web browser to be able to go directly to a location on the Web page rather than have a user scroll down to the location. You can create a bookmark on a Web page by following these steps:

When you view the Code view after inserting a bookmark, the bookmark is just an <a> tag with a Name attribute specified for it. To create a hyperlink to your newly created bookmark, follow these steps:

To preview the Web page in a browser, press F12. If the page is long enough (to activate scrollbars in the browser), when you click the newly created hyperlink, the page automatically scrolls to the location of the bookmark.

5.3.1. Creating parameters in hyperlinks

Sometimes, you might want to send some information with hyperlinks. This information could be used by scripts running on the target Web page to perform operations. For example, you can send values of variables that could be used by an ASP target page to retrieve information from a database.

Sending parameters in a hyperlink involves creating a query string along with the hyperlink. A query string is a string concatenation of name-value pairs of variables that you want to send with the request for the target Web page. The target Web page can use these name-value pairs for operations by using client- or server-side scripts. To understand the SharePoint Designer interface for creating parameters, the following steps take you through the process of creating a hyperlink that has three parameters: ID, Name, and ZipCode:

The hyperlink that's created as a result of the previous steps has this code after the name of the target Web page:

?ID=1&Name=Texas&ZipCode=75052

This portion of the URL forms the query string that's passed on to the target Web page in the GET request for the target Web page. A script on the target Web page can retrieve parameters from this query string and then use them for performing its business.

Although in this exercise you created only static parameters with fixed values, you can create ASP or ASP.NET Web pages where these parameters can have values filled dynamically (such as from a database).

5.3.2. Targeting frames in Web pages

Using the Target Frame dialog box, as shown in Figure 5.18, while inserting hyperlinks, you can specify which frame window the target page should open in. You have these options available by default in the Common Targets list:

• Page Default: No target frame is specified.

• Same Frame: Uses target=_self attribute to indicate that the target page opens in the same frame window as the page containing the hyperlink

• Whole Page: Uses target=_top to specify that the target page opens in the main browser window

• New Windows: Uses target=_blank to specify that the target page opens in a new browser window

• Parent Frame: Uses target=_parent to specify that the target frame opens in the parent frame of the frame in which the current Web page is open

Other than the default options, the Common Target list also displays the frames that exist in the current page where the hyperlink is being created. The Set as page default check box allows you to set a particular frame as a default frame type for all hyperlinks in a Web page. This is done by adding a <base> tag in the <head> section of the Web page, indicating that the default frame should be used.

Figure 5.18. The Target Frame dialog box