Neceros/ref.html

## ref.html
<!DOCTYPE HTML>
<!-- Tells the browser to render the page using the HTML5 specification -->

<!--
1. HyperText Markup Language : Uses tags to tell the browser how to layout the web page
2. Uniform Resource Locator :
	a. http:// is used if data is transfered using the HyperText Transfer Protocol (Common standard of communication between web servers)
	b. The domain is the unique name for the server / servers hosting the data
	c. The URL ends with the path to the data to be served
	d. http://newthinktank.com/html5.html
3. You can validate your HTML here http://validator.w3.org/check
-->

<!-- Defines the documents primary language as English -->
<html lang="en">

	<!-- Contains data that describes the document -->
	<head>

	<!-- Defines the documents encoding character set (Multi-lingual Universal Transformation Format) -->
	<meta charset="UTF-8">

	<!-- Redriects the browser to another page after 3 seconds
	<meta http-equiv="refresh" content= "3; url='redirect.html'"/> -->

	<!-- Description for your page. Shouldn't be longer then 200 characters -->
	<meta name="description"
	content="Learn everything you want to know about HTML5 in this video tutorial. Tags, content sections, embedding media, forms, canvas and more will be covered."/>

	<!-- Keywords are used to define your content for search engines. Shouldn't be longer then 1,000 characters -->
	<meta name="keywords"
	content="html5 canvas,html5 tutorial,html5 tutorial, html5 doctype, html5 tags,html5 video,learn html5"/>

	<!-- Defines how search engines should index your content.
	index / noindex : indicates if search engines should index the page
	follow / nofollow : indicates if hyperlinks should be followed and indexed
	archive / noarchive : indicates whether the page should be archived
	-->
	<meta name="robots" content="index,follow"/>

	<!-- Defines the location of an outside JavaScript file -->
	<script src="randomcolorchange.js"> </script>

	<!-- Must come before any other link tags -->
	<!-- Defines a default location for all links on a page for browsers -->
	<base href="http://localhost/html5/"/>

	<!-- Defines the location of a style sheet -->
	<!-- Style sheets have replaced HTML styling features from the past -->
	<link rel="stylesheet" href="styles.css"/>

	<!-- References a icon (16 x 16) to associate with your page. Save it in the root directory for IE -->
	<link rel="icon" href="favicon.ico"/>

	<!-- You must have a title for your page that should be about 16 characters long -->
	<title>HTML5 Tutorial</title>

	</head>

	<!-- Contains data to show in the browser -->
	<!-- onload can call a script or open a dialog box -->
	<!-- onunload is not supported in browsers other then IE -->
	<body onload="alert('Hello')" onunload="alert('Bye Bye')">

	<div id="wrapper">

	<!-- Can jump with in the page by referencing the name -->
	<a name="pageTop">Top of page</a>

	<!-- Links to the bottom by referencing the id -->
	<a href="html5.html#pageBottom">Bottom of page</a>

	<!-- Message that is displayed if the browser has JavaScript disabled -->
	<noscript>Please Enable JavaScript</noscript>

	<!-- Increases the size of the text it contains h1 - h6
	They are used to define the importance of elements in sequence -->
	<h1>Change with a Click</h1>

	<!-- The <p> will add 2 line breaks after the </p> and <br> adds one -->
	<p>
	Two hunters are out in the woods when one of them collapses. He doesn’t seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, “My friend is dead! What can I do?”. The operator says “Calm down. I can help. First, let’s make sure he’s dead.” <br>There is a silence, then a shot is heard. Back on the phone, the guy says “OK, now what?”
	</p>

	<!-- Draws a line -->
	<hr>

	<!-- <blockquote> indents the surrounding text and cite defines where the quote came from -->
	<blockquote cite="http://epicquotes.org/view.php?id=151">
	Never, under any circumstances, take a sleeping pill and a laxative on the same night.
	</blockquote>

	<!-- <q> surrounds text with quotes -->
	<q cite="http://www.brainyquote.com/quotes/quotes/h/hennyyoung128883.html">If at first you don’t succeed ... so much for skydiving.</q><br><br>

	<!-- <pre> preserves white space, but tabs can get messed up -->
	<pre>
                  _          _
                 (.&lt;        &gt;.)
                \(_)________( \
                 (___________)\\
                    (     )     \
                     |   |
                     |   |
                     |   |
                    _|   |_
                   (_______)
	</pre>

	<!-- Use pre and code to surround code -->
	<!-- var is used to emphasive important variables -->
	<pre>
	<code>
	function init(){
		var <var>h1tags</var> = document.getElementsByTagName("h1");
		<var>h1tags[0]</var>.onclick = changeColor;
	}
	</code>
	</pre>

	<!-- Adding images : define width, height and alt -->
	<img id="danceImg" src="http://www.gifbin.com/bin/102009/1255606809_acrobatic_dance_fail.gif" width="237" height="178" alt="Dance Fail"><br>

	<!-- 4 ways to emphasize text without a line break -->
	<b>Bold : Bold Font</b><br>
	<strong>Strong : Bold Font</strong><br>
	<em>Emphasis : Italic Font</em><br>
	<i>Italic : Italic Font</i><br>

	<!-- 3 ways to format text for special purposes -->
	<small>Small : Short Comment</small><br>
	<ins>Insert : Added to Document</ins><br>
	<del>Delete : Strike</del><br>
	<samp>Sample Programming Output</samp><br><br>

	<!-- Advisory tags -->
	<!-- dfn adds emphasis to a word without title and a popup with title -->
	<!-- kbd is used to emphasis input expected from a user -->
	This is an abbreviation <abbr title="abbreviation">abbrv.</abbr><br>
	<dfn>Definition: </dfn>the formal statement of the meaning or significance of a word<br>
	<dfn title="the formal statement of the meaning or significance of a word">Definition</dfn><br>
	<kbd>Enter something here</kbd>

	<!-- Character Entities : http://dev.w3.org/html5/html-author/charref -->
	&cent;
	&pound;
	&yen;
	&copy;
	&reg;
	&deg;
	&frac14;
	&frac12;
	&frac34;
	&sup2;<br>

	<!-- Superscript / Subscript -->
	4<sup>2</sup><br>

	CO<sub>2</sub><br>

	<!-- You can define the direction of text with rtl or ltr -->
	<bdo dir="rtl">أين هو مطعم</bdo><br>

	<!-- You can provide ruby annotation for pronunciation -->
	<ruby>飯店<rt>hanten</rt></ruby><br>

	<!-- HYPERLINKS -->
	<!-- Contains the referenced link with an optional title -->
	<!-- A hyperlink has 3 interactive states hover, active, visited -->
	<a href="http://youtube.com/" title="YouTube">YouTube</a>

	<!-- You can link to parts of the same web page -->
	<a href="html5.html#pageTop">Top of Page</a>
	<a id="pageBottom">Bottom of page</a><br>

	<!-- You can open the mail software to send a message -->
	<a href="mailto:derekbanas@verizon.net">Send an Email</a>

	<!-- You can also dynamically call for a JavaScript function to execute -->
	<a href="javascript:toggleImg()">Toggle Image</a><br>

	<!-- You can define hot spot links in images with image maps.
	Import your image into Gimp and Filters → Web → ImageMap -->
	<img src="http://localhost/html5/imagemap.png" alt="imagemap example" width="600" height="125" usemap="#map" />

	<map name="map">
	<area shape="circle" coords="57,62,39" alt="Yahoo" title="Go to Yahoo" href="http://yahoo.com" />
	<area shape="poly" coords="192,20,166,45,232,105,301,42,272,20,192,19,195,20" alt="Diamonds" title="Go to Diamonds" href="http://diamonds.com" />
	<area shape="rect" coords="332,8,595,115" alt="Google" title="Go to Google" href="http://google.com" />
	</map>

	<!-- You can embed numerous external file formats using the object tag -->

	<!-- Embed a PDF -->
	<object data="SmallBusinessPresentation.pdf" type="application/pdf"
		width="750" height="400">
	</object>

	<!-- Embed a HTML file -->
	<object data="html52.html" type="text/html"
		width="750" height="400">
	</object>

	<!-- Embed a WAV file -->
	<object data="http://www.wavsource.com/snds_2014-11-23_3967152387108926/animals/bird.wav" type="audio/x-wav">

		<!-- Used to pass parameters to an embedded object
		attributes consist of a name and value -->
		<param name="autoplay" value="true">
		<param name="controller" value="true">

	</object>

	<!-- Other Formats
	application/msword : MS Doc Files
	application/x-java-applet : Java Applet
	audio/mpeg : MP3s
	image/png : PNGs
	image/jpeg : JPEGs
	image/gif : GIFS
	image/svg+xml : SVG Vector images
	text/plain : Text
	video/mp4 : MP4s
	video/x-msvideo : AVIs
	video/x-msv-wmv : WMVs
	video/quicktime : MOVs
	-->

	<!-- You can embed externale resources in an iframe -->
	<iframe width="560" height="315" src="http://www.youtube.com/embed/Rub-JsjMhWY" allowfullscreen=""></iframe>

	<!-- Interactive files like Flash files can be embedded with embed
	You can define the file type, plugin and set other params -->
	<embed src="http://www.itma.vt.edu/tech/flash.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="300" height="120" loop="false" quality="high">

	<!-- You can embed MP3 and Wav (Not IE) files using audio
	mp3 uses audio/mpeg -->

	<audio controls autoplay loop preload>
		<source src="comingtotake.wav" type="audio/wav">
		Browser doesn't support the audio tag
	</audio>

	<!-- You can embed MP4s with video -->
	<video controls autoplay loop preload>
		<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
	</video>

	<br><br><br><br><br><br>
	</div>
	</body>

</html>
	<!DOCTYPE HTML>
	<!-- Tells the browser to render the page using the HTML5 specification -->

	<!--
	1. HyperText Markup Language : Uses tags to tell the browser how to layout the web page
	2. Uniform Resource Locator :
	a. http:// is used if data is transfered using the HyperText Transfer Protocol (Common standard of communication between web servers)
	b. The domain is the unique name for the server / servers hosting the data
	c. The URL ends with the path to the data to be served
	d. http://newthinktank.com/html5.html
	3. You can validate your HTML here http://validator.w3.org/check
	-->

	<!-- Defines the documents primary language as English -->
	<html lang="en">

	<!-- Contains data that describes the document -->
	<head>

	<!-- Defines the documents encoding character set (Multi-lingual Universal Transformation Format) -->
	<meta charset="UTF-8">

	<!-- Redriects the browser to another page after 3 seconds
	<meta http-equiv="refresh" content= "3; url='redirect.html'"/> -->

	<!-- Description for your page. Shouldn't be longer then 200 characters -->
	<meta name="description"
	content="Learn everything you want to know about HTML5 in this video tutorial. Tags, content sections, embedding media, forms, canvas and more will be covered."/>

	<!-- Keywords are used to define your content for search engines. Shouldn't be longer then 1,000 characters -->
	<meta name="keywords"
	content="html5 canvas,html5 tutorial,html5 tutorial, html5 doctype, html5 tags,html5 video,learn html5"/>

	<!-- Defines how search engines should index your content.
	index / noindex : indicates if search engines should index the page
	follow / nofollow : indicates if hyperlinks should be followed and indexed
	archive / noarchive : indicates whether the page should be archived
	-->
	<meta name="robots" content="index,follow"/>

	<!-- Defines the location of an outside JavaScript file -->
	<script src="randomcolorchange.js"> </script>

	<!-- Must come before any other link tags -->
	<!-- Defines a default location for all links on a page for browsers -->
	<base href="http://localhost/html5/"/>

	<!-- Defines the location of a style sheet -->
	<!-- Style sheets have replaced HTML styling features from the past -->
	<link rel="stylesheet" href="styles.css"/>

	<!-- References a icon (16 x 16) to associate with your page. Save it in the root directory for IE -->
	<link rel="icon" href="favicon.ico"/>

	<!-- You must have a title for your page that should be about 16 characters long -->
	<title>HTML5 Tutorial</title>

	</head>

	<!-- Contains data to show in the browser -->
	<!-- onload can call a script or open a dialog box -->
	<!-- onunload is not supported in browsers other then IE -->
	<body onload="alert('Hello')" onunload="alert('Bye Bye')">

	<div id="wrapper">

	<!-- Can jump with in the page by referencing the name -->
	<a name="pageTop">Top of page</a>

	<!-- Links to the bottom by referencing the id -->
	<a href="html5.html#pageBottom">Bottom of page</a>

	<!-- Message that is displayed if the browser has JavaScript disabled -->
	<noscript>Please Enable JavaScript</noscript>

	<!-- Increases the size of the text it contains h1 - h6
	They are used to define the importance of elements in sequence -->
	<h1>Change with a Click</h1>

	<!-- The <p> will add 2 line breaks after the </p> and <br> adds one -->
	<p>
	Two hunters are out in the woods when one of them collapses. He doesn’t seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, “My friend is dead! What can I do?”. The operator says “Calm down. I can help. First, let’s make sure he’s dead.” <br>There is a silence, then a shot is heard. Back on the phone, the guy says “OK, now what?”
	</p>

	<!-- Draws a line -->
	<hr>

	<!-- <blockquote> indents the surrounding text and cite defines where the quote came from -->
	<blockquote cite="http://epicquotes.org/view.php?id=151">
	Never, under any circumstances, take a sleeping pill and a laxative on the same night.
	</blockquote>

	<!-- <q> surrounds text with quotes -->
	<q cite="http://www.brainyquote.com/quotes/quotes/h/hennyyoung128883.html">If at first you don’t succeed ... so much for skydiving.</q><br><br>

	<!-- <pre> preserves white space, but tabs can get messed up -->
	<pre>
	_ _
	(.< >.)
	\(_)________( \
	(___________)\\
	( ) \
	\| \|
	\| \|
	\| \|
	_\| \|_
	(_______)
	</pre>

	<!-- Use pre and code to surround code -->
	<!-- var is used to emphasive important variables -->
	<pre>
	<code>
	function init(){
	var <var>h1tags</var> = document.getElementsByTagName("h1");
	<var>h1tags[0]</var>.onclick = changeColor;
	}
	</code>
	</pre>

	<!-- Adding images : define width, height and alt -->
	<img id="danceImg" src="http://www.gifbin.com/bin/102009/1255606809_acrobatic_dance_fail.gif" width="237" height="178" alt="Dance Fail"><br>

	<!-- 4 ways to emphasize text without a line break -->
	<b>Bold : Bold Font</b><br>
	<strong>Strong : Bold Font</strong><br>
	<em>Emphasis : Italic Font</em><br>
	<i>Italic : Italic Font</i><br>

	<!-- 3 ways to format text for special purposes -->
	<small>Small : Short Comment</small><br>
	<ins>Insert : Added to Document</ins><br>
	<del>Delete : Strike</del><br>
	<samp>Sample Programming Output</samp><br><br>

	<!-- Advisory tags -->
	<!-- dfn adds emphasis to a word without title and a popup with title -->
	<!-- kbd is used to emphasis input expected from a user -->
	This is an abbreviation <abbr title="abbreviation">abbrv.</abbr><br>
	<dfn>Definition: </dfn>the formal statement of the meaning or significance of a word<br>
	<dfn title="the formal statement of the meaning or significance of a word">Definition</dfn><br>
	<kbd>Enter something here</kbd>

	<!-- Character Entities : http://dev.w3.org/html5/html-author/charref -->
	¢
	£
	¥
	©
	®
	°
	¼
	½
	¾
	²<br>

	<!-- Superscript / Subscript -->
	4<sup>2</sup><br>

	CO<sub>2</sub><br>

	<!-- You can define the direction of text with rtl or ltr -->
	<bdo dir="rtl">أين هو مطعم</bdo><br>

	<!-- You can provide ruby annotation for pronunciation -->
	<ruby>飯店<rt>hanten</rt></ruby><br>

	<!-- HYPERLINKS -->
	<!-- Contains the referenced link with an optional title -->
	<!-- A hyperlink has 3 interactive states hover, active, visited -->
	<a href="http://youtube.com/" title="YouTube">YouTube</a>

	<!-- You can link to parts of the same web page -->
	<a href="html5.html#pageTop">Top of Page</a>
	<a id="pageBottom">Bottom of page</a><br>

	<!-- You can open the mail software to send a message -->
	<a href="mailto:derekbanas@verizon.net">Send an Email</a>

	<!-- You can also dynamically call for a JavaScript function to execute -->
	<a href="javascript:toggleImg()">Toggle Image</a><br>

	<!-- You can define hot spot links in images with image maps.
	Import your image into Gimp and Filters → Web → ImageMap -->
	<img src="http://localhost/html5/imagemap.png" alt="imagemap example" width="600" height="125" usemap="#map" />

	<map name="map">
	<area shape="circle" coords="57,62,39" alt="Yahoo" title="Go to Yahoo" href="http://yahoo.com" />
	<area shape="poly" coords="192,20,166,45,232,105,301,42,272,20,192,19,195,20" alt="Diamonds" title="Go to Diamonds" href="http://diamonds.com" />
	<area shape="rect" coords="332,8,595,115" alt="Google" title="Go to Google" href="http://google.com" />
	</map>

	<!-- You can embed numerous external file formats using the object tag -->

	<!-- Embed a PDF -->
	<object data="SmallBusinessPresentation.pdf" type="application/pdf"
	width="750" height="400">
	</object>

	<!-- Embed a HTML file -->
	<object data="html52.html" type="text/html"
	width="750" height="400">
	</object>

	<!-- Embed a WAV file -->
	<object data="http://www.wavsource.com/snds_2014-11-23_3967152387108926/animals/bird.wav" type="audio/x-wav">

	<!-- Used to pass parameters to an embedded object
	attributes consist of a name and value -->
	<param name="autoplay" value="true">
	<param name="controller" value="true">

	</object>

	<!-- Other Formats
	application/msword : MS Doc Files
	application/x-java-applet : Java Applet
	audio/mpeg : MP3s
	image/png : PNGs
	image/jpeg : JPEGs
	image/gif : GIFS
	image/svg+xml : SVG Vector images
	text/plain : Text
	video/mp4 : MP4s
	video/x-msvideo : AVIs
	video/x-msv-wmv : WMVs
	video/quicktime : MOVs
	-->

	<!-- You can embed externale resources in an iframe -->
	<iframe width="560" height="315" src="http://www.youtube.com/embed/Rub-JsjMhWY" allowfullscreen=""></iframe>

	<!-- Interactive files like Flash files can be embedded with embed
	You can define the file type, plugin and set other params -->
	<embed src="http://www.itma.vt.edu/tech/flash.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="300" height="120" loop="false" quality="high">

	<!-- You can embed MP3 and Wav (Not IE) files using audio
	mp3 uses audio/mpeg -->

	<audio controls autoplay loop preload>
	<source src="comingtotake.wav" type="audio/wav">
	Browser doesn't support the audio tag
	</audio>

	<!-- You can embed MP4s with video -->
	<video controls autoplay loop preload>
	<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
	</video>

	<br><br><br><br><br><br>
	</div>
	</body>

	</html>