Hypertext Links (<a> tag)

References

Introduction

A link in the HTML sense is technically called a hypertext link and is an active spot on a Web page that connects the user to another Web page, to a file, a media presentation, or other type of file that can be downloaded to the user's computer.

The hypertext link can be text, which is normally underlined; or it can be an image.

(Actually, almost any tag can be a hypertext link. But hypertext links are almost always either text or an image.)

When the hypertext link is text, as I mentioned just above, it should be underlined.

The browser will underline the text by default, so all you need to do as a designer and developer is to LEAVE THE UNDERLINE IN THERE! It is possible, but NOT RECOMMENDED, to remove the underline by using a CSS declaration. Many designers are removing the underline these days, but they are making the reader's job of identifying which text is a hypertext link much more difficult. LEAVE THE UNDERLINE IN THERE!

An external link (which uses an absolute URL like "http://www.google.com") is one that connects to another page or file on another Web site.

An internal link (which uses a relative URL like "sitemap.html") is one that connects to a page or file on the current Web site.

A URL is a Uniform Resource Locator. Each link must include a reference to the URL of the page or file that is being linked to.

The Anchor Tag (<a>) with an href attribute = Hypertext Link

The HTML command that you use to make a hypertext link is the anchor tag (<a>) with an href attribute in it ("href" is short for "hypertext reference").

Please NOTE that the <a> tag has an ending counterpart, </a>, which is placed after the hypertext or image which is the hot spot.

The HTML code for an external link looks like this sample:

  <a href="https://www.dcccd.edu/about/rlc/pages/default.aspx">Dallas College, Richland Campus</a>

and it looks like this in a browser:

Dallas College, Richland Campus

The HTML code for an internal link looks like this sample:

  <a href="TheCat.html">The Cat</a>

and it looks like this in a browser:

The Cat

External Links

As stated above, an external link connects your page to a page or file on another Web site. Because the browser needs to know what Web site to connect to, you must use an absolute URL in an external link.

An absolute URL includes a protocol specifier, a server name, and possibly a file name.

The standard protocol specifier for an external URL is http:// and stands for Hypertext Transfer Protocol. (It may also be in the form of https:// (please note the 's') if the site being linked to uses a secure connection.)

Technically, http:// tells the browser that you want to use the standard communication scheme used on the Internet to transfer the messages and files between the user's computer and the Web server computer.

The server name is the name of the Web server that contains the page or file you are linking to. It actually gets translated into a special series of numbers called an IP Address (Internet Protocol Address), but you don't need to worry about that. The translation is handled by a bunch of computers around the world called Domain Name Servers (DNS). You just need to know the Web server name, such as "www.rlc.dcccd.edu".

If you do not include a file name in the URL of your link, the Web server will look for a default file name of index.html or default.html or something like that. index.html is the most common default file name. If you do include a file name in the URL, the server will look for that file on the Web server you gave in the server name. Actually, the file name part of the URL can also include a path plus the file name, if the file is not in the top (root) folder of the server.

Internal Links

As noted above, an internal link is one that connects to a page or file on the current Web site. Technically, you can use an absolute URL as the "href" attribute's value, but you should not do so. If you use an absolute URL, the server has to go back out to the Web to find out where the Web site is all over again, which is a waste of time. You should use a relative URL in an internal link.

A relative URL may include path (folder) information, and must include a file name.

If the file you are linking to is in the same folder as the file that contains the link, you just need to give the file name in the href attribute. For example, if you want to link from this current page (meaning, this handout page) to the page that contains the <img /> tag we saw in the previous section, the link will look like this:

  <a href="TheCat.html">The Cat</a>

and it looks like this in a browser:

The Cat

If the file you are linking to is in a sub-folder underneath the folder that the current file is in, the href attribute must include the folder name (or folder names) that lead(s) to the folder that the file you are linking to is in, followed of course by the file name itself. Each folder in the path is separated from other folders and the file name by a forward slash (/).

For instance, there is a file called "nav.html" in a folder called "class_samples" underneath the folder where this (handout) page resides on the server. To link to this file, the anchor tag would look like this:

  <a href="class_samples/nav.html">A Navigation Explanation</a>

and it looks like this in a browser:

A Navigation Explanation

If the file that you are linking to is in a folder above the current folder, you need to tell the browser to "back up" in the folder structure. Each level that you want to "back up" is represented in the href attribute with ../ and you can use as many of these "back up" designators as you need, if you need to back up more than one level in the folder structure.

For instance, if you have a page in folder "link" on this class site, and you need to link from there to the top folder of the class site (often called the "root folder"), the link can look like this:

  <a href="../contact.html">Contacting the Instructor</a>

(You need to keep in mind that the folder "link" is one level below the root folder.)

Opening Pages in a New Window

You may have noticed that the hypertext links in this eHandout all open in a new browser tab. This feature is not by accident.

If you don't specifically tell the browser to open a new window for the page you are linking to, it will open the page in the same browser window (tab) that is currently open, replacing the page that it is currently displaying with the page that it just linked to. If you do want to open a new browser window (tab) for the page you are linking to, you use a target attribute in your anchor tag. The value of the target attribute is either the name of the browser window that you want the linked-to page to open in, or a special value that we'll see shortly.

The target attribute can seem kind of tricky, but the rules are fairly simple. The rules for the target attribute are these:

If the target attribute gives a browser window name that does not yet exist on the user's computer, a new browser window (tab) will open. Please note that the target name may not have any spaces in it. Otherwise, it can be pretty much whatever you want it to be.
If the target attribute gives a browser window name that is already open on the user's computer, the linked-to file will replace whatever is currently displaying in that window (tab).
You can force a new window (tab) to open with the special target name of "_blank". (Note carefully that there is an underscore before "blank".)

If, for instance, I want my mug shot to open in a new window rather than displaying in this current window, I can code the link like this:

  <a href="TheCat.html" target="_blank">The Cat</a>

and it works like this:

The Cat

In order to see the difference between a named target and the special value of "_blank", use the above link, which uses "_blank", and the following two links (below the following instructions), which look like this:

  <a href="TheCat.html" target="Harry">The Cat 2</a>
  <br />
  <br />
  <a href="class_samples/nav.html" target="Harry">A Navigation Explanation</a>

Here is how you can demonstrate the difference:

Click the link above, which says "The Cat".
Click on the original tab containing this handout, and click "The Cat" again.
Click on the original tab containing this handout, and click "The Cat" yet again.
Click on the original tab containing this handout, and click "The Cat" a third time. You should now have four tabs open: this one, and three others with the cat's picture in them.
Close the three tabs with the cat in them.
Click the link below, which says "The Cat 2".
Click on the original tab containing this handout, and click the link below again, which says "The Cat 2".
Note that you still only have two browser tabs open.
Click on the original tab containing this handout, and click the link below which says "A Navigation Explanation".
Note that the test file has replaced the cat in the second tab.
Click on the original tab containing this handout, and click the link below which says "The Cat 2" again.
Note that the cat has replaced the test file in the second tab.

The Cat 2

A Navigation Explanation

Setting Link Styles in the Document (with Pseudo Classes)

There are four special stylesheet selectors that you can use to set any appearance properties that you want for the hypertext links in your page. You may set the link color, or the font style, for instance. (You can set any CSS style with these special selectors. But make sure that the reader can still read the link!)

These four pseudo-class selectors are:

[Please NOTE: Firefox recently introduced a security "enhancement" which turns OFF, by default, the browser's ability to keep track of your browsing history. So unless you turn this feature back ON, the a:visited pseudo-class, explained below, will not work in Firefox.]

a:link -- this is the hypertext link before you click on it. The default link color is bright blue.
a:visited -- this is the link when it has been clicked but is not the last-clicked (most recently clicked) link on the page. The default visited color is magenta.

Please NOTE: As I mentioned above, the default settings in Firefox prevent this pseudo-class from working. You can change the default setting by following these steps:
1. Click the "Open Menu" icon at the top right of the Firefox window.
2. Click the "Options" icon in the popup window.
3. Click the "Privacy & Security" menu at the left.
4. In the "History" section, in the "Firefox will:" item, select "Remember history".
5. You can now close the "Options" tab.
a:hover -- this is the link when the mouse cursor is positioned over (hovering over) the link. There is no default hover color.
a:active -- this is the link when it is the last-clicked (most recently clicked) link on the page. There is no separate default color for an active link; it will use the color of the visited link by default, which is magenta.

The CSS rules that you use to set the link colors (and other text properties) are a little different from normal style rules: These rules must be in either an embedded or an external style sheet. I have not been able to find a way to use these rules as inline style rules. (Which is actually a good thing!)

The selectors below are actually in the <head> section of this eHandout page:

  <style type="text/css">
    a.activeColors:link  {color:#0000FF;}
    a.activeColors:visited  {color:#FF00FF;}
    a.activeColors:hover  {color:#00FF00;}
    a.activeColors:active  {color:#FF0000;}
  </style>

Please note these points about the above code:

This is one of those situations where the order of the rules is significant. Most browsers will ignore the a:hover and a:active rules unless these selectors are the last two listed, and the a:hover selector must be before the a:active selector.
Some browsers (especially older ones) will not understand these style rules.

Here are some sample links to show how the above rules affect the link colors:

w3schools.com
gimp.org
jimlink.net
The Cat

Combined Pseudo Classes

Pseudo-classes can be combined with CSS classes. For example, if you wanted to limit a "hover" pseudo-class to affect only anchor tags having an "activeColors" class attribute, you could put the selector into your stylesheet like this:

a.activeColors:hover

Also, it is important to note that pseudo-classes may be used with tags other than the anchor tag. For instance, you could use the "hover" pseudo-class on a div tag, as in this selector (in your stylesheet):

div:hover

You can even combine an id selector with a pseudo-class, like this:

p:hover#paragraphFour

Contextual Selectors II

In the class handout on "Cascading Style Sheets", we looked at one way that contextual selectors are used. Now it is time to take a second look at contextual selectors.

The following example shows how you can have two (or more!) different sets of pseudo classes in the same page.

In the following example code, which you can see running here, please note that the two sets of links have different rollover (:hover) properties:

The HTML file is rollovers2.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
	<title>Rollovers</title>
  <link rel="stylesheet" type="text/css" href="rollovers2.css" />
</head>

<body>
<div id="mainDiv">
    
  <div id="Links1">
    <table>
      <tr>
        <td><a href="http://www.boeing.com" target="OtherSites">Boeing Corp.</a></td>
      </tr>
      <tr>
        <td><a href="http://www.oracle.com" target="OtherSites">Oracle Corp.</a></td>
      </tr>
      <tr>
        <td><a href="http://www.nasa.gov" target="OtherSites">NASA</a></td>
      </tr>
    </table>
  </div>
  
  <div id="Links2">
    <table>
      <tr>
        <td><a href="http://www.boeing.com" target="OtherSites">Boeing Corp.</a></td>
      </tr>
      <tr>
        <td><a href="http://www.oracle.com" target="OtherSites">Oracle Corp.</a></td>
      </tr>
      <tr>
        <td><a href="http://www.nasa.gov" target="OtherSites">NASA</a></td>
      </tr>
    </table>
  </div>
  
</div>
</body>
</html>

The stylesheet is rollovers2.css:

body
{
  font-family: Arial, sans-serif;
  font-size: 1.3em;
}

a
{
  display: inline-block;
  padding: 1em;
}

#mainDiv
{
  width: 900px;
  height: 600px;
  border: 1px solid #AAAAAA;
  margin: 0 auto;
  position: relative;
}

#Links1
{
  width: 45%;
  float: left;
  padding: 1em;
}

#Links2
{
  width: 45%;
  float: left;
  padding: 1em;
}

#Links1 a:hover
{
  color:#0000AA;
  background-color: #CCCCCC;
}

#Links2 a:hover
{
  color:#FFFF00;
  background-color: #0000FF;
}

Please note these points about the above page:

The two sets of links have different "rollover" (hover) style properties.
The context of each set of rollover colors is the <div> tag that contains the set.
In a stylesheet, you make a contextual selector by giving the context's selector first, followed by a space, and then giving the selector that needs the context. In this example, the a:hover selectors need a context to limit where the colors are applied.

Anchors (Linking to Specific Points on a Page)

You can add an id attribute to almost any tag tag to link to the exact place on a page that you want to have the browser display. You can either link to this specific place from somewhere else on the same page, or you can even link to it from another page.

Let's say that you want to allow the user to link back to the top of a very long page from somewhere deep down inside the page. At the top of the page, you can put an id attribute into one of the tags at the top of the page, like this:

  <div id="joe">

Please note these points about the above line of code:

The id attribute can be in just about any tag. This is a major change from pre-HTML5 browsers. In the pre-HTML5 era, you had to use an <a> tag with an id attribute or a name attribute, as the anchor.
The value of the id attribute can be anything; I rather arbitrarily called it "joe" in this example.

You can use as many id attributes as you want as anchors in your page. In this example, we are only putting one, and it is at the top of the page. But there could be other id attributes being used as anchors at other places in the page.

But there is no link to this anchor yet. You need to make a link that will tell the browser to open or scroll to the anchor location in the page. In this example, at various places deep down inside the page, you can put links that look like this:

  <a href="#joe">Back to the top</a>

You should note the pound-sign (#) at the beginning of the href attribute's value. This special character tells the browser that the hypertext is looking for an anchor.

I have in fact coded such an anchor and link pair into this handout. The link works like this (You can use the "back" button of your browser to come back to this spot in the handout page after you click the following link.):

Back to the top

You can even link to an id'd anchor from another page. You just add a pound-sign (#) and the anchor's id to the href attribute of the link to the page that has the id'd anchor in it.

For instance, one section in the handout for "Text Formatting, Headings, and Lists" has an <h3> tag with an id of "Points". I can link to that specific section/anchor like this:

  <a href="handout-class-04-sec00.html#Points">
     Read about Points vs. Pixels here
  </a>

and it works like this (You can use the "back" button of your browser to come back to this handout page after you click the following link.)

Read about Points vs. Pixels here

Link Titles

The title attribute can be added to almost any HTML tag. This attribute's value will display as a "tool tip" if the user hovers their mouse pointer over the element for awhile. For a link, of course, the user will need to hover their mouse cursor over the link.

This feature of displaying a tool tip works in the most recent versions of all major browsers. It may not work in older browsers, especially if they are not Internet Explorer.

A title attribute looks like this:

  <a href="TheCat.html" title="A mug shot of one of the cats">
   The Cat</a>

and it works like this (hover your mouse pointer over this link):

The Cat

Using Images as Links

You already know how to add an image to your Web page. Now you have enough information to make the image into a link! All you need to do is wrap the <img /> tag inside an <a> tag!

Here, for example, is the HTML code that I used to link from the thumbnail image to the larger image, in the "Thumbnails" section of this handout (see below):

<a href="TheCat.html" target="_blank"><img src="images/Higgins_Update_th.jpg"
 width="140"
 alt="A link to a larger image of the cat Higgins"
 title="A link to a larger image of the cat Higgins"></a>

Here is what the above code looks like in this handout page:

Please note these points about the above code:

You can use the border:none; style rule to get rid of the default colored border around hyper-image links, like this:
```
  img
  {
    border:none;
  }
```
There is no "Enter" key/character (which is actually CR/LF on a Windows machine) between the end of the <img> tag and the </a> tag. If you do put an "Enter" (CR/LF) key/character between them, the browser may (with IE, make that "will") put an underlined space in the display as part of the link, after or under the image itself.
If you were to put title attributes in both the <a> tag and the <img> tag in this situation, the browser would need to decide which title attribute to use for its tool-tip popup display. It appears that most browsers will use the title attribute from the <img> tag, but that resolution of the conflict is probably dependent on the browser itself.

Thumbnail Images

You can use thumbnail images to reduce the loading time of pages that can serve as an index to larger versions of the images, something like this (you can click on the thumbnail image to display a larger image):

You can create thumbnail images in several ways. Among these ways are:

Open the full-size picture in a graphics program, reduce the image size, and save it with a different filename.
Use a graphics program to crop the larger image so a smaller sampling of the image remains.
Combine the first two methods.

What you do not want to do is use the full-size image with smaller width and height attributes in the <img /> tag! The browser will display the image at whatever size (width and height) that you tell it to use, but the image's file size as it is stored on the server and transmitted to the browser, in bytes of memory, will be the same. The browser will still have to download the full-size (in bytes) image to display it, even if its display area on the page has been reduced with the width and height attributes of the <img /> tag. One of the advantages of using thumbnails is supposed to be that the browser can download a smaller image (in bytes) faster than a larger one! So use smaller (bytes of memory) images as thumbnails.

A Thumbnail (Shuttle) Example

Here is a page that illustrates a very simple thumbnail image on one page, which links to another page that has a larger image in it.

The page with the thumbnail in it, is shuttlePage.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shuttle Stuff</title>
  <link rel="stylesheet" type="text/css" media="screen" href="shuttle2.css" />
</head>

<body>
<div id="mainDiv">
  <p>
  Click the thumbnail image to see a larger image of the Shuttle.
  </p>
  <a href="shuttleDetailPage.html"><img src="images/shuttle_th.jpg" id="thumbNail" width="150" height="100" alt="Shuttle Landing" /></a>
</div>
</body>
</html>

The page with the larger in it, is shuttleDetailPage.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shuttle Detail</title>
  <link rel="stylesheet" type="text/css" media="screen" href="shuttle2.css" />
</head>

<body>
  <div id="mainDiv">
    <p>
    <img id="shuttle1"
    src="images/shuttle.jpg" width="640"
    height="427" alt="The Shuttle Discovery at Landing" />
    </p>
    <p>
    This is the shuttle Discovery during a recent landing.  You may find more details
    at <a href="http://www.nasa.gov">the NASA site</a>.
    </p>
  </div>
</body>
</html>

The stylesheet is shuttle2.css:

/* Shuttle Stylesheet */

img
{
  border:none;
}

#shuttle1
{
  margin-right:20px;
  border: 1px solid black;
}

p
{
  font-family: Arial, sans-serif;
}

#mainDiv
{
  width: 700px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid gray;
  padding: 2em;
}

The Site Logo or Banner

It is a good idea to use the site's logo and/or the main banner image as a link to the site's home (index) page.

Linking to Other File Types

You can put links to almost any file type into your pages, to allow the user to download the file(s). The link is coded pretty much the same as any other link. For instance, if you want the user to be able to download a zip file, you can code a link like this:

  <a href="quotes.zip">Download a Zip file of favorite quotes</a>

When the user clicks on this link, the browser will ask them if they want to save the file or open it. But be aware that some file types will cause the browser to try to open/play the file instead of giving the user the choice of saving it. This is true of some sound files, movie files, and such. Usually the user can save the file from the "File" menu of the application that opens/plays the file, but make sure you test your links! You may not get the results you expected.

Optional Section: Image Rollovers with CSS: Class Selectors with Pseudo-Class Selectors

A lot of people put image rollover effects into their Web pages by using JavaScript code to change which image displays when the user rolls their mouse cursor over the current image.

But you don't need to know any JavaScript in order to have image rollover effects in your page. Instead, you can use CSS rules to accomplish the image rollover effects. In order to do so, you need to use a stylesheet selector notation that we didn't talk about in the handout on CSS. This notation is a variation on pseudo-class selector syntax.

First, take a look at what happens when you roll your mouse cursor over the images in this sample page.

The HTML page for this example is PNGfun.html and its code follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fun with PNG and Rollovers</title>
  <link rel="stylesheet" type="text/css" href="PNGfun.css">
</head>

<body>
  <div id="buttonDiv">
    <a href="home.html" title="Home" id="homeButton"></a>
    <a href="about.html" class="rolloverAboutUs" title="About Us"></a>
  </div>
</body>
</html>

The CSS stylesheet is PNGfun.css and its code follows:

/* PNG Fun */

body
{
  background-color: #AAAAAA;
}

#buttonDiv
{
  width: 140px;
  margin: 0 auto;  /* TB LR; same as margin-left: auto; and margin-right: auto; */
}

#homeButton
{
  display: block;
  background-image: url(images/Home2.png);
  width: 140px;
  height: 35px;
}

#homeButton:hover
{
  background-image: url(images/Home1.png);
}

#homeButton:active
{
  background-image: url(images/Home2.png);
}

.rolloverAboutUs
{
  display: block;
  background-image: url(images/AboutUs2.png);
  width: 140px;
  height: 35px;
  margin-top: 5px;
}

.rolloverAboutUs:hover
{
  background-image: url(images/AboutUs1.png);
}

.rolloverAboutUs:active
{
  background-image: url(images/AboutUs2.png);
}

Please note these important points about the above code:

The images in this page are background images. Background images do not give a tag any size. So we must give the <a> tags some size with our style rules.
A slight complication to our giving our <a> tags some size is that normally, inline display elements such as the <a> tag do not allow you to give them any size. The browser ignores width and height style properties on inline display elements.
Fortunately, we can change our <a> tags into block display elements, and then they will accept width and height style properties.
We change our <a> tags into block display elements with this kind of style rule:
```
display: block;
```
Now the <a> tags will have a given width and height, and the background images will display.
The first <a> tag in this page uses an id attribute to identify the tag for formatting with the CSS rules in the stylesheet.
The second <a> tag in this page uses a class attribute to identify the tag for formatting with the CSS rules in the stylesheet.
The pseudo-class selectors (:hover and :active in this example) are directly appended to the id and class selectors.
The :hover selectors simply display a different image as the background to the <a> tags.
The :active selectors display the original image as the background to the <a> tags when the mouse button is clicked on the image.

Optional Section: URL Icons

When you are looking at a Web site, sometimes there is a small image (technically called an icon) other than the browser's default icon, at the left side of the site's title in the browser tab. You can have your own icon if you wish!

Here are several sites that have URL icons (also called "Shortcut Icons" because they display in the shortcut (bookmark) list of most browsers):

Dallas College's site
This class's site! (Look for the smiley face.)
Yahoo!
jimlink.net

Unfortunately, most image editors do not support the kind of icon file that is needed for these URL/Shortcut icons.

Fortunately, a very nice free icon editor is available at IcoFX. (This link is also on the "Resources" page in our class site, in the "Image-Editing Software" section.)

You can also use a very nice online icon generator to make URL ICONS. It is http://www.favicon.cc.

Here are some hints regarding how to use IcoFX:

You can draw an icon in IcoFX, or you can open an existing image file in IcoFX and start from there.
If you open an existing image file in IcoFX, the program will ask you what color setting and what size to make the icon image. You can usually accept the default settings. But you will want to match the size as closely as possible to the image that you are opening in IcoFX.
IcoFX will require you to chose a frame (layer) to import the image from. If your image has only one layer, this is an easy choice. If your image has multiple layers, such as an animated GIF file, make sure you pick the layer that you want!
When you are ready to save the icon for the Web, use these steps:
1. Click "Icon" in the main menu.
2. Click "Create Windows Icon From Image..." (unless you are creating a Macintosh icon, of course!).
3. Accept the pre-checked image formats.
4. Click "OK". IcoFX will create a layer for each of the formats.
5. Use "File", "Save As..." to store the icon file on your local drive.

After you create and save your icon in the IcoFX program or the online generator site or even somewhere else, you need to upload it to your site and then tell your Web page where to find the icon. You do this telling with a <link> tag, in the page's <head>...</head> section, like this:

HTML5 version:

<link rel="icon" href="images/favicon3.ico">

Older version:

<link rel="SHORTCUT ICON" href="images/favicon3.ico" />

Please note that the href attribute's value is a relative URL to the icon, just like any other image file. If the icon is in the "root" folder, you can use a slash (/) at the start of the href attribute's value. If the icon is in the same folder as the page that is using it, you can leave out the slash. And if both the page and the icon are in the site's "root" folder, you can choose to either use the slash or not.

Some browsers display some server information (as text) next to the URL icon. This server information will only be displayed, however, if the Web site is using a Secure Socket Layer (SSL) connection, and also only if the SSL certificate on the site is an Extended Validation Certificate. The URL icon, along with this server information, is called a "Site Identity Button" in Firefox.

Dallas College, Richland Campus Multimedia Learning Center