Adding images to a web page greatly increases user experience and the extent to which a user interface (UI) is considered appealing.

Audios are great ways to help a reader hear a site's content through a voice and listen to other complex written messages.

Videos help retain the attention of those who visit your site and increase engagement.

As you advance in software engineering, you will be required to add these multimedia files to web pages, and you must understand how to add them. In this article, I will guide you through a step-by-step guide on using this attractive ingredient while building your site.

Prerequisites

This article is beginner-friendly. Still, you need to have specific knowledge before going on with it:

• A good understanding of the web and how it works

• Basic knowledge of HTML and CSS

Adding Images to a Website

There are two ways of adding images to a web page. It can be done in the HTML file or through the CSS file. We will look at these two methods.

1. In the HTML File

<img src="images/image-product-mobile.jpg" alt="perfume-image">

The "img" tag is used in the code above to add an image to an HTML file.

The "src" is used to indicate the source of an image.

The "alt" contains an alternate text for an image. It is best practice for this text to describe the picture, as this will help make SEO easier on the page.

The image in the code above is inside the "images" folder. We use the "/" to access an image inside a folder. If the images' folder is inside another folder, then a "." is placed before the folder. Each "." before the folder's name indicates the number of folders to pass before locating the image.

NOTE: The above steps only display the image in the browser. You need to apply CSS styles to achieve your desired look.

1. Through the CSS File

 <div class="image-container"> </div>

Here we have a "div" tag with an "image-container" class, a container tag used to wrap/hold other pages' contents.

We will be placing the image in this div using CSS.

.image-container{
    width: 400px;
    height: 400px;
    background-image: url(images/image-product-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

We target the div container using the class name in the CSS code. We specify a width and a height for it.

The image is added to the div as a background image, and the source is specified using URL().

The image is now visible on the site and takes the width and height of the div, but its position inside the div could be more desired.

To achieve a more desirable look, set the background-size to cover and add a no-repeat to the div. Now the image is positioned correctly in the div.

Embedding Audio on a Website

<audio controls>
   <source src="videosaudio/audio.mp3" type="audio/mpeg">
</audio>

Audios are added with the "audio" tag (remember to add a closing tag). Inside the audio tag is the source tag (a self-closing tag). The source tag has two attributes. The src and the types attribute.

The "src," just as it is used in the image code, is used to indicate the source file of the audio (the logic works the same way as in the image). The type attribute tells the browser what file has been added to the web page.

NOTE: It is essential to add the "controls" keyword to the audio tag; this adds a control button to the audio. Users can decide when to play or pause the audio when they visit.

Adding Video to a Website

 <video controls>
    <source src="videosaudio/videoclip.mp4" 
        type="video/mp4">
 </video>

The code above demonstrates how to use the video tag to add a local video clip to a web page (the same process used with the audio file is used here). Make sure to change the "src" link with the appropriate connection to the location where the video is saved when connecting from a video from an external source (a video dedicated elsewhere on the internet).

Note: Using Videos from an external source is not considered a best practice.

Adding a Background Video

<div class="hero">
<video class="background-video" autoplay muted loop>
  <source src="videosaudio/videoclip.mp4" type="video/mp4">
</video>
</div>

This is mainly used in the hero section of a page but can be used on any other page part. This article will cover how to position a video as the background of a hero section.

We start by adding a "div" tag with a class of "hero." This will contain the video. The "video" tag is inside the div, followed by a "source" tag.

Adding a background video in HTML follows a similar process as those we have covered, but it has a slide twist. In the code, we said "autoplay, muted, and loop" these keywords have different functions in the code.

Autoplay enables the background video to play the moment the site is visited.

Muted takes away sounds in the video. Most browsers do not support a background video that does not have the "muted" keyword in it.

Loop allows the video to play repeatedly. Otherwise, it would play once and stop.

These keywords enable the video to behave as an actual background video. Now we have a video acting as desired, but it is not positioned as a background in the hero section. To achieve this, we need to make use of CSS. Let us dive into that.

.hero {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

We need to make the video occupy the entire width of the hero section and sit as a background.

To do this, we target the div container with a class of hero and specify the width and height property to make it occupy the viewpoint height of the screen.

Nest, we make it flexible and center the page's content, then we give it a position of relative and hide and overflow.

Now we target the background video and give it a position of absolute (since it is a child element, it will be positioned relative to its mother element); we add other styles to make it responsive and fit appropriately in the div container, then lastly, we give it a damaging z-index property, this will make it go below and allow it to sit on it.

With that, the video becomes a background; if we add some text, we can see the reader sitting on it.

Conclusion

Adding multimedia content to a website can significantly improve user experience and engagement. Images, audio, and videos are essential components that can help convey messages effectively and hold users' attention.

Understanding how to embed multimedia using HTML and CSS is an essential skill for web developers. This article has provided a beginner-friendly step-by-step guide on adding images, audio, and video to your website. Whether in HTML or CSS, you can create a visually appealing and interactive website that will keep your audience engaged.

Cheers to learning🥂

If you find this helpful, you can connect with me on Twitter @helenefebe to get more of my articles.