Practical 5 : Adding Images
Objective:
To learn how to add images to an HTML document to visually enhance web content.
Instructions:
Open your index.html file created in Previous Class
Add an image inside the <body> tag:
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text.</p>
<img src="path/to/image.jpg" alt="Description of image">
</body>
Replace "path/to/image.jpg" with the actual path or URL to your image file. Ensure the image file is accessible from your HTML file location.
Save and view your HTML document in a web browser to see the image.
Detailed Explanation:
Adding an Image:
HTML Image <img> Tag:
The <img> tag is used to embed images in HTML pages.
Syntax: <img src="URL" alt="Description">
src: Specifies the path or URL to the image file.
alt: Provides alternative text for the image, used for accessibility and displayed if the image fails to load.
Example:
<img src="path/to/image.jpg" alt="Description of image">
Replace "path/to/image.jpg" with the actual path or URL to your image file.
Image Attributes:
- src Attribute:
Specifies the source (path or URL) of the image file.
Example: src="images/picture.jpg"
- alt Attribute:
Provides alternative text for the image, which is displayed if the image cannot be loaded or by screen readers for accessibility.
Example: alt="Nature Scene"
- Width and Height Attributes:
Optionally specify the dimensions (in pixels) of the image to control its display size.
Example:
<img src="path/to/image.jpg" alt="Description" width="300" height="200">
Adjust width and height values as needed.
Image Accessibility:
Alternative Text (alt Attribute):
Always include meaningful alt text to describe the image content. This is crucial for accessibility and SEO (Search Engine Optimization).
Relative vs. Absolute Paths:
Relative Path:
Specifies the image location relative to the current HTML file.
Example: src="images/picture.jpg"
Absolute URL:
Provides the full web address (URL) to the image, useful when linking to images hosted on other websites.
Example: src="https://www.example.com/images/picture.jpg"
Outcome:
By completing this lab, you will understand how to embed images into HTML documents using the <img> tag, adjust image display properties, and ensure proper accessibility with alternative text. This knowledge is essential for incorporating visual elements into web pages effectively.
Lab Exercise(Practice Questions)
Objective:
To practice adding and formatting images using <img> tag in HTML.
Instructions:
Create a new file named adding_images.html using a text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
Prepare image files:
Download or prepare images (image.jpg, logo.png, etc.) to use in your HTML document. Save them in the same directory as your HTML file for simplicity.
Build the basic structure of your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Images in HTML</title>
<style>
/* Optional: CSS styles for additional image formatting */
.center {
text-align: center;
}
.img-border {
border: 1px solid #ccc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Image Examples</h1>
<h2>Image from External URL</h2>
<img src="https://via.placeholder.com/300" alt="Placeholder Image" class="img-border">
<h2>Local Images</h2>
<p>Logo:</p>
<img src="logo.png" alt="Logo" class="img-border">
<p>Photo:</p>
<img src="image.jpg" alt="Photo" class="img-border">
<h2>Centered Image</h2>
<div class="center">
<img src="image.jpg" alt="Centered Photo" class="img-border">
</div>
</body>
</html>
Save the file and place your image files (logo.png, image.jpg, etc.) in the same directory as your HTML file.
Open the HTML file in a web browser to view your web page (adding_images.html).
Detailed Explanation:
HTML Structure:
- <img> (Image) Tag: Defines an image to be displayed on the web page.
- src="image.jpg": Specifies the source (URL or file path) of the image.
- alt="Photo": Provides alternative text for accessibility and SEO purposes (describes the image if it cannot be displayed).
- class="img-border": Applies CSS class for additional styling (border, padding, margin).
CSS Styling (Optional):
The <style> section in the <head> allows you to define CSS styles for custom image formatting:
- .center: Centers the image using text-align: center;.
- .img-border: Adds a border, padding, and margin to images for a consistent look.
Tasks:
Enhance your page by:
- Adding more images with different dimensions and file formats (jpg, png, gif).
- Experimenting with additional CSS styles to customize image alignment (text-align: center;, float: left;, etc.) and appearance.
Practice image accessibility:
Ensure each <img> tag has a meaningful alt attribute that describes the image's content or purpose.
Outcome:
By completing this lab exercise, you will have practiced adding images to an HTML document using the <img> tag and applying basic CSS styling for image presentation. This exercise helps you understand how to integrate visual content effectively into web pages, ensuring accessibility and enhancing the overall user experience.