remove old stuff
Michael Reber
4 years ago
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>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML headings tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading level 1</h1>
|
||||
<h2>Heading level 2</h2>
|
||||
<h3>Heading level 3</h3>
|
||||
<h4>Heading level 4</h4>
|
||||
<h5>Heading level 5</h5>
|
||||
<h6>Heading level 6</h6>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML address tag (check)</title>
|
||||
</head>
|
||||
<body>
|
||||
<address>
|
||||
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
|
||||
Contact us at:<br>
|
||||
Post Box 210, Hollywood<br>
|
||||
USA
|
||||
</address>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Inserting Audio Using object Element</title>
|
||||
</head>
|
||||
<body>
|
||||
<object data="../audio/sea.mp3" width="200px" height="50px"></object>
|
||||
<object data="../audio/sea.ogg" width="200px" height="50px"></object>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Inserting Audio Using object Element</title>
|
||||
</head>
|
||||
<body>
|
||||
<object data="../audio/sea.mp3" width="200px" height="50px"></object>
|
||||
<object data="../audio/sea.ogg" width="200px" height="50px"></object>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML comments</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- this is an HTML comment -->
|
||||
<!-- Comments are not displayed,
|
||||
by the browser -->
|
||||
<h1>This is a heading</h1>
|
||||
<p>This is a paragraph.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML hr tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is the first paragraph of text.</p>
|
||||
<hr>
|
||||
<p>This is second paragraph of text.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML Images</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img src="../images/kites.jpg" alt="Flying Kites">
|
||||
<img src="../images/sky.jpg" alt="Cloudy Sky">
|
||||
<img src="../images/balloons.jpg" alt="Hot Air Balloons">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML Paragraphs</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is a paragraph.</p>
|
||||
<p>This is another paragraph.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Embedding a YouTube Video</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
|
||||
<p>Source: <a href="http://www.youtube.com/watch?v=YE7VzlLtp-4" target="_blank" rel="nofollow">http://www.youtube.com/watch?v=YE7VzlLtp-4</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Inserting Video Using embed Element</title>
|
||||
</head>
|
||||
<body>
|
||||
<embed src="../video/blur.swf" width="400px" height="200px">
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Linking Audio Files</title>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="../audio/sea.mp3">Track 1</a></p>
|
||||
<p><a href="../audio/wind.mp3">Track 2</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML quotations</title>
|
||||
</head>
|
||||
<body>
|
||||
<blockquote>
|
||||
<p>This is an example of a long quotation.</p>
|
||||
</blockquote>
|
||||
<p>This is an example of <q>short inline</q> quotation.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of linking images</title>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="../images/ballons.jpg"><img src="../images/ballons-thumb.jpg" alt="Hot Air Ballons"></a></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML Table</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>John Carter</td>
|
||||
<td>johncarter@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Peter Parker</td>
|
||||
<td>peterparker@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>John Rambo</td>
|
||||
<td>johnrambo@mail.com</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML deleted and inserted text</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>To Do</h1>
|
||||
<ul>
|
||||
<li>Buy some cookies</li>
|
||||
<li><ins>Do some cleaning</ins></li>
|
||||
<li><del>Relaxation time</del></li>
|
||||
<li><ins>Visit a doctor</ins></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of moving outside of an iframe</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Want to move outside the iframe and go to the home page: <a href="http://www.tutorialrepublic.com/">Click here!</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of jump link</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="margin-bottom: 1200px;"><a href="#notes">Jump Link</a></p>
|
||||
<p id="notes">Maecenas non leo sed velit sodales scelerisque sed id felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tempus eros vitae lacus pulvinar faucibus. Aliquam erat volutpat. Nunc nec orci massa, a sagittis mi. Donec non arcu nec lacus bibendum varius. In pharetra diam ut mauris suscipit ac congue lectus fringilla. Cras vehicula elit in tortor luctus sodales. Etiam nunc sapien, consequat ac vulputate non, vulputate in sapien. Etiam arcu tortor, volutpat eu malesuada id, interdum laoreet tellus. Nulla eros est, semper in cursus a, elementum ac sem.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of linking images</title>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="http://www.w3.org/" target="_blank">W3C</a> This is a link to a website on the World Wide Web.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Inserting Line Breaks in HTML</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is a paragraph <br> with line break.</p>
|
||||
<p>This is <br>another paragraph <br> with line breaks.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML pre tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
The pre
|
||||
element preserves spaces,
|
||||
line-breaks, tabs...
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>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="20" y="30" style="fill:purple; font-size:22px;">
|
||||
Welcome to Our Website!
|
||||
</text>
|
||||
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
|
||||
Here you will find lots of useful information.
|
||||
</text>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML select box</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="">
|
||||
<select>
|
||||
<option value="ferrari">Ferrari</option>
|
||||
<option value="mercedes" selected="selected">Mercedes</option>
|
||||
<option value="porsche">Porsche</option>
|
||||
</select>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML select box</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="">
|
||||
<select>
|
||||
<option value="ferrari">Ferrari</option>
|
||||
<option value="mercedes">Mercedes</option>
|
||||
<option value="porsche">Porsche</option>
|
||||
</select>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML table cellspacing</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1" cellspacing="10">
|
||||
<caption>User Information</caption>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>john@mail.com</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><strong>Note:</strong> The CSS <code><a href="#" target="_top">margin</a></code> property is the better way to control spacing between table cells.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML table cellpadding</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1" cellpadding="10">
|
||||
<caption>User Information</caption>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>john@mail.com</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p><strong>Note:</strong> The CSS <code><a href="#" target="_top">padding</a></code> property is the better way to control paddings of table cells.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML bdo tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Setting Stroke Cap Style</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.lineWidth = 10;
|
||||
context.strokeStyle = "orange";
|
||||
context.lineCap = "round";
|
||||
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,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of setting HTML table dimensions</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1" width="400" height="100">
|
||||
<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>
|
||||
<p><strong>Note:</strong> The CSS <code><a href="#">width</a></code> and <code><a href="#">height</a></code> property is the better way to set dimensions of a table.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Setting Stroke Color and Width</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.lineWidth = 5;
|
||||
context.strokeStyle = "orange";
|
||||
context.moveTo(50, 150);
|
||||
context.lineTo(250, 50);
|
||||
context.stroke();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="300" height="200"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of Setting Dimensions for Images</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img src="../images/kites.jpg" alt="Flying Kites" width="300" height="300">
|
||||
<img src="../images/sky.jpg" alt="Cloudy Sky" width="250" height="150">
|
||||
<img src="../images/balloons.jpg" alt="Hot Air Balloons" width="200" height="200">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML headings tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading level 1</h1>
|
||||
<h2>Heading level 2</h2>
|
||||
<h3>Heading level 3</h3>
|
||||
<h4>Heading level 4</h4>
|
||||
<h5>Heading level 5</h5>
|
||||
<h6>Heading level 6</h6>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML caption Tag</title>
|
||||
<style type="text/css">
|
||||
table, td, th {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>User Details</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>John Carter</td>
|
||||
<td>johncarter@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Peter Parker</td>
|
||||
<td>peterparker@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>John Rambo</td>
|
||||
<td>johnrambo@mail.com</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML subscript and superscript</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>The chemical formula of Water is: H<sub>2</sub>O</p>
|
||||
<p>The chemical formula of Carbon Dioxide is: CO<sub>2</sub></p>
|
||||
<p>The equation of mass-energy equivalence is: E=mc<sup>2</sup></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML Submit and Reset Buttons</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="../html/action.php" method="post" id="users">
|
||||
<label for="first-name">First Name:</label>
|
||||
<input type="text" name="first-name" id="first-name">
|
||||
<input type="submit" value="Submit">
|
||||
<input type="reset" value="Reset">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML Table Rowspan and Colspan</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Example of Table Rowspan</h2>
|
||||
<table border="1" cellpadding="10">
|
||||
<tr>
|
||||
<th rowspan="4">Users Info</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>John Carter</td>
|
||||
<td>johncarter@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Peter Parker</td>
|
||||
<td>peterparker@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>John Rambo</td>
|
||||
<td>johnrambo@mail.com</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>Example of Table Colspan</h2>
|
||||
<table border="1" cellpadding="10">
|
||||
<tr>
|
||||
<th colspan="3">Users Info</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>John Carter</td>
|
||||
<td>johncarter@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Peter Parker</td>
|
||||
<td>peterparker@mail.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>John Rambo</td>
|
||||
<td>johnrambo@mail.com</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML tables default border</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<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>
|
||||
<p><strong>Note:</strong> The CSS <code><a href="#">border</a></code> property is the better way to set borders for tables.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example of HTML Paragraphs</title>
|
||||
</head>
|
||||
<body>
|
||||
<p><b>This text is bold</b></p>
|
||||
<p><code>This is computer code</code></p>
|
||||
<p><em>This text is emphasized</em></p>
|
||||
<p><i>This text is italic</i></p>
|
||||
<p><small>This text is small</small></p>
|
||||
<p><mark>This text is marked</mark></p>
|
||||
<p><strong>This text is strongly emphasized</strong></p>
|
||||
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
|
||||
<p><ins>This text is inserted to the document</ins></p>
|
||||
<p><del>This text is deleted from the document</del></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html subLang="en">
|
||||
<head>
|
||||
<title>Example of HTML From Textarea</title>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<label for="address">Address:</label>
|
||||
<textarea rows="3" cols="30" name="address" id="address"></textarea>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue