Ex No: 3 MEDIA ELEMENTS
Aim: To create a HTML page to display Media ELements.
Algorithm
Step1: Create a folder “Ex3” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Create a folder "media" and place the audio and video files in it.
Step4: Add <audio> and <video> tags to show the media elements in the webpage.
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Media Elements</title>  
  <style>
    header {
      text-align:center;
      height: 100px;
      background-color: BurlyWood ;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
    }
    footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: BurlyWood ;
      padding: 10px;
      border-radius: 10px;
    }
    article{
      width: auto;
      padding: 10px;
      margin:5px;
      overflow-x: auto;
    }
  </style>
  </head>
  <body>    
    <header>
      <h1>Audio/Video Playback</h1>
    </header>  
    <hr>
    <article>
      <h3>Audio Playback</h3>
      <audio controls>
        <source src="media/Born_For_This.mp3" type="audio/mp3">
      </audio>
    </article>
    <article>
      <h3>Video Playback</h3>
      <video width="400px" height="auto" controls>
        <source src="media/bike.mp4" type="video/mp4">
      </video>
    </article>
    <footer>
      Developed by K Anbarasan
    </footer>
  </body>
</html>
Result: Thus a website is created to display media elements.