Home / HTML / How To Make an Online TryIt Reader for HTML, CSS, JavaScript, Like W3schools

How To Make an Online TryIt Reader for HTML, CSS, JavaScript, Like W3schools

In this website I have started  to teach people html, so I write some post by explaining different tags and some other things but at the same time it is very necessary for you me to make a html online editor there. So that I decided to do it, for this purpose I have searched many places to find out the best html reader, but I could not find it. Honestly I received some editors but did not work well as creating issues like coloring, no proper alignments and not sporting all tags even some necessary tags were being missed.

Then I decided to try it myself with the help of codes what I had got from different places. Finally I got successes to create a very simple even it supports all tags and we can you it without internet connection. Moreover it sports html, JavaScript, css at the same time that is I decided to distribute with you.

Under are some simple steps to used this try it editor for you self;

  1. Copy this all code and paste in your Notepad
  2. Save by giving name like “myeditor.html”
  3. Open your save file with browser

Online Editor Script:

<!DOCTYPE HTML>
<html>
    <head>
       <style> textarea, iframe
	   {
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
	 </head>
	 <body><table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
	 <table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
	 <tr>
<td width="50%" scope="col">  </td> 
<td width="50%" scope="col" align="left"> 
   <center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your Code here!</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!</p>
</body> 
</html>
</textarea>
</form>
</td>

<td><b><center>Output</b></center>
<iframe name="targetCode"  id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: 
iframe.contentDocument;

iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>

If you have any problem related to this code or you want any of more improvment, just put in comment section thanks.

Check Also

What is iframe? Dicscuss its attributes with the help of example

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not …

<