Creating Anchor Tags (or linking to different points on a page)

Within the last couple of weeks we've received questions about how to create links that link from one part of a page to another. I think part of the issue is that the icon in the text editing window for creating these links (also called anchor tags or bookmarks) is different since last year's upgrade.

One quick note before we get started - I was recently working on a site in CommonSpot that had a lot of anchor tags and found that whenever I would attempt to edit the pages using Internet Explorer 7, the anchor tags would break due to extraneous code that Internet Explorer was adding. Basically, as soon as I opened a page with anchor tags while logged into CommonSpot using Internet Explorer 7, it broke them. I'm not sure if this issue is still occurring, but just in case, you may want to use Firefox instead (or at least test it out first).

So, here's a brief tutorial that I made for one of our Cspot content editors:

In the example below we will create a link on the bulleted item Item 1 so that when the user clicks on it, it will take them to the heading Item 1:

1. Once you have your content in place, in the text editing window, begin by placing your cursor next to the item or area of the page that you want to link to:





2. Next, select the Anchor Tag icon/button (if it's not visible in your text editing window you can either make the window larger or select the drop down arrow to see all the icons/buttons):




3. A dialog box will pop open. Now enter a name for your anchor tag:


Here are some naming conventions that you should use when creating anchor tags:
• Do not include any spaces in the name - this will cause your link to not work; instead, use an underscore ( _ ) if necessary.
• Anchor tag names are case sensitive
• Try to keep your anchor tag names short
• Name them something that makes sense or is related to that area or section of the page


Once you've entered a name, Click OK - you've just successfully completed the first part of creating an anchor tag. Now you just need to create a link to it:


Select/highlight the text that you want to create the link on (i.e when the user clicks on this text it will take them to section of the page that you designated when you created your anchor tag):





With the text still highlighted, select the link/icon button:




4. From here you'll follow the standard steps for creating links until you get close to the end:
• The dialog box comes up for setting links
• Select Link to Existing Page, Uploaded Document or URL
• Click Next



5. When the Insert Link dialog box comes up, select External URL or Relative Internal URL and enter the name of the anchor tag you created, preceded by the pound sign ( # ). Remember, it has to be exactly as you named it (uppercase, lowercase, underscores if you used them):



6. Click Finish
7. Save your changes and test out your linked anchor tags.

The Web doesn't work like your word processor

The Web is not print, and the editor you use in CommonSpot shares some similarities with Microsoft Word, but they are not the same programs. One of the first lessons I learned as a Web designer was that the Internet is dynamic and you can never count on what you create looking the same across your users' computers.

Let's say you type this fancy new document in Word and center all of its text by throwing in a bunch of spaces or tabs. It looks great and you print 50 copies. Aside running out of toner, you can guarantee that each of those 50 copies will look exactly the same. The text will be in Times New Roman and centered at 12 points. But the Web does not work this way. What you see on your screen isn't necessarily what your users will on theirs.

Not only do you have to take into account the quirks of each of the major Web browsers, you have to realize that your users are coming to your Web pages on different devices with different screen resolutions.

Let's use a very simple example with some centered text.


In the image above, I've centered text using a bunch of spaces. This how the page would appear on a computer monitor with a resolution of 1024 x 768. (The image has been sized down to fit on this blog.)

Now that same text on a monitor at 1680 x 1050:



Uh, oh. It's no longer centered. The better way is to use the center button in the text editor.




Most of the pages you construct will be in the basic CommonSpot templates and you don't have to worry much about variations, although you should always test what you have made and never count on it looking the same across platforms. Sometimes a simple stretch or shrinking of a screen can make the simplest designs fall apart.

Major Web browsers also throw their own curve balls. Although each browser's support of Web standards has improved greatly over the past 15 years, each has its own quirks, especially when rendering your formatted pages.

Internet Explorer 6, which you cannot use to edit CommonSpot pages, is the absolute worst offender. The nearly eight-year-old browser has given Web developers nightmares for the past few years and is mercifully dying. The latest statistics show IE 6 only holding about 19 percent of the market. That share, like IE's use overall, continues to fall.

I strongly recommend you test your newly designed pages in the major browsers (Internet Explorer 7, Firefox 2 and 3, and Safari 3) and at different resolutions. Mac users, if you do not have Internet Explorer, try NetRenderer. That site also lists a variety of rendering services, which may or may not help you with the other browsers.

Why are some of my editing tools, such as link icon or image icon, missing from my formatting window?

If you are using Internet Explorer 7.0 or higher or Mozilla Firefox 2.0 or higher, then this problem is related to a caching issue.

In most instances, you can resolve the problem by:

1. Logging into your site.
2. Toggling to author mode from the middle icon named Page View.
3. Going to the very right icon named Properties & Actions and selecting Clear & Update cache.
4. You might have to log out and log back in.