michael/programming-examples
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove old stuff

Browse Source
This commit is contained in:
Michael Reber 2019-11-18 14:51:37 +01:00
parent 74d8503a20
commit 143c066c2b
298 changed files with 0 additions and 11983 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
html/_Basics/01-skeleton (Basic Javascript Animation).html
View File

@ -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>

29
html/_Basics/02-event-demo (Basic Javascript Animation).html
View File

@ -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>

34
html/_Basics/03-mouse-events (Basic Javascript Animation).html
View File

@ -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>

27
html/_Basics/04-mouse-position (Basic Javascript Animation).html
View File

@ -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>

30
html/_Basics/05-touch-events (Basic Javascript Animation).html
View File

@ -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>

26
html/_Basics/06-keyboard-events (Basic Javascript Animation).html
View File

@ -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>

40
html/_Basics/07-key-codes (Basic Javascript Animation).html
View File

@ -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>

41
html/_Basics/08-key-names (Basic Javascript Animation).html
View File

@ -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>

9
html/_Basics/A simple HTML document.html
View File

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

11
html/_Basics/Abbreviations and acronyms.html
View File

@ -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>

11
html/_Basics/Aligning images.html
View File

@ -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>

24
html/_Basics/Apply transformation while rendering text on web pages using SVG.html
View File

@ -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>

26
html/_Basics/Checkboxes and radio buttons.html
View File

@ -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>

22
html/_Basics/Column groups - The col and colgroup elements.html
View File

@ -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>

13
html/_Basics/Computer output tags.html
View File

@ -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>

11
html/_Basics/Create hyperlink.html
View File

@ -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>

13
html/_Basics/Creating HTML5 color input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 date input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 datetime input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 datetime-local input type.html
View File

@ -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>

21
html/_Basics/Creating HTML5 email input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 month input type.html
View File

@ -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>

22
html/_Basics/Creating HTML5 number input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 range input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 search input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 tel input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 time input type.html
View File

@ -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>

22
html/_Basics/Creating HTML5 url input type.html
View File

@ -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>

13
html/_Basics/Creating HTML5 week input type.html
View File

@ -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>

17
html/_Basics/Creating a circle using SVG.html
View File

@ -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>

16
html/_Basics/Creating a definition list.html
View File

@ -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>

17
html/_Basics/Creating a line using SVG.html
View File

@ -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>

12
html/_Basics/Creating a mailto link - A link that sends an e-mail.html
View File

@ -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>

32
html/_Basics/Creating a nested list - Multi level.html
View File

@ -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>

20
html/_Basics/Creating a nested list - Single level.html
View File

@ -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>

17
html/_Basics/Creating a rectangle using SVG.html
View File

@ -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>

16
html/_Basics/Creating an image-map - An image with clickable regions.html
View File

@ -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>

15
html/_Basics/Creating an ordered list.html
View File

@ -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>

15
html/_Basics/Creating an unordered list.html
View File

@ -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>

11
html/_Basics/Creating buttons.html
View File

@ -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>

12
html/_Basics/Creating links to other HTML documents or Web resources.html
View File

@ -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>

13
html/_Basics/Creating password input fields.html
View File

@ -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>

12
html/_Basics/Creating text input fields.html
View File

@ -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>

14
html/_Basics/Defining alternative sources for audio element.html
View File

@ -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>

10
html/_Basics/Defining alternative sources for video element.html
View File

@ -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>

23
html/_Basics/Drawing a circle onto the canvas.html
View File

@ -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>

24
html/_Basics/Drawing a line onto the canvas.html
View File

@ -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>

23
html/_Basics/Drawing a rectangle onto the canvas.html
View File

@ -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>

23
html/_Basics/Drawing an arc onto the canvas.html
View File

@ -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>

15
html/_Basics/Embedding SVG into HTML documents.html
View File

@ -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>

12
html/_Basics/Embedding audio in HTML documents.html
View File

@ -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>

17
html/_Basics/Embedding canvas into HTML documents.html
View File

@ -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>

12
html/_Basics/Embedding the YouTube video in HTML documents.html
View File

@ -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>

14
html/_Basics/Embedding video in HTML documents.html
View File

@ -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>

21
html/_Basics/Enable multiple selection inside a select box.html
View File

@ -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>

12
html/_Basics/File select field.html
View File

@ -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>

27
html/_Basics/Filling color inside a circular shape on canvas.html
View File

@ -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>

27
html/_Basics/Filling color inside a rectangle shape on canvas.html
View File

@ -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>

28
html/_Basics/Filling linear gradient inside canvas shapes.html
View File

@ -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>

28
html/_Basics/Filling radial gradient inside canvas shapes.html
View File

@ -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>

20
html/_Basics/Grouping of options inside a select box.html
View File

@ -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>

17
html/_Basics/Grouping similar form fields.html
View File

@ -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>
<