Lecture notes of Class 6
Adding Images to Web Pages
Objective:
- Understand
how to insert and manage images in HTML.
Outcome:
- Students
will be able to use the <img> tag to insert images, provide
alternative text for accessibility, and manage image dimensions and
formats.
Introduction to Images in Web Pages
Images play a crucial
role in web design, providing visual appeal and conveying information more
effectively. In this class, we will explore how to add and manage images in
HTML documents using the <img> tag, an essential skill for web
developers.
1. The <img> Tag
The <img> tag is
used to embed images into an HTML document. Unlike other tags, the <img>
tag is self-closing, meaning it doesn't require a closing tag. The basic syntax
is:
<img
src="image.jpg" alt="Description of the image">
- src
(Source): Specifies the path to the image
file. This can be a relative path (relative to the HTML file) or an
absolute URL (link to an external image).
- alt
(Alternative Text): Provides a textual description
of the image, which is crucial for accessibility. This text is displayed
if the image fails to load and is used by screen readers for visually
impaired users.
2. Using the src Attribute
The src attribute is the
most important attribute of the <img> tag. It tells the browser where to
find the image you want to display. The value of src can be:
- Relative
Path: Refers to an image located in relation to the
current HTML file. For example:
<img
src="images/photo.jpg" alt="A beautiful landscape">
- Absolute
URL: Refers to an image hosted on another website or
a different location. For example:
<img
src="https://example.com/images/photo.jpg" alt="A beautiful
landscape">
3. The alt Attribute and Accessibility
The alt attribute is
essential for accessibility, allowing users who cannot see the image to
understand what it represents. Here’s why the alt attribute is important:
- Accessibility:
Screen readers use the alt text to describe the image to visually impaired
users.
- SEO:
Search engines use the alt text to understand the content of the image,
which can improve search rankings.
- Fallback
Content: If the image fails to load, the alt
text will be displayed in its place.
4. Managing Image Dimensions
The size of images on a
webpage can be controlled using the width and height attributes directly within
the <img> tag. For example:
<img
src="image.jpg" alt="A beautiful landscape"
width="500" height="300">
- Width
and Height: These attributes set the width and
height of the image in pixels. It’s important to maintain the aspect ratio
to avoid image distortion.
Alternatively, CSS can be
used to control the size:
<img
src="image.jpg" alt="A beautiful landscape"
style="width: 100%; height: auto;">
5. Image Formats
Different image formats
are suitable for various types of images:
- JPEG
(.jpg): Best for photographs and images
with many colors. It offers good compression with minimal loss of quality.
- PNG
(.png): Ideal for images with transparency
and simple graphics like logos. PNG supports lossless compression.
- GIF
(.gif): Commonly used for simple animations
and low-color images.
- SVG
(.svg): A vector format that scales well
without losing quality. It is perfect for logos, icons, and illustrations.
- WebP
(.webp): A modern format that provides
superior compression for images on the web, supporting both lossy and
lossless compression.
6. Responsive Images
To ensure that images
look good on all devices, responsive images should be used. The srcset
attribute helps browsers choose the appropriate image size based on the
device’s screen resolution:
<img
src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w,
small.jpg 320w" alt="A beautiful landscape">
- srcset:
Contains a list of image files with their corresponding widths. The
browser selects the best match based on the screen size.
7. Image Alignment and Styling
Images can be aligned and
styled using CSS to enhance the layout and design:
<img
src="image.jpg" alt="A beautiful landscape"
style="float: right; margin: 10px;">
- Float:
Allows text to wrap around the image.
- Margin:
Adds space around the image to separate it from other content.
Conclusion
In this class, we have
learned how to add images to web pages using the <img> tag. We covered
essential attributes like src and alt, discussed image dimensions, formats, and
how to make images responsive. Understanding how to use and manage images effectively
is crucial in creating visually appealing and accessible web pages.