Search This Blog

Monday, 30 December 2013

1.12 HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example:
<!DOCTYPE html>
<html>
<body>

<p>
<a href="http://www.webcore9.blogsoft.com/">Webcore9</a> This is a link to a website on the World Wide Web.
</p>

</body>
</html>

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.webcore9.blogsoft.com/" target="_blank">Visit webcore9.blogsoft.com!</a>

Briefly:
<!DOCTYPE html>
<html>
<body>

<a href="http://www.webcore9.blogsoft.com" target="_blank">Visit webcore9.blogsoft.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body>
</html>

HTML Links - The id Attribute
The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example:
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.webcore9.blogspot.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

No comments:

Post a Comment