T his generator (converter) lets you display HTML code in an HTML page. It Passes a string to the function formatHTMLForDisplay and gets a string back with all markup tags modified to allow display in an HTML page. Just select the above link to open the convertor.
W e have tested the code in IE6.0, Firefox1.5, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations* observed.
* The only variations observed were to the "Reset" button (had no adverse effect on the convertor in any way) which is not part of the code but an add-on we put there. This is just to reset the form fields so you can use it again more easily. The button did not function properly in the following platforms.
- Netscape8.0.4 The reset button would not clear the middle part that appears after you "Submit" (Gray center area) where you see how the code would appear on a webpage.
- AOL Explorer1.2 Same as above
- Firefox1.5 Same as above
- Netscape7.02 Same as above and also the text would not wrap inside the form boxes. This is normal on this version of Netscape.
D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. For all intensive purposes, there are "No" reconfigurations (other than changing text box sizes and color of middle - style sheet in <HEAD> section) except for our little "add-ons" if you want to make use of them. These we will show you howto further down the page.
Reconfigurations To Style Sheet <HEAD> Section
<STYLE>
#HTMLDisplaySpan{
background-color:#DDDDDD;
color:black;
border:1px #CCCCCC solid;
border-left:20px #DDDDDD solid;
font-size:8pt;
width:500px;
text-align:left;
}
</STYLE>
J ust experiment with all the color coded areas above until you find the combination that works for you and your site. Where it says "solid", you can change that to dotted and get a completely different effect.
Reconfigurations To Text Boxes <BODY> Section
Past your HTML here:<TEXTAREA id="HTMLTextArea"></TEXTAREA>*
<BR>
<INPUT TYPE=button value="FORMAT" onClick="doFormat()">
<SCRIPT>
function doFormat(){
var theInput = document.getElementById("HTMLTextArea");
var theSpan = document.getElementById("HTMLDisplaySpan");
var theDisplay = document.getElementById("formattedHTMLTextArea");
theSpan.innerHTML = formatHTMLForDisplay(theInput.value);
theDisplay.value = formatHTMLForDisplay(theInput.value);
}
</SCRIPT>
<P/>
<BR>
<DIV ID="HTMLDisplaySpan"></DIV>
<BR>
<TEXTAREA ID="formattedHTMLTextArea" rows = 20 Cols = 40></TEXTAREA>
* Notice that complete line of code from the word "Past" to the closing </TEXTAREA>
There needs to be an "e" added to "Past" and there are no attributes for rows and cols to designate the size of the form. If you like the default small size, then leave it as is. If you want to change the size, then add the attributes as shown below and substitute numbers for the ?.
We have ours set at rows="5" cols="60 "
Paste your HTML here:<TEXTAREA id="HTMLTextArea" rows="?" cols="?"></TEXTAREA>
T hat is about all the reconfigurations that can be made to the "Default" code. Like we stated earlier, we have added a couple of "add-ons" that we will show you howto. The first add-on is the "Reset" Button. Since this code is for all intesive purposes "Not a Form", you need to insert opening (<form>) and closing (</form>) form tags in the <BODY> section of code as shown below.
<form>
Past your HTML here:<TEXTAREA id="HTMLTextArea"></TEXTAREA>
<BR>
<INPUT TYPE=button value="FORMAT" onClick="doFormat()">
<input type="reset" value="Reset">
<SCRIPT>
function doFormat(){
var theInput = document.getElementById("HTMLTextArea");
var theSpan = document.getElementById("HTMLDisplaySpan");
var theDisplay = document.getElementById("formattedHTMLTextArea");
theSpan.innerHTML = formatHTMLForDisplay(theInput.value);
theDisplay.value = formatHTMLForDisplay(theInput.value);
}
</SCRIPT>
<P/>
<BR>
<DIV ID="HTMLDisplaySpan"></DIV>
<BR>
<TEXTAREA ID="formattedHTMLTextArea" rows = 20 Cols = 40></TEXTAREA>
</form>
N ext you need to insert the "Reset" button. See above how and where. Also notice the . All this does is give a single space between the two buttons so they are not directly next to each other. Each is a single space.
T he next little "add-on is what is called "Automatic Form Field Clearing". If you noticed in our example, when you clicked inside the top form, the instructional text vanished. Try the below example to see how it works.
T o add this into the script, (top form only) it is a two part copy and paste code that goes in both the <HEAD> section of the document and <BODY> section of the code. Copy/Cut and paste the below into the <HEAD> section of your document.
O
nce you paste the above into the <HEAD> section of your document, now copy and paste the below directly into the top textarea form of the code.
onFocus="doClear(this)"
In other words, see the below example on how and where to insert the above into the top textarea form.
Paste your HTML here:<TEXTAREA id="HTMLTextArea" onFocus="doClear(this)"></TEXTAREA>
<BR>
<INPUT TYPE=button value="FORMAT" onClick="doFormat()">
<SCRIPT>
Note of Importance ~ In reference to the converting the HTML to be able to display it on web pages. The only "Downside" to this converter is that it "Does Not" add break <br> tags for each line of code where there should be a break. This you need to insert manually.
I
f you would grab the below link, we do have a small "Freeware" program ( 146 kb ) ".....sHTMLc (show HTML code) which is a small tool that lets you convert HTML code snippets to the proper format that allows you to display the actual HTML tags - for tutorials, link instructions or any other reason. You can either code this by hand, which is rather akward, or just copy the HTML to the clipboard, start sHTMLc - click Convert and paste the coded tags back... You can even specify a color. A very simple but yet extremely handy tool for any webmaster.....". This little gem "Does" add the option to select the XHTML version of <br>, namely <br /> tags for each line of code where there should be a break.
[ sHTMLc (Show HTML Code ]
I
f you would like to add this effect (Format HTML To Display Converter) into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]