Post
Ask Question

Create a Playground Using HTML 5

Introduction

 
This is a simple application for beginners that shows how to create a playground using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop playground applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create playground applications using HTML 5 and CSS tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Demo".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Goodies.aspx".
new.gif
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Play.html".
html.gif
 
Step 5: Now in this step we add a CSS file that sets all properties of a canvas body. Through CSS we set color, size and font properties of a canvas body.
 
Code
  1. body    
  2. {    
  3.     background: #333;    
  4.     color:Lime;    
  5.     font: 300 100.1% "Helvetica Neue";    
  6. }    
  7. #holder    
  8. {    
  9.     height: 480px;    
  10.     left: 50%;    
  11.     margin: -240px 0 0 -320px;    
  12.     position:relative;    
  13.     top: 50%;    
  14.     width: 640px;    
  15. }    
  16. #copy    
  17. {    
  18.     bottom: 0;    
  19.     font: 300 .7em "Helvetica Neue";    
  20.     position:relative;    
  21.     right: 1em;    
  22.     text-align: right;    
  23. }    
  24. #copy a    
  25. {    
  26.     color:Green;    
  27. }   
Step 6: Now in this step we apply the style of the playground.
 
Code
  1. <style  type="text/css" media="screen">  
  2.   
  3.    body  
  4.    {  
  5.    margin: 0;  
  6.    padding: 0;  
  7.    text-align: center;  
  8.      }  
  9.   h1 {  
  10.    font-weight: 400;  
  11.     height: 10%;  
  12.     }  
  13.  #canvas  
  14.    {  
  15.    height: 732px;  
  16.    margin:20 auto;  
  17.    text-align:center;  
  18.    width: 1015px;  
  19.    background-color:Green;  
  20.        }  
  21.  #code  
  22.   
  23.      {  
  24.    font-family:  "Lucida Console", monospace;  
  25.    height: 4em;  
  26.    margin: 10px;  
  27.    padding: 0;  
  28.    width: 90%;  
  29.        }  
  30.  #run  
  31.   
  32.     {  
  33.    font-size: 2em;  
  34.        }  
  35. </style> 
Step 7: Add a JavaScript file to the application. The T1.js file provides the functionality of dynamically move a playground. Set a D1.css that sets the color, size and font properties of a playground body.
 
Code 
  1. <link rel="stylesheet" href="D1.css" media="screen"/>  
  2. <script type="text/javascript" src="Scripts/T1.js"></script> 
body.............gif
 
Step 8: Now in this step we define an onclick function that is used when the circle is clicked to perform an action.
 
Code
  1. (btn.onclick = function ()  
  2.     {                     
  3.       ctx.clear();  
  4.       ctx.rect(0, 0, 640, 480, 10).attr({ fill: "#66ff99", stroke: "none" });  
  5.    try  
  6.    {  
  7.      (new Function("ctx", "window", "document", cd.value)).call(ctx, ctx);  
  8.         }  
  9.    catch (e)  
  10.    {  
  11.   alert(e.message || e);                   
  12.        } 
Step 9: The complete code of the application is given below.
 
Code
  1. <html>  
  2.   
  3.   <head>  
  4.   <title>Tom application</title>  
  5.   
  6.   <link rel="stylesheet" href="D1.css" type="text/css" media="screen"/>  
  7.    <script type="text/javascript" src="Scripts/T1.js"></script>  
  8.    <style  type="text/css" media="screen">  
  9.   
  10.     body  
  11.    {  
  12.    margin: 0;  
  13.    padding: 0;  
  14.    text-align: center;  
  15.      }  
  16.    h1  
  17.   {  
  18.    font-weight: 400;  
  19.     height: 10%;  
  20.     }  
  21.  #canvas  
  22.    {  
  23.    height: 732px;  
  24.    margin:20 auto;  
  25.    text-align:center;  
  26.    width: 1015px;  
  27.    background-color:Green;  
  28.        }  
  29.  #code  
  30.   
  31.      {  
  32.    font-family:  "Lucida Console", monospace;  
  33.    height: 4em;  
  34.    margin: 10px;  
  35.    padding: 0;  
  36.    width: 90%;  
  37.        }  
  38.  #run  
  39.   
  40.     {  
  41.    font-size: 2em;  
  42.        }  
  43. </style>  
  44.   
  45. window.onload = function ()  
  46. {  
  47.   
  48.   var ctx = Raphael("canvas", 640, 480),  
  49.   
  50.   btn = document.getElementById("run"),  
  51.   
  52.   cd = document.getElementById("code");  
  53.   
  54.   (btn.onclick = function ()  
  55.     {                     
  56.     ctx.clear();  
  57.     ctx.rect(0, 0, 640, 480, 10).attr({ fill: "#66ff99", stroke: "none" });  
  58.    try  
  59.    {  
  60.      (new Function("ctx", "window", "document", cd.value)).call(ctx, ctx);  
  61.         }  
  62.    catch (e)  
  63.    {  
  64.   alert(e.message || e);                   
  65.   }  
  66.  </script>  
  67.  </head>  
  68.  <body>  
  69. <h1>Developed Playground Using HTML5</h1>  
  70. <div id="canvas" style="background-color: #8080FF"></div>  
  71. </body>  
  72. </html> 
Step 10: Press Ctrl + F5 to run the application in a browser.
 
Output
 
p.gif
 
r.gif
q.gif
 
Resources
 
Here are some useful resources :


Similar Articles