Copy the Multimedia Page Template (HTML) code (below)
Paste that code into your multimedia.html file
Change your page title, your Author name, and your page heading to something appropriate
Change: <body>
to: <body class="mmbody">
Change: <p>
to: <p class="mmp">
Click: Save
Name the file: multimedia.html
Change the Save as type:
to: Hyper Text Markup Language file (*.html)
Copy the Multimedia Page Styles (CSS) code (below)
Paste that code into your styles.css file
Change the colors and fonts, etc.
In your index.html file
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>
Save your changes
Click: Run
Choose: Launch in IE
or Launch in Chrome
or Launch in Firefox
View your web page
Make any changes
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>