The acronym HTML stands for hypertext, or text that is linked to other information. HTML enables us to link to other Web pages, as well as graphics, multimedia, e-mail addresses, newsgroups, and downloadable files. Anything you can access through your browser can be linked to from within an HTML document.
Web pages can contain links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. A hyperlink is text, an image, or any other object in an HTML document that can be clicked in order to gain access to another web document. Normally, links are distinguished as being external or internal to the current page.
Linking Documents - The <a> Element
A link is specified using
the <a> element. This element is called anchor tag as well.
Anything between the opening <a> tag and the closing </a> tag
becomes part of the link and a user can click that part to reach to the linked
document. Following is the simple syntax
to use this tag.
External Linking
The <a> tag itself doesn’t serve
much purpose without its attributes. The most common attribute is href, which
is short for hypertext reference: it tells the browser where to find the
information to which you are linking. The text included in between the opening
and closing a tag is what the person viewing your Web page can click. In most
cases, this text is highlighted as a different color from the surrounding text
and is underlined, as shown in Figure.
Anchor Attributes
Following are most frequently used attributes for <a> tag.
- href: specifies the URL of the target
of a hyperlink. Its value is any valid document URL, absolute or relative,
including a fragment identifier or a JavaScript code fragment.
- target: specify where to display the
contents of a selected hyperlink. If set to "_blank" then a new
window will be opened to display the loaded page, if set to
"_self" then loads the new page in current window. By default
its "_self", if set to "_name" then open the link in
the window of that name.
- id: attributes places a label within
a document. When that label is used in a link to that document, it is the
equivalent of telling the browser to goto that label.
- event: attributes like onClick, onMouseOver
etc. are used to trigger any Javascript or VBscript code.
- title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link.
Base Path for Links: It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
For example we have used following
base tag in all the pages at beta-labs.in:
So
now if you will use <a href="/html/index.htm" then it will
be considered as
In deciding what to use as the value of your href attribute, consider what type of link you want to use. Two basic types of links exist.
- Absolute
- Relative
Absolute Links: Absolute links are those that include the entire pathname. In most cases, you use absolute links when linking to pages or sites that are not part of your own Web site. For example, if you are linking from your Web site to Yahoo!, you type “http://www.yahoo.com” as your link.
Relative Links: Relative links are called so because you don’t include the entire pathname of the page to which you are linking. Instead, the pathname you use is relative to the current page. Relative links are most commonly used when you want to link from one page in your site to another. Here’s an example of what a relative link might look like:
<a href="contact-us.html">Contact Us</a>
This link looks for the contact-us.html file in the same folder that contains this page. If you were linking to a file in another folder below the current one, the value of your href might look like this:
<a href="p/contact-us.html">Contact Us</a>
Internal Linking
Sometimes you may want to link to a section of text within a page on your Web site. To link to a section of a Web page, you must first give that section a name.
Example:
Create an Anchor
An anchor is a place within a page
that is given a special name, enabling you to link to it later. Without first
naming a section, you cannot link to it. Here is an example of an anchor:
In this example, the phrase in between the opening and closing a tag is displayed in the Web page and labels the anchor as “Section 1.”
Link to an Anchor
To create the link to an anchor, you also use the a tag and the href attribute, as you would when creating any other type of link. To finish the link, you need to include a hash symbol (#) and the anchor name as the value of the href attribute.
Lets us create a program to link to different sections of the page.
If you need to create a link to a specific section with another page (not the one you are currently working on), then you use that page’s filename and the anchor name separated by a hash mark (#), as in the following example.
<a href="betalabsindia.com/index.html#intro">View names beginning with an "A" on our blog page.</a>
In this case, the browser will first look for index..html and then locate an anchor named “intro” on that page.
Target Windows
Have you ever visited a Web site and noticed that a second instance of the Web browser opened when you clicked a link? This happens when Web developers use the target attribute to load links in a browser window other than the one you are currently using.
For example, you might want to offer visitors to your site a link to search Yahoo!, but you don’t want to encourage them to leave your site. If you use “_blank” as the value of the target attribute in your link to Yahoo!, the browser will launch a new browser window to load http://www.yahoo.com.
If you want to Open Link in a New Window instead of new Tab, You can use following JavaScript code:
Links to E-mail Addresses
When you want to give someone easy access to your e-mail address, you can include it on your page as a mailto link. This means instead of using http:// in front of your links, you use mailto: to preface youre-mail addresses.
Clicking this link in a browser causes the visitor’s e-mail program to launch. Then it opens a new e-mail message and places your e-mail address in the To: box of that message.
Other Calls to Action
With
HTML5, you’re not limited to phone numbers. You can add other calls to action
such as email, messaging, fax, etc. HTML5 protocols include:
- tel: – place a phone call
- mailto: – open an email app
- callto: open Skype
- sms: – send a text message
- fax: – send a fax
All
of these protocols are used in the same way as we saw above.
Setting Link Colors
You
can use three more attributes of the body tag to customize the three link
colors of a Web page: normal link colors (link), visited link colors (vlink)
and active link colors (link).
Note: Default Link Colors: In most cases, the default link color for browsers is blue. The default visited link color is purple, and the active link color is red. Remember, as with many other features of Web browsers, the user ultimately controls these default colors. You can also change color using CSS Links.
Different link
states can have individual properties of link color
in CSS. Developers choose to change the default style and
color of URLs to make links match their web designs.
Here are the states you
can change link color for with CSS:
- a:link –
unvisited.
- a:hover –
when the mouse pointer hovers over it.
- a:active –
when a user clicks the link.
- a:visited –
visited link.
In the following
example, we set all four link states with different colors using CSS as:
See the Pen CSS Links by PANKAJ (@pankkap) on CodePen.
Custom Link Button using CSS
Sometimes you may want to use a button
to link to another page or website rather than to submit a form or something
like that. This is fairly simple to do and can be achieved in several ways.
One way is to use <a> anchor
tag. Like other HTML elements, CSS can add background colors and padding to
links that allow us to create the appearance of a button. Here’s our link using
this technique:
Here are the CSS properties necessary
for styling Link as buttons :
- color – to set the color of the text which represents
the link
- background-color – to add colors to the
button
- padding – to determine the size of the button
- text-decoration – to remove underline from
links
- text-align – to set the alignment of links
- display – to describe how your link
should be shown
In this example, we combine these CSS
properties to display links as buttons:
See the Pen Custom Link Button by PANKAJ (@pankkap) on CodePen.