HTML Java

HTML Tutorial

HTML Introduction HTML Editors HTML Basics HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframe HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Links

HTML Links

Links are found in all web pages. It allows the users to navigate from one page to another.


HTML Links - Hyperlinks

  • HTML links are hyperlinks.
  • You can click on a link and jump to another document.
  • When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: - A link does not have to be text. It can be an image or any other HTML element.


Hyperlinks are defined with the HTML <a> tag:

Syntax: <a href="url"> link text</a>

Example

<html>
<body>
  <h2>HTML Links</h2>
  <p><a href="html_introduction.html"> Visit our HTML tutorial</a></p>
</body>
</html>
Try it »

HTML Link Colors

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.
  • The default colors can be changed by using CSS.

Example

<html>
<body>
  <h2>Link Colors</h2>
  <p>The default colors of the link can be changed.</p>
</body>
</html>
Try it »

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:
  • _blank - Opens the linked document in a new window or tab.
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default).
  • _parent - Opens the linked document in the parent frame..
  • _top - Opens the linked document in the full body of the window.
  • framename - Opens the linked document in a named frame

Example

<html>
<body>
  <h2>The target Attribute</h2>
  <p>If the target attribute is set to "_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
Try it »

HTML Links - Image as Link

Images are also used as link.

Example

<html>
<body>
  <h2>Image Links</h2>
  <p>This image is a link. You can click on it.</p>
</body>
</html>
Try it »

Note: - border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).


Link Titles

  • The title attribute specifies extra information about an element.
  • The information is most often shown as a tooltip text when the cursor moves over the element.

Example

<html>
<body>
  <h2>Link Titles</h2>
  <p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the cursor moves over the element.</p>
</body>
</html>
Try it »

HTML Links - Create a Bookmark

  • HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
  • Bookmarks can be useful if your webpage is very long.
  • To make a bookmark, you must first create the bookmark, and then add a link to it.
  • When the link is clicked, the page will scroll to the location with the bookmark.

At first, a bookmark with the id attribute is created:

<h2 id="C6">Chapter 6</h2>


Then, a link is added to the bookmark ("Jump to Chapter 6"), from within the same page:

<a href="#C6">Jump to Chapter 6</a>

Or, a link is added to the bookmark ("Jump to Chapter 4"), from another page.

Example

<html>
<body>
  <h2>Chapter 1</h2>
  <p>This chapter explains ba bla bla.</p>
</body>
</html>
Try it »