Lecture 6: HTML Hyperlinks & Tables

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-03

Lecture 6

HTML Hyperlinks & Tables

Week 2 | Unit I: HTML Forms & CSS Introduction
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Create different types of hyperlinks
  • Understand internal vs external links
  • Build and format HTML tables
  • Use semantic table elements
  • Implement accessibility best practices

The Anchor Element <a>

Hyperlinks connect web pages and resources:

<a href="https://example.com">Click Here</a>

Key attributes: - href: URL to navigate to - title: Tooltip text - target: Where to open (_blank for new tab) - rel: Relationship to target

The text between <a> and </a> is what users see

Four Types of Links

1. External Links

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

Full URL to another website

2. Internal Links

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

Link to page in same site

3. Anchor Links

<a href="#section2">
  Jump to Section
</a>

Link to specific section

4. Email Links

<a href="mailto:test@example.com">
  Email Us
</a>

Send email directly

External Links (Absolute URLs)

Link to other websites with full URLs:

<a href="https://www.example.com">Visit Example</a>

<a href="https://github.com" target="_blank">GitHub (New Tab)</a>

Key points: - Must start with https:// or http:// - Use target="_blank" to open in new tab - Consider using rel="noopener noreferrer" for security

<a href="https://github.com" 
   target="_blank" 
   rel="noopener noreferrer">GitHub</a>

Internal Links (Relative URLs)

Link to pages within the same website:

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

<a href="pages/contact.html">Contact</a>

<a href="../index.html">Home</a>
  • Use relative paths (no https://)
  • Goes to other HTML files in project
  • Paths relative to current file location

Anchor Links (Jump within Page)

Link to specific sections on page:

<!-- At the top, create navigation -->
<nav>
    <a href="#services">Services</a>
    <a href="#team">Team</a>
    <a href="#contact">Contact</a>
</nav>

<!-- Later on page, create sections -->
<h2 id="services">Our Services</h2>
<h2 id="team">Our Team</h2>
<h2 id="contact">Contact Us</h2>

Clicking “Services” jumps directly to that section

Email Links

Allow users to send emails directly:

<a href="mailto:contact@example.com">Email Us</a>

Advanced email link with subject:

<a href="mailto:contact@example.com?subject=Question">
  Send Question
</a>

With subject and body:

<a href="mailto:contact@example.com?subject=Support&body=Please help with...">
  Contact Support
</a>

Creating Tables

Tables organize data in rows and columns:

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Elements: - <table>: Container - <tr>: Table row - <td>: Table data cell - <th>: Table header cell

Complete Table Structure

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>New York</td>
        </tr>
    </tbody>
</table>
  • <thead>: Header rows
  • <tbody>: Data rows
  • <tfoot>: Footer rows (optional)

Table Example: Student Grades

<table border="1">
    <thead>
        <tr>
            <th>Student</th>
            <th>Math</th>
            <th>Science</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Sarah</td>
            <td>92</td>
            <td>88</td>
        </tr>
    </tbody>
</table>

Table Best Practices

  1. Use semantic structure - <thead>, <tbody>, <tfoot>
  2. Header cells - Use <th> for headers, not <td>
  3. Captions - Add <caption> above table
  4. Scope attribute - Help accessibility: scope="col"
  5. Keep simple - Avoid super complex nested tables
  6. CSS for styling - Don’t use border attribute, use CSS
  7. Responsive - On mobile, consider different layouts

Building Navigation with Links

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

With styling (later in CSS):

nav a {
    margin: 10px;
    text-decoration: none;
    color: #333;
}

Resources & References

Questions?

Next: Lecture 7 - HTML Forms & Form Elements