forked from rrrgh/exercise
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml5(Dec 7, 2014).html
253 lines (198 loc) · 9.41 KB
/
html5(Dec 7, 2014).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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE HTML>
<!-- Tells the browser to render the page using the HTML5 specification -->
<!--
1. HyperText Markup Language : Uses tags to tell the browser how to layout the web page
2. Uniform Resource Locator :
a. http:// is used if data is transfered using the HyperText Transfer Protocol (Common standard of communication between web servers)
b. The domain is the unique name for the server / servers hosting the data
c. The URL ends with the path to the data to be served
d. http://newthinktank.com/html5.html
3. You can validate your HTML here http://validator.w3.org/check
-->
<!-- Defines the documents primary language as English -->
<html lang="en">
<!-- Contains data that describes the document -->
<head>
<!-- Defines the documents encoding character set (Multi-lingual Universal Transformation Format) -->
<meta charset="UTF-8">
<!-- Redriects the browser to another page after 3 seconds
<meta http-equiv="refresh" content= "3; url='redirect.html'"/> -->
<!-- Description for your page. Shouldn't be longer then 200 characters -->
<meta name="description"
content="Learn everything you want to know about HTML5 in this video tutorial. Tags, content sections, embedding media, forms, canvas and more will be covered."/>
<!-- Keywords are used to define your content for search engines. Shouldn't be longer then 1,000 characters -->
<meta name="keywords"
content="html5 canvas,html5 tutorial,html5 tutorial, html5 doctype, html5 tags,html5 video,learn html5"/>
<!-- Defines how search engines should index your content.
index / noindex : indicates if search engines should index the page
follow / nofollow : indicates if hyperlinks should be followed and indexed
archive / noarchive : indicates whether the page should be archived
-->
<meta name="robots" content="index,follow"/>
<!-- Defines the location of an outside JavaScript file -->
<script src="randomcolorchange.js"> </script>
<!-- Must come before any other link tags -->
<!-- Defines a default location for all links on a page for browsers -->
<base href="http://localhost/html5/"/>
<!-- Defines the location of a style sheet -->
<!-- Style sheets have replaced HTML styling features from the past -->
<link rel="stylesheet" href="styles.css"/>
<!-- References a icon (16 x 16) to associate with your page. Save it in the root directory for IE -->
<link rel="icon" href="favicon.ico"/>
<!-- You must have a title for your page that should be about 16 characters long -->
<title>HTML5 Tutorial</title>
</head>
<!-- Contains data to show in the browser -->
<!-- onload can call a script or open a dialog box -->
<!-- onunload is not supported in browsers other then IE -->
<body onload="alert('Hello')" onunload="alert('Bye Bye')">
<div id="wrapper">
<!-- Can jump with in the page by referencing the name -->
<a name="pageTop">Top of page</a>
<!-- Links to the bottom by referencing the id -->
<a href="html5.html#pageBottom">Bottom of page</a>
<!-- Message that is displayed if the browser has JavaScript disabled -->
<noscript>Please Enable JavaScript</noscript>
<!-- Increases the size of the text it contains h1 - h6
They are used to define the importance of elements in sequence -->
<h1>Change with a Click</h1>
<!-- The <p> will add 2 line breaks after the </p> and <br> adds one -->
<p>
Two hunters are out in the woods when one of them collapses. He doesn’t seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, “My friend is dead! What can I do?”. The operator says “Calm down. I can help. First, let’s make sure he’s dead.” <br>There is a silence, then a shot is heard. Back on the phone, the guy says “OK, now what?”
</p>
<!-- Draws a line -->
<hr>
<!-- <blockquote> indents the surrounding text and cite defines where the quote came from -->
<blockquote cite="http://epicquotes.org/view.php?id=151">
Never, under any circumstances, take a sleeping pill and a laxative on the same night.
</blockquote>
<!-- <q> surrounds text with quotes -->
<q cite="http://www.brainyquote.com/quotes/quotes/h/hennyyoung128883.html">If at first you don’t succeed ... so much for skydiving.</q><br><br>
<!-- <pre> preserves white space, but tabs can get messed up -->
<pre>
_ _
(.< >.)
\(_)________( \
(___________)\\
( ) \
| |
| |
| |
_| |_
(_______)
</pre>
<!-- Use pre and code to surround code -->
<!-- var is used to emphasive important variables -->
<pre>
<code>
function init(){
var <var>h1tags</var> = document.getElementsByTagName("h1");
<var>h1tags[0]</var>.onclick = changeColor;
}
</code>
</pre>
<!-- Adding images : define width, height and alt -->
<img id="danceImg" src="http://www.gifbin.com/bin/102009/1255606809_acrobatic_dance_fail.gif" width="237" height="178" alt="Dance Fail"><br>
<!-- 4 ways to emphasize text without a line break -->
<b>Bold : Bold Font</b><br>
<strong>Strong : Bold Font</strong><br>
<em>Emphasis : Italic Font</em><br>
<i>Italic : Italic Font</i><br>
<!-- 3 ways to format text for special purposes -->
<small>Small : Short Comment</small><br>
<ins>Insert : Added to Document</ins><br>
<del>Delete : Strike</del><br>
<samp>Sample Programming Output</samp><br><br>
<!-- Advisory tags -->
<!-- dfn adds emphasis to a word without title and a popup with title -->
<!-- kbd is used to emphasis input expected from a user -->
This is an abbreviation <abbr title="abbreviation">abbrv.</abbr><br>
<dfn>Definition: </dfn>the formal statement of the meaning or significance of a word<br>
<dfn title="the formal statement of the meaning or significance of a word">Definition</dfn><br>
<kbd>Enter something here</kbd>
<!-- Character Entities : http://dev.w3.org/html5/html-author/charref -->
¢
£
¥
©
®
°
¼
½
¾
²<br>
<!-- Superscript / Subscript -->
4<sup>2</sup><br>
CO<sub>2</sub><br>
<!-- You can define the direction of text with rtl or ltr -->
<bdo dir="rtl">أين هو مطعم</bdo><br>
<!-- You can provide ruby annotation for pronunciation -->
<ruby>飯店<rt>hanten</rt></ruby><br>
<!-- HYPERLINKS -->
<!-- Contains the referenced link with an optional title -->
<!-- A hyperlink has 3 interactive states hover, active, visited -->
<a href="http://youtube.com/" title="YouTube">YouTube</a>
<!-- You can link to parts of the same web page -->
<a href="html5.html#pageTop">Top of Page</a>
<a id="pageBottom">Bottom of page</a><br>
<!-- You can open the mail software to send a message -->
<a href="mailto:[email protected]">Send an Email</a>
<!-- You can also dynamically call for a JavaScript function to execute -->
<a href="javascript:toggleImg()">Toggle Image</a><br>
<!-- You can define hot spot links in images with image maps.
Import your image into Gimp and Filters → Web → ImageMap -->
<img src="http://localhost/html5/imagemap.png" alt="imagemap example" width="600" height="125" usemap="#map" />
<map name="map">
<area shape="circle" coords="57,62,39" alt="Yahoo" title="Go to Yahoo" href="http://yahoo.com" />
<area shape="poly" coords="192,20,166,45,232,105,301,42,272,20,192,19,195,20" alt="Diamonds" title="Go to Diamonds" href="http://diamonds.com" />
<area shape="rect" coords="332,8,595,115" alt="Google" title="Go to Google" href="http://google.com" />
</map>
<!-- You can embed numerous external file formats using the object tag -->
<!-- Embed a PDF -->
<object data="SmallBusinessPresentation.pdf" type="application/pdf"
width="750" height="400">
</object>
<!-- Embed a HTML file -->
<object data="html52.html" type="text/html"
width="750" height="400">
</object>
<!-- Embed a WAV file -->
<object data="http://www.wavsource.com/snds_2014-11-23_3967152387108926/animals/bird.wav" type="audio/x-wav">
<!-- Used to pass parameters to an embedded object
attributes consist of a name and value -->
<param name="autoplay" value="true">
<param name="controller" value="true">
</object>
<!-- Other Formats
application/msword : MS Doc Files
application/x-java-applet : Java Applet
audio/mpeg : MP3s
image/png : PNGs
image/jpeg : JPEGs
image/gif : GIFS
image/svg+xml : SVG Vector images
text/plain : Text
video/mp4 : MP4s
video/x-msvideo : AVIs
video/x-msv-wmv : WMVs
video/quicktime : MOVs
-->
<!-- You can embed externale resources in an iframe -->
<iframe width="560" height="315" src="http://www.youtube.com/embed/Rub-JsjMhWY" allowfullscreen=""></iframe>
<!-- Interactive files like Flash files can be embedded with embed
You can define the file type, plugin and set other params -->
<embed src="http://www.itma.vt.edu/tech/flash.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="300" height="120" loop="false" quality="high">
<!-- You can embed MP3 and Wav (Not IE) files using audio
mp3 uses audio/mpeg -->
<audio controls autoplay loop preload>
<source src="comingtotake.wav" type="audio/wav">
Browser doesn't support the audio tag
</audio>
<!-- You can embed MP4s with video -->
<video controls autoplay loop preload>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<br><br><br><br><br><br>
</div>
</body>
</html>