articles:~ Let’s Learn about Links!

What are links?

Links are those clickable items that connect to one’s work, picture, or information object to another in a multimedia environment. They use anchor elements to specifies a hyperlink reference to a file by using the syntax <a>.

The “href” attribute is used to configure the hyperlink reference, which identifies the name and location of the file to access. It can also be used to indicate the file name or URL.

For Example:

<a href="contact.html">Contact Us</a>

What kind of links?

The absolute hyperlinks indicate the absolute location of a resource on the Web. Use them when you need to link to a different website. The href value for an absolute hyperlink to the homepage of the website includes the HTTP:// protocol and the domain name

For Example:

<a href="http://yahoo.com">Yahoo</a>

The relative hyperlink is used when you want to link to web pages within your own site. The href value for a relative hyperlink does not begin with the HTTP:// and does not include a domain name, however, only the file name or file name and folder of the web page you want to display are used instead!

For Example:

<a href="index.html">Home</a>

Example of a site map for a website

Example of a site map for a website

To link to a page named services.html located in the same folder as index.html

<a href=“Services.html”>Services</a>

The Email link

An anchor tag <a> can also be used to create email hyperlinks which will automatically launch the default mail program configured for the browser. If no browser default is set, a message is displayed. It uses mailto: instead of HTTP://

For Example:

<a href=“mailto:me@gmail.com”>me@gmail.com</a>

How to Style Links?

The :link selector is used to select unvisited links. The syntax for it is:

:link {
  css declarations;
}

However, links are boring without styling! By using CSS property such as color, font-family, background, etc. you can change its appearance. Also, links have four states that you can also customize!

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user hovers the cursor over it
  • a:active - a link which it is clicked

The text-decoration property is mostly used to remove underlines from links: Make them into buttons! By changing the background.

For Example:

a:link {
  background-color: blue;
}

a:visited {
  background-color: green;
}

a:hover {
  background-color: lightblue;
}

a:active {
  background-color: lightgreen;
} 


Annie Phan

Annie Phan is a computer science graduate from Kwantlen Polytechnic University where she has studied setting networks in businesses; computer hardware and architecture; web servers and code. Presently... more about Annie Phan

Share