Home > Courses, Tutorials & eBooks > HTML Tutorial > Links

HTML Tutorial - Links

Page 1 of 2

The contents of this chapter relate to the concept of linking of HTML documents. It answers the queries related to the definition of linking, the method of linking HTML documents, and how images are put on the web page.

Before going on to links in detail, some preliminary concepts have to be understood. These concepts will help one in linking HTML documents in a better manner.

URL

The acronym URL stands for Uniform Resource Locator. This is an address that specifies the location of files on the Internet. In other words; the World Wide Web uses URLs to specify the location of files on other servers. A URL includes the type of resource being accessed, the address of the server, and the location of the file. The syntax is:

Example:

http://host.domain/path/filename

http://expertrating.com/certifications.asp

Relative Pathnames

Documents can be linked to other directories by specifying the relative paths to the linked document. For e.g. A link to a file mycode.html located in the subdirectory codes would be:

Example:

These are called relative links because the path to the linked file, relative to the location of the current file is specified.

Case 1

If the file to be accessed is stored on a lower level of directory than the current directory, then that file can be accessed by simply typing the directory name/ filename in the href attribute.

Note: The use of the term ‘href’ is explained in detail in the following pages

In the following example, the file ‘work’ is a subdirectory of the current directory and the file myfile.html is stored in ‘work’.

Example:

Case2

If the file to be accessed is stored on a higher level of directory than the current directory, that file can be accessed by simply typing ../ before the name of the file. Each ../ tells the web browser to go one level up relative to the current directory.

In the following example, the browser has to go two levels up to link the file to the document.

Example:

<A href=”../../newfile.html”> Myfiles </A>

Absolute Path

Absolute path is used to link those documents that are not directly related to the current document. Links to some other website should be absolute as they are not related to the current directory. In this way even if the current directory is moved, it will not affect the links.

Example:

<A href=http://expertrating.com> Link to expertrating </A>

Linking

The real power of HTML comes from the fact that different documents can be linked together. With the help of this tool, a text or an image can be linked to any part of the document or section of a document. A browser highlights the identified text or image with color or underlines to indicate that it is a hyperlink.

Linking is done with the help of the following tags:

Anchor Tag

The <a> tags indicate the anchor tag. An anchor is a piece of text or some other object (like image) to mark the beginning and/or end of a hypertext link. An anchor tag by itself doesn’t do anything; it creates a link to another document by using the “href” attribute. The following are some attributes of Anchor tag:

Href

Href stands for Hypertext Reference. The address of the file or the address of the website is given in the ‘href’ tag. The address is the name of that document which the web page links to.

Example:

<A href= "http://expertrating.com/" > Mylink </A>

Output:

This hyperlink will take you to the site www.expertrating.com.

ExpertRating HTML Certification - Get Certified Now!!