GARBAGE - MS 70-480

dabblet.css

/**
 * GARBAGE - MS 70-480
 */
body{
	background: #000;
	min-height: 100%;
	font-family: sans-serif;
	color: #fff;
}
a{
	color: deepskyblue;
	text-decoration: none;
}
img{
	vertical-align: middle;
}
.note{
	background-color: #fff;
	color: #000;
	padding: 10px;
	width: auto;
}
::selection{
	color: #fff;
	background-color: #f00;
}
::-moz-selection{
	color: #fff;
	background-color: #f00;
}

dabblet.html

<h1>MS 70-480: Programming in HTML5 with JS and CSS3</h1>
<p class="note">Note: Stuff on this page may seem random and weird, see comments if you're confused
or curious.</p>
<p class="note">Live version <a href="http://dabblet.com/gist/7109344">here</a></p>

<!--Unknown tags won't get rendered BUT text inside them will-->
<xyz>Hello World!</xyz>
<p>Let's go through some HTML tags</p>
<ul>
	<li>&lt;abbr&gt;eviation: <abbr title="HyperText Markup Language">HTML</abbr></li>
	<!--Address is a HTML tag that, believe it on not, nobody is using properly! 
	I know, what a surprise, the W3C not doing a good job at explaining things?!?!
	Anyways, short version
	DO use address only to show contact info for the writer of an article.
	DON'T use it for contact page, contact info in footer, company contact info, etc.
	 -->
	<li>&lt;address&gt;: This article was written by 
	<address>
		Valentin Radulescu<br/>
		email <a href="mailto:valentin@radulescu.me">valentin@radulescu.me</a><br/>
		twitter <a href="http://www.twitter.com/sunglide/">@SunGlide</a>			
	</address>
	</li>
	<!--no idea why this is here, haven't seen it used since 1999
	So what is it? You define an area of an image to become a link
	so you can have multiple areas within an image linking to different pages.
	That was the idea, anyway.
	-->
	<li>&lt;image&gt; &amp; &lt;area&gt;: (click my crotch!): 
	<img src="https://dl.dropboxusercontent.com/u/42934143/keep/original.jpg"
	height="200" usemap="#crotch-map">
	<map id="crotch-map" name="crotch-map">
		<area shape="circle" alt="" title="" coords="64,137,10" href="http://www.lego.com/" target="_blank" />
	</map>
	</li>
	<li>&lt;article&gt;, &lt;aside&gt;, &lt;audio&gt;: see below</li>
	<!--the b tag, makes stuff bold, semantically speaking-->
	<li>&lt;b&gt;: <b>this looks bold BUT the W3C calls it "a span of text stylistically 
	different from normal text, without a conveying any special importance or 
	relevance"</b>... so yeah, welcome to the web</li>
	<li>&lt;blockquote&gt;
	<blockquote cite="http://en.wikipedia.org/wiki/Quote">
  		<p>Quotation is the repetition of someone else's statement or thoughts. 
  		Quotation marks are punctuation marks used in text to indicate the words 
  		of another speaker or writer. Both of these words are sometimes abbreviated
  		 as "quote(s)".</p>
	</blockquote>
	</li>
	<li></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}