dcsimg

New on HTMLGoodies: Test Your HTML

By Scott Clark

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


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!

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date