How to Embed Your Scratch Applet in HTML5

Scratch in HTML5 Even though there is a Scratch project website where the Scratch community uploads its projects, there is also an alternative method to embed Scratch within your own website.  Since TeachMeProgramming.com is also teaching HTML5, we are happy to show you how to embed your Scratch applet using HTML5.  Read on to find out more.

 

 

Pre HTML5 versions support the <applet> tag, however, this tag is deprecated in HTML5.  HTML5 encourages the use of the <object> tag instead, which is brand new, that can be used to embed media in your website, such as videos and audio.

You will need 2 files in addition to your Scratch projects in the same directory as your HTML5 file:

  1. ScratchApplet.jar
  2. soundbank.gm

The following code is used to embed a sample applet:

How to embed applet in HTML5

In the code above, the name of the Scratch project is "abc-song.sb" and is assigned to the attribute "value".  The applet's dimensions (height and width) are configurable.

You can view the sample HTML5 by clicking on the image.

Enjoy!



Add this page to your favorite Social Bookmarking websites

Visitors


Visits today:16
Visits yesterday:44
Visits in this month:185
Visits total:6111
Impressions today:239
Impressions total:34959
Bots today:109
Date since:2009-10-18

Countries

Top 7:
United States flag 39%United States (2373)
Unknown flag 16%Unknown (956)
United Kingdom flag 9%United Kingdom (559)
Israel flag 6%Israel (378)
Germany flag 3%Germany (161)
India flag 2%India (134)
France flag 2%France (97)
6117 visits from 106 countries

Welcome, Visitors!