Insert/Edit Link

Overview

The Insert/Edit Link tool provides the basic functionality to add a hyperlink within the WYSIWYG Editor. Links are created by highlighting text or an image, clicking the Insert/Edit Link icon, and specifying the Link URL. The Insert/Edit Link icon is dimmed until the text or image to be hyperlinked is selected. A hyperlink can point to an internal web page, an external web page not maintained in OU Campus, or a directory or file within OU Campus or external to it. This can include linking to binaries, such as PDFs. In addition to providing the basic functionality for creating and maintaining links, this tool provides more advanced functionality such as linking to anchors, specifying targets, applying classes, and utilizing JavaScript and HTML to affect the style and behavior of a link.

Classic Editor

Classic Link Icon

JustEdit

JustEdit Link Icon

This page is divided into the following sections:

Inserting an Internal Link

  1. Within the WYSIWYG Editor, select the text or image for the link. In JustEdit, you can also insert a link into blank space, but unless you specify "Text to Display" the dependency tag will be displayed on the page.  
  2. From the toolbar, click the Insert/Edit Link tool.
    Classic Link IconJustEdit Link Icon
  3. The Insert/Edit Link modal > General or Basic tab is shown. If applicable, the modal contains existing link information.Insert/Edit Link General Tab
    Basic Tab to Insert Link
  4. Click the Browse icon to select an internal page to which to link.Browse Icon
    JustEdit Browse
  5. The Select File modal is shown.Select File Modal
  6. Select a file or directory to which to link. The staging server is selected by default and a PCF file type should be selected in order to have links managed. Navigation can be accomplished by:
    • Clicking the breadcrumb link to navigate up the folder structure
    • Filtering by entering characters of a subfolder or file name
    • Filtering by tags
    • Uploading a file and linking to it (Click the Upload button)
    • Selecting a different environment or auxiliary site
      Generally, for internal linking just select the PCF, click Insert, and see the next step.
  7. From the Select Product modal, the HTML output is usually the default and highlighted, so click Insert Link.
  8. In the Title field, it is frequently a best practice to add a short descriptive phrase. 
  9. From the Insert/Edit Link modal, click Insert.

Other configuration options for a link are also available before inserting the link; for example, selecting a target window/tab for the link to open in.

The title is important, as this is used by screen readers and helps keep the site in compliance with accessibility compliance standards. The text entered in this field is used to create the title attribute for the <a> element in HTML. A developer might use this attribute to display the text when mousing over the link. Here’s what it looks like in HTML:

<a title="Contact Us" href="{{f:####}}">test</a>

Linking to an External Page

The steps are the same as the procedure outlined above, but rather than browsing for the internal link, the complete URL for the resource can be typed (or pasted) into the URL field. Links to external pages are not tracked by Dependency Manager. The protocol prefix, i.e., http:// or https://, is required.

Linking to an Unpublished File

An unpublished file on the staging server or publish target can also be linked to, prior to actually publishing the page. The steps are nearly the same as the procedure outlined in the Inserting an Internal Link (Typical) heading up to and including linking to the HTML product. However, an important difference is that when publishing the file, there will be an Include Unpublished Dependencies checkbox and by default, it will be selected. This ensures that the unpublished file that was linked to is also published and proper link management is maintained.

Include Unpublished Dependencies

Linking Across Sites within an Account

Links can also be made across sites within an account when inserting a link on a page within the WYSIWYG. The steps are the same as the procedure outlined in the Inserting an Internal Link (Typical) heading, but rather than selecting from production select Sites in the breadcrumb, choose the appropriate site, and navigate to the desired file.

Links and Dependency Manager

When Dependency Manager is activated, it is important to browse for the appropriate page (instead of typing or pasting in a URL) in order to ensure that the link will be updated. Pages can also be linked to internally without browsing by inserting a dependency tag, and can also be specified with a root-relative syntax.

Dependency Manager can be configured to manage links both within a site and across sites within an OU Campus account. However, it does not manage links to external websites. If Binary Management is in use for the site or sites, binary files such as PDFs and images are also managed.

Links with dependency tags may also be inserted with the Source Editor and file choosers and are supported across publish targets if Multi-Target Publish is configured. Once the appropriate page is selected, a dependency tag is shown instead of the page path. The actual path to which the link will be pointed is shown below the dependency tag.

Example syntax for the tags are shown as follows:

  • {{d:####}} — Directory tag
  • {{f:####}} — File/Page tag
  • {{a:####}} — Asset tag
  • {{s:####}} — S-tag

Example of a Dependency Tag

Dependency Tag in Insert/Edit Link Tool

Dependency Tag in JustEdit

Broken Links

When initiating a recycle action, the dialog provides a warning that any derivatives on the production server or publish target will be removed, as well as listing any files that contain links that will become broken.

Move Dialog with Broken Link Listing

If content is deleted anyway, a broken link is created. The system has various indications for broken links. Dependency Manager provides informative reporting for broken links and broken assets. When a dependency is lost, such as when a linked-to page or a subscribed-to asset is deleted, the dependency tag, path, and file name are shown within asterisks in the Insert/Edit Link modal. For example:

*** Broken f:1234 /training/about/filename.html***

One way to avoid broken links is to utilize the Include Unpublished Dependencies checkbox from the publish modal to publish any unpublished content. Dependency Manager reports at page publish time if there is dependent content that has not been published to the target server. This includes content that is linked or referred to by the page that is being published, as well as any unpublished assets. By selecting to include the unpublished dependencies, those unpublished files are published as well. This action prevents broken links (for example) from existing on the current page being published.

This checkbox is only shown if the Dependency Manager is being used on the site, dependency tags are used in the page being published, and one or more of those dependency tags refer to files that have not been published to the target yet.

For more information, visit the Dependency Manager page.

General Tab

The General Tab is the default tab opened when using the Insert/Edit Link tool. The General Properties include the basic options for inserting a link on a page within the WYSIWYG Editor.

Link URL

Used to specify to which page to link. For external web pages, enter the full URL, which should include the http:// or https:// prefix. For internal links, click the Browse icon to select the file. Dependency tags are automatically populated when Dependency Manager is active and an internal link is being inserted.

Target

Used to specify how the linked-to page is displayed. As a general rule, when inserting a link to another page on the institution’s website, the link should open in the same window. When inserting a link to a page outside the institution’s website, or to a PDF, or other similar file, the page should open in a new window. This options for the Target field include:

Selecting a Target

Target dropdown

  • Open in This Window/Frame or None: Linking to pages on the institution’s website
  • Open in New Window (_blank) or New Window: Linking to pages on another site or binary files
  • Open in a Parent Window/Frame (_parent): Used with framesets
  • Open in Top Frame (Replaces All Frames) (_top): Opens a page in the topmost parent frame

Title

The Title is both valuable and important as this is used by screen readers and helps keep the site in compliance with accessibility standards. The text entered in this field is used to create the title attribute for the <a> element in HTML. The title is an HTML attribute for the link and is often used to display a message while hovering over a link, which is also valuable for meeting accessibility standards. Here’s what it looks like in HTML:

<a title="Contact Us" href="{{f:####}}">test</a>

Class

If a specific CSS class has been defined, this can be used to apply a class to the link. CSS can be defined for the site and for display in the WYSIWYG and the CSS and TXT files used for customization can be placed anywhere; however, typically, the site CSS is located in the /_resources/css folder and the WYSIWYG CSS and TXT files are located in the /_resources/ou/editor folder. The OU tags for the <div> and <editor> elements are located in the TMPL file.

For more information, visit the Customizing the Styles Drop-Down page.

Advanced Tab

The Advanced tab provides additional configuration items for your links. This includes various HTML attributes that can be added to an <a> tag. The behavior of the attributes are contextual to HTML5 and to pre-HTML5/XHTML; that is, the validity and usage of an attribute may differ from one specification/recommendation to the next.

Advanced Tab in Classic

Advanced Tab in JustEdit

HTML5 and Pre-HTML5/XHTML

Note that some attributes included on this tab for the <a> tag link may be obsolete or deprecated for HTML5; for example, charset, which is no longer supported in HTML5, but is valid for pre-HTML5. Other attributes have changed scope as they have now become global attributes. By default in OU Campus, the HTML5 schema is not enabled as a site setting, this can be enabled by an administrator with caution. If the HTML5 schema is selected in the site setting, then the attributes that are no longer supported in HTML5 may not be available and/or may be removed from the markup by the WYSIWYG Editor.

Defining a Hyperlink

The value of the href attribute of an <a> tag is defined with the Link URL on the General tab when editing within the WYSIWYG Editor. The attributes on the Advanced tab are optional and many of the attributes require that the href attribute be defined. If the attribute values for the Advanced tab are defined via the tab fields or source code, the value is returned in the field. The Link URL can be manually specified, for example for an external resource, or the browse icon can be used to spawn a file chooser to add a link to an internal page or file, or to a page in another site within the account, and this ensures that the Dependency Manager is used to track and manage linking within OU Campus. The value of the href can even be script. For example: javascript:alert('Gallena University');

The HTML5 specification makes a distinction between the terms hyperlink and link. A "link" to an external resource is used to "augment" the current content. For example, a link can be created with a <link> element to a stylesheet, but a hyperlink is exposed to the user for the express purpose of providing access to additional content. This distinction of diction is not typical within the OU Campus documentation as the terms are link and hyperlink are frequently used interchangeably. Link or linking is frequently used as a verb to express the concepts, actions, and code details involved with a hyperlink.

Many of the attributes provided on the Advanced tab require the href attribute also be defined within the <a> element and the specification also indicates that a hyperlink (as compared with a link) is created.

Here is an example of an <a href> contstruct with a few attributes included:

<a id="h-class-x" class="red" href="http://support.omniupdate.com/" target="_blank">Link to Target Content</a>

The attributes that may be defined for the Advanced Properties include: 

 ID

Specifies the value of the id attribute for the link. In previous incarnations of HTML, the name attribute on an <a> element was used to create an anchor and target it. For conformance with HTML5, the id attribute is preferred over the name attribute. For OU Campus pages the id should at least be unique to a page. The id attribute is flexible in implementation and can provide a specific target for an element, including for on-page linking within a document. An id can also be used as a target by scripts. Another usage of ids is to style an element with CSS, or to bookmark or footnote a document.

An id attribute:

  • Is a global attribute in HTML5
  • Must be a unique value relative to the "element's home subtree"
  • Must contain at least one character
  • Must not contain any space characters

The following example includes, firstly, a link to a footnote, and an id within its <a> element. The second example below is a caret character that links back to the text. This is how footnotes are accomplished on this page.

Syntax

<a id="hyperlink-comparison" href="index.html#f1">See footnote.[1]</a>
<a id="#f1" href="index.html#hyperlink-comparison">^</a>

Example of Bookmarks

An id can be used to link to a bookmark on a page. For example:

<h1>Getting Around</h1>
<p>This topic includes information about how to get around campus.</p>
<h2>On this Page</h2>
<a href="#biking">Free Bike Usage</a>
<a href="#trolley">Free Campus Trolley</a>
<a href="#pods">Free Auto Pods</a>
<h2><a id="biking">Free Bike Usage</a></h2>
<p>Mountain bicycles are provided free of charge for on-campus usages. Try as you might they cannot be relocated off-campus as the embedded seashell prevents it.</p>
<h2><a id="pods">Free Auto Pods</a></h2>
<p>Auto pods with autonav can be used for longer off-campus journeys and require at least two travelers for distances greater than 3km roundtrip.</p>

 Style

The style attribute can be used to apply inline CSS for the hyperlink. Several attributes from HTML 4 now apply to all elements as global attributes, the style attribute is one of them. It is not necessary to enter the quotation marks. For a markup like:

<a style="color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;" href="http://support.omniupdate.com/">Funny Link Styling</a>

Enter the following in the field:

color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;

 Classes

Specifies one or more classes for the hyperlink that have been defined in CSS. The class attribute is considered global in HTML5 and can also be used to specify a microformat. 

Syntax

<a class="shake animated" href="http://support.omniupdate.com/">Link to page</a>

 Target Name

Note: The frame/frameset element is not included in HTML5. The Target Name field can be used to specify a target or browsing context for a hyperlink. By default when no target is specified, _self is assumed, but does not have to be explicitly set. Using target can also imply a new browsing context. The href attribute is required when utilizing target. The target can also be set on the General tab and if it is explicitly set there, the value is returned on the Advanced tab. The following predefined values can be used:

  • _self -- Opens the link in the current window/frame/tab: Generally used for linking to pages within the institution’s website.
  • _blank -- Opens the link in a new window. Generally used for linking to pages on another site, binary files like PDFs, in order to open content in a new browser tab.
  • _parent -- Opens in a parent window/frame; previously common with framesets (pre-HTML5)
  • _top -- Opens in a top-most parent frame to replaces all frames (pre-HTML5)

Syntax

target="_blank"

 Language Direction

Specifies the text direction (dir attribute) for the link. The HTML specification suggests that the use of dir is preferred over specifying text direction with CSS. It also allows for the value of the attribute to be "auto" but does not prefer it, even though the auto value allows for the direction to be determined programatically.[4] The HTML specification provides an example of tagging that uses the value of auto for the dir on a paragraph. The first word of the paragraph is tagged with <bdi>, meaning that this particular word can go in either direction. Several examples are provided that include English, a left-to-right language, and Arabic, a right-to-left language. When rendered, the English language text is left aligned to the starting edge of the paragraph and the Arabic to the right. This includes the changing of the order of the <bdi> tagged words. 

Syntax

<a dir="ltr" href="http://support.omniupdate.com/">Link to page</a>

The dir attribute is global in HTML5. The drop-down provides the following choices:

  • Left to Right: dir="ltr" -- The ltr state provides "directionally isolated" left-to-right text.
  • Right to Left: dir="rtl" -- The rtl state provides "directionally isolated" right-to-left text. 

LTR, RTL, auto, and BDI

 Target Language

Specifies the language of the target content of the hyperlink. The hreflang attribute is considered a global attribute in HTML5. The hreflang attribute is used on a link to indicate the language of the content that is linked to as compared with the language of the hyperlink itself (the Language Code can be used for that). 

Syntax

hreflang="sv"

According to the following W3C page, there are pros and cons to using hreflang, and perhaps caveats, but nonetheless may be useful in certain circumstances.

For more information and examples, visit the Indicating the language of a link destination

From the site above is an example of hreflang usage, which is used in part here. The following example has a link that points to a page in Swedish and uses the hreflang attribute with language code for Sweden, SV. The styling is created in CSS. The result is that for each element with an hreflang attribute, the CSS adds the value of that attribute in brackets after the link.

Link example

"There is also a page describing why a DOCTYPE is useful [sv]."

HTML Markup Example

<p>There is also a page describing <a href="http://www.w3.org/International/articles/serving-xhtml/Overview.sv.php" hreflang="sv">why a DOCTYPE is useful</a>.</p>

CSS Example

a[hreflang]:after { 
    content: " [" attr(hreflang) "]";
    color: #999;
    vertical-align: super;
    font-size: 70%;
    } 

For more information about localizing languages for a global audience using HTML, visit the Authoring HTML: Language declarations (W3C working Group Note) page.

 Language Code

Specifies the primary language (lang attribute) for content of the element, in this case a hyperlink and for any element attributes that contain text. The lang attribute is considered a global attribute in HTML5. "Its value must be a valid BCP 47 tag, or empty string. Setting the attribute to the empty string indicates that the primary language is unknown... If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any." 

See this specification for specifics when using with XML or for using xml:lang: attr-lang .

Example

<a lang="fr" href="http://http://www.france.fr/">Lien vers la page</a>

The following language code lookup tool may come in handy:

http://rishida.net/utils/subtags/

 Target Character Encoding

Obsolete for HTML5. Prior to HTML5, charset can be used to specify the encoding (charset attributes) for the target to which the hyperlink is linked. For example:

<a charset="ISO-8859-1" href="http://support.omniupdate.com/">Link to page using ISO encoding.</a>

However, the default character encoding for HTML5 is UTF-8 as the unicode standard provides broader support for global localization with an inclusive set of characters, punctuations, and symbols. The standard also provides "processing, storage, and transport of text, independent of platform and language."

 Target MIME Type

Specifies the MIME type for the hyperlink. The href attribute is required when utilizing type. This can be used to advise of the Internet media type of the linked resource. The value must be a valid MIME type, which might include an image, audio, or video media type. Examples of this string are:

  • text/html
  • video/ogg
  • image/png

For more information about valid MIME types, visit the IANA MIME Types Registry page.

Syntax

<a type="text/html" href="http://support.omniupdate.com/">Link to page</a>

 Relationship Page to Target

Specifies a specific relationship (rel attribute) for the hyperlink to the target. One or more values can be provided for the attribute and if more than one is used they must be space separated. The meaning of some link type attribute values are determined in context by element or by combination usage with another attribute.

  • The rel attribute is an extensibility mechanism that can be used "to annotate links"
  • The HREF attribute is required when utilizing target.
  • Link types are always ASCII case-insensitive, and must be compared as such; For example  rel="next"  is the same as  rel="NEXT".
  • It is not used by browsers so much as by search engines

"Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the rel attribute as defined for those keywords in the link types section. Unlike link elements, however, a and area element with an href attribute that either do not have a rel attribute, or whose rel attribute has no keywords that are defined as specifying hyperlinks, must also create a hyperlink. This implied hyperlink has no special meaning (it has no link type) beyond linking the element's document to the resource given by the element's href attribute.

A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink."

Syntax

<a rel="author" href="http://support.omniupdate.com/">Link to page</a>

Example 

<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>

Note if the attribute usage is intended to create a hyperlink, it is indicated in the table below.

Attribute Value Link Type Description
alternate

Hyperlink

Indicates that link target is an alternate representation of the current content.

--If used with the type attribute set to the value application/rss+xml or the value application/atom+xml, the keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page)

--If used with the hreflang attribute, and that attribute's value differs from the root element's language, it indicates that the referenced document is a translation.

--If used with the type attribute, it indicates that the referenced document is a reformulation of the current document in the specified format.

Example when use with hreflang and type:

The following link is a French translation that uses the PDF format:

<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
author

Hyperlink

Indicates that link target is the author of the current content.

--Intended to be a way to provide more information about the author

--Can be used with mailto in order to provide the author's email address

bookmark

Hyperlink

Gives a permalink for the nearest ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if there are no ancestor article elements.

help

Hyperlink

Indicates that the target content provides help information.

--On some browsers, the help keyword causes the link to use a different cursor

Example

The following link hyperlink with the form element includes a mechanism whereby if the user presses the "Help" or "F1" key the target content is provided.

<p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
license

Hyperlink

Indicates that the main content of the current document is covered by the copyright license described by the referenced document. Another usage is if a piece of content is covered by a different license than the rest of the page. Consider the following example:

<main>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small>This photograph is <a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  </main>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
next

Hyperlink

Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.

--A document may be part of multiple sequences

--Content without a "next" indicates that the sequence is at its end

nofollow Annotation

Indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.

noreferrer

Annotation

Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.

It indicates that no referrer information is to be leaked when following the link.

prefetch

External Resource

Specifies that the target resource should be preemptively cached.

prev

Hyperlink

Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.

--A document may be part of multiple sequences

--Content without a "previous" indicates that the sequence is at its beginning

search

Hyperlink

Gives a link to a resource that can be used to search through the current document and its related pages.

tag

Hyperlink

Indicates that the target link provides tag-like clarification or categorization for the current content.

non-predefined

 

The attribute values listed in this table above are predefined in the HTML5 specification. The spec also references additional values both existing and proposed for HTML5, which are listed at the microformats.org site:

http://microformats.org/wiki/existing-rel-values

http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions

Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used in documents.

Authors can use the rel="" mechanism to annotate links with specific meanings by registering extensions to the predefined set of link types. This is also used by microformats. Additionally, absolute URLs that do not contain any non-ASCII characters, nor characters in the range U+0041 (LATIN CAPITAL LETTER A) through U+005A (LATIN CAPITAL LETTER Z) (inclusive), may be used as link types.

Source: http://www.w3.org/html/wg/drafts/html/master/introduction.html#introduction

 Relationship Target to Page

Note: The rev attribute is obsolete and no longer supported in HTML5. For pre-HTML5, it specifies the reverse relationship (rev attribute) for the hyperlink. If more than one value is used, they must be space separated. The rev attribute refers to the relationship between the target document and the current document; the opposite of the rel attribute.

Syntax

<a rev="stylesheet">Link to page</a>

The rev attribute can take the following values:

  • alternate: Indicates that the current document is an alternate version of the target document.
  • stylesheet: Indicates that the current document is a stylesheet for the target document.
  • start: Indicates that the current document is the first document
  • next: Indicates that the current document is the next document compared with the link target
  • prev: Indicates that the current document comes before the target content in a series.
  • contents: Indicates that the current document is the table of contents for the link target
  • index: Indicates that the current document is the index for the link target
  • glossary: Indicates that the current document is the glossary for the link target
  • copyright: Indicates that the current document contains copyright information for the link target
  • chapter: Indicates that the current document is a chapter of the link target
  • section: Indicates that the current document is a section of the link target
  • subsection: Indicates that the current document is a subsection for the link target
  • appendix: Indicates that the current document is the appendix for the link target
  • help: Indicates that the current document is the help for the link target
  • bookmark: Indicates that the current document is a bookmark for the link target 

 Tab Index

Specifies the tab index (tabindex attribute) for the hyperlink. The tabindex attribute is considered a global attribute in HTML5. The value must be a valid integer and is used to indicate that an element is focusable. "Positive numbers specify the relative position of the element's focusable areas in the sequential focus navigation order, and negative numbers indicate that the control is to be unreachable by sequential focus navigation." 

  • A tabindex makes an element selectable by mouse click in that it adds dotted outlines, which can be styled using :focus
  • May be more useful in changing the tab-through order of a form than for changing the tabbing order of links on a page
  • Since <a> tags have focus by default, could also be used to negate the tabbing through a page

Syntax

<a tabindex="1" href="http://support.omniupdate.com">Link to page</a>

 Access Key

Specifies one or more access keys (accesskey attribute) assigned to the hyperlink. The accesskey attribute is considered a global attribute in HTML5. "If specified, the value must be an ordered set of unique space-separated tokens that are case-sensitive, each of which must be exactly one Unicode code point in length." The accesskey attribute:

  • Creates a keyboard shortcut that activates or focusses the element
  • Can include more than one key

Syntax

<a accesskey="access-key" href="http://support.omniupdate.com">Link to page</a>

onclick

 Executes Javascript when the link is clicked. 

 Example

<a href="http://support.omniupdate.com" onclick="getElementById('demo').innerHTML=Date()">What is the time?</a>

More Options for Inserting and Using Links

For more information about the additional functionality available on the other tabs, see: