Let's get started with a Multimedia Web Page!

  1. Download folder: (Right-cick -> Save) these ClosingCredits.mp3, ClosingCredits.ogg, mov_bbb.mp4, and mov_bbb.ogg files to your public_html/includes/ folder
  2. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Copy the Multimedia Page Template (HTML) code (below)
    5. Paste that code into your multimedia.html file
    6. Change your page title, your Author name, and your page heading to something appropriate
    7. Change: <body>
      to: <body class="mmbody">
    8. Change: <p>
      to: <p class="mmp">
    9. Click: Save
    10. Name the file: multimedia.html
    11. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    12. Copy the Multimedia Page Styles (CSS) code (below)
    13. Paste that code into your styles.css file
    14. Change the colors and fonts, etc.
    15. In your index.html file
    16. Add a link to this page. Change: <li>Create a Multimedia Page</li>
      to: <li><a href="multimedia.html">Create a Multimedia Page</a></li>
    17. Save your changes
    18. Click: Run
    19. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    20. View your web page
    21. Make any changes
    22. Save your changes

Multimedia Page Template (HTML)

<!doctype html>
 <html>
   <head>
     <title>page title goes here</title>
     <!-- put your name in this comment line -->
     <link href="includes/styles.css" rel="stylesheet"/> 
   </head>
   <body>
     <h2>page heading goes here</h2>
     <audio controls>
       <source src="images/ClosingCredits.mp3" type="audio/mpeg">
       <source src="images/ClosingCredits.ogg" type="audio/ogg">
       <!-- 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="images/mov_bbb.mp4" type="video/mp4">
       <source src="images/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>Use an iframe to display a Twitch video.</p>
     <iframe width="620" height="378" 
     src="https://player.twitch.tv/?autoplay=false&video=v564922404"
     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