How to create a link

Sun, 2007-11-18 19:12 by admin · Forum/category:

Putting a link to another web page into an article is easy, but requires a little bit of HTML code.

There are three different kinds of links:

  1. Links to other web sites
  2. Links to another page, blog entry, or forum topic in this web site
  3. Links to a file on this same server
  4. Jumps to another point in the same article

 
1. Links to other web sites

There are two ways to create such links. The very simple way is to just write the address without any further ado. The Content Management System automatically recognizes such links from their http:// or similar prefix or from the www. prefix and makes it clickable.

Examples:

http://elephantvoices.org/, www.elephantvoices.org

The more difficult way is needed if you want some other display text to be clickable. The display text will automatically be colored to make it recognizable as a link.

Code template you can copy and modify:

<a href="put the destination web address (URL) here">put the display text here&lt/a>

Example code:

<a href="http://www.elephantvoices.org/">Click here to go to ElephantVoices.&lt/a>

Working example:

Click here to go to ElephantVoices.

 
2. Links to another page, blog entry, or forum topic in this web site

The very simple way works just the same.

For the other methods use the very same code as above, but it is better to omit http://elephanttrust.org. The web address always begins with a slash and can look like "/node/41".

Example code:

Have a look at <a href="/node/41">Cynthia's page</a>.

Working example:

Have a look at Cynthia's page.

 
3. Links to a file on this same server

This is not very different from the link type described above, except that the URL points not to a node on this CMS, but to a file. Follow these steps:

  1. Attach the file ("Edit", "File attachments", "Attach new file:", [Search ...], select file, [Open], [Attach]).
  2. Before you finally click on the [Submit] button, you want to copy the file path and name that is now visible just underneath the file. it should look similar to: http://elephanttrust.org/sites/elephanttrust.org/files/documentname.pdf
  3. Ignore the initial http://elephanttrust.org. Select the part from "/sites/..." beginning with the slash (/) to the end and press Ctrl + C (hold down the Ctrl key, then push the C key briefly) to copy this file path and name. The path and name should look similar to this: /sites/elephanttrust.org/files/documentname.pdf
  4. Go into the text and locate the place where you want the link to be.
  5. Type in: <a href="
  6. Paste the file path and name by pressing: Ctrl + V
  7. Continue to type: ">
  8. Now type the display text for the link, the text that the reader should see and click on.
  9. Type: </a>
  10. A common mistake is to forget an angle bracket (< or >) or a quote character ("). Since that would spoil the entire article for as long as the error is there, look at the HTML tags again and make sure you've entered the complete structure with exactly two pairs of angle brackets and exactly two quote characters, thus: <a href="...">...</a>
  11. Remove the "List" check mark from the attachment. If the link works, we don't need an ugly "Attachments" list at the bottom.
  12. Now click on the [Submit] button at the bottom.
  13. Look carefully at your completed work and test the new link by clicking on it.

You can submit your work before finishing, if you're interrupted, but the HTML tag <a href="...">...</a> should either be complete or not there at all. Unfinished HTML tags cause problems.

 
4. Jumps to another point in the same article

This is only needed for very long pages, for example to construct a little table of contents like in Wikipedia, where readers can click to jump down to a chapter.

The link looks like this (note the double cross/hash/sharp character before the link name):

<a href="#ch-11-tag">Chapter 11</a>

The destination has to be tagged like this:

<a name="ch-11-tag">Chapter 11</a>

You can write anything into the tag name. The only condition is that the href attribute value at the link minus the double cross/hash/sharp character is identical to the name attribute value at the destination.

By the way, this article itself is an example for in-page links. The table of contens at the top uses this function.