<

Introduction to HTML (Part 2)

Posted on
6,106 Points
107 Views
Last Modified:
Experience Level: Beginner
4:55
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5.

As we learned in our last micro tutorial we have successfully put together a basic HTML5 template for use in a webpage or website. Before we move on to any further advanced topics here are a few of the changes that have been made with HTML5 versus the older version which is XHTML. Here is the resource for looking at what HTML5 has had added to it.

http://www.w3schools.com/tags/

Here is the link for basic examples on using the canvas tag as shown in the video.

http://www.w3schools.com/html/html5_canvas.asp

Video Steps

1. Add the javascript below into the head tag under our meta tags.

This is only for the purposes of showing the canvas in action.

            
<script type="text/javascript">
			window.onload = function(){
				var c = document.getElementById("jbc");
				var ctx = c.getContext("2d");
				ctx.fillStyle = "#FF0000";
				ctx.fillRect(0,0,150,75);
			}
</script>

Open in new window


This tells the browser to make the drawing 2d after searching the document by Id for the
canvas when the window loads. Then to fill in the canvas with red to a certain point.

2. Replace the existing content with an audio tag, video tag and canvas tag.

These tags are shown in the following steps. Any line that begins with "<!--" is an html comment to document code for future reference.

3. Insert an audio tag.

This sets the controls shown, define the source, and sets the error message if we can not support either format.
<!--this is an html comment for documenting your css and html-->
				<!--this is an audio element-->
					<audio controls="controls">
						<!--this will show the mp3 version of an audio-->
						<source src="#.mp3" type="audio/mp3">
						<!--this will show the ogg version of an audio-->
						<source src="#.ogg" type="audio/ogg">
						audio tag not supported
					</audio><BR>

Open in new window

4. Insert a video tag.

This sets the controls shown, defines the source, and sets the error message if we can not support either format.
<video controls="controls" width="640" height="480">
						<!--this will show the ogg version of an video-->
						<source src="#.ogg" type="video/ogg">
						VIdeo tag not supported
						<!--this will show the mp4 version of an video-->
						<source src="#.mp4" type="video/mp4">
</video><BR>

Open in new window

5. Create the canvas element based on the javascript found above.

Set the id to jbc. Set the width and height as well as a small bit of css so you can see where the canvas is on the template. Then close out the canvas tag and load the page.

<canvas id="jbc" width="200" height="100" style="border: 1px solid #000000;"></canvas>

Open in new window

0
Comment
Author:Jason Baker
0 Comments

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month