HTML Multimedia

When you visit a website, nobody wants to read just endless walls of text. We love seeing pictures, listening to music, and watching videos! These elements are called Multimedia.

In HTML, adding multimedia is much easier than you might think. Let’s break down how you can bring your web pages to life using simple HTML tags.

1. The <img> Tag

Images make your website colorful and engaging. To add an image in HTML, we use the <img> tag.

This tag is special because it is a self-closing tag. This means you don't need a closing </img> tag. You just put all the information right inside the first set of brackets.

Important Attributes (The Rules of the Tag):

• src (Source): This tells the browser exactly where to find your picture. It can be a link from the internet or a file saved on your computer.
• alt (Alternative Text): This is very important! If your image fails to load, this text will show up instead. It also helps visually impaired people understand what the image is about using screen readers.
• width and height: This sets how big or small the picture should appear on your screen.

Code Example:

<img src="cute-dog.jpg" alt="A cute golden retriever puppy" width="400" height="300">

2. The <audio> Tag

Want to add a podcast, background music, or sound effects? You can do this using the <audio> tag.

Important Attributes:

• controls: This is the most important attribute for audio. It tells the browser to show the play, pause, and volume buttons so the user can control the sound.
• autoplay: If you add this word, the music will start playing the second the website opens (though many modern browsers block this because it can annoy users!).
• loop: This makes the audio start over again automatically when it finishes.

Code Example:

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

Why two <source> tags? Different web browsers (like Chrome, Safari, or Firefox) prefer different audio file types. By giving them two options (like .mp3 and .ogg), you make sure the sound works for everyone.

3. The <video> Tag

Adding a video is very similar to adding audio. The <video> tag makes embedding local video files a breeze.

Important Attributes:

• controls: Just like with audio, this adds the play, pause, and full-screen buttons.
• poster: This lets you choose a picture to show before the user clicks play (like a YouTube thumbnail).
• width and height: Sets the size of the video player on your webpage.

Code Example:

<video width="500" height="300" controls poster="thumbnail-image.jpg">
  <source src="my-vacation.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

4. <iframe> Tag

Uploading large video files directly to your website can make it run very slowly. A better way is to upload your video to a site like YouTube or Vimeo, and then embed it on your website.

To do this, we use the <iframe> tag. It basically creates a little window on your webpage that looks into another website.

How to do it with YouTube:

1. Go to a YouTube video.
2. Click the "Share" button.
3. Click "Embed."
4. Copy the HTML code they give you and paste it into your website!

Code Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen></iframe>