remove old stuff

master
Michael Reber 3 years ago
parent 74d8503a20
commit 143c066c2b
  1. 16
      html/_Basics/01-skeleton (Basic Javascript Animation).html
  2. 29
      html/_Basics/02-event-demo (Basic Javascript Animation).html
  3. 34
      html/_Basics/03-mouse-events (Basic Javascript Animation).html
  4. 27
      html/_Basics/04-mouse-position (Basic Javascript Animation).html
  5. 30
      html/_Basics/05-touch-events (Basic Javascript Animation).html
  6. 26
      html/_Basics/06-keyboard-events (Basic Javascript Animation).html
  7. 40
      html/_Basics/07-key-codes (Basic Javascript Animation).html
  8. 41
      html/_Basics/08-key-names (Basic Javascript Animation).html
  9. 9
      html/_Basics/A simple HTML document.html
  10. 11
      html/_Basics/Abbreviations and acronyms.html
  11. 11
      html/_Basics/Aligning images.html
  12. 24
      html/_Basics/Apply transformation while rendering text on web pages using SVG.html
  13. 26
      html/_Basics/Checkboxes and radio buttons.html
  14. 22
      html/_Basics/Column groups - The col and colgroup elements.html
  15. 13
      html/_Basics/Computer output tags.html
  16. 11
      html/_Basics/Create hyperlink.html
  17. 13
      html/_Basics/Creating HTML5 color input type.html
  18. 13
      html/_Basics/Creating HTML5 date input type.html
  19. 13
      html/_Basics/Creating HTML5 datetime input type.html
  20. 13
      html/_Basics/Creating HTML5 datetime-local input type.html
  21. 21
      html/_Basics/Creating HTML5 email input type.html
  22. 13
      html/_Basics/Creating HTML5 month input type.html
  23. 22
      html/_Basics/Creating HTML5 number input type.html
  24. 13
      html/_Basics/Creating HTML5 range input type.html
  25. 13
      html/_Basics/Creating HTML5 search input type.html
  26. 13
      html/_Basics/Creating HTML5 tel input type.html
  27. 13
      html/_Basics/Creating HTML5 time input type.html
  28. 22
      html/_Basics/Creating HTML5 url input type.html
  29. 13
      html/_Basics/Creating HTML5 week input type.html
  30. 17
      html/_Basics/Creating a circle using SVG.html
  31. 16
      html/_Basics/Creating a definition list.html
  32. 17
      html/_Basics/Creating a line using SVG.html
  33. 12
      html/_Basics/Creating a mailto link - A link that sends an e-mail.html
  34. 32
      html/_Basics/Creating a nested list - Multi level.html
  35. 20
      html/_Basics/Creating a nested list - Single level.html
  36. 17
      html/_Basics/Creating a rectangle using SVG.html
  37. 16
      html/_Basics/Creating an image-map - An image with clickable regions.html
  38. 15
      html/_Basics/Creating an ordered list.html
  39. 15
      html/_Basics/Creating an unordered list.html
  40. 11
      html/_Basics/Creating buttons.html
  41. 12
      html/_Basics/Creating links to other HTML documents or Web resources.html
  42. 13
      html/_Basics/Creating password input fields.html
  43. 12
      html/_Basics/Creating text input fields.html
  44. 14
      html/_Basics/Defining alternative sources for audio element.html
  45. 10
      html/_Basics/Defining alternative sources for video element.html
  46. 23
      html/_Basics/Drawing a circle onto the canvas.html
  47. 24
      html/_Basics/Drawing a line onto the canvas.html
  48. 23
      html/_Basics/Drawing a rectangle onto the canvas.html
  49. 23
      html/_Basics/Drawing an arc onto the canvas.html
  50. 15
      html/_Basics/Embedding SVG into HTML documents.html
  51. 12
      html/_Basics/Embedding audio in HTML documents.html
  52. 17
      html/_Basics/Embedding canvas into HTML documents.html
  53. 12
      html/_Basics/Embedding the YouTube video in HTML documents.html
  54. 14
      html/_Basics/Embedding video in HTML documents.html
  55. 21
      html/_Basics/Enable multiple selection inside a select box.html
  56. 12
      html/_Basics/File select field.html
  57. 27
      html/_Basics/Filling color inside a circular shape on canvas.html
  58. 27
      html/_Basics/Filling color inside a rectangle shape on canvas.html
  59. 28
      html/_Basics/Filling linear gradient inside canvas shapes.html
  60. 28
      html/_Basics/Filling radial gradient inside canvas shapes.html
  61. 20
      html/_Basics/Grouping of options inside a select box.html
  62. 17
      html/_Basics/Grouping similar form fields.html
  63. 15
      html/_Basics/Headings - h1 to h6.html
  64. 14
      html/_Basics/Insert contact information.html
  65. 11
      html/_Basics/Inserting audio in HTML documents using the embed element.html
  66. 11
      html/_Basics/Inserting audio in HTML documents using the object element.html
  67. 13
      html/_Basics/Inserting comments.html
  68. 11
      html/_Basics/Inserting horizontal lines.html
  69. 14
      html/_Basics/Inserting images into the HTML document.html
  70. 11
      html/_Basics/Inserting paragraphs of text content.html
  71. 11
      html/_Basics/Inserting video in HTML documents using the embed element.html
  72. 10
      html/_Basics/Inserting video in HTML documents using the object element.html
  73. 11
      html/_Basics/Linking the audio files.html
  74. 12
      html/_Basics/Long and short quotations.html
  75. 9
      html/_Basics/Make a hyperlink of an image.html
  76. 35
      html/_Basics/Making a simple table - The most basic form of a table.html
  77. 15
      html/_Basics/Marking deleted and inserted text.html
  78. 9
      html/_Basics/Move outside of an iframe.html
  79. 10
      html/_Basics/Navigate inside page - Jump link.html
  80. 9
      html/_Basics/Open link in a new browser window.html
  81. 11
      html/_Basics/Paragraph and line breaks.html
  82. 13
      html/_Basics/Preformatted text (Preserve line breaks and spaces).html
  83. 22
      html/_Basics/Rendering text on web pages using SVG.html
  84. 15
      html/_Basics/Select box with a pre-selected value.html
  85. 15
      html/_Basics/Select boxes - A drop-down list.html
  86. 20
      html/_Basics/Sets the distance between table cells - The cellspacing attribute.html
  87. 20
      html/_Basics/Sets the padding of table cells - The cellpadding attribute.html
  88. 9
      html/_Basics/Setting text direction of an element.html
  89. 26
      html/_Basics/Setting the cap style for the stroke on canvas.html
  90. 19
      html/_Basics/Setting the dimension of a table.html
  91. 26
      html/_Basics/Setting the stroke color and width on canvas.html
  92. 14
      html/_Basics/Setting width and height of the images.html
  93. 15
      html/_Basics/Specify headings for the content.html
  94. 40
      html/_Basics/Specify the table caption.html
  95. 11
      html/_Basics/Sub and Superscript text.html
  96. 14
      html/_Basics/Submit or reset a form - The use of submit and reset button.html
  97. 50
      html/_Basics/Table cells that span more than one rowcolumn - The rowspancolspan attribute.html
  98. 19
      html/_Basics/Tables with borders - Adding the default table borders.html
  99. 19
      html/_Basics/Text formatting.html
  100. 12
      html/_Basics/Textarea - A multi-line text input field.html
  101. Some files were not shown because too many files have changed in this diff Show More

@ -1,16 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
//Our code here...
};
</script>
</body>
</html>

@ -1,29 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Event Demo</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Open debugging console in web browser and click mouse.</aside>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function (event) {
console.log("mouse down");
}, false);
canvas.addEventListener('mouseup', function (event) {
console.log("mouse up");
}, false);
};
</script>
</body>
</html>

@ -1,34 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mouse Events</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Open debugging console in web browser and move/click mouse.</aside>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas');
function onMouseEvent (event) {
console.log(event.type);
}
canvas.addEventListener('mousedown', onMouseEvent, false);
canvas.addEventListener('mouseup', onMouseEvent, false);
canvas.addEventListener('click', onMouseEvent, false);
canvas.addEventListener('dblclick', onMouseEvent, false);
canvas.addEventListener('mousewheel', onMouseEvent, false);
canvas.addEventListener('mousemove', onMouseEvent, false);
canvas.addEventListener('mouseover', onMouseEvent, false);
canvas.addEventListener('mouseout', onMouseEvent, false);
};
</script>
</body>
</html>

@ -1,27 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mouse Position</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Open debugging console in web browser and click mouse.</aside>
<script src="../include/utils.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
mouse = utils.captureMouse(canvas);
canvas.addEventListener('mousedown', function () {
console.log("x: " + mouse.x + ", y: " + mouse.y);
}, false);
};
</script>
</body>
</html>

@ -1,30 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Touch Events</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Open debugging console in web browser of touch-capable device.</aside>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas');
function onTouchEvent (event) {
console.log(event.type);
}
canvas.addEventListener('touchstart', onTouchEvent, false);
canvas.addEventListener('touchend', onTouchEvent, false);
canvas.addEventListener('touchmove', onTouchEvent, false);
};
</script>
</body>
</html>

@ -1,26 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard Events</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<aside>Open debugging console in web browser and press key.</aside>
<script>
window.onload = function () {
function onKeyboardEvent (event) {
console.log(event.type);
}
window.addEventListener('keydown', onKeyboardEvent, false);
window.addEventListener('keyup', onKeyboardEvent, false);
};
</script>
</body>
</html>

@ -1,40 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Key Codes</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<aside>Open debugging console in web browser and press arrow key.</aside>
<script>
window.onload = function () {
function onKeyboardEvent (event) {
switch (event.keyCode) {
case 38:
console.log("up!");
break;
case 40:
console.log("down!");
break;
case 37:
console.log("left!");
break;
case 39:
console.log("right!");
break;
default:
console.log(event.keyCode);
}
}
window.addEventListener('keydown', onKeyboardEvent, false);
};
</script>
</body>
</html>

@ -1,41 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Key Names</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<aside>Open debugging console in web browser and press arrow key.</aside>
<script src="../../xtras/keycode.js"></script>
<script>
window.onload = function () {
function onKeyboardEvent (event) {
switch (event.keyCode) {
case keycode.UP:
console.log("up!");
break;
case keycode.DOWN:
console.log("down!");
break;
case keycode.LEFT:
console.log("left!");
break;
case keycode.RIGHT:
console.log("right!");
break;
default:
console.log(event.keyCode);
}
}
window.addEventListener('keydown', onKeyboardEvent, false);
};
</script>
</body>
</html>

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Simple HTML document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML abbreviations</title>
</head>
<body>
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> is the publishing language of the World Wide Web.</p>
<p>The <acronym title="Hyper Text Markup Language">HTML</acronym> is the publishing language of the World Wide Web.</p>
<p><strong>Warning:</strong> The &lt;acronym&gt; tag has been removed in HTML5 and shouldn't be used anymore. Use the &lt;abbr&gt; tag instead.</p>
</body>
</html>

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example image alignment</title>
</head>
<body>
<p>This image <img src="../images/smiley.png" alt="Smiley" style="vertical-align: top;"> is aligned vertically top of the text.</p>
<p>This image <img src="../images/smiley.png" alt="Smiley" style="vertical-align: middle;"> is aligned vertically center of the text.</p>
<p>This image <img src="../images/smiley.png" alt="Smiley" style="vertical-align: baseline;"> is aligned to the baseline of the text.</p>
</body>
</html>

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Rotate and Render Text with HTML5 SVG</title>
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>
</body>
</html>

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML checkboxes and radio buttons</title>
</head>
<body>
<form method="post" action="" >
<fieldset>
<legend>Hobbies</legend>
<input type="checkbox" name="hobby" value="sports" id="sport">
<label for="sport">Sports</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">Music</label>
<input type="checkbox" name="hobby" value="reading" id="read">
<label for="read">Reading</label>
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>
</fieldset>
</form>
</body>
</html>

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML table column groups</title>
</head>
<body>
<table border="1" cellpadding="10">
<colgroup>
<col style="background: #bed65a;">
<col style="background: #f8d97f;">
</colgroup>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML computer output tags</title>
</head>
<body>
<p><code>Computer code</code></p>
<p><kbd>Keyboard input</kbd></p>
<p><samp>Sample text</samp></p>
<p><var>Computer variable</var></p>
<p><strong>Note:</strong> These tags are often used to represents a fragment of computer code.</p>
</body>
</html>

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML a tag</title>
</head>
<body>
<p><a href="http://www.tutorialrepublic.com/">Tutorial Republic</a></p>
<p><a href="../images/kites.jpg"><img src="../images/kites-thumb.jpg" alt="Hot Air Ballons"></a></p>
<p><a href="http://www.google.com/">Google Search</a></p>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Color Input Type</title>
</head>
<body>
<form>
<label>
Select Color: <input type="color" name="mycolor">
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Date Input Type</title>
</head>
<body>
<form>
<label>
Select Date: <input type="date" name="mydate">
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Datetime Input Type</title>
</head>
<body>
<form>
<label>
Date & Time: <input type="datetime" name="mydatetime">
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Datetime-local Input Type</title>
</head>
<body>
<form>
<label>
Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
</label>
</form>
</body>
</html>

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Email Input Type</title>
<style type="text/css">
input[type="email"]:valid{
outline: 2px solid green;
}
input[type="email"]:invalid{
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Email Address: <input type="email" name="mycolor" required>
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Month Input Type</title>
</head>
<body>
<form>
<label>
Select Month: <input type="month" name="mymonth">
</label>
</form>
</body>
</html>

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Number Input Type</title>
<style type="text/css">
input[type="number"]:valid{
outline: 2px solid green;
}
input[type="number"]:invalid{
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
<p><strong>Note</strong>: If you try to enter the number out of the range (1-10) or text character it will show error.</p>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Range Input Type</title>
</head>
<body>
<form>
<label>
Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Search Input Type</title>
</head>
<body>
<form>
<label>
Search Website: <input type="search" name="mysearch">
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Tel Input Type</title>
</head>
<body>
<form>
<label>
Telephone Number: <input type="tel" name="mytelephone" required>
</label>
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Time Input Type</title>
</head>
<body>
<form>
<label>
Select Time: <input type="time" name="mytime">
</label>
</form>
</body>
</html>

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 URL Input Type</title>
<style type="text/css">
input[type="url"]:valid{
outline: 2px solid green;
}
input[type="url"]:invalid{
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Website URL: <input type="url" name="mywebsite" required>
</label>
</form>
<p><strong>Note</strong>: Enter URL in the form like http://www.google.com</p>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>HTML5 Week Input Type</title>
</head>
<body>
<form>
<label>
Select Week: <input type="week" name="myweek">
</label>
</form>
</body>
</html>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Create a Circle with HTML5 SVG</title>
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Definition List</title>
</head>
<body>
<h1>HTML Definition List</h1>
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
</body>
</html>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Create a Line with HTML5 SVG</title>
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML email link</title>
</head>
<body>
<p>This is an email link:
<a href="mailto:someone@mail.com?Subject=Test%20Mail">Send Mail</a>
</p>
<p><strong>Note:</strong> Spaces between words should be replaced by %20 to ensure that the browser will display the text correctly.</p>
</body>
</html>

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML nested list</title>
</head>
<body>
<h1>HTML Nested List</h1>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2
<ul>
<li>Item 3.2.1</li>
<li>Item 3.2.2</li>
<li>Item 3.2.3</li>
</ul>
</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML nested list</title>
</head>
<body>
<h1>HTML Nested List</h1>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
</html>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Create a Rectangle with HTML5 SVG</title>
<style type="text/css">
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML image map</title>
</head>
<body>
<h1>Click on a shape to see how it works:</h1>
<img src="../images/shapes.png" alt="Geometrical Shapes" usemap="#shapes">
<map name="shapes">
<area shape="circle" coords="40,40,40" href="../html/circle.html" alt="Circle">
<area shape="poly" coords="148,2,104,80,193,80" href="../html/triangle.html" alt="Triangle">
<area shape="rect" coords="226,2,323,80" href="../html/rectangle.html" alt="Rectangle">
<area shape="poly" coords="392,2,352,32,366,80,418,80,432,32" href="../html/pentagon.html" alt="Pentagon">
</map>
</body>
</html>

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Ordered List</title>
</head>
<body>
<h1>HTML Ordered List</h1>
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
</body>
</html>

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Unordered List</title>
</head>
<body>
<h1>HTML Unordered List</h1>
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
</body>
</html>

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML button</title>
</head>
<body>
<form method="post" action="">
<input type="button" value="Click Me">
</form>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Links</title>
</head>
<body>
<p><a href="http://www.tutorialrepublic.com/">Tutorial Republic</a></p>
<p><a href="../images/kites.jpg"><img src="../images/kites-thumb.jpg" alt="kites"></a></p>
<p><a href="http://www.google.com/" target="_blank">Google Search</a></p>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML Password Field</title>
</head>
<body>
<!-- Browser may generate "Not secure" warning due to presence of password field in insecure form. We've created this form just for demo purpose. -->
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML Text Field</title>
</head>
<body>
<form>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
</form>
</body>
</html>

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 audio Element</title>
</head>
<body>
<audio controls="controls">
<source src="../audio/birds.mp3" type="audio/mpeg">
<source src="../audio/birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 audio element.
</audio>
</body>
</html>

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of Inserting Video Using object Element</title>
</head>
<body>
<object data="../video/blur.swf" width="400px" height="200px"></object>
</body>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Drawing a Circle on Canvas</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Drawing a Line on Canvas</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Drawing a Rectangle on Canvas</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Drawing an Arc on Canvas</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Embedding SVG Into HTML Pages</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 audio Element</title>
</head>
<body>
<audio controls="controls" src="../audio/birds.mp3">
Your browser does not support the HTML5 audio element.
</audio>
</body>
</html>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 video element</title>
</head>
<body>
<video controls="controls" src="../video/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 video element</title>
</head>
<body>
<video controls="controls">
<source src="../video/shuttle.mp4" type="video/mp4">
<source src="../video/shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML select box with multiple selection</title>
</head>
<body>
<form action="">
<select multiple="multiple">
<optgroup label="Sports cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Luxury cars">
<option value="mercedes">Mercedes</option>
<option value="bentley">Bentley</option>
</optgroup>
</select>
</form>
<p><strong>Note:</strong> Press control or shift key on the keyboard while clicking on the other options to enable multiple selections.</p>
</body>
</html>

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of file select form control</title>
</head>
<body>
<form method="post" action="action.php">
<label for="file-select">Select File:</label>
<input type="file" name="upload" id="file-select">
</form>
</body>
</html>

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of Filling Color inside a Circle</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of Filling Color inside a Rectangle</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of Filling Linear Gradient inside Canvas Shapes</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<meta charset="UTF-8">
<title>Example of Filling Radial Gradient inside Canvas Shapes</title>
<style type="text/css">
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html subLang="en">
<head>
<title>Example of HTML optgroup tag</title>
</head>
<body>
<form>
<select>
<optgroup label="Sports cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Luxury cars">
<option value="mercedes">Mercedes</option>