Skip to main content

Python type() Function

When learning Python, you will work with different types of data, such as numbers, text, decimal values, and Boolean values. Python provides several built-in functions to help you work with these data types. One of the most useful functions is the type() function . The type() function tells you the data type of a value or variable. It helps you understand what kind of data Python is working with and can make debugging your programs easier. For example, consider these variables: age = 20 price = 99.50 name = "Rahul" is_student = True Although all four variables store data, their data types are different. Python allows us to check these types using type() . Let's understand how it works with simple examples. 1. What Is the type() Function in Python? The type() function is a built-in Python function that returns information about the type of an object. In beginner-level programming, you can use it to check whether a value is an integer, a floating-point number, a string,...
Post a Comment

HTML Links and Navigation – Connecting Webpages

Links are one of the most important features of the internet. They allow users to move from one webpage to another with a single click.

Without links, websites would behave like isolated pages instead of a connected web.

In this article, we will learn:

  • What HTML links are

  • Anchor tag

  • Internal and external links

  • Image links

  • Email links

  • Bookmark links

  • Target attribute

  • Navigation menus

  • Practical examples

What are HTML Links?

HTML links are clickable elements that connect:

  • One webpage to another

  • One website to another

  • One section of a page to another

  • Files, images, videos, and documents

Links are also called Hyperlinks.

HTML uses the <a> tag to create links.

Anchor Tag

The anchor tag syntax:

<a href="URL">Link Text</a>

Where:

  • <a> → Anchor tag

  • href → Hyperlink reference

  • URL → Destination address

Example of a Simple Link

<a href="https://www.google.com">
    Visit Google
</a>

This creates a clickable link to Google.

Complete Program Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Links</title>
</head>

<body>

    <h1>Welcome</h1>

    <a href="https://www.google.com">
        Visit Google
    </a>

</body>

</html>

How Links Work

When a user clicks a link:

  1. Browser reads the href value

  2. Browser opens the destination

  3. Requested webpage loads

Types of Links in HTML

HTML mainly supports:

TypePurpose
External LinksConnect other websites
Internal LinksConnect pages within same website
Bookmark LinksJump to sections
Email LinksOpen email application
Image LinksUse images as links

1. External Links

External links connect to another website.

Example:

<a href="https://www.wikipedia.org">
    Visit Wikipedia
</a>

This connects to Wikipedia.

2. Internal Links

Internal links connect webpages inside the same website.

Example:

<a href="about.html">
    About Us
</a>

Suppose website files are:

  • index.html

  • about.html

  • contact.html

Internal links connect these pages together.

Example Website Structure

Website Folder
│
├── index.html
├── about.html
├── contact.html
└── services.html

Internal Navigation Example

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Home Page</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <a href="about.html">About Us</a>

</body>

</html>

about.html

<!DOCTYPE html>
<html>

<head>
    <title>About Page</title>
</head>

<body>

    <h1>About Us</h1>

    <p>This is the about page.</p>

</body>

</html>

3. Target Attribute

The target attribute controls where the link opens.

ValueDescription
_selfOpens in same tab
_blankOpens in new tab

Example

<a href="https://www.google.com" target="_blank">
    Open Google in New Tab
</a>

4. Image as a Link

Images can also be clickable.

Example:

<a href="https://www.youtube.com">
    <img src="youtube.png" width="200">
</a>

This creates a clickable image linking to YouTube.

5. Email Links

HTML can open email applications directly.

Syntax:

<a href="mailto:example@gmail.com">
    Send Email
</a>

When clicked:

  • Default email application opens

  • Receiver address fills automatically

Email Link with Subject

<a href="mailto:test@gmail.com?subject=Hello">
    Contact Us
</a>

6. Telephone Links

Used mostly in mobile websites.

Example:

<a href="tel:+919999999999">
    Call Now
</a>

Clicking starts a phone call on supported devices.

7. Bookmark Links

Bookmark links jump to a specific section of the same webpage.

Useful for:

  • Long webpages

  • Documentation

  • Tutorials

  • FAQs

Step 1: Create Target Section

<h2 id="chapter3">Chapter 3</h2>

Step 2: Create Bookmark Link

<a href="#chapter3">
    Go to Chapter 3
</a>

Complete Bookmark Example

<!DOCTYPE html>
<html>

<head>
    <title>Bookmarks</title>
</head>

<body>

    <a href="#bottom">Go to Bottom</a>

    <h1>HTML Tutorial</h1>

    <p>Lots of content here...</p>

    <h2 id="bottom">Bottom Section</h2>

</body>

</html>

Download Links

HTML can provide downloadable files.

Example:

<a href="notes.pdf" download>
    Download Notes
</a>

Absolute and Relative URLs

Absolute URL

Full web address.

Example:

https://www.google.com

Relative URL

Local file path.

Example:

about.html

Navigation Menu Using Links

Navigation bars are built using lists and links.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Navigation Menu</title>
</head>

<body>

    <h1>My Website</h1>

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</body>

</html>

Output Structure

• Home
• About
• Services
• Contact

Styling Navigation Menus

Later, CSS can make menus look professional.

Modern websites like Amazon and Netflix use advanced navigation systems.

Link Colors in HTML

Browsers use default colors:

  • Blue → Unvisited link

  • Purple → Visited link

  • Red → Active link

CSS can customize these colors later.

Complete Practical Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Links Demo</title>
</head>

<body>

    <h1>HTML Links Example</h1>

    <h2>External Link</h2>

    <a href="https://www.google.com">
        Visit Google
    </a>

    <br><br>

    <h2>Email Link</h2>

    <a href="mailto:test@gmail.com">
        Send Email
    </a>

    <br><br>

    <h2>Phone Link</h2>

    <a href="tel:+911234567890">
        Call Us
    </a>

    <br><br>

    <h2>Bookmark Link</h2>

    <a href="#bottom">
        Jump to Bottom
    </a>

    <br><br><br><br><br><br><br><br>

    <h2 id="bottom">Bottom Section</h2>

</body>

</html>

Common Mistakes Beginners Make

1. Forgetting href

Wrong:

<a>Google</a>

Correct:

<a href="https://www.google.com">
    Google
</a>

2. Wrong File Path

Wrong:

<a href="abot.html">

Correct:

<a href="about.html">

3. Missing Closing Tag

Wrong:

<a href="page.html">Home

Correct:

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

Advantages of HTML Links

  • Connect webpages

  • Improve navigation

  • Enhance user experience

  • Help SEO

  • Make websites interactive

Real-World Applications

Links are used in:

  • Menus

  • Buttons

  • Online shopping

  • Social media

  • Documentation

  • Educational websites

Platforms like Facebook, Instagram, and YouTube heavily rely on hyperlinks for navigation.

Conclusion

HTML links are the foundation of website navigation. They connect webpages, websites, documents, and sections together, making the internet a connected system.

Comments

Post a Comment

Popular posts from this blog

Understanding Comments in Java: A Beginner’s Guide

When learning Java programming, one of the first concepts you’ll come across is comments . Comments may not affect how a program runs, but they play a crucial role in making code more understandable, readable, and maintainable. Let’s dive deeper into what comments are, why they’re important, and the different types of comments in Java. What are Comments in Java? A comment in Java is a piece of text written within a program that is ignored by the compiler . In other words, comments are notes for humans, not instructions for machines. They help developers explain the purpose of code, describe logic, or temporarily disable certain lines of code without deleting them. Why are Comments Important? 📌 Readability – Comments make code easier to understand for you and others. 📌 Maintenance – When you revisit your code after months, comments remind you what you were doing. 📌 Collaboration – In team projects, comments explain code to fellow developers. 📌 Debugging – You c...
Post a Comment
Read more

Java Program to Check Voting Eligibility

In this program, we’ll take the user’s age as input and check whether the person is eligible to vote or not. In India, the minimum age required to vote is 18 years . 💻 Program Code // Java Program to Check Voting Eligibility import java.util.Scanner; public class VotingEligibility { public static void main(String[] args) { // Create Scanner object to take input from user Scanner sc = new Scanner(System.in); // Ask user to enter age System.out.print("Enter your age: "); int age = sc.nextInt(); // Check eligibility if (age >= 18) { System.out.println("You are eligible to vote."); } else { System.out.println("You are not eligible to vote yet."); System.out.println("You can vote after " + (18 - age) + " year(s)."); } sc.close(); // Close the scanner } } 🧠 Explanation import java.util.Scanner; → Imp...
Post a Comment
Read more

Java Program to Calculate Total Marks and Average of Five Subjects

💡 Program Explanation In this program: The user will input marks of five subjects . The program will calculate the total marks and average . It will then display both results clearly. 🧑‍💻 Java Code: // Java Program to Calculate Total Marks and Average of Five Subjects import java.util.Scanner; // Importing Scanner class for user input public class TotalAndAverage { public static void main(String[] args) { // Creating Scanner object to take input from user Scanner sc = new Scanner(System.in); // Declaring variables for five subjects double subject1, subject2, subject3, subject4, subject5; // Taking marks input for each subject System.out.print("Enter marks of Subject 1: "); subject1 = sc.nextDouble(); System.out.print("Enter marks of Subject 2: "); subject2 = sc.nextDouble(); System.out.print("Enter marks of Subject 3: "); subject3 = sc.nextDo...
Post a Comment
Read more