Welcome to the fifth part of our course in HTML. We are going to discuss a very important point in HTML: how to add images, videos, and audio files to your web pages. These types of media elements are both important for making your website more appealing and enabling users to access information and enjoy interactive content. Let’s start with how to introduce images and then move to more complex topics with regard to responsive media for different devices.
5.1 Images
For adding images to a web page, the img tag in HTML can be utilized. Unlike most of the other HTML tags, the <img> tag is self-closing. So, there’s neither an opening as well as a closing tag for it. Here’s a basic syntax:
<img src="image.jpg" alt="Description of the image">
src: This is the file path or URL to the image.alt: This includes alternative text that describes the image. This is important for accessibility and SEO. It’s displayed when an image cannot be loaded or for screen readers.
Adding Local Images vs. External Images:
- Local Images: If your image resides in your project directory, you can simply reference it with a relative path.
<img src="images/photo.jpg" alt="A beautiful sunset">
- External Images: You can also use images hosted on other web sites using a full URL.
<img src="https://www.example.com/image.jpg" alt="Example image">
Image Size and Dimensions:
You can use the width and height attributes to control the size of an image, although it’s generally recommended to use CSS for styling.
<img src="image.jpg" alt="An image" width="500" height="300">
Best Practices for Images:
- Use descriptive alt text for accessibility.
- Use optimized image formats (like JPG for photos and PNG for transparent images).
- Minimize large image files to save on page load times.
Activity:
Create an HTML web page with images that are stored both locally and retrieved from an external site. Experiment with adding width and height attributes to make the image appear different sizes.
5.2 Image Maps
An image map allows you to assign areas of an image to be clickable, which link to various destinations. That’s perfect for creating interactive images: maps, diagrams, or even other types of renderings.
Creating an Image Map:
To create an image map, you use the element together with the elements to define areas and make them clickable .
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" alt="USA" href="https://www.usa.gov">
<area shape="circle" coords="130,136,60" alt="UK" href="https://www.gov.uk">
</map>
usemap: Associates the image with a map by pointing to the name attribute of the <map> tag.shape: Specifies the shape of the clickable area (e.g., rect, circle, poly).coords: The coordinates of the clickable area. For rectangle, it will be the top-left and bottom-right corner. For circle, it will be the center coordinates and a radius.
Shapes for Image Maps:
- Rectangle: It is defined by two coordinates, which are the coordinates of top-left and bottom-right.
- Circle: It is defined by a center point and a radius.
- Polygon: It is defined by a number of points that make up the outline.
Activity:
Try creating your own image map. Use a picture of your country, city, or whatever image you think could be made clickable in multiple areas. Practice making rectangles, circles, and polygons.
5.3 Adding Videos (video Tag)
Video has become one of the necessities of web content in recent times. HTML5 has brought to us <video> tag enabling videos to be embedded directly on websites without having recourse to the use of external plugins.
Basic Structure of the video Tag:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
controls: It allows the video to have controls, such as a play button, a pause button, volume level, and more.source: Specifies the file path and type of the video.- Fallback Content: You can add any fallback content, message or link, for browsers that don’t support the video tag.
Autoplay, Loop, and Muted Attributes:
More attributes to make your videos do more:
autoplay: The video plays automatically when it’s loaded.loop: The video autoplays and loops back to the beginning when done.muted: The video autoplays muted.
<video controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
</video>
Multiple Video Sources for Browser Compatibility:
Because various browsers can support different video file formats, it is considered a good practice to provide them with multiple sources.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
Workshop Activity
Build a page with embedded video using the video element. Include controls and test the autoplay and loop attributes. Use video files in various formats to render with maximum cross-browser compatibility.
5.4 Embedding Audio (audio Element)
The audio element of HTML5 allows an author to embed audio files, such as music, audio clips or voice recordings directly into an element on a web page.
Basic Structure of the audio element:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls: Offers controls for playing and pausing, volume, etc.source: Specifies the file path and type of the audio file
Autoplay, Loop, and Muted Attributes:
Like video, you can also use attributes to upgrade audio play:
autoplay: utomatically begins the audio.loop: Loops the audio file ad infinitum.muted: Begins the audio muted.
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Supporting Multiple Audio Formats:
To ensure that your audio plays in as many browsers as possible, it’s always best to include multiple audio formats (such as MP3 and Ogg).
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
Activity:
Create an HTML page where you employ the use of the <audio> element to add an audio file. Experiment with autoplay, loop, and muted attributes. Include different audio formats for maximum cross-browser compatibility.
5.5 Responsive Media with picture and srcset
As web browsing continues to go mobile, media responsiveness gets important. You want the images and videos to look right on all devices, ranging from large desktop monitors to very small smartphones. The picture element, combined with the srcset attribute, assists making images responsive.
The picture Element:
The <picture> element allows you to give different pictures for different screen sizes or screen resolutions.
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-small.jpg" media="(max-width: 799px)">
<img src="image.jpg" alt="A responsive image">
</picture>
<source>: Indicates what to render as the image based on the media query.media: Defines how and when to serve the image (e.g. screen width).- Fallback
<img>: The <img> element is a fallback in case the browser does not support <picture>.
Using srcset for Responsive Images:
We can use the srcset attribute inside the <img> tag to give more than one size of an image for different screen resolutions or sizes.
<img src="image-small.jpg"
srcset="image-large.jpg 1024w, image-medium.jpg 640w, image-small.jpg 320w"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, 1024px"
alt="A responsive image">
srcset: Gives more than one images for more than one screen resolutions or widths.sizes: Sets the width of the image based on the size of the viewport.
This technique will result in high resolution images being displayed for high resolution devices and high-resolution screens while low-resolution images are provided to low-resolution devices and low-resolution screens.
Responsive Videos:
It’s possible to make a video responsive by using a responsive container around the
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height:
0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
Activity:
Create a web page with responsive images, using both the element and srcset. Test your page by resizing your browser window to see how the images adapt. Try making a responsive video container too.
Summary
In this chapter, you learned how to work with media in HTML. From simple images and video insertion to responsive media, looking great on any device, it’s just the skills that will help you create richer and more engaging web pages. Mastering these skills will make your website look beautiful and user-friendly.
Next up, we’re going to learn about Lists and how to order the items on websites. So, stay tuned!