How to be a software engineer 15

HTML Links

---

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

---

HTML Links - Hyperlinks

HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.

---

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

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

Example

<a href="http://samimasultana.blogspot.com">Visit our HTML tutorial</a>

The href attribute specifies the destination address (http://samimasultana.blogspot.com..com/html/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.

---

Local Links

The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example

<a href="html_images.asp">HTML Images</a>

---

HTML Links - Colors

When you move the mouse over a link, two things will normally happen:

• The mouse arrow will turn into a little hand
• The color of the link element will change

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

You can change the default colors, by using styles:

Example

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

---

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab:

Example

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

Target Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame 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

If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

Example

<a href="http://www.samimasultana.blogspot.com/html/" target="_top">HTML5 tutorial!</a>

---

HTML Links - Image as Link

It is common to use images as links:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

---

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks are practical if your website has long pages.
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.

Example

First, create a bookmark with the id attribute:

<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:

<a href="#tips">Visit the Useful Tips Section</a>

Or, add a link to the bookmark ("Useful Tips Section"), from another page:

---

Chapter Summary

• Use the HTML <a> element to define a link
• Use the HTML href attribute to define the link address
• Use the HTML target attribute to define where to open the linked document
• Use the HTML <img> element (inside <a>) to use an image as a link
• Use the HTML id attribute (id="value") to define bookmarks in a page
• Use the HTML href attribute (href="#value") to link to the bookmark

---

---

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink