Let's get started with a Multimedia Web Page!

  1. Login into your Code.Org account.
  2. Click on your name.
  3. Choose: My Projects
  4. Click on your My First Web Site project.
  5. Click on the Add HTML button.
  6. Right click on: new-3.html
  7. Choose: Rename
  8. Name this file: multimedia.html
  9. Delete all the lines in this file.
  10. Copy the Multimedia Page Template (HTML) code (below).
  11. Paste that code into your multimedia.html file.
  12. Change your page title, your Author name, and your page heading to something appropriate
  13. Change: your-email-address to your email address
  14. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
  15. Change: <body>
    to: <body class="mmbody">
  16. Change: <p>
    to: <p class="mmp">
  17. Copy the Multimedia Page Styles (CSS) code (below)
  18. Paste that code into your style.css file.
  19. Change some styles.
  20. Click: Refresh and Save

Multimedia Page Template (HTML)

<!doctype html>
 <html>
   <head>
     <title>page title goes here</title>
     <!-- put your name in this comment line -->
     <link href="style.css" rel="stylesheet"/> 
   </head>
   <body>
      <nav>
      <a href="index.html">Home</a> |
      <a href="table.html">Table</a> |
      <a href="form.html">Form</a> |
      <a href="multimedia.html" class="selected">Multimedia</a> |
      <a href="javascript.html">JavaScript</a> |
      <a href="temperature.html">Temperature</a> |
      <a href="js_styles.html">JS Styles</a>
    </nav>
     <h2>page heading goes here</h2>
     <audio controls>
       <source src="ClosingCredits.mp3" type="audio/mpeg">
       <!-- Display a message if the audio won't play -->
       Sorry, your browser does not support the HTML5 audio element.
     </audio><br>
     
     <video width="400" controls>
       <source src="mov_bbb.mp4" type="video/mp4">
       <source src="mov_bbb.ogg" type="video/ogg">
       <!-- Display a message if the audio won't play -->
       Sorry, your browser does not support the HTML5 video element.
     </video><br/>
     
     <p>Use an iframe to display a youTube video.</p>
     <iframe width="560" height="315" 
     src="https://www.youtube.com/embed/T6viki1x97Y"
     allow="autoplay; encrypted-media" 
     allowfullscreen></iframe>
     
     <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
   </body>
 </html>

Multimedia Page Styles (CSS)

.mmbody {
  background-color: put-a-background-color-here;
  color: put-a-color-here;
  font-family: "Times-Roman", Helvetica, serif;
  padding: 5% 20% auto;
}
.mmp {
  color: #00F; /* blue */
}

Example