Editing/Inserting Links
It is good practice to use meaningful text as links in a webpage, so that your link text should reflect the site or the information that the link contains. Avoid using text such as "click here" for link text as this does not contain useful information for users who are using screen readers. It is also not recommended that URLs be used as the link text.
E.g. for text to download an event flyer use: "Download the event flyer." rather than "Download the event flyer here.".
Below details how to insert each different type of link you may want to insert.
- Adding Internal LinksFrom one page to another within your current site
To create an internal link from one page to another within your current site, it is recommended that you only use part of the URL that specifies the path of the file within the site. The part of the URL you use depends on whether the site is located in the main University site or within a virtual host. The options are detailed in the table below:
Type of site Site URL style Part of URL to include in the link field Example
(site="temp"
folder="policy"
file="webpolicy.pdf")Standard University site http://www.adelaide.edu.au/sitename/ /sitename/<path> /temp/policy/webpolicy.pdf Virtual host site http://www.vhost.adelaide.edu.au/ or http://vhost.adelaide.edu.au /<path> /policy/webpolicy.pdf Subsite of virtual host site http://www.vhost.adelaide.edu.au/sitename/ or http://vhost.adelaide.edu.au/sitename/ /sitename/<path> /temp/policy/webpolicy.pdf *where the <path> is the rest of the URL for the file being linked to. An internal link can be created by following the steps below::
- Open a separate browser window and go to the page you want to link to
- Copy the whole URL from the browser address at the top of the screen
- Go back to your webpage editing screen and highlight the text to be used as a link
- Then click on the Insert/edit link icon (see below)
- Paste it into the Link URL field
- Delete the first part of the URL specifying the base/external part of the site i.e. everything before and including the "edu.au".
Note: your link must begin with the "/". - Ensure that the 'Target' field displays 'None.'
- Complete the link by clicking OK.
Adding an Internal Link in a New Window
By default, internal links should open in the same window. However, there are a few occasions where it is appropriate for an internal link to open in a new window.
Where this is the case, the icon is to be added by inserting the HTML image tag below into the source code, at the end of the link.
<img alt="Open link in new window" src="//global.adelaide.edu.au/v/redesign1/images/new-window.png" title="Open link in new window">
For the process of adding the icon HTML source code for links, please see Adding External Links.
- Adding External LinksFrom one page to another external site
All external links must use an external link icon to notify users that by clicking the selected link, they will be directed out of the University of Adelaide website.
There are two external link icons:
- Link to an external website:
HTML image tag:
<img alt="Link to external website" src="//global.adelaide.edu.au/v/redesign1/images/external-website.png" title="Link to external website">
- Link to an external site opening in an new window:
HTML image tag:
<img alt="Open external site link in new window" src="//global.adelaide.edu.au/v/redesign1/images/new-window-external-site.png" title="Open external site link in new window">
Please refer to the UI Pattern Library for the external link patterns, or contact the Web & Digital Team for further assistance.
An external link can be created by following the steps below:
- Open the Typography page in the Pattern Library in a separate browser, and under 'External Links' click to
'[ show source ]' to view the source code for the relevant external link (External Link or External Link in a New Window) - Copy the full source code pattern, i.e. <p><a href="http://www.sahealth.sa.gov.au/">S.A. Health <img alt="Link to external website" src="//global.adelaide.edu.au/v/redesign1/images/external-website.png" title="Link to external website"></a></p>
- Go back to your webpage editing screen and click on the source code icon (see below)
- Paste the source code pattern (see below) into the source code window
- Open a separate browser window and go to the page you want to link to
- Copy the whole URL from the browser address at the top of the screen
- Return to the source code window. Highlight the URL in the source code pattern, and replace with the external URL
- Update the external website name accordingly, and press ok
- Link to an external website:
- Adding Anchor LinksFrom one point on the page to another pre-defined point within a page
Anchor links are links from one point of the page to another pre-defined point within a page. These are especially useful if you have a lot of content on a page, as the anchor link will allow the user to jump to the relevant content rather than having to scroll through.
To create an anchor link:
- Place the cursor on the screen next to the content you want users to jump to
- Then click on the anchor icon in the editing toolbar
- Enter a name in the anchor field. The anchor name should ideally be one word and contain only lower case letters and numbers.
- Then click the Insert button. You should now see an anchor appear on the editing screen where your cursor was located (this will not appear on the live version of your web site).
- Next you need to create a link on text at the top of the page.
- Highlight the text that will be the link
- Click the link icon and in the link URL field enter a # symbol and the name that you gave to the anchor e.g. to link to an anchor you called "heading1" the link field should contain #heading1.
- Click Insert to activate the link
Notes:
- To link to an anchor in another page, put the URL of the page in the link field followed by a # and the name of the anchor e.g. http://www.adelaide.edu.au/#heading1
- You can only create anchor links in your own pages or if you know the anchor in a page on another site exists.
- If text is highlighted when the anchor icon is clicked, the anchor will replace the highlighted text, causing it to be deleted.
- Adding Email LinksTo allow the user to send an email to a particular recipient
It is possible to create a link that will open an email window when it is clicked. To create an email link, follow the steps below:
- Search for the name of the person you want to create the email link to using the Staff Directory
- Copy the email address listed for that person
- Go back to your webpage editing screen and highlight the text to be used as a link
- Then click on the Insert/edit link icon (see below)
- In the link URL field type in mailto: and then paste in the email address after that. For example, if the email address is 'staff.member@adelaide.edu.au' then the link URL field should contain the link mailto:staff.member@adelaide.edu.au
- Once again, click the Insert button to activate the email link.
- Adding File/Document LinksTo allow the user to download/access a particular document
To create a link to a file, such as a PDF or Word document, please follow the steps below:
Step 1: Make the file available on the development server
- Click once on the files option listed in the top blue editing box (see below)
- Click on the relevant folders within the files view to navigate to the page the document link will appear on
- When you are in the correct page (e.g. Index of webguide/tech/tms) click on the Browse button under the 'Upload a file to the current directory' section. This will allow you to search for the relevant document on your hard drive. Note: please ensure your files are named correctly by following the file naming guidelines.
- Select the document and click open. This will display your chosen document in the field next to the browse button. Then click Submit.
- Your document/file will then appear in the alphabetical list with the rest of the files. Then right click on the name of the document/file and click Copy Shortcut.
Step 2: Create the link to the file
- In your development site, go to the page that is to contain the link (by navigating through the file list, navigation menu or breadcrumb trail) and click Edit in the toolbox to open the page for editing.
- Highlight the text that is to contain the link and click the Insert/edit link icon (chain). In the link URL field, paste in the path of the document you are linking to and delete all of the link text before and including 'edu.au'. This should leave you with the link e.g. /website/folder/file.pdf. Then click Insert.
- Preview the page and save changes BEFORE checking the link or your changes will be lost.
Note: When creating a document link, TMS will automatically insert the document name, type and size into the link title so it is shown when you hover the cursor over your document link (see below):
Step 3: Check the page
- Once the changes to the page have been saved, check that the link to the file is working correctly.
Step 4: Upload both the file and the page
- Please remember to upload both the file/document you are linking to AND the page that your file/document link is displayed on. For details on how to upload, please read the instructions on how to upload.