Links and Anchors

This lesson will show you how to add links and images to a web page. (Note: This assumes you are using the CKEditor which is the default for SF State sites)

External Link

Internal Link

Add an Anchor

Anchor Link

Email Link

 

Add an external link

  1. Click in the Body text field and enter the text "External Link". Select the text and click on the hyperlink icon (a globe with a chain Insert link icon).
  2. Next select the link type form the Link Type drop down list.
    • If Drupal 6: Drupal - select this if you are linking to another page in your site
    • If Drupal 7: Internal Path - select this if you are linking to another page in your site
    • URL - select this to link to an external page
    • Link to anchor in the text - select this to link a specific place on the page
    • E-mail - select this to link to an email address
  1. For an external link choose "URL". In the URL box, enter the address the  link should go to, for example "www.sfsu.edu".
  2. Then click the OK button.

Back to top

 

Add an internal link

This time we're going to link to the My First Page that we created in lesson 1. If you skipped lesson 1, you'll need to make sure you have at least one other page in your site.

  1. Start the same way as all links. Click in the Body text field and enter the text (eg "Internal Link"). Select the text and click on the hyperlink icon (a globe with a chain Insert link icon).
  2. In the Link text box start typing the name of the page you wish to link to "My First Page". You should see a selection list appear listing all the pages that start with that title. Select "My First Page".
    • It will appear as "My First Page (node/21)". The number may be different for your site. In Drupal all content items (like a wb page) are nodes and the number is a unique ID. By linking to the node ID, even if you move the location of the page or change the title, this link will still work.
  1. Click the OK button.

Back to top

 

Add an anchor

An achor is a location in a page that can be linked to.

  1. In the body of your web page type "Anchor here".
  2. Click next to the text "Anchor here" and click on the anchor icon (looks like a flag Anchor icon).
  3. In the Anchor Name text field, enter "Anchor 1".

We'll use this anchor to create a link in the next step.

Back to top

 

Add a link to an anchor

  1. Start the same way as all links. Click in the Body text field and enter the text (eg "Anchor Link"). Select the text and click on the hyperlink icon (a globe with a chain Insert link icon).
  2. This time select the Link Type "Link to anchor in the text".
  3. In the Select an Anchor By Anchor Name dropdown list select "Anchor 1". 
  4. Click the OK button.

This is not a very helpful link since it does not change the page much however, if you have a long page, internal links can be very helpful. For example, this lesson page has links to each section from the top of the page.

Back to top

 

Add a link to email

  1. Start the same way as all links. Click in the Body text field and enter the text (eg "Contact us"). Select the text and click on the hyperlink icon (a globe with a chain Insert link icon).
  2. This time select the Link Type "E-mail".
  3. In the E-Mail Address text field, enter the address the message should be sent.
  4. Optionally you can enter a subject and message that will be prepopulated in the Message Subject and Message Body text fields.
  5. Click the OK button.

When a user clicks on this link, their default email program will open with a new message addressed to the E-mail address you specified and with the subject and body text filled in. The user can then edit any of these fields and send the message.

Back to top