Scribd
Upload
92 views4 pages

HTML Links

HTML links allow users to navigate between web pages. Links are defined using the <a> tag with an href attribute specifying the URL. Links can be text, images, or other HTML elements. By default, unvisited links are blue and underlined while visited links are purple, but these colors can be customized with CSS. The target attribute specifies where linked documents will open, such as in a new tab or the same window. Images can also act as links when placed within an <a> tag. Bookmarks allow internal links within long pages using the id attribute and href links.

Uploaded by

62. Login
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
92 views4 pages

HTML Links

HTML links allow users to navigate between web pages. Links are defined using the <a> tag with an href attribute specifying the URL. Links can be text, images, or other HTML elements. By default, unvisited links are blue and underlined while visited links are purple, but these colors can be customized with CSS. The target attribute specifies where linked documents will open, such as in a new tab or the same window. Images can also act as links when placed within an <a> tag. Bookmarks allow internal links within long pages using the id attribute and href links.

Uploaded by

62. Login
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You can click on a link and jump to another document.

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

HTML Links - Syntax


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

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

Example

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (http://www.w3schools.com/html/) of the


link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a forward slash to the address, and then create a
new request.

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.

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

This example will open the linked document in a new browser window/tab:

Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

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

Example

<a href="http://www.w3schools.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>

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

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.

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:

Example
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

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

You might also like