forked from lameesad/HTML5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheducate.html
159 lines (120 loc) · 4.39 KB
/
educate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="educate.html">Educate</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<h1> Educate </h1>
<section>
<p class="center">HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
It is the fifth and latest major version of HTML that is a World Wide Web Consortium recommendation. Its
goals were to improve the language with support for the latest multimedia and other new features.
</p>
</section>
<img src="images/html.jpg" height="600px" width="100%">
<div id="main">
<h1> Lets learn together </h1>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</div>
<!-- <img src="images/pinkbg.jpg" height="300px" width="100%"> -->
<img src="images/html5.gif" height="500px" width="100%">
<section>
<p class="title"> Canvas</p>
<p class="center">The HTML canvas element is used to draw graphics, on the fly, via JavaScript. The canvas
element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
</p>
</section>
<canvas width="500" height="400" id="canvas"></canvas>
<canvas width="500" height="400" id="canvas1"></canvas>
<canvas width="500" height="400" id="canvas2"></canvas>
<img src="images/htmlbg.jpg" height="500px" width="100%">
<section class="center">
<p class="title"> HTML5 new elements</p>
<p>The State of HTML5,” what we really
mean is: which new features can we reliably use without destroying
our web applications in older browsers that don’t adequately
support HTML5? Alternatively, which features, generally referred to
as “edge features,” aren’t quite ready for everyday usage?
</p>
<label>Color:</label>
<input type="color"><br>
<label>File:</label>
<input type="file"><br>
<label>Date:</label>
<input type="date"><br>
<label>Progress:</label>
<progress min=0 max=100 value=60></progress><br>
<label>Meter:</label>
<meter min=0 max=100 value=60></meter>
</section>
<footer>
<span>HTML5 template by Lamees</span>
</footer>
</body>
</html>
<script>
(function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
bg;
context.strokeStyle = "#666";
bg = context.createLinearGradient(200, 150, 200, 300);
bg.addColorStop(0, "#ccffff");
bg.addColorStop(.5, "#ff9999");
bg.addColorStop(1, "#ffe6e6");
context.fillStyle = bg;
context.lineWidth = 5.0;
context.beginPath();
context.moveTo(100, 300);
context.lineTo(300, 300);
context.lineTo(200, 150);
context.closePath();
context.fill();
context.stroke();
})();
var canvas = document.getElementById('canvas1'),
ctx = canvas.getContext('2d');
ctx.arc(200, // x coord
200, // y coord
100, // radius (or 1/2 the width and height)
0, // begin point on circle
Math.PI * 2, // end point
true // clockwise or anticlockwise
);
ctx.fill();
(function () {
var canvas = document.getElementById('canvas2'),
context = canvas.getContext('2d'),
bg;
context.strokeStyle = "#666";
bg = context.createLinearGradient(200, 150, 200, 300);
bg.addColorStop(0, "#ccffff");
bg.addColorStop(.5, "#00e6e6");
bg.addColorStop(1, "#ffe6e6");
context.fillStyle = bg;
context.lineWidth = 5.0;
context.beginPath();
context.moveTo(100, 300);
context.lineTo(300, 300);
context.lineTo(200, 200);
context.closePath();
context.fill();
context.stroke();
})();
</script>