Links

  • Links are what make a set of pages constitute a website, as the user can navigate from page to page by clicking on them.
  • Links can also point to any external URL on the internet.
  • The Link tag is called the anchor tag <a>, and has many attributes.
  • For example, if we are on page1.html and want to place a link around the text “Go to Page 2”, we write:
    <a> href=”page2.html”>Go to Page 2 </a>
  • In the example above the “Go to Page 2” text will be colored, marked by an underline, and called a hyperlink.
  • The user experience helps him/her to know that this is a clickable hyper link and the professional HTML author will let this be clear to the web page visitor.

External Links

  • A Uniform Resource Locator – URL refers to what we type in the browser address bar to reach a website or web page.
  • An Example URLs is: http://www.thalji.net/enc/about
  • We use URLs to link parts of our content to external contents.
  • As an example to link the word visit w3.org to w3.org website, you may write:
    <a href=”http://www.w3.org”>Visit W3.ORG Website</a>

Internal Links

  • Internal links are those we use to reach contents within our website.
  • In this case it is not necessary to use the http or www to reach the page we need. All we need is to specify the file path and name to the href attribute.
  • For example if we are on page1.html in our website and want to link to page2.html within our same site, we just write:
    <a href=”page2.html”>Click to Visit Page2</a>
  • If page2.html is located on another directory called folder2 within the current folder of page1, we may write:
    <a href=”folder2/page2.html”>Click to Visit Page2</a>
  • If page3.html is located in a folder in the root of our website called foolder3, we may write:
    <a href=”/folder3/page3.html”>Click here to Visit Page3</a>

Bookmarks

  • Sometimes we need to link to a section in our page, another page or an external page, and this is where bookmarks are applied.
  • Sections need by identified normally by using the id attribute.
  • We then append the hash tag # character to the end of the URL or path/filename we provide in the href attribute, followed by the id name.
  • For example if we want to link to page2.html making it automatically scroll to the beginning of a paragraph that has an id of ‘question5’ we may write:
    <a href=”page2.html#question5”>
    Click here to see Question 5</a>

Graphic Hyperlinks

  • Almost anything that you put inside the hyperlink tag will become a hyperlink.
  • This applies to graphics, so we can write a code like this:
    <a href=”page2.html”><img src=”image1.jpg” /></a>
    and the image1.jpg becomes a hyperlink and will send the visitor to page2.html when it is clicked.
  • A combination of images and text inside the anchor tag is also possible.

Target

  • The default target of a link click is to switch to the location mentioned by the a tag, unless you specify another method.
  • One of the methods available is to set the target to a blank page by using the _blank attribute.
  • The _blank link target is used to open the target page in a separate window.
  • The _self link target is used to open the target page in the current window replacing the current page, The _self target is the default.
  • The _parent link target is used to open the target page in the page we clicked to reach our current page. If no previous page led to the current page then _parent will be equal to the current page.

Let’s now put altogether in one comprehensive example:

This is our small website structure:


website structure

It consists of a page called index.html which browsers automatically consider as the starting page of a website unless another page is specified for this purpose.


Here is the code of the index.html page based on this structure:



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Learning Plan</title>
</head>
<body>
    <h1>My Learning Plan for this year</h1>
    <p>The complete plan can be viewed <a href="mylearningplan.html">by clicking here</a></p>

    <p>Click any of the following links to reach a specific section of my learning plan:</p>
    <ul>
        <li><a href="mylearningplan.html#html-plan">HTML 5 Course</a></li>
        <li><a href="mylearningplan.html#javascript-plan">JavaScript Course</a></li>
        <li><a href="mylearningplan.html#jquery-plan">JQuery Course</a></li>
    </ul>

    <h2>I like buying books related to these topics from:</h2>
    <a href="amazon.com">www.amazon.com</a>

    <h2>Click w3.org icon below to see their comprehensive HTML 5 reference:</h2>
    <a href="https://dev.w3.org/html5/html-author/">

    <img src="images/w3icon.jpg" />
    </a>
    <p>The _blank link target is used to open the target page in a separate window:</p>
    <a href="mylearningplan.html" target="_blank">
        Open the Learning Plan on a blank new window</a>
    <p>The _self link target is used to open the target page in the current window 
    replacing the current page</p>
    <a href="mylearningplan.html" target="_self">
        Open the Learning Plan with the _self target</a>
    <p>The _parent link target is used to open the target page in the page we clicked 
    to reach our current page. If no previous page led to the current page 
    then _parent will be equal to the current page.</p>
    <a href="mylearningplan.html" target="_parent">
    Open the Learning Plan with the _parent target</a>
</body>
</html>


The results will be like the following:


Links example 1

And here is the code for mylearningplan.html page:



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Learning Plan Details</title>
</head>
<body>
    <h1>My Learning Plan Details</h1>
    <p>The plan will focus on front end web development.</p>
    <div id="html-plan">
        <h2>HTML 5</h2>
        <p>My HTML 5 learning plan will focus on reading tutorials, viewing videos, 
           and attending classroom sessions on specific topics.</p>
        <p>I will refere to websites that discuss problems that may face developers 
           to read and participate in the discussions.</p>
    </div>
    <hr />

    <div id="javascript-plan">
        <h2>JavaScript</h2>
        <p>My JavaScript learning plan will focus on attending classroom courses, 
           and buying some important books related to this field.</p>
        <p>I will use an advanced development tool, to help me predict the code elements, 
           which is a good resource training as well.</p>
    </div>
    <hr />

    <div id="jquery-plan">
        <h2>JQuery</h2>
        <p>I will use the JQuery creators tutorials to start learning and applying JQuery 
           within my learning excersices.</p>
        <p>I will practice by converting a number of JavaScript code to JQuery.</p>
    </div>
</body>
</html>


And the output will be something like:




Notice how each link is defined, and how much links are important to connect websites and webpages.

  • The index.html web page had an internal link to a page in the same website called mytrainingplan.html
  • Then three links were used to target book marks inside that page for the HTML 5 and the JavaScript and the JQuery sections of the plan.
  • The # was used to reach the bookmarks.
  • Each book mark had an id so that it can be identified in the page.
  • After that I used an external link to enable the visitor reach amazon.com
  • I also used the w3c.org logo image as a link to let the visitor reach their website.
  • Then for the sake of providing an example, I used the three types of targets, i.e:
    • _blank to show the link result in a new window.
    • _self which is the default and displays the link result on the same page.
    • _parent, which displays the link result on the page which resulted the current page we were using before clicking that link.