remove old stuff
This commit is contained in:
parent
74d8503a20
commit
143c066c2b
@ -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 <acronym> tag has been removed in HTML5 and shouldn't be used anymore. Use the <abbr> 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>
|
||||
<option value="bentley">Bentley</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML fieldset tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="http://www.example.com/" method="post">
|
||||
<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>
|
||||
< |