Adding Smart Tags to Web Pages

  • Article

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

 

Paul Cornell
Microsoft Corporation

July 2001

Download Odc_stwebpages.exe.

Summary: This article shows you how to make your Web pages smart-tag aware. (6 printed pages)

Contents

Introduction
Terminology Used in This Article
Smart Tag Namespace URI Declaration and Usage
Smart Tag Type Declaration and Usage
Smart Tag OBJECT Element Insertion
Smart Tag Element Behavior Declaration
Making Terms Smart-Tag Aware Solution: Adding a Smart Tag to a Web Page
Conclusion

Introduction

Web pages have traditionally relied on hyperlinks to associate text with individual resources on a file system, Web server, or e-mail server. With the introduction of smart tags in Microsoft® Office XP, you can enhance this type of hyperlinking behavior by associating text with a shortcut menu that contains associations not only with both multiple resources and custom applications.

To add smart tags to Web pages, you can use a text editor such as Notepad or an HTML editor such as Microsoft FrontPage® 2002. To view smart tags, users must have the following software installed on their computers: Office XP, Microsoft Internet Explorer 5 or later, and the appropriate smart tag dynamic link library (DLL) or smart tag Extensible Markup Language (XML) list description file. Creating, deploying, and registering smart tag DLLs and smart tag XML list description files are beyond the scope of this article. For more information on creating, deploying, and registering smart tag DLLs and smart tag XML list description files, see the articles Developing Smart Tag DLLs, Developing Simple Smart Tags, and Deploying Smart Tag DLLs by Using the Visual Studio Installer.

To understand how to add smart tags to Web pages, you must be familiar with these concepts, which will be presented in the following sections:

  • Smart tag namespace URI declaration and usage.
  • Smart tag type declaration and usage.
  • Smart tag OBJECT element insertion.
  • Smart tag element behavior declaration.
  • Making terms smart-tag aware.

Terminology Used in This Article

To understand these concepts, you should first be familiar with the terminology used in this article.

  • namespace URI
    A namespace Uniform Resource Indicator (URI) is an XML construct for uniquely identifying a group of XML tags that belong to a logical category. An example of a namespace URI is urn:schemas-microsoft-com:moneycentral (the characters urn: are used to designate this namespace URI as a Uniform Resource Name (URN), which is a type of URI).
  • smart tag type
    A unique namespace URI plus its tag name. A # character is appended to the namespace URI and is used to separate the namespace URI from its tag name. An example of a smart tag type is urn:schemas-microsoft-com:moneycentral#StockTickerSymbol.
  • tag name
    A property of a namespace URI, for example: StockTickerSymbol.

Now let's move on to the concepts for adding smart tags to your Web pages.

Smart Tag Namespace URI Declaration and Usage

To add smart tags to Web pages, you must first declare the Office namespace URI inside of a Web page. Then, declare one or more smart tag namespace URIs in the Web page's HTML element. You should also provide an alias for the Office namespace URI and smart tag namespace URIs by using the string xmlns: followed by the alias, followed by an equals sign, followed by the namespace URI. For example, the following namespace URI declaration uses the alias o to represent the namespace URI urn:schemas-microsoft-com:office:office (which represents the Office namespace URI), and must be typed exactly as shown:

xmlns:o="urn:schemas-microsoft-com:office:office"

Similarly, the following namespace URI declaration uses the alias odc to represent the user-defined namespace URI urn:msdn-microsoft-com:odc-st:

xmlns:odc="urn:msdn-microsoft-com:odc-st"

You can declare as many user-defined namespace URIs as you wish in a document to uniquely qualify as many aliases as you need. However, any namespace URIs other than urn:schemas-microsoft-com:office:office must match exactly one of the namespace URIs contained in a smart tag action DLL or smart tag XML list description file installed and registered on the user's computer. For example, if one of the smart tag types is declared as urn:schemas-microsoft-com:smarttags#msdnterms in the ISmartTagAction_SmartTagName property of your smart tag action DLL, or as the value of the type attribute for the smarttag element in your smart tag XML list description file, then you should declare your namespace URI in your Web page as the characters preceding the # symbol, such as urn:schemas-microsoft-com:smarttags. At run time, Office XP tries to match the namespace URI urn:schemas-microsoft-com:smarttags in the Web page to any namespace URI defined as urn:schemas-microsoft-com:smarttags in all of the smart tag DLLs and smart tag XML list description files on a user's computer to resolve smart tag actions. If Office XP is unable to match the namespace URIs, then the smart tag actions associated with that smart tag type will not be invoked.

Smart Tag Type Declaration and Usage

Once you have declared a smart tag namespace URI, you must declare one smart tag type for each smart tag type on your Web page. This includes properties such as the tag name, the associated namespace URI, and the URL from where to download the accompanying smart tag DLL or smart tag XML list description file if it isn't already installed on the user's computer. The following is an example of a sample smart tag type declaration:

<o:SmartTagType
    name="msdnterms"
    namespaceuri="urn:schemas-microsoft-com:smarttags"
    downloadurl="http://localhost/smarttags/download.asp">
</o:SmartTagType>

Smart tag type declarations are placed in the Web page's HTML after the TITLE element if present, or after the HEAD element's opening tag. The syntax for declaring a smart tag type is as follows:

Item/attribute Descripton
o: A prefix representing the Office namespace URI urn:schemas-microsoft-com:office:office.
SmartTagType A required root element for a smart tag type declaration.
name A required attribute representing the tag name of the smart tag type. This attribute must match the characters following the # symbol in either the value of the ISmartTagAction_SmartTagName property in a smart tag action DLL, or the value of the type attribute for the smarttag element in a smart tag XML list description file. For example, if the value of the ISmartTagAction_SmartTagName property (or the type attribute of the smarttag element) is urn:schemas-microsoft-com:smarttags#msdnterms, then the value of the name attribute must be msdnterms.
namespaceuri A required attribute representing the namespace URI of the smart tag type. The value of this attribute must match one of the namespace URIs declared earlier in the HTML element. Each smart tag type on a given Web page must have a unique value for the namespaceuri attribute.
downloadurl An optional attribute representing the URL from where to download the accompanying smart tag DLL or smart tag XML list description file. If this attribute is not specified, the accompanying smart tag DLL or smart tag XML list description file must already be installed and registered on the user's computer, or else no actions will appear when the accompanying Smart Tag Actions button is clicked, and clicking Check for New Actions on the Smart Tag Actions menu will have no affect.

Smart Tag OBJECT Element Insertion

To enable the Smart Tag Options button to display appropriately on the Web page, you must add the following OBJECT element to the Web page's HTML, preferably in the HEAD element, as follows:

<OBJECT
    classid ="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui>
</OBJECT>

In the OBJECT element, the classid and id attributes must appear exactly as shown.

Smart Tag Element Behavior Declaration

In Internet Explorer 5 and above, Dynamic HTML (DHTML) behaviors are used to enhance the default behavior of specific elements. Office XP provides a DLL that associates smart tag namespace URIs to DHTML behaviors, and this association is required in your Web page's HTML code to properly activate the smart tag's shortcut menu. For example, the following DHTML behavior associates the Smart Tag Options button in the OBJECT element to any element that begins with odc::

<STYLE>
    odc\:*{behavior:url(#ieooui)}
</STYLE>  

In this example, odc maps to the alias declared earlier, and ieooui maps to the id attribute of the OBJECT element.

Making Terms Smart-Tag Aware

One final step remains to adding a smart tag to a Web page: you must designate which terms on the Web page will display the Smart Tag Options button. To designate these terms, enclose each term on the Web page within a smart tag alias/tag name element. This element will take the form of the smart tag alias, followed by a colon, followed by the tag name. For example, if a smart tag's alias is odc, the tag name is msdnterms, and the smart-tag actionable term is MSDN, then the smart tag alias/tag name element would be odc:msdnterms and would be coded in HTML as follows: <odc:msdnterms>MSDN</odc:msdnterms>.

Solution: Adding a Smart Tag to a Web Page

Let's quickly review the required elements for adding a smart tag to a Web page. The HTML code for the Web page must contain:

  • An Office namespace URI declaration.
  • A smart tag namespace URI declaration for each smart tag type in the Web page.
  • A smart tag type declaration for each smart tag type in the Web page.
  • A smart tag OBJECT element.
  • A smart tag element behavior declaration for each smart tag namespace URI in the Web page.
  • Every term you want to display the Smart Tag Options button must be enclosed within the appropriate smart tag alias/tag name element.

Now we can put all of this information together to add smart tags to a Web page.

The sample download for this article, which contains four files, comprises a simple smart tag solution for a single Web page:

  • msdnwebsites.xml, a simple smart tag XML list description file.
  • MSDN Web Sites.msi, which, when opened, installs the msdnwebsites.xml file to the C:\Program Files\Common Files\Microsoft Shared\Smart Tag\Lists folder on your computer.
  • beforesmarttags.htm, a file that shows what HTML code should look like before smart tags are added.
  • aftersmarttags.htm, a file that shows what HTML code should look like after smart tags are added.

To examine and test the solution, place the msdnwebsites.xml file in the C:\Program Files\Common Files\Microsoft Shared\Smart Tag\Lists folder on your computer (or open the MSDN Web Sites.msi file). Compare the HTML code in the beforesmarttags.htm file with the HTML code in the aftersmarttags.htm file.

To test the smart tags' behaviors, in the aftersmarttags.htm file, rest your mouse pointer on any of the purple underlined words, and click the Smart Tag Options button. On the Smart Tag Options menu, click one of the available actions.

Use the code in the msdnwebsites.xml and aftersmarttags.htm files to create your own simple smart tag XML list description files and smart-tag aware Web pages.

Conclusion

By using a text editor such as Notepad or an HTML editor such as FrontPage 2002, you can make your Web pages smart-tag aware. Assuming your users have Office XP and the appropriate smart tag DLL or smart tag XML list description file installed on their computers, the Smart Tag Options button and associated actions will be available for properly tagged terms on your Web pages.