Web Design Course – Part 7 – Using Links / Anchor Tags

Today, we will be covering about new HTML tag, i.e; Anchor Tag (Also known as Link Tag or Hyperlink). Anchor tag is written in a tag as <a>Any Text For Link</a>. It is used for creating a Hyperlink to allow users to jump from one page or section of web page to another page or section of web page. Almost all web pages have anchor tags to redirect user from one document to another for some reason.

On web pages, when you hover mouse over the anchor tag, the mouse cursor turns into a little hand. Hyperlinks can be defined using href attribute inside <a> tag. Href attribute specifies the destination address of the link. The only content that is visible on the web page is the text or image that is inside the <a>visible text or image here</a> tag. When href is specified to the a tag, the text or image that is appearing on web page becomes clickable. When users click on a highlighted text or image on Web Page, they are transferred or redirected to the linked document.

TYPES OF LINKS YOU WILL ENCOUNTER DAILY:

  1. Links from one website to another website
  2. Links within the website from one page to another
  3. Links from section of web page to other section of the same web page
  4. Links that invokes a new browser window and show the web page
  5. Links for embedding email address, contact number or skype ID

SYNTAX FOR ANCHOR TAG:

<a href="http://www.onlineitgeek.com">OnlineITGeek</a>

EXPLANANTION:

The text between the opening  <a> and closing </a> tag is called LINK TEXT. This text should be clear about where the link will take the user when they click on it. Don’t user ambiguous link text like CLICK HERE or just CLICK THIS, rather use a more clear text about the page or document you want user to redirect to. The already explained anchor tag above is clear because it says OnlineITGeek which means when user will click this link, they will be redirected to the OnlineITGeek website. This will also help those who scan website text for links/anchors. The best approach to select good text for links is to think about words that user mostly search.

LINKING TO OTHER SITES:

<ul>
 	<li><a href="http://www.onlineitgeek.com">OnlineITGeek</a></li>
 	<li><a href="http://www.facebook.com">Facebook</a></li>
 	<li><a href="http://www.wikipedia.com">Wikipedia</a></li>
 	<li><a href="http://www.Yahoo.com">Yahoo</a></li>
 	<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>

When you link your page to another website outside of your domain, you are actually creating an ABSOLUTE URL. All absolute URLs starts with the domain name followed by a complete path to the specific page. By default, home page will be displayed.
URL stands for Uniform Resource Locator.

LINKING TO OTHER PAGES ON THE SAME SITE:

Linking pages on the same site doesn’t require you to write domain name in the URL. This shorthand URLs are known as RELATIVE URL.
If the page you want to link is placed within the same folder as the current page, you just need to write the page name with proper extension. On the other hand, if the page you want your current page to link to is placed in different folder, then you need to write the name of that folder following the slash sign “/” and then write the name of the page placed in that folder. This helps while you are working locally on your computer and you need to link to some pages by staying on your project or website.

NOTE:

You need to be very careful while creating a website directory structure.

BEST APPROACH FOR DIRECTORY STRUCTURE:

If you are working on larger websites with hundreds of pages, you need to organize your pages by placing them section wise into a new folder under root directory of website. Most of the time homepage of the website is named as index.html or index.php depending on what is the nature of the file. The index.html or index.php is placed in the top level folder or directory also known as ROOT DIRECTORY or ROOT FOLDER.

The basic website structure is demonstrated below for your better understanding of how to organize files and folders while working on larger websites.

STANDARD DIRECTORY STRUCTURE FOR WEBSITE:

In our case, we will be using the directory structure for website named “onlineitgeek” (Just for example)

  • Onlineitgeek
  • css
    • style.css
      • default.css
      • custom.css
  • img
    • icons
      • icon.ico
    • sliders
      • slider1.jpg
      • slider2.jpg
      • slider3.jpg
    • banners
      • banner1.jpg
      • banner2.jpg
      • banner3.jpg
    • backgrounds
      • bg1.jpg
      • bg2.jpg
      • bg3.jpg
    • logo
      • logo.png
      • logo.gif
    • team
      • team1.jpg
      • team2.jpg
      • team3.jpg
  • js
    • default.js
    • custom.js
    • script.js
    • library
    • lib.js
    • fonts.js
    • animation.js
  • include
    • header.php
    • footer.php
    • sidebar.php
  • index.html
  • contact.html
  • about.html
  • services.html
  • gallery.html

Let’s now discuss about Relative URL types with Examples.

#1 Example: SAME FOLDER

SYNTAX: To link to contact.html from index.html page

<a href="index.html">Contact Us</a>

#2 Example: CHILD FOLDER

SYNTAX: To link to header.php from index.html page

<a href="include/header.php">Header File</a>

#3 Example: GRANDCHILD FOLDER

SYNTAX: To link to page that is inside the child folder and the page you want to link from is on the root, the syntax will be as followed;

<a href="include/anotherfolder/header.php">Header File Inside Folder In Include Folder</a>

#4 Example: PARENT FOLDER

SYNTAX: To link header.php to index.html page

<a href="../index.html">Home</a>

#5 Example: GRANDPARENT FOLDER

SYNTAX: To link include/anotherfolder/header.php to index.html on the root folder, you need to write the link as follows;

<a href="../../index.html">Home</a>

EMAIL LINKS:

To create a hyperlink to email which opens the user client email program installed on pc, you need to write mailto: function inside href attribute of anchor tag.
SYNTAX:

<a href="mailto:">Zubair’s Email</a>

This link will appear on the web page like all other links but this time it will not redirect to some page, but it will just open the email client application into a new message and will auto fill the email ID given inside href after mailto: function.

LINKING TO PAGE ON NEW WINDOW:

We can give the command to link to open in a new window rather than on the same window by writing an attribute called target attribute. Target attribute is written just like the href attribute but the purpose of this attribute is to open the given link inside href attribute to open in a new window. The value that will work for links to open in new window is _blank.
SYNTAX:

<a href="http://www.onlineitgeek.com" target="_blank">OnlineITGeek</a>

LINKING TO A SPECIFIC PORTION OF SAME WEB PAGE

There is always a need to link the same page to some part of the page, especially when the page is very long. It is like a Table of Contents in the book. On the top of the page listing down all the content of the page and giving them links to that section or part of web page. This will allow user to bring up the content which needs to be read. For that, id attribute must be used with the part of website.
Same is the case when you want to link to the specific part of another page. Remember that ID attribute is very essential in such cases.
SYNTAX: (Within The Same Page)

<a href=”#section1″>Section 1</a>
<a href=”#section2″>Section 2</a>
<div id=”section1″>Content of Section 1</div>
<div id=”section2″>Content of Section 2</div>

SYNTAX: (For Another Page)

<a href=”http://www.onlineitgeek.com/pagename#section1″>Section 1 of Another Page</a>
<a href=”http://www.onlineitgeek.com/pagename#section2″>Section 2 of Another Page</a>
<div id=”section1″>Content of Section 1 on Another Page</div>
<div id=”section2″>Content of Section 2 on Another Page</div>

CONCLUSION:

By using anchor tags, web designers can allow users to navigate between pages and websites easily. Providing target to blank page brings additional user friendliness to the website. Try all these concepts and ask any query related to this topic.

34 thoughts on “Web Design Course – Part 7 – Using Links / Anchor Tags

  • March 21, 2017 at 12:11 am
    Permalink

    Do you have a newsletter? If so, do you send out blog posts like these to your list? I would be interested in signing up if you do.

    Reply
  • February 9, 2019 at 1:20 pm
    Permalink

    Hello.This post was extremely interesting, particularly because I was looking for thoughts on this topic last Thursday.

    Reply
  • April 18, 2019 at 10:35 pm
    Permalink

    Thanks for this nice post. …

    Reply
  • April 25, 2019 at 7:42 am
    Permalink

    Your style is so unique in comparison to other folks I have read stuff from.
    Thanks for posting when you have the opportunity, Guess I’ll
    just book mark this web site.

    Reply
  • May 7, 2019 at 3:23 am
    Permalink

    If you are going for most excellent contents like
    me, simply pay a quick visit this website all the time as it offers feature
    contents, thanks

    Reply
  • May 19, 2019 at 12:53 am
    Permalink

    I’m really impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you modify it yourself?
    Either way keep up the excellent quality writing,
    it’s rare to see a nice blog like this one these days.

    Reply
  • May 31, 2019 at 6:49 am
    Permalink

    Enjoyed the post.

    Reply
  • June 13, 2019 at 4:11 pm
    Permalink

    Hello! I just wish to offer you a big thumbs up for your great information you
    have right here on this post. I’ll be coming back to your web site for
    more soon.

    Reply
  • July 22, 2019 at 9:41 am
    Permalink

    whoah this weblog is great i love reading your articles.
    Keep up the good work! You know, a lot of individuals are looking around for this info, you could help them
    greatly.

    Reply
  • August 2, 2019 at 11:20 pm
    Permalink

    After going over a handful of the blog articles on your
    web site, I honestly appreciate your technique of
    blogging. I saved as a favorite it to my bookmark site list and will be checking back in the near
    future. Take a look at my website too and let me know how you feel.

    Reply
  • August 4, 2019 at 8:29 am
    Permalink

    thank you web site admin

    Reply
  • August 4, 2019 at 8:31 am
    Permalink

    Amazing blog layout here. Was it hard creating a nice looking website like this?

    Reply
  • August 17, 2019 at 8:17 pm
    Permalink

    I couldn’t refrain from commenting. Well written!

    Reply
  • August 21, 2019 at 1:10 am
    Permalink

    thank you admin

    Reply
  • August 21, 2019 at 7:08 pm
    Permalink

    I must thank you for the efforts you’ve put in penning
    this site. I am hoping to vioew the same high-grade content by you later on as well.

    In fact, your creative writing abilities has motovated me to
    get my ownn site now 😉

    Reply
  • August 27, 2019 at 12:04 am
    Permalink

    I just want to mention I’m all new to blogs and certainly savored you’re web site. More than likely I’m want to bookmark your site . You surely have good writings. Appreciate it for sharing your web page.

    Reply
  • August 27, 2019 at 3:31 pm
    Permalink

    Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you could do with a few pics to drive the message home a little bit, but other than that, this is great blog. A great read. I will definitely be back.

    Reply
  • August 31, 2019 at 4:58 am
    Permalink

    I am usually to running a blog and i actually recognize your content. The article has really peaks my interest. I am going to bookmark your site and keep checking for new information.

    Reply
  • August 31, 2019 at 11:47 pm
    Permalink

    Nice read, I just passed this onto a colleague who was doing a little research on that. And he just bought me lunch since I found it for him smile So let me rephrase that: Thank you for lunch!

    Reply
  • September 1, 2019 at 3:19 am
    Permalink

    thank you web site admin

    Reply
  • September 2, 2019 at 3:44 am
    Permalink

    Amazing blog layout here. Was it hard creating a nice looking website like this?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *