plunger

Tech Novice Tools

Web programming is a blast!

X-Ray Vision: Seeing the Underlying HTML5 Structure
of a Simple Web PageI can see it!

If we want to see the structure of a web page within a web page (a bit of irony there) we need to use a trick to keep the browser from 'seeing' the code elements, This is done with the little-known 'xmp' tag.

Here is what the code above looks like after it's been rendered by the browser

Tag, You're it!

Sample HTML5 Code:

<!doctype html> <!-- Name: KLP Date: 8/21/15 File: bareBonesApp.html Workspace: F:\tnt-8-20-15 Purpose: Show the underlying structure of many of the pages in this site --> <html> <head> <title>Tech Novice Tools | Bare Bones HTML5</title> <link href="styles/basicStyles.css" rel="stylesheet" type="text/css"> <link href="styles/twoColumnDesignStyles.css" rel="stylesheet" type="text/css" media="screen"> <meta charset="utf-8"> <style> /*special page styles here*/ </style> </head> <body> <div id="stripe"> </div> <header> <h1><a href="index.php">Tech Novice Tools</a></h1> <h3>Web programming is a blast!</h3> </header> <div id="mainContent"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="#" title="Coming Soon!">Helpful Links</a></li> </ul> </nav> <aside id="sidebar"> <h3>What is HTML5?</h3> <p> Light explanatory banter here</p> </aside><!--end sidebar aside --> <section id="mainPanel"> <h3>X-Ray Vision: Seeing the underlying structure of a simple web page</h3> <p> Possibly more detail here </p> <article id="articleId"> </article> </section><!-- end mainPanel section --> </div><!-- end mainContent--> <footer> <p> <img src="images/HTML5Shield.png" alt="Validated HTML5!" width="64" height="64" id="html5Shield"> <img src="images/vcss-blue.gif" alt="CSS Validation" width="88" height="31" id="CSSShield"> </p> <p id="info"> TNT is an educational site serving as a 'sandbox' where teachers and students can field test programming designs in HTML5, CSS, JavaScript, PHP and mySQL. A bit of Java may be thrown in as well. Discover <a href="http://techtoolsgurus.com/" title="Visit the techtoolsgurus blogging page!">more</a> at our affiliated blogging site. All rights reserved. </p> </footer> </body> </html>