Links are the elements in the web page that make the navigation between resources possible. Links are the property attached to a block of text or image.
To create a link, use the
<a>..</a> element (the anchor element) The
<a> element must have an src attribute that identifies the URL (absolute or relative) of the resource.
* Mouse cursor will be changed to "Hand image" when the user moves the mouse pointer over a link.
* Use
<TAB> key to navigate between the links on the web page.
* An active link will be rendered as a rectangle around the active link. Only one link will be active at a time.
snippet
<html><head></head><body>
Click on the below link to follow the link
<a href="http://www.quotefellas.com">Quote Fellas</a>
</body></html>
Target Windows
When the user clicks on a link, by default the browser replaces the page containing that link with the new page pointed by the link. To change the default behaviour, attach a new attribute names target to the
<a> element. This attribute define the name of the window in which the new page will be loaded. If no window with that name exists, a new window will be created, The possible values are
-Any double quoted string string that defines a name for a new window
-The following constant values
_self (default)
-black
_parent
_top
Links to other kind of files
Links can be to defined other kind of files other than HTML files. When clicks on the link or presses the
key if the link is active, there are possibilities depends on the browser nature.
Scenario 1
If the browser can handle that type of file(plug-in installed), it correctly renders the file in the browser. (eg. image, text, pdf, flash and other similar files.)
Scenario 2
If the browser cannot handle the new type of file, it will try to download the file to the client system.
Links to ftp websites
We can define a link to the specific directory on a server connected to the internet. The browser behaves based on the server settings.
- If the link contains the http protocol, the server will try to return a default document (eg. default.htm for an Apache Server)
- If adefault document doesn't exist or the server is not configured to return it, the server can be configured to returned the directory structure for that internet directory.
- If the link contains an ftp protocol, the server will return a directory structure for that internet directory(if permitted by the server's security settings). Then the user can execute operations (read, write to and delete files and directories), depending on the level of access granted by the server. The server may be configured to require a user name and password or employ other security measures.
To create a link to an ftp server, use an <a> element with the href attribute set for ftp protocol instead of http protocol (eg. href="ftp://ftp.domain.com/")
Link to email addresses
To create a link to an email address, use an <a> element with the href attribute set for the 'mailto' protocol (internet mail protocol) and pointing to a valid email address (eg: href="mailto:tutorials@rookienerd.com")
Title attribute of <a> element
The title attribute is a universal attribute and can be attached to any HTML element. When the user places the mouse pointer over the element, a tooltip will appear, rendering the content of the title attribute.
<base> element
The <base> element allows you to set a prefix that will automatically be attached to the URL indicated by any link on that page, allowing you to avoid repetitive code if all links on a page point to the same server.
Note
The <base> element is an empty element(i.e it doesnt require an ending tag)
The <base> element requires an href attribute set to the absolute URL of an internet directory. (e.g : href="http://www.domain.com/files/images/")
The element must be placed inside the <head>..</head> element.
Link Color
There are three states of a link. Each state has a particular color associated with it by default. These values can be overridden by setting specific attributes of the <body>..</body> element. The three states of link are given below.
active state
Only one page can be active on a page at a time.
The active link is rendered with a rectangle around it.
The default color is "#ff0000"(red)
To override the default value , use a 'alink' attribute.
non-visited state
The default color is "#0000ff"(blue)
To override the default value, use the 'link' attribute.
visited state
The default is "#551ab8" or "#800080"
To override the default value use the 'vlink' attribute.
The visited state of a web page is permanently recorded by a browser and is maintained over multiple sessions.
Image Link
As explained in the previous topic, a link can be either a text block or an image. The example can be replaced by the image.
snippet
<html>
<head></head>
<body>
Click on the below link to follow the link
<a href="http://www.quotefellas.com"><img src="logo.jpg"></a>
</body>
</html>
Output
Click on the below link to follow the link
border attribute
To remove the border around the image link, add the border attribute with the value as 0.
snippet
<html>
<head></head>
<body>
Click on the below link to follow the link
<a href="http://www.quotefellas.com"><img src="logo.jpg" border="0"></a>
</body>
</html>
Output
Click on the below link to follow the link
Links Relative Url
The relative URL identifies the access the pages from page "quotes/html" to other pages using a relative reference using the syntax below.
../ - denotes the parent directory
/ - denotes the root directory
e.g.
/page1.html
../../project2/html/page2.jpg
Links to file on Local System
href="file///c:/test/page.html"
file:/// - protocol to access the local system
c:/test/ path to the directory
snippet
<html>
<head></head>
<body>
Click on the below link to follow the link
<a href="file:///c:/test/page.html">Link to local system file</a>
</body>
</html>
Anchors
Anchor can be used to navigate to different sections of a page that is too long to be displayed on a single computer screen or to navigate to specific section of another web page.
Defining the anchor
* Using the <a>..</a> element together with the name attribute.
<a name="name_value">Your Text</a>
snippet
<html>
<head></head>
<body>
Click on the below link to follow the link
<a href="#p1" id="p1">Link to Paragraph 1</a><br />
<a href="#p2" id="p2">Link to Paragraph 2</a><br />
<a href="#p3" id="p3">Link to Paragraph 3</a><br />
<a href="#p4" id="p4">Link to Paragraph 4</a><br />
<p id="p1">Text of the Paragraph 1</p><br />
<p id="p2">Text of the Paragraph 2</p><br />
<p id="p3">Text of the Paragraph 3</p><br />
<p id="p4">Text of the Paragraph 4</p><br />
</body>
</html>
Anchors for the external file
snippet
<html>
<head></head>
<body>
Click on the below link to follow the link
<a href="page.html#p3">This link to an anchor defined in an external file</a>
</body>
</html>
