Initial Publication Date: August 22, 2006


By default links in the editor are displayed as the familiar blue, underlined text. You can edit the text of an existing link directly and clicking on a link will display a small pop-up menu from which you can edit the url, open it in a new tab or remove the link altogether. You can create new links by selecting the text you'd like to be clickable and clicking the link button in the toolbar. That will cause it to display a space for you to enter the relevant url.

Clicking a link displays a dialog for editing or visiting the related url.

Making links with square bracket tags

Serckit also allows you to type in active links using a square bracket syntax. The simplest example is to surround the url (which should start with https://) with square brackets. For example, [] will make a link like this:

You can further specify the text of the link (as well as other options) by using the long format: [link url 'link text']. As you might guess the 'url' should be replaced by the actual url you'd like the link to point to , and whatever appears between the single quotes as 'link text' will be the text people actually click on.

These square bracket link tags are 100% equivalent to making links directly with the link button.  And in fact if you enter links with the square bracket tags syntax the system will convert and display then as the normal blue underlined text in future editing sessions.  If you edit the page in html mode you'll find that all links are actually stored with the square bracket syntax.

Note that the blue, underlined link format is especially handy when you're actively editing a page as it provides a direct way to follow a link without having to exit the editor: click the link and then click the displayed url to open it in a new tab.

Good links: choosing strong link text and the right url

The Nielson/Normal group of web usability experts provides some useful guidelines for writing effective link text.  Sneak preview: 'click here' is never a good choice for link text.

While creating links to outside sites the right url is (hopefully) unambiguous (just copy the full url starting with http from a browser address bar) there are choices to be made if you're linking to other pages within SERC hosted websites. Here are some guidelines. We give examples using the square bracket syntax but the url choices are the same if you're using the link button:

  1. When linking between pages in the same module (whose urls only differ after the last /) just use the last bit of the url of the targeted page: [link page2.html 'link to page 2']
  2. When linking to an existing page that's on the SERC server but part of a separate project, build the link from the 'server root' starting with the left-most '/': [link /introgeo/models/index.html 'Starting Point Models']
  3. When linking to a page within the same project you might want to link to the development version of the page: [link /introgeo/models/index.html 'Starting Point Models']. Presumably if you're working on a dev page it makes more sense for your links to point to the other dev pages, rather than the live ones so you can test drive the dev site and really see how all the links will work. Happily when you make a page live all links will automatically have /dev removed so that your live page links will point to their live counterparts.
  4. You can link to locations within a specific page using an anchor syntax (familiar to those html aficionados among you): [link #midpage 'Jump to mid-page']. This is dependent on the existence of an anchor with appropriate name being added to the appropriate point on the page. In this case [anchor 'midpage'] would do the trick. In addition to linking to locations in the current page, you can point to (previously marked) locations on other pages by adding a # followed by the name of the anchor to the end of the normal link url for that page.
  5. Avoid using the entire address for links to SERC pages: [link 'Starting Point Models']. While it will work it's unnecessary and can lead to some confusion (for reasons we won't get into here). Use the format in bullet 2 above.

It's also possible to make "mailto" links using a tag like [].For folks whose browsers are configured to interact with their email program correctly these links are a handy short cut to allow them to start an email to the address provided. Of course these sorts of links also attract spam to the given address and can cause some very confusing behavior for people who's browsers aren't configured in that way. In most cases it's more robust just to provide the email address (without the mailto tag); people can copy the address out of the web page into their email program manually.

There are several other more specialized features of the link tag that only work in the square bracket format. The variants [link url 'link text' right] and [link url 'link text' new] create links that are right justified and links that will open in a new window (which you should almost never do). Adding 'buttton' or 'bigbutton' to the end of the tag causes it to appear as a clickable button. This is best when the link it set apart from other text rather than being in the flow of a sentence. Finally there is the expert-only 'nocatalog' option which suppresses Serckit's behavior of automatically converting some links to outside resources into catalog records. The full set of option in order (which matters) is shown in this example:

[link url 'link text' nocatalog new bigbutton right]