(PDF) HTML Links with Example :- Infinity4Education
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.
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
Hyperlinks
are defined with the HTML <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.Infinity4Education.com ">Visit
our HTML tutorial</a>
The href attribute specifies the
destination address (https://www.Infinity4Education.com) 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 at the end of subfolder addresses, you might generate two
requests to the server. Many servers will automatically add a forward slash to
the end of 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 https://www....).
Example
<a href="html_images.asp">HTML Images</a>
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.Infinity4Education.com " target="_blank">Visit Infinity4Eduaction</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.Infinity4Education.com " target="_top">HTML tutorial!</a>
HTML Links - Image as
a Link
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px; border:0;">
</a>
<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).
Button as a Link
To
use an HTML button as a link, you have to add some JavaScript code.
JavaScript
allows you to specify what happens at certain events, such as a click of a
button:
Example
<button onclick="document.location = 'default.asp'">HTML
Tutorial</button>
Link Titles
The title attribute specifies extra
information about an element. The information is most often shown as a tooltip
text when the mouse moves over the element.
Example
<a href=" https://www.Infinity4Education/html.com " title="Go to Infinity4Education HTML section">Visit
our HTML Tutorial</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.Infinity4Education.com ">HTML
tutorial</a>
This
example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
Example
<a href="default.asp">HTML tutorial</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
Comments
Post a Comment