Complete Web Designing Course for Beginners

Images & Multimedia in HTML

🎨 Adding Images, Audio, and Videos to Make Websites Attractive

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Add images to webpages

✅ Understand image formats

✅ Use the <img> tag

✅ Resize images

✅ Add alternative text

✅ Insert audio files

✅ Insert video files

✅ Create attractive multimedia webpages

✅ Understand best practices for media usage

📖 Introduction

Imagine opening a website that contains only text.

Example:

Welcome to Our College

We provide quality education.

Contact us for admission.

The website works, but it looks boring.

Now imagine:

✅ College Logo

✅ Campus Photos

✅ Videos

✅ Audio Messages

The website becomes more attractive and professional.

This is where:

🖼️ Images & Multimedia

play an important role.

🌍 What is Multimedia?

Multimedia means combining different forms of content.

Examples:

Text

Images

Audio

Video

Animation

Modern websites use multimedia to improve user experience.

🖼️ What is an Image?

An image is a visual representation displayed on a webpage.

Examples:

College Logo
Student Photo
Product Image
Company Banner
Profile Picture

🎯 Why Use Images?

Images help:

✅ Improve appearance

✅ Explain concepts visually

✅ Increase user engagement

✅ Make websites professional

🌟 HTML Image Tag

Images are added using:

<img>

This tag is called:

Image Tag

Basic Syntax

<img src="image.jpg">

Understanding the Syntax

img

Image Tag

src

Source

Specifies image location.

Example

<img src="college.jpg">

How It Works

Browser looks for:

college.jpg

and displays the image.

🖥️ Example Project Structure

Project

│

├── index.html

├── college.jpg

HTML Code

<img src="college.jpg">

Browser displays the image.

📏 Setting Image Width

We can control image size.

Example:

<img src="college.jpg" width="300">

Result

Image width becomes:

300 pixels

📏 Setting Height

Example:

<img src="college.jpg" height="200">

Setting Both Width and Height

<img src="college.jpg"
width="300"
height="200">

🎯 Real Life Example

<img src="student.jpg"
width="250"
height="250">

Useful for profile pictures.

📝 Alternative Text (ALT)

One of the most important image attributes.

Syntax:

<img src="college.jpg"
alt="College Building">

What is ALT?

ALT stands for:

Alternative Text

Why Is ALT Important?

Suppose:

❌ Image fails to load

Browser displays:

College Building

instead.

Benefits of ALT

✅ Accessibility

✅ Better SEO

✅ User Understanding

Professional Example

<img src="logo.png"
alt="NextGen Dev Hub Logo">

Always use ALT text.

💻 Complete Image Example

<!DOCTYPE html>

<html>

<head>

<title>Images Example</title>

</head>

<body>

<h1>College Campus</h1>

<img src="college.jpg"
alt="College Campus"
width="500">

</body>

</html>

🖼️ Supported Image Formats

Common image formats:

JPG / JPEG

Most common.

Good for photographs.

PNG

Supports transparency.

Good for logos.

GIF

Supports animations.

WEBP

Modern optimized format.

Smaller file size.

🎯 Recommended Formats

Use Case	Format
Photos	JPG
Logos	PNG
Animations	GIF
Modern Websites	WEBP

🔗 Making Images Clickable

Images can also act as hyperlinks.

Example:

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

<img src="google.png"
width="200">

</a>

Result

Clicking image opens Google.

🎵 Adding Audio

HTML allows audio playback.

Tag:

<audio>

Basic Syntax

<audio controls>

<source src="music.mp3">

</audio>

Understanding

controls

Displays:

Play Button
Pause Button
Volume Control

Example

<audio controls>

<source src="song.mp3">

</audio>

Output

Browser displays an audio player.

🎥 Adding Videos

HTML also supports videos.

Tag:

<video>

Basic Syntax

<video controls width="500">

<source src="video.mp4">

</video>

Example

<video controls width="500">

<source src="college-tour.mp4">

</video>

Result

Browser displays video player.

🎯 Video Controls

Using:

controls

provides:

✅ Play Button

✅ Pause Button

✅ Volume Control

✅ Full Screen Option

📏 Video Size

Example:

<video controls
width="600">

Sets video width.

🌟 Complete Multimedia Example

<!DOCTYPE html>

<html>

<head>

<title>Multimedia Example</title>

</head>

<body>

<h1>Welcome to Our College</h1>

<img src="college.jpg"
width="500"
alt="College Campus">

<br><br>

<audio controls>

<source src="welcome.mp3">

</audio>

<br><br>

<video controls width="500">

<source src="college-tour.mp4">

</video>

</body>

</html>

🏗️ Professional Folder Structure

Project

│

├── index.html

│

├── images

│   ├── logo.png

│   ├── campus.jpg

│

├── audio

│   └── welcome.mp3

│

└── video

    └── tour.mp4

Using Folder Paths

Image:

<img src="images/logo.png">

Audio:

<audio controls>

<source src="audio/welcome.mp3">

</audio>

Video:

<video controls>

<source src="video/tour.mp4">

</video>

⚠️ Common Beginner Mistakes

Mistake 1

Wrong File Name

Wrong:

<img src="logoo.png">

Correct:

<img src="logo.png">

Mistake 2

Missing ALT Text

Wrong:

<img src="logo.png">

Correct:

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

Mistake 3

Large Image Files

Huge images slow websites.

Always optimize images.

Mistake 4

Incorrect Folder Path

Wrong:

<img src="logo.png">

when image is inside:

images/logo.png

Correct:

<img src="images/logo.png">

🌟 Best Practices

✅ Always use ALT text.

✅ Use appropriate image formats.

✅ Resize large images.

✅ Organize files into folders.

✅ Use descriptive file names.

✅ Compress large images.

🏆 Mini Project – Student Profile Page

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

</head>

<body>

<h1>My Profile</h1>

<img src="student.jpg"
alt="Student Photo"
width="250">

<p>Name: Rahul Kumar</p>

<p>Branch: Computer Science</p>

</body>

</html>

📝 Practical Activity

Create a webpage containing:

Your Photo

College Logo

One Audio File

One Video File

Display everything properly.

Run it in Chrome.

📋 Assignment

Assignment 1.7

Answer the following:

What is multimedia?
Which tag is used to display images?
What is the purpose of the src attribute?
What is ALT text?
Which tag is used for audio?
Which tag is used for video?
Create HTML code displaying an image.

🧠 Quiz

Q1. Which tag displays an image?

A. <image>

B. <img>

C. <picture>

D. <photo>

✅ Answer: B

Q2. Which attribute specifies image location?

A. href

B. src

C. alt

D. target

✅ Answer: B

Q3. What does ALT provide?

A. Image Size

B. Alternative Text

C. Audio Control

D. Video Source

✅ Answer: B

Q4. Which tag plays audio?

A. <music>

B. <sound>

C. <audio>

D. <mp3>

✅ Answer: C

Q5. Which tag displays video?

A. <movie>

B. <media>

C. <video>

D. <screen>

✅ Answer: C

📌 Lesson Summary

✅ Images make websites attractive and engaging.

✅ HTML uses the <img> tag to display images.

✅ The src attribute specifies image location.

✅ ALT text improves accessibility and SEO.

✅ HTML supports audio using the <audio> tag.

✅ HTML supports video using the <video> tag.

✅ Multimedia improves user experience.

✅ Proper file organization is important for professional projects.