Whether a link has been visited, hasn’t been visited, or is live, it
will be displayed in a different color.

Link Colors in HTML

In all browsers, a link will often look like this by default:

  • An unclicked link is highlighted in blue
  • A clicked link is highlighted in purple.
  • A link that is active is highlighted in red.
THTML Links - Different Colors and Make a bookmark


Using CSS, you may alter the link state colors:

Example:

An unclicked link will be orange and ununderlined in this instance. Links
that have been visited will be red and not underlined. A link that is active
will be highlighted in green. In addition, a link will turn blue and be
highlighted when you mouse over it (a:hover):

<!DOCTYPE html>

<html>

<head>

  <style>

    a:link {

      color: orange;

      background-color: transparent;

      text-decoration: none;

    }

    a:visited {

      color: red;

      background-color: transparent;

      text-decoration: none;

    }

    a:hover {

      color: blue;

      background-color: transparent;

      text-decoration: underline;

    }

    a:active {

      color: green;

      background-color: transparent;

      text-decoration: underline;

    }

  </style>

<body>



  <h2>Color Link</h2>

  <a href=“https://www.technicalmrstar.com/” target=“_blank”>This is a link</a>



</body>

</html>


Make an HTML bookmark.

To enable users to quickly navigate to particular sections of a web page,
HTML links can be used to construct bookmarks.

If a web page is lengthy, bookmarks may be helpful.

Make the bookmark first, then connect to it to create a bookmark.

The page will scroll down or up to the spot marked by the bookmark when the
link is clicked.

Example:

First, make a bookmark using the id attribute. Then, from the same page,
add a link to the bookmark that says, “Jump to Chapter 4”, Adding a link to
a bookmark on another website is another option.

<!DOCTYPE html>

<html>

  <body>

    <p>

      <a href=“#C4”>Jump to Contents 4</a>

    </p>

    <h2>Contents Chapter 1</h2>

    <p>Contents bla bla bla 1</p>

    <h2>Contents Chapter 2</h2>

    <p>Contents bla bla bla 2</p>

    <h2>Contents Chapter 3</h2>

    <p>Contents bla bla bla 3</p>

    <h2 id=“C4”>Contents Chapter 4</h2>

    <p>Contents bla bla bla 4</p>

    <h2>Contents Chapter 5</h2>

    <p>Contents bla bla bla 5</p>

    <h2>Contents Chapter 6</h2>

    <p>Contents bla bla bla 6</p>

  </body>

</html>


Chapter Overview

To define bookmarks on a page, use the id attribute (id=”value”).

Use the href property to link to the bookmark (href=”#value”).


All Materials (download)



Full Project (download)



Effect (download)

SP EDITING


Photo link (download)


Text Mark Project (download)

Rate this post

Categorized in: