Working with links and anchors

Introduction

Hyperlinks (links) are the basic power of the internet.  They allow us to browse, navigating from site to site quickly and seamlessly regardless of content, origin, interest or toolset.  What would the internet be without hyperlinks?  An electronic book.  In fact, an entire world full of volumes of electronic books, each of which we'd have to know exactly how to pinpoint in order to enjoy their content.  Hyperlinks are our expressway to any page of any of these 'books' without knowing or caring where the book is located or what technology was used to create it.  Imagine walking into a library and wanting to check out a book.  In order to check out the book, you not only need to know the dewy decimal number, but the publishing house, the year of publication, the library of congress number, the authors name and the method used to bind it before the librarian would help you find it.  Hyperlinks bypass all that information to take you directly to the page of the book you are interested in without any prior knowledge of even the book's existence.  Being able to work with links is essential to creating a website that is more than an effective 'electronic book'. 

Key Points

Who can make links? - Anyone with the ability to edit a web page can create a link and manipulate it's configuration.

Videos

Overviews

the following sub sections describe working with links in various ways at a high level.  Each description assumes permissions to author the site and that an author is successfully logged in and has a page open for editing.

Establishing a link

To a page within your site collection

1. Using the mouse, highlight some text that is to be used as a link.
2. In the ribbon, choose the 'Insert' tab, choose 'Link' and select 'From SharePoint'
3. A widow will open that allows browsing to any page or document in the site collection.  
   • Any page or document in the current site collection may be browsed to and selected.
   • Libraries and lists may not be linked to for directory browsing purposes.  That would result in a login pop up since only pages and documents lie outside of the authoring password.  
   • Pages and documents in SharePoint may not be protected by passwords.  Oregon.gov is an anonymous access (no login required) web site.
4. Browse to and select the desired destination of the link.
5. click 'Ok' and the link will be established.

To a page or document outside of your site collection

1. Using the mouse, highlight some text that is to be used as a link.
2. In the ribbon, choose the 'Insert' tab, choose 'Link' and select 'From address'.
3. A window will open that may or may not already contain the text selected for the link.  If the window does not contain the text, don't add it, SharePoint will remember that it was selected.
4. Paste or type the desired destination URL into the 'Address' field.
5. Click 'Ok' and the link will be established.

Image links

1. On a page that is open for editing, select an image that is already on the page.  
2. Leaving the image selected, Choose the 'Insert' tab.
3. Select the appropriate option, From SharePoint or From Address and navigate to or paste the destination URL as required.
4. Click 'Ok' and the link will be established on the image.  Clicking the image will be just like clicking a text link and take the viewer to the destination.

Anchors or Bookmarks

An anchor or bookmark is a location on a page that can be used as part of the link URL so that the link can point to not only a page, but a point on that page.  Essentially the destination page will render AND scroll to the point where the anchor is on the page.  It's a good tool to focus the viewer on the section of a page relevant to what the link was pointing to.  It may be helpful to use anchors to link to sections of the page that have a heading associated with them.  This might reduce any confusion as to why the page didn't render at the top.

There is no shortcut to establishing an anchor and you really have to break in to the page markup.  That's alright though, it's not too hard.

On the page to contain the anchor point:

1. While editing a page, find a point on the page that should be at the very top of the page when the anchor link is used.  This will likely be several lines above the actual section that will be showcased.  Placing the anchor on the very line to be showcased might feel crowded to the viewer using the link.  Note some text, a word or two, on that line.
2. Select the 'Edit Source' option from the 'Format text' tab of the ribbon. 
3. Find the text identified as the anchor point and place the HTML tags around the text as shown
   • <span id="anchor1">text chosen as an anchor point</span> In the image below, 'Here is the anchor' is the text surrounded by the id tags creating the anchor point.
     The markup looks like: <span id="anchor1">Here is the Anchor</span> location in the markup
   • The name of the anchor, in this case 'anchor1' can be anything you like, but avoid spaces and no special characters but underscores or hyphens.  The same rules as apply to page and document naming.
   • For the anchor indicated above, the destination of the anchor will be the URL of the page it's on, plus a hashtag and the name of the anchor.  (#anchor1)
   • An example URL to an anchor would be https://oregon.gov/site/Pages/page_name.aspx#anchor1
4. Click 'Ok' and the markup will be saved.
5. The page will need to be checked in and published as normal when it's ready.

Take note, there is no indicator on the page when an anchor is set.  the text was highlighted and emboldened here only for illustration purposes.  A casual viewer will not know that anything is different about the text containing the anchor.

Establishing a link to an anchor point

1. While editing the page that will contain the link to the anchor, select the text or image that will be the link.
2. In the ribbon, choose the 'Insert' tab.
3. Choose 'Link' and select 'From address'.
4. Type or paste the URL of the destination page and anchor into the 'Address' field.
5. As indicated above, this will be something with a pattern of https://oregon.gov/site/Pages/page_name.aspx#anchor1  (domain/sitecollection/library/documentname.extension#name_of_the_anchor)
6. Click 'Ok' and the link will be established.
7. Check in and publish the page as normal.

Anchors can be established on any page in your site collection.  Links to anchors can be established anywhere as well, even on the same page as the anchor to create something of a quick links menu at the top, or in a right hand aside section of the page.