HTML / HTML Images and Multimedia
Adding Images in HTML
This tutorial will guide you on how to add images to your HTML documents using the <img> tag. Images make your webpage more appealing and can convey information more effectively t…
Section overview
5 resourcesIntroduces the inclusion of images, audio, and video in HTML.
# Adding Images in HTML
## 1. Introduction
In this tutorial, we will learn how to add images to your HTML documents using the `<img>` tag. Images are an essential part of any website as they make the webpage more visually appealing and can convey information more effectively than text alone.
By the end of this tutorial, you will learn:
- How to use the `<img>` tag to insert images into your HTML documents.
- How to adjust the images' size and alignment.
- Best practices when working with images in HTML.
Prerequisites:
- Basic understanding of HTML tags and attributes.
- A text editor (like Sublime Text, Atom, or Notepad++) and a browser to run and view your HTML code.
## 2. Step-by-Step Guide
An image can be added to an HTML document using the `<img>` tag. The source of the image, its dimensions, and other attributes can be specified using various attributes of the `<img>` tag.
Here's how you can add an image:
```html
<img src="image.jpg" alt="A description of the image">
src: This attribute is used to specify the source of the image. It can be a local path or a URL.alt: This attribute provides alternative text that is displayed in case the image cannot be loaded. It also helps with accessibility for visually impaired users.
How to adjust the size of the image?
The size of the image can be adjusted using the width and height attributes of the <img> tag.
<img src="image.jpg" alt="A description of the image" width="500" height="600">
width: Specifies the width of the image.height: Specifies the height of the image.
Tip: Always maintain the aspect ratio of your image to prevent distortion.
3. Code Examples
Example 1: Adding an image
<!DOCTYPE html>
<html>
<body>
<h2>Adding an Image</h2>
<img src="image.jpg" alt="Beautiful landscape">
</body>
</html>
In this example, an image with the filename image.jpg is added to the HTML document. The alt attribute provides a description of the image.
Example 2: Adjusting the size of an image
<!DOCTYPE html>
<html>
<body>
<h2>Adjusting the size of an Image</h2>
<img src="image.jpg" alt="Beautiful landscape" width="500" height="300">
</body>
</html>
In this example, the size of the image is adjusted to 500 pixels wide and 300 pixels tall.
4. Summary
In this tutorial, we learned how to add images to an HTML document using the <img> tag and its various attributes such as src, alt, width, and height. The next step would be to learn how to position and align these images using CSS.
Additional resources:
- MDN Web Docs: HTML Images
- W3Schools: HTML Images
5. Practice Exercises
Exercise 1:
Create an HTML document and add an image of your choice. Give it an appropriate alt description.
Exercise 2:
Adjust the size of the image you added in Exercise 1 to a width of 300 pixels and a height of 200 pixels.
Exercise 3:
Add a second image to the document. Make the second image half the size of the first image.
Solutions and explanations will vary based on the images used and the personal adjustments made to the image sizes.
```
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article