Personal tools
  •  

HTML URLs and Links

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Tutorial 1 of 3

Objectives:

  • Explain URL (uniform resource locator)
  • Describe use of anchor tag
  • Discuss difference between relative and complete URLs
  • Discuss difference between tags and attributes
  • Tags discussed: <A HREF=>

Templates File(s):

  • anchorcodes.html

(Note: If you have not already done so, please downloaded the html template files .)

Overview of the URL:

  • Every single Web document has a unique name and address, called the Uniform Resource Locator (URL)
  • Most URLs are of the form:
    • http://hostname/filename.html or
    • [protocol]://[hostname]/[directory]/[filename]
  • For example:  http://www.usu.edu/index.html refers to the Web document, index.html, stored on the Web server, www.usu.edu

<A> tag:

The <A> tag is used to embed hypertext links. Its syntax is somewhat complicated, as follows:
<a href= "destination URL"> hypertext link </A>
In this example, the text "hypertext link" will be displayed as an underlined link in your browser. If you then click on the link, the "destination URL" will be loaded into your browser. In HTML parlance, "destination URL" is value of the HREF attribute , and must be typed in inside quotes.

Example

Open the file anchorcodes.html in your browser. Look at the file. Note in the first paragraph that there are two hypertext links, or pieces of underlined text. Hold you mouse over one of them (do not click!) and note that the destination URL is diplayed in the status bar in the lower part of the browser window. For example, if you hold your mouse over the first link, Web Monkey, the destination URL, http://www.webmonkey.com, is diplayed. This means that if you clicked on the link, the page located at that URL will now be loaded in your browser.

Now hold your mouse over the link on the second paragraph (e.g. kayak.html), and note the strange looking URL. This link points to a file on the Server.

Now view the source code for this page:

If you are on a PC:

  • Using Internet Explorer -- right click the page background and select "view source" from the pop-up menu.
  • Using Netscape -- right click on the page background and select "view frame source" from the pop-up menu.
  • Using Mozilla -- right click on the page background and select " v iew page source" from the pop-up menu.

If you are on a MAC:

  • Using Internet Explorer -- click and hold on the page background until a pop-up menu appears and then select "view frame source".
  • Using Netscape -- click and hold on the page background until a pop-up menu appears and then select "view source".
The first example is coded as such:
<a href="http://www.webmonkey.com> Web Monkey </A>
The second as:
<a href= "kayak.html"> kayak.html </A>

Note how in the second example, the URL is a simple file name (not preceded by http:). This is called a relative URL. Since a full Web address is not specified, the destination document is assumed to be on the same server and in the same directory as the file with the link.

In the first example, however, the full URL is listed.

Warning

On some web servers, file names and URLs are case sensitive and on some they are not. Since web sites frequently change servers it is best to be consistent with your use of upper and lower case (and even easier to just always use lower case). Also try to avoid using blanks spaces in your file names. Best to use an underscore, e.g. (inst5240_fall_04) as opposed to (InsT5240 Fall 04)

Keep this in mind as you name files and link to them.

Example

Now open your course home page in your text editor. Add a hypertext link by typing in the following:

I took a course at <A HREF="http://www.usu.edu"> Utah State University </A>

Save the document, then open it in your browser. Test the link by clicking on it. What document is loaded?




> <br >

Tutorial 2 of 3

Objectives:

  • Learn about to link to specific locations in documents
  • Tags discussed: <A NAME=>

Readings:

  • Chapter 6-HTML 4.0

Template File(s):

  • anchorcodes.html

(Note: If you have not already done so, please downloaded the html template files .)

NAME attribute

HTML allows you to link to specific locations in documents, not just documents. This is done by using the NAME attribute inside the <A> tag.

Example

Open the file anchorcodes.html in your browser. Try the links under the "Menu." Note that by clicking on the various links, the browser jumps to different locations within the same file.

Now view the HTML source of this file (refer to URL tutorial 1 if you need instructions). The first link is within the menu is coded as follows:

<A HREF= "#item1"> Item 1 </A>

The presence of the "#" character indicates that the link is to a specific spot in a document. Because the specific name of a document or a full URL DOES NOT precedes the "#", the specific location is assumed to be in the same file.

Now we know how to jump to a spot. But how do you mark the spot? You do this with the NAME attribute in the <A> tag. Scroll down the source of index.htm and you will eventually see:

<A NAME= "item1"><h3> Item 1 </h3></A>

This use of the <A> tag in combination with the NAME attribute marks that spot in the file, by giving it the name "item1". You can now link to that spot by using the syntax listed above. For example, if I wanted to link to that spot from another file in the same directory, I'd enter the following code:

<A HREF= "anchorcodes.html#item1"> Jump to Item 1 in the anchorcodes file </A>

Try entering the above code in your course home page. Remember this will only work if your course home page and the anchorcodes.html file are in the same directory.




> <br >

Tutorial 3 of 3

Objectives:

  • Learn how to link to electronic mail

Readings:

  • Chapter 6-HTML 4.0

Template File(s):

  • none

Email links

Have you noticed that some Web documents allow you to click on a link to send an email? This process is very easy to implement.

Example

Open your ever-evolving course home page within your text editor, and type in (anywhere you want) the following:

<A HREF="mailto:someone@somehost.com"> Send email! </A>
Use appropriate email address.

Save the document, then load it in your browser. Hopefully, you will see a hypertext link (Send email!) that when clicked upon, opens an email window with a message addressed to "someone@somehost.com".

Now customize this example, replacing my email, with your own. Then test the document in your browser. Send yourself an email from a web page. (Don't forget, you may have to push the "Refresh" or "Reload" button on your browser after modifying the HTML source.)

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). HTML URLs and Links. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource9.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.