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="https://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="https://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="https://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=”https://www.onlineitgeek.com/pagename#section1″>Section 1 of Another Page</a>
<a href=”https://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.

69 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
  • June 18, 2019 at 3:46 pm
    Permalink

    I like the valuable information you provide in your articles.
    I will bookmark your blog and check again here frequently.
    I am quite sure I will learn plenty of new stuff right here!

    Best of luck for the next!

    Reply
  • June 21, 2019 at 1:53 pm
    Permalink

    I am really enjoying the theme/design of your weblog.
    Do you ever run into any web browser compatibility problems?
    A handful of my blog audience have complained about my site not
    operating correctly in Explorer but looks great in Firefox.
    Do you have any solutions to help fix this problem?

    Reply
  • June 27, 2019 at 3:10 pm
    Permalink

    I like what you guys tend to be up too. This type
    of clever work and reporting! Keep up the amazing works guys I’ve incorporated you
    guys to our blogroll.

    Reply
  • July 1, 2019 at 8:55 pm
    Permalink

    Just wish to say your article is as amazing. The clarity in your post is just spectacular and i could assume you’re an expert on this subject.

    Well with your permission allow me to grab your feed to keep updated with forthcoming post.
    Thanks a million and please continue the rewarding work.

    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
  • September 17, 2019 at 10:11 am
    Permalink

    Some genuinely superb information, Gladiola I noticed this. “Always be ready to speak your mind and a base man will avoid you.” by William Blake.

    Reply
  • September 18, 2019 at 2:43 pm
    Permalink

    Absolutely pent subject matter, Really enjoyed reading through.

    Reply
  • November 15, 2019 at 6:44 pm
    Permalink

    Thanks for every other fantastic article. Where else may just anyone get that kind of info in such a perfect manner of writing?
    I’ve a presentation next week, and I’m at the search
    for such information.

    Reply
  • November 16, 2019 at 11:06 am
    Permalink

    I have read so many articles or reviews regarding the blogger lovers but
    this article is truly a nice article, keep it up.

    Reply
  • November 20, 2019 at 1:16 pm
    Permalink

    Oh my goodness! an amazing article dude. Thank you However I am experiencing issue with ur rss . Don?t know why Unable to subscribe to it. Is there anyone getting identical rss problem? Anyone who knows kindly respond. Thnkx

    Reply
  • December 5, 2019 at 2:33 pm
    Permalink

    Fantastic beat ! I would like to apprentice while you amend your website,
    how could i subscribe for a blog website?
    The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear idea

    Reply
  • December 13, 2019 at 9:16 pm
    Permalink

    You made some respectable points there. I seemed on the web for the issue and found most people will go together with along with your website.

    Reply
  • December 18, 2019 at 8:56 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
  • December 24, 2019 at 1:31 am
    Permalink

    I am not very superb with English but I find this very easygoing to translate.

    Reply
  • December 28, 2019 at 12:06 pm
    Permalink

    Only wanna tell that this is extremely helpful, Thanks for taking your time to write this.

    Reply
  • December 29, 2019 at 12:49 pm
    Permalink

    I simply want to tell you that I’m newbie to blogging and site-building and truly liked this web site. More than likely I’m going to bookmark your blog . You absolutely come with fabulous posts. Regards for sharing your web site.

    Reply
  • January 4, 2020 at 1:04 am
    Permalink

    Hey I know this is off topic but I was wondering if you knew of
    any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time
    and was hoping maybe you would have some experience with something
    like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

    Reply
  • January 4, 2020 at 8:11 am
    Permalink

    I am not very superb with English but I find this very easygoing to translate.

    Reply
  • January 4, 2020 at 3:15 pm
    Permalink

    I’m not that much of a online reader to be honest but
    your blogs really nice, keep it up! I’ll go ahead and bookmark your site to
    come back later on. Cheers

    Reply
  • January 5, 2020 at 9:20 am
    Permalink

    Good post! We will be linking to this great
    content on our website. Keep up the good writing.

    Reply
  • January 14, 2020 at 7:34 am
    Permalink

    I’m amazed, I have to admit. Rarely do I come across
    a blog that’s both educative and engaging, and let me tell you, you
    have hit the nail on the head. The issue is something which not enough people are speaking intelligently about.
    Now i’m very happy that I found this during my search
    for something relating to this.

    Reply
  • January 25, 2020 at 8:43 am
    Permalink

    Hi, constantly i used to check web site posts here in the early hours in the break of day, because i like to find out more and more.| а

    Reply
  • February 16, 2020 at 5:39 am
    Permalink

    thank you admin

    Reply
  • February 18, 2020 at 7:09 pm
    Permalink

    thank you admin

    Reply
  • February 19, 2020 at 9:36 pm
    Permalink

    Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I?d prefer to use some with the content on my blog whether you don?t mind. Natually I?ll give you a link on your web blog. Thanks for sharing.

    Reply
  • February 22, 2020 at 5:15 am
    Permalink

    thank you admin

    Reply

Leave a Reply

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