Links

URLs: Web Addresses

A URL is an abbreviation for uniform resource locator, informally know as a web address. Every different web page or device or resource on the web has its own URl.

Here's an example of a URL: https://en.wikipedia.org/wiki/Fidget_spinner. It has some structure that you should be aware of:

1. https is the protocol. For web pages, this is usually http or https (there are other possible might appear here, such as ftp: for file transfers). The https protocol securely encrypts the data exchanged between your browser and the server, and so websites that deal with money (such as banks) or sensitive information (such as your password) often use https. Web pages that use non-encrypted http could potentially be read by anyone in the world.
2. <en.wikipedia.orgis the server id, i.e. the name of the server you are communication with.
3. /wiki/Fidget_spinner is the id of the resource on the server. Often, but not always, this resource id is the path name of some file on the server. Alternatively, some websites treat this resource id essentially as a command given to the server, and the server reads the command decides what to do with it.

HTML Hyperlinks

The "a" element is used to specify links to other pages and resources. The body is the text that can be clicked, and the href attribute indicates the linked-to page.

For example, you could read about SFU, Google, or the Wikipedia entry for potatoes.

You could put your favourite links in a list:

• SFU
• Google
• Wikipedia entry for potatoes

You can make an image in a link. Try clicking on the potato:

Notice that some of the a elements have a title element. The title of a link is extra information about the link, and is often displayed as tool-tip rectangle that automatically appears when the user's mouse hovers over the link.

Link Targets

The href part of an a-link is typically a uniform resource locator, or URL for short. URLs have some structure you should know about. For example, consider the URL http://www.sfu.ca/admission/undergraduate.html. It has these parts:

• http means that the communication is done with regular HTTP. This is the usual way that websites communicate when the security of the communication is not very important. In contrast, https is used when communication must be secure, e.g. when you are entering a password or communicating with your bank.
• www.sfu.ca is the host, and you can think of it as the name of the web server.
• /admission/undergraduate.html is the path, and you can think of it as the name of a folder (admission) and a file in that folder (undergraduate.html). There is no requirement that there actually be such a folder and file on the web server: the path can be almost any string, and the web server can interpret it however it likes. But for many websites, the URL structure mirrors an underlying folder structure.

Linking within a Page

It's possible to link to a location inside a document to any element that has a unique id attribute. For example, consider this link to some documentation for the Python programming language: https://docs.python.org/3/library/cgi.html#debugging- cgi-scripts. It ends with #debugging-cgi-scripts, where debugging-cgi-scripts is the id attribute for an element on the page. Clicking on such a link will take you to the page, centered near the element.

You can, and should, use the id tag to give your elements unique names so that they can be linked to. You can even link from within the same document. For example, this link is to the title of this section; look at the URL in the address bar.

Absolute URLs and Relative URLs

A URL is an exact location of some resource on the web. For example, http://www.sfu.ca/admission/undergraduate.html is the location of SFU's page about undergraduate admissions. It is an example of an absolute URL. It is a complete URL that specifies all the information needed to find the page.

In contrast to absolute URLs are relative URLs, which are names that are relative to some location that is not given in the URL. For example, in this page the link this link is a relative URL because it contains only the name of the id of the element it links. It does not contain the URL for the page itself.

Both relative and absolute URLs are common in practice. Absolute URLs contain all the information needed to a particular website, and so they are ideal for sharing with other people who you want to see your website. Relative URLs tend to be shorter than absolute URLs, and so are often preferable when their meaning is clear. Relative URLs are also essential when, for instance, you don't know the name of the host computer, or the higher level folder, where your files are located.

Links to Email

A popular kind of link is an email link, that when clicked will open an email program to allow the reader to send an email. For example, the email address of SFU IT services is its- help@sfu.ca.

You can create an ITS help link. by using an a element, and setting its href attribute to "mailto:its-help@sfu.ca":

   <a href="mailto:its-help@sfu.ca">ITS help link</a>      

If you just set the href to "mailto" without any email address, then you can create a link that lets you send email.

Advice for Writing Links

It takes experience and practice to write good body text for links. Here are few general pieces of advice to keep in mind:

• Use good, clear, descriptive text in the body of your links. Keep in mind:
  • Users using a screen reader often jump from link to link without reading all the surrounding text. Thus they rely on the links have good descriptive text.
  • People often skim pages, looking for links and text that stands out. They may not read the surrounding text, and decide to click a link just by what that link text says.
  • The term "link" is usually not helpful to put inside a hyperlink. The reader usually already knows it's a link. For instance, don't tell someone to look at this link. Instead, tell them that the Wikipedia article about hyperlinks contains lots of useful information.
  • Try not to use the same link text for different links. This can confuse people using screen readers, or people skimming the text.
• When linking to locations inside the same website, relative links are almost always better than absolute links. There are a few reasons for this:
  1. Relative links are still valid if you move the location of the folder storing website. For example, when you submit your projects for this course all the internal links must be relative, otherwise they will not work on the marker's computer (unless the marker happens to have exactly the same folder structure as you).
  2. Relative links are often faster than absolute links. An absolute link requires that the browser contact a DNS server, while for a relative link the browser can just look for the file on the server it already knows.
• Readers usually assume links will be to other HTML pages. If a link is to some other resource, such as PDF file, video, or PowerPoint presentation, then it is a good idea to indicate that in the link text.