Lecture 6: HTML Tables, Iframes & Forms

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-03

Lecture 6

HTML Tables, Iframes & Forms

Week 2 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Outcomes

After this lecture, students will be able to:

insert and optimize images with proper attributes
apply accessibility requirements for images
create all four types of hyperlinks
differentiate absolute and relative paths
build accessible navigation using anchor elements

Prerequisites

HTML document and tag fundamentals
Basic understanding of attributes and file paths
Familiarity with browser preview tools

Syllabus Mapping

Syllabus mapping:

HTML image element: src, alt, width, height, figure
Image formats and responsive images
HTML hyperlinks: all types, target, rel attributes
Navigation patterns and accessibility

Prerequisites used:

HTML semantic structure from Lectures 3-5
understanding of attributes and file paths

Agenda

Introduction and motivation
HTML images: attributes and best practices
Image formats and responsiveness
Figure and figcaption semantics
Hyperlinks: all four types
Navigation patterns and accessibility
Summary and exam preparation

Introduction and Motivation

Images make web pages visual and engaging, but incorrectly used they slow pages down and break accessibility.
Hyperlinks are what make the web a web - without them every page would be an isolated island.
Alt text on images is not optional: it is required by accessibility standards and affects SEO directly.
Every navigation menu, every “read more” button, every social media icon is a hyperlink.
Mastering these two elements unlocks the ability to build visually rich, fully navigable web pages.

Think About It - Interactive Questions

Before we dive into details, think about these:

What does a screen reader say when it encounters an image with no alt text?
What is the difference between clicking a link that opens in the same tab vs a new tab?
Why does a relative path like images/photo.jpg work on your computer but fail on another?
Why might a developer choose WebP over JPEG for product photos on an e-commerce site?

The HTML Image Element

flowchart LR
  IMG["img element"]
  SRC["src attribute\nFile path or URL"]
  ALT["alt attribute\nText description"]
  SIZE["width and height\nDimensions"]
  FIG["figure + figcaption\nSemantic wrapper"]
  IMG --> SRC
  IMG --> ALT
  IMG --> SIZE
  IMG --> FIG

<img> is a self-closing void element with no closing tag.
src and alt are both required for accessible, standards-compliant pages.

Basic Image Syntax

<img src="images/photo.jpg" alt="Mountain landscape at sunset" width="600" height="400">

<img src="logo.png" alt="Company Logo" width="200">

<img src="https://example.com/banner.jpg" alt="Welcome banner">

Required attributes:

src -> file path or URL of the image
alt -> description read by screen readers and shown when image fails to load

Choosing the Right Image Format

Format	Best For	Transparency	Notes
JPEG	Photographs	No	Lossy, small file size
PNG	Graphics, UI	Yes	Lossless, larger file
GIF	Simple animation	Yes	Limited 256 colors
WebP	All types	Yes	Best modern compression
SVG	Logos, icons	Yes	Scales infinitely

Rule of thumb: JPEG for photos, PNG for UI graphics, SVG for icons, WebP for modern sites

Relative vs Absolute Image Paths

Relative Paths (Recommended)

<!-- Same folder -->
<img src="photo.jpg" alt="">

<!-- Subfolder -->
<img src="images/photo.jpg" alt="">

<!-- Parent folder -->
<img src="../images/logo.png" alt="">

Works when files move together

Absolute Paths (Use with care)

<!-- Full external URL -->
<img src="https://example.com/logo.png"
     alt="">

<!-- NEVER use local disk paths -->
<!-- C:/Users/name/photo.jpg
     breaks on other computers -->

Writing Effective Alt Text

Poor alt text:

<img src="dog.jpg" alt="image">

<img src="dog.jpg" alt="photo">

Good alt text:

<img src="dog.jpg"
  alt="Golden retriever playing
       fetch on a sunny beach">

<img src="chart.png"
  alt="Bar chart: 40% sales
       increase Q1 to Q2 2026">

Rule: Describe the image as if reading aloud to someone who cannot see it.

Responsive Images

<!-- CSS-based responsiveness -->
<img src="photo.jpg" alt="Description"
     style="max-width: 100%; height: auto;">

<!-- srcset for different resolutions -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Product photograph">

max-width: 100% makes images shrink on mobile without distortion
srcset lets the browser download only the image size it needs

Semantic Image: Figure & Figcaption

<figure>
    <img src="images/architecture.jpg"
         alt="Burj Khalifa tower in Dubai against blue sky"
         width="600" height="400">
    <figcaption>Burj Khalifa, Dubai - world's tallest building (828m)</figcaption>
</figure>

<figure> = self-contained, referenceable media block
<figcaption> = caption semantically linked to the image
Screen readers announce the figcaption as part of the figure group
Unlike a plain <p> below the image, figcaption is semantically bound to the figure

The Anchor Element

flowchart LR
  A["anchor element a"]
  E["External Link\nhttps://..."]
  I["Internal Link\npage.html"]
  AN["Anchor Link\n#section-id"]
  EM["Email and Tel\nmailto: tel:"]
  A --> E
  A --> I
  A --> AN
  A --> EM

The href attribute defines WHERE the link goes.
The text between <a> and </a> is what users click.
Links can wrap images too: <a href="..."><img></a>

External Links

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

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

Always use full URL including https://
target="_blank" opens in a new browser tab
rel="noopener noreferrer" prevents the new tab from accessing your page (security)
Inform users when a link opens in a new tab (accessibility)

Internal Links

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

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

<a href="../index.html">Home (parent folder)</a>

<a href="/about.html">About (root-relative)</a>

Use relative paths for internal links
Root-relative paths starting with / work from any page on the site

Anchor Links - Jump Within a Page

Step 1 - Create targets using id:

<h2 id="services">Our Services</h2>
<h2 id="team">Our Team</h2>
<h2 id="contact">Contact Us</h2>

Step 2 - Create jump links:

<nav>
    <a href="#services">Services</a>
    <a href="#team">Team</a>
    <a href="#contact">Contact</a>
</nav>

The # symbol means “scroll to the element with this id on the same page”

Email & Telephone Links

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

<a href="mailto:support@example.com?subject=Help&body=Hello...">
    Send Support Request
</a>

<a href="tel:+911234567890">Call: +91 12345 67890</a>

mailto: opens the user’s email client with the address pre-filled
tel: opens the phone dialer on mobile devices
Include country code in tel: links for international compatibility

Images as Links

<a href="index.html">
    <img src="images/logo.png" alt="Company Logo - Go to Homepage" width="150">
</a>

<a href="products.html">
    <img src="images/banner.jpg" alt="Summer Sale - Up to 50% off" width="800">
</a>

Important: The alt text of a linked image should describe the link destination, not just the image content.

Building a Navigation Menu

<header>
    <a href="index.html"><img src="logo.png" alt="Site Logo"></a>
    <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>
</header>

Use <nav> to wrap navigational link groups for semantic clarity
Screen readers announce <nav> regions to help users navigate the page structure

Link Accessibility Best Practices

Bad Practice	Better Practice
`Click here`	`Read our accessibility guide`
`Read more`	`Read more about HTML images`
Empty alt on linked image	Alt text describes the destination
URL as link text	Descriptive anchor text

Rule: A screen reader user should understand where the link goes from the link text alone, with no surrounding context.

Memory Booster: Images and Links Together

Think of a magazine page:

<img> = The photograph - visual media that communicates instantly
alt text = The photo caption that explains it to those who cannot see it
<figure> = The photo box that frames image + caption together as a unit
<a> hyperlink = The “see page 42” reference that connects to related content
target="_blank" = Opening a new bookmarked page to not lose your place
Anchor #id = The article index at the start of a magazine directing you to sections

Documents connected by hyperlinks form the World Wide Web!

Live Demo: Images & Hyperlinks Explorer

Interactive demonstration of image elements and all four hyperlink types:

?? Open Interactive Demo: HTML Images & Hyperlinks

What you’ll see:

Image with correct alt text vs missing alt text comparison
Responsive image sizing
Figure/figcaption semantic demonstration
All four link types: external, internal, anchor, email
Navigation menu built with semantic <nav> elements

?? Key insight: DevTools shows the exact href and alt values of any element!

Resources & References

Structured Debug Checklist for Images & Links

When an image does not appear:

check src attribute path (relative vs absolute)
verify file extension matches real file (.jpg vs .jpeg)
test direct URL in browser address bar
inspect DevTools Network tab for 404 errors
confirm file exists in the correct folder

When a link does not work:

verify href attribute is present and not empty
check file path or full external URL is correct
for anchor links, confirm the target id exists on the page
inspect DevTools Console for errors blocking navigation

Summary

After this lecture, you should understand:

<img> element attributes: src, alt, width, height
Image formats and when to use each one
Responsive images using max-width and srcset
<figure> and <figcaption> for semantic image wrapping
All four hyperlink types: external, internal, anchor, email
Security: rel="noopener noreferrer" with target="_blank"

Exam Preparation Questions: Short

What is the purpose of the alt attribute?
Name two required attributes for <img>.
What is the difference between absolute and relative paths?
What does target="_blank" do?
Why use rel="noopener noreferrer" with external links?
What is an anchor link and how is it created?
What is <figure> with <figcaption> used for?
Which image format is best for logos and icons?

Exam Preparation Questions: Long

Explain the <img> element with all attributes and accessibility requirements.
Compare image file formats with suitable use cases.
Explain all four types of hyperlinks with examples.
Discuss how to build an accessible navigation menu using semantic HTML.
Design a product page using images, figure/figcaption, and navigation hyperlinks.

Practice Task

create a page with three images using proper alt text
wrap one image in <figure> with <figcaption>
make one image responsive using max-width: 100%
create a navigation using all four link types
test all links in browser and verify alt text in DevTools

Checklist

Can you:

insert images with all required attributes?
write descriptive and meaningful alt text?
create all four types of hyperlinks?
build a semantic navigation menu?
answer short and long exam questions?

Next Lecture

Topic: HTML Tables & Iframes
Preparation required: revise attributes and semantic structure from Lectures 3-6

HTML Tables, Iframes & Forms

Next: Lecture 7 - HTML Tables & Iframes