HTML Images 🎯

Welcome to the HTML Images tutorial! In this lesson, we'll learn how to add images to our HTML web pages. By the end of this tutorial, you'll be able to enhance your web pages with engaging visual content. 📝 Note: This lesson is designed for both beginners and intermediates, so let's dive right in!

What are Images in HTML? 📝

Images in HTML are multimedia elements that can be added to a web page to provide visual content, such as logos, photos, or diagrams. They make web pages more interactive and appealing to users.

Why Use Images in HTML? 💡

Images help to break up large blocks of text, making content more engaging and easier to read. They can also convey information more quickly than words alone. Additionally, they can be used to create a unique and visually appealing user interface.

Adding an Image to HTML 🎯

To add an image to an HTML web page, we use the <img> tag. Here's a simple example:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Image</title>
</head>
<body>
    <h1>Welcome to CodeYourCraft!</h1>
    <img src="my-image.jpg" alt="A friendly CodeYourCraft logo">
</body>
</html>

Let's break this example down:

<img>: This is the image tag.
src: The src attribute specifies the image file location.
alt: The alt attribute provides alternative text for the image in case it cannot be displayed.

Image File Types 📝

The most common image formats for the web are:

JPEG (.jpg) - Used for photographic images due to its high quality and large file size.
PNG (.png) - Used for images with transparency or complex graphics, as it supports a wider range of colors and has a smaller file size compared to JPEG.
GIF (.gif) - Used for simple animations, as it supports animation but has a limited color palette.

Practical Example 🎯

Let's create a simple web page with an image. For this example, we'll use a JPEG image named codeyourcraft-logo.jpg.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeYourCraft</title>
</head>
<body>
    <h1>Welcome to CodeYourCraft</h1>
    <img src="codeyourcraft-logo.jpg" alt="CodeYourCraft logo">
</body>
</html>

To save this example, create a new file called index.html and save it in the same folder as the image file. Open the index.html file in a web browser to see the web page with the image.

Quiz 📝

That's it for this section! In the next part, we'll learn about responsive images and how to optimize images for web performance. Stay tuned! 🎯