Linking in HTML12 min read

Linking in HTML refers to connecting a link from one web resource to the next. An anchor and a direction are the two endpoints of a link. The link begins with the (source) anchor and leads to the (destination) anchor, which could be an image, a video clip, a sound bite, a program, an HTML document, or an element inside an HTML document.

1. How to link in HTML

  • Instead of creating a single document web page with a lot of information one can break up this information into parts store them in a separate document and access them by means of a link.
  • Thus linking can be defined as “A mechanism to connect related web page files”.
  • It can be achieved by means of formatting a given text (Hypertext) which helps to link another web page.
  • This process is known as a hyperlink. Thus hyperlink is a process of linking the source web page with that of the target web page.
  • One must specify the Path or URL of a target web page in a source web page. A hyperlink can be created in HTML using the anchor tag <A>..</A>

1.1 Advantages of Linking in HTML to other Documents

  1. Reuse the web page with other HTML documents. 
  2. Reduce the time and cost of creating a web page that already exists. 
  3. Navigating various web pages.
  4. Linking can be made bidirectional.

1.2 Appearance of Hyperlink

Browser distinguishes hyperlinks from normal text by the following features,

  1. By default, every hyperlink appears in Blue color.
  2. Hyperlink Text/Image is underlined.
  3. When the mouse is placed over hypertext the mouse shape is changed to

1.3 Steps/Stages to be followed while linking the Web Page

In general, one can follow the following steps to link to a web page 

  1. Create a Source web page.
  2. Attach formatting tag for better appearance.
  3. Save the current HTML document using extension .html 
  4. Check the Section in the web document where one has created the link or not.
  5. Check the Target web page where to link is made is existing or not and the URL path is mentioned correctly in the source web page.
  6. Run your source web page using the browser. 
  7. Check all links are executed properly or not.

2. Type of Hyperlink Creation

One can hyperlink either by clicking to,

  1. Text: Hyperlink text is denoted as a link to text via blue color and underlined
  2. Inline Image: Hyperlink images are denoted as links via the blue frame. Once clicked, the color of the link will change from blue to purple to indicate that it has been visited. This helps the user to identify the visited and unvisited links.

3. Working with Links (Anchor Tag)

In order to link various web documents with the current document, HTML uses container tags <A> and </A> and is known as an Anchor tag. Thus anchor elements help to create hyperlinks. The syntax of the anchor tag is

For Text : <A HREF=”URL”> TEXT LINK LABEL </A>

For Image : <A HREF “URL”> <IMG SRC=”Image_File”> </A>

Here,

  • Attribute HREF is used to reference the URL of the target web page. One can specify a URL by specifying a relative path or by means of an absolute path. HREF stands for Hyperlink Reference. It is a mandatory attribute that must be specified with the Anchor <A> tag
  • The text TEXT_LINK_LABEL would appear underlined and in a color different from any other text in the document to distinguish it as a link from normal text. These links are basically called hypertext links or hotspots.
  • Images can be made as a hyperlink by including <IMG> tag within anchor pair tags called <A> and </A> and will be discussed in the next chapter.

4. Pathname (URLs)

Pathnames refer to the URL (Uniform Resource Locator) which is written in the text field of the web browser running on a client machine. 

These URLs are of two types, 

  1. Relative
  2. Absolute

4.1 Relative URLs

Relative URLs are relative to their base element i.e. relative to the current page. If the current page is visible during browsing then the web browser will know that hyperlink files are also stored in that directory.

Example : <A HREF = “table2.html”> View Next Table </A>

4.2 Absolute URLs

This kind of pathnames does not rely on relative to anything. Here one must specify a page’s full web address.

4.3 Difference between Absolute and Relative Path

Sr. No.Absolute PathsRelative Paths
1)It is referred to as Absolute paths because they refer to a very specific location.Relative paths change depending upon what page the links are located on.
2)One must also specify the domain nameNot necessary to specify the domain name.
3)Absolute paths are usually used while referencing web site.It is generally used in referring to user web documents stored in a folder.
4)The absolute path is the “full path”. The absolute path contains the exact pathThe relative path is the “partial path”.
5)The absolute path always begins with a / (slash).It specifies a location relative to your current working directory i.e. relative path does not begin with /.
6)An absolute path contains the full path, contains the root directory, and all other subdirectories. The absolute path may appear as home/user/Picture/images/sunset.jpgThe relative path contains only the path relative to a certain folder The path may appear as images/sunset.jpg
7)Used for referring to server-side web pages and known as Server Relative URLsUsually used for referring to client-side web pages and known as Document Relative URLs.
8)They are shorter and save a lot of time while writingIt is usually lengthy and hence more time to type.
9)If you move your web pages to another directory all relative addresses will remain valid.If you move your all web pages to another directory all absolute paths become invalid and known as broken links. In short, one must change all paths pointing to the new directory

5. Types of Linking

a) Internal Links: Linking to user-created web pages i.e. the files that reside within the local computer.

b) External Links: A link to a specific website i.e. files that are placed on remote computers. It is important that in order to link the websites, an Internet connection must be on.

5.1 Linking within the Current Section in the Current Web Page (Link between sections of documents)

  • Sometimes one may require jumping from one location to another within the page.
  • For example, if a Web Page is quite long and the user is at the end of the page and wishes to go to the beginning of the document then instead of scrolling page by page to go up one can specify the link within the current document and known as internal document reference.
  • In a high-level language, it is called goto LABEL. Such kind links are generally used when one creates Web Content within documents.
  • It is usually used to link to the beginning of the section after reaching the end of the page and is known as “Return to TOP” Name Anchor

In order to jump from one location into another location within a current document, one must specify two instances to the anchor tag,

1) Reference point for that link must be specified where you want the control must pass on clicking the hyperlink and must be specified by means of section name under attribute NAME. Thus NAME attribute is used to create a named Anchor. A section name should not contain any space.

Syntax : <A NAME=”Section_Name”> Beginning of New Section </A>

2) Hypertext link to section name: One must define section_name elsewhere within the document. You add #sign and the name of the anchor to the end of the URL link given below,

Syntax : <A HREF=”#Section_Name”> TEXT </A>

Example of Link within Page

<HTML> 

  <HEAD> <TITLE> Demo of Link within Page </TITLE> </HEAD> 
  
  <BODY> 
  
  <A NAME="TOP"> </A> 
  
  <P> <H2> Ms-Office Applications </H2>
  
  <H4> <A HREF="#WORD"> 1. Word </A>
  
  <Br> <A HREF="#EXCEL"> 2. Excel </A> <Br>
  
  <A HREF="#POWERPOINT"> 3. Power Point</A> <Br> 
  
  <A HREF="#ACCESS"> 4. Access </A> <Br>
  
  </H4>
  
  </P>
  
  <HR SIZE="7">
  
  <A NAME="WORD"> <B> WORD </B> </A> 
  
  <PRE>
  
  MS-Word is the application software and one of the most powerful word processors 
  in the Windows operating system. It is used for the formatting of letters or text. 
  In simple meaning, it is a word processo MS-Word is the application 
  software and one of the most powerful word processors in the Windows operating system. 
  It is used for the formatting of letters or text. In simple meaning, 
  it is a word processor having various functions for the text you may insert
  different objects like pictures, sound, and video, or calendar in a word file. 
  
  </PRE> <Br> <Br>
  
  <A NAME="EXCEL"> <B> EXCEL </B> </A> 
  
  <PRE>
  
  Ms-Excel is a powerful spreadsheet or worksheet application that 
  can use for managing, analyzing, and presenting data in tabular format. 
  It also helps to display data in graphical format using charts. 
  
  </PRE> <Br> <Br>
  
  <A NAME="POWERPOINT"> <B> POWER POINT </B> </A> 
  
  <PRE>
  
  Ms-Powerpoint is a powerful tool to create professional 
  looking presentation and slide shows. 
  
  </PRE> <Br> <Br>
  
  <A NAME="ACCESS"> <B> ACCESS </B> </A>
  
  <PRE>
  
  Ms-Access is a powerful program to create and manage databases. 
  
  </PRE>
  
  <A HREF = "#TOP"> GO TOP </A> 

  </BODY> 

</HTML>

5.2 Linking to WebSites

The Internet is a world of websites. There are billions of websites today and it is difficult for net users to remember the address of all these websites. Now assume you visit some of the sites regularly then opening a particular website by specifying the URL (i.e. web site address) is time-consuming and one may misspell while specifying the address. The solution to the above problem is to create a menu-based hyperlink of sites to link. It is important that in order to link the websites, an Internet connection must be on.

Example of Link to Web Sites

<HTML> 
  
  <HEAD> <TITLE> Demo of Link to Web Page </TITLE> </HEAD> 
  
  <BODY> 
    
    <P> <H1 ALIGN="CENTER"> Visit to Your Favourite Web Site </H1> 
      <H3 ALIGN="CENTER"> <U> MENU </U> </H3> 
      
      <H4> 
        
        <UL> 
          <LI> <A HREF = "http://www.yahoo.com"> Yahoo </A>
          <LI> <A HREF = "http://www.rediffmail.com"> Rediff </A> 
          <LI> <A HREF = "http://www.google.com"> Google </A> 
          <LI> <A HREF = "http://www.nagpuruniversity.org"> Nagpur University </A> 
        </UL>
            
       </H4> 
            
      </P>
            
    </BODY>
            
</HTML>

5.3 Linking to an Audio File

One can accomplish linking to an audio file simply by using our regular link format. There are various audio formats available. Some of them are listed below,

Format
MIDI .mid
.midi
The MIDI (Musical Instrument Digital Interface) format is .midi used for electronic music devices like synthesizers and PC sound cards. MIDI files basically contain digital musical instructions (notes) that can be played by electronics. MIDI files are extremely small as it contains only instructions. MIDI is supported by many software systems over a large range of platforms. MIDI format for playing sound is supported by most browsers.
MP3.mp3
mpeg
MP3 is one of the most popular sound formats for music. MPEG MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the Moving Pictures Experts Group (MPEG). The encoding system combines good compression (small files) with high quality.
RealAudio.rm
.ram
Real Media. It also supports video. It is especially useful for low bandwidth and when quality is not considered as important. It is often used during the streaming of audio (online music, Internet radio)
Wave.wavThe Wave (waveform) format is developed by IBM and Microsoft. It is supported by the most popular web browsers (except Google Chrome).
WMA .wmaThe WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or online music compared to RealAudio format.

Share:

Leave a Reply