Skip to main content

6/100: Creating links in html page with anchor tag.

Hey there, welcome to my blog. This is the 6th day of my 100 days web development challenge. I started this challenge last week because of my aim to become a web developer. In this 100 days challenge I'm focusing on learning the basics of web development i.e. html, css and javascript. And I'm also documenting my learnings in the form of blogs and by uploading code daily to my GitHub account.


Today I learnt about the anchor tag which is very important in html and is used very often. You can get all the html programs on my GitHub .But, before sharing about today's learnings, have a look at what I learned till now.


Learnings till now in HTML
   Days   TopicsCode LinkBlog Link
    Day 1     Syntax   Syntax    Blog
    Day 2     Headings and
     Lists		   Headings
   Lists
    Blog
    Day 3     Formatting Tags   Formatting
    Blog
    Day 4     Images   Images    Blog
    Day 5     Tables   Table    Blog


Topic:

What is a Hyperlink?

  • A hyperlink provides connectivity from one web page to another web page.
  • A hyperlink can be a link to a web page of same website or a web page of another website available on the internet, or even a section on the same web page.
  • It can be an image, icon or a text.
  • A hyperlink text is blue in color by default and is underlined.
  • When we click on a hyperlink, we are forwarded to the destination page.
  • When the mouse is hovered over a hyperlink, the mouse cursor changes into a palm with pointed index finger.
  • We make hyperlinks with the help of anchor tag.

Anchor Tag:

  • The anchor tag <a> which is a container element, specifies the destination of the hyperlink in order to link a web page to another web page.
  • Here is the syntax of <a> tag.
<a>..............</a>
 
  • Inside the opening <a> tag, we add the "href" attribute where we put the source destination of a file or resource to which we want to provide a link to. 
  • We provide the source path inside double quotes. For example:
<a href=""></a>

Internal Linking:

  • Internal linking means linking of different sections of the same web page or document to each other.
  • It is helpful when a web page is very long and loaded with many content.
  • A hyperlinked text is used the most in internal linking.
  • You may have observed internal linking on some websites, where you click on a text or topic and you are brought to that section directly on the same page without need to scroll all the way down.
  • You can see internal linking above in the topic section, where 4 links are provided that link the various sections on this web page.
  • Run the below code to see internal linking.
<h3>Welcome to Anchor tag tutorial</h3>
    <p>Provide some hyperlinks that links the different sections of this page.</p>
<hr>
    <h1>My Goals for the Year</h1>

        <nav>
            <ul>
                <li>
                    <a href="#html">Learning HTML</a>
                </li>
                <li>
                    <a href="#vacation">Planning a Vacation</a>
                </li>
            </ul>
        </nav>

        <hr>
        <section id="html">
        <h2>I`m ready to learn HTML</h2>
        <p>This is my first web page.</p>

        <h3>My Daily Schedule</h3>
        <p>Let me tell how:</p>
            <ol>
            <li>...I learn more about web dev.</li>
            <li>...I plan out my Schedule.</li>
            <li>...I use resources from <abbr title="w3schools">
                <a href="https://www.w3schools.com/">w3s</a>
            </abbr>.</li>
            </ol>
        </section>
       
        <hr>
        <section id="vacation">
        <h2>I`m Also Planning a Vacation</h2>
        <p>I`ve been working hard and <em>really need a getway.</em></p>
        <p>I live in <abbr title="Navi Mumbai">NM</abbr></p>

        <h3>Places I'd Like to Visit</h3>
        <ul>
        <li><p>I've heard good things about the Caribbean.</p></li>
    </ul>

    <hr>
       

        <h3>Places I Want to Avoid</h3>
        <dl>
            <dt>North Pole</dt>
            <dd>I hear this is <strong>cold</strong>!</dd>

            <dt>South Pole</dt>
            <dd>This is also cold.</dd>

            <dt>Mountain Tops</dt>
            <dd>These are also cold.</dd>
        </dl>
    </section>

    <hr>

    <p>
        <a href="#">Back to Top</a>
    </p>

External Linking:

  • External linking means linking of different web pages of the same website or linking to web pages or images of different websites.
  • For example: provide a link to wikipedia's official website.
<h2>External Linking</h2>
    <p>Click on the link to go to wikipedia website:</p>
    <a href="https://www.wikipedia.org/">Wikipedia</a>

You can check the full code for this blog here and check all my blogs related to this challenge below.

All Links:


Labels:
Location: India

Comments

Post a Comment

If you have any doubts, Please let me know.