FullStackEngineering.ioFullStackEngineering

Start Selling

  • Sell Services
  • Sell Products

Explore

  • Services
  • Products
  • Community Feed
  • Blog

Company

  • Contact Us
  • Terms and Conditions
  • Privacy Policy
Full Stack Engineering Logo

© 2024 FullStackEngineering.io

HTML in 1 Day: Chapter 5: Images and Media

Shahin Mannan
By Shahin Mannan on

June 1, 2024

  • Frontend Development

Adding Visual Appeal with Images and Media

Images and media can significantly enhance the visual appeal and interactivity of your web pages. In this chapter, you will learn how to use HTML to add images, make them responsive, and embed audio and video.

Inserting Images

The <img> tag is used to embed images in an HTML document. The src attribute specifies the path to the image, and the alt attribute provides alternative text for accessibility.

Example:

<img src="path/to/image.jpg" alt="Description of the image">

Responsive Images

To make images responsive and adaptable to different screen sizes, you can use the srcset and sizes attributes.

Example:

<img src="image-small.jpg" 
     srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
     alt="Description of the image">

Embedding Audio

HTML5 introduced the <audio> tag to embed audio files. You can provide multiple audio sources for better compatibility across different browsers.

Example:

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

Embedding Video

The <video> tag is used to embed video files. Like the <audio> tag, you can provide multiple sources.

Example:

<video controls> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

Practical Exercise

  1. Create a New HTML File: Save it as media.html.
  2. Add an Image: Use the <img> tag to add an image.
  3. Make the Image Responsive: Use srcset and sizes attributes.
  4. Embed Audio: Use the <audio> tag to embed an audio file with multiple sources.
  5. Embed Video: Use the <video> tag to embed a video file with multiple sources.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images and Media</title>
</head>
<body>
    <h1>Images and Media</h1>
    
    <h2>Image</h2>
    <img src="path/to/image.jpg" alt="Description of the image">
    
    <h2>Responsive Image</h2>
    <img src="image-small.jpg" 
         srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
         sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
         alt="Description of the image">
    
    <h2>Audio</h2>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
        <source src="audio-file.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
    
    <h2>Video</h2>
    <video controls>
        <source src="video-file.mp4" type="video/mp4">
        <source src="video-file.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Save and open this file in your browser to see the images and media in action.

Key Takeaways

  • The <img> tag is used to embed images in HTML.
  • Responsive images can be created using srcset and sizes attributes.
  • The <audio> and <video> tags are used to embed audio and video files, respectively.
  • Providing multiple sources for audio and video ensures better compatibility across different browsers.

Next Steps

In the next chapter, we’ll explore how to create and style tables in HTML, making your data more organized and visually appealing. Keep practicing to master embedding images and media in your web pages.

Please Sign In to post a comment.

Comments (0)