New on HTMLGoodies: Test Your HTML

Wednesday Jul 21st 2010 by Scott Clark
Share:

We've added a new feature to HTMLGoodies for web developers. Whenever we publish a new tutorial, developers will be able to test the HTML out directly from the tutorial page! Try it out!

We've added a new feature to HTMLGoodies that enables you, the reader, to actually test your HTML live on our site. Where applicable, we'll add a "test the code" form on a tutorial page. If you'd like to test out the HTML, CSS or JavaScript that is being discussed, simply copy and paste it into the form, and press the "view" button. A new window or tab (depending on how you have your browser configured) will open, showing the results of the code you just entered.

How Does It Work?

This is what the Test Your HTML box will look like, except that we have already entered some code, in this case, a bit of JavaScript that writes out your IP address when the window is opened, and a couple lines of CSS that make use of the Google Font API.

And here's how it will normally appear on the page:

Test Out Your Code


Can I See the Code That Does the Work?

The JavaScript behind this little tool is fairly simple. It just takes the text that you enter into the form field, and writes it to the new document that is opened. Your web browser does the rest. Here's the actual JavaScript function:
function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}
Note that since your web browser actually interprets the HTML code you have entered, the way it will behave will depend on the features that are supported by your browser. Have fun!
Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved