HTML
Links - Hyperlinks
HTML
Link Tags
Tag Description
<a> Defines a hyperlink
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.
HTML Links -
Syntax
In HTML,
links are defined with the <a> tag:
<a
href="url">link text</a>
Example
<a
href="https://www /html/">Visit our HTML tutorial</a>
»
The href
attribute specifies the destination address (https://www /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.html">HTML Images</a>
»
HTML Link
Colors
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="https://www.megas.com/" target="_blank">Visit
Omegas!</a>
»
Tip: If your
webpage is locked in a frame, you can use target="_top" to break out
of the frame:
Example
<a
href="https://www.megas.com/html/" target="_top">HTML5
tutorial!</a>
»
HTML Links -
Image as Link
It is common
to use images as links:
Example
<a
href="default.html">
<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="C4">Chapter 4</h2>
Then, add a
link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a
href="#C4">Jump to Chapter 4</a>
Or, add a
link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a
href="html_demo.html#C4">Jump to Chapter 4</a>
»
External
Paths
External
pages can be referenced with a full URL or with a path relative to the current
web page.
This example
uses a full URL to link to a web page:
Example
<a
href="https://www.megas.com/html/default.html">HTML
tutorial</a>
»
This example
links to a page located in the html folder on the current web site:
Example
<a
href="/html/default.html">HTML tutorial</a>
»
This example
links to a page located in the same folder as the current page:
Example
<a
href="default.html">HTML tutorial</a>
»
You can read
more about file paths in the chapter HTML File Paths.
0 comments: