HTML & CSS: Links 2

 

Image Link

It is possible to have a link that consists of an image and text. Here is an example:

<a href="http://usps.com"><img src="USPS.jpg">Click on the image or here to visit the U.S. Postal Service site.</a>

Here is the functioning link:

Click on the image or here to visit the U.S. Postal Service site.

 

E-Mail Link

It can be useful to have a link that, when clicked, starts the process of sending an e-mail. This is called an e-mail link. As an example, the code for an e-mail link to e-mail the President of the U.S. might look like this:

Click on the link to write the President at <A HREF="mailto: president@whitehouse.gov"> president@whitehouse.gov</a> about this important issue.

What is different in an e-mail link from what we've seen before is the "mailto:" part. Here is how the e-mail link to the President would appear:

Click on the link to write the President at president@whitehouse.gov about this important issue.

 

Phone Link

To set up a link that calls a phone number, the syntax is <a href="tel:555-555-5555">Call us</a>.

 

Open in a New Tab or Window

It is often useful to have a link open in a new tab or window, instead of replacing the contents of the current page. You can use the target attribute, and set it to "_blank," to accomplish this, for example:

<a href="http://imdb.com" target="_blank">

You can click this link to see this in action:

imdb.com

 

CSS Link Properties

It is possible with CSS to customize the color and other properties of a link in various states:

Here are a few examples of using CSS to set link properties:

a:link { color: gray; }
a:hover, a:focus { text-decoration:none; font-size: 150%; }

You can set these link properties in a CSS file, outside of the styles for tags like BODY or P.

 

Exercise

  • Create a link in which an image and text can be clicked on.
  • Create an email link.
  • Create a phone link.
  • Create a link that opens in a new tab or window.


    •