Scribd
Upload
14 views2 pages

HTML Images Notes BCA 2nd Semester

The document provides an overview of the <img> tag in HTML, detailing its syntax, attributes, and best practices for embedding images in web pages. It covers image paths, responsive images, and common formats such as .jpg, .png, .gif, and .svg. Additionally, it includes an example HTML code demonstrating the use of the <img> tag.

Uploaded by

selfbotdc1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views2 pages

HTML Images Notes BCA 2nd Semester

The document provides an overview of the <img> tag in HTML, detailing its syntax, attributes, and best practices for embedding images in web pages. It covers image paths, responsive images, and common formats such as .jpg, .png, .gif, and .svg. Additionally, it includes an example HTML code demonstrating the use of the <img> tag.

Uploaded by

selfbotdc1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Notes: Working with Images - BCA 2nd Semester

1. What is the <img> tag?

The <img> tag is used to embed images in an HTML page. It is an empty tag (no closing tag required).

2. Basic Syntax

<img src="image.jpg" alt="Description" width="300" height="200">

3. Attributes of <img>

src - Specifies the path to the image (required).

alt - Alternative text shown if the image cannot be displayed.

width - Sets the width of the image (in pixels or %).

height - Sets the height of the image.

title - Tooltip text shown on mouse hover.

4. Image Paths

Absolute Path: <img src='https://example.com/pic.jpg'>

Relative Path: <img src='images/pic.jpg'>

5. Responsive Images

<img src="pic.jpg" style="max-width:100%; height:auto;">

6. Using Images as Links

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

<img src="button.jpg" alt="Click Here">

</a>

7. Common Image Formats

.jpg / .jpeg - Photographs, lossy compression


HTML Notes: Working with Images - BCA 2nd Semester

.png - Transparent images, lossless

.gif - Simple animations

.svg - Scalable vector graphics

8. Best Practices

Always use alt text.

Use optimized images to reduce load time.

Prefer modern formats (e.g., WebP).

Use <picture> tag for advanced image handling.

9. Example

<!DOCTYPE html>

<html>

<head>

<title>Image Example</title>

</head>

<body>

<h1>My Image</h1>

<img src='nature.jpg' alt='Beautiful Nature' width='400' height='300'>

</body>

</html>

You might also like