-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLearn.html
270 lines (249 loc) · 9.4 KB
/
Learn.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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!-- signify the doctype -->
<!DOCTYPE html>
<!-- signify the start of the HTML code -->
<html>
<!-- display a title on the browser window -->
<head>
<title>My webpage title</title>
<meta name="description"
content="An example webpage made to show off." />
<meta name="author"
content="Toby Bailey" />
<meta name="robots"
content="nofollow" />
</head>
<!-- set what displays onto the main browser window -->
<body>
<!-- create a heading -->
<h1 id="top">Paragraph heading - why I am awesome at HTML</h1>
<!-- create a paragraph of text -->
<p>This is a paragraph, designed to demonstrate how great I am at HTML.</p>
<h2>I will now blatantly show off my tag knowledge.</h2>
<p>I can make a word <b>bold</b>, or perhaps in <i>italics</i>.</p>
<p>I can indicate superscript, like "the 4<sup>th</sup> of July".</p>
<p>I can indicate subscript, like "H<sub>2</sub>O".</p>
<p>I can make a line break,<br /> like so.</p>
<p>I can display things underneath horizontal rules, like below.<hr /></p>
<!-- use semantic markup - tags used to give extra information -->
<h2>Now I will use semantic markup tags, giving additional information.</h2>
<p>Use the strong tag for things of great <strong>importance,</strong> </p>
<p>Use the emphasis tag to change sentence <em>meaning</em>.</p>
<blockquote>
<p>This indicates a block quote, a long quote which is indented.</p>
</blockquote>
<p>A different tag is used to indicate smaller quotes, <q>like so</q>.</p>
<p>Both types can be cited, but q tag <b>does not</b> work in Explorer.</p>
<p>You can use an acronym/abbreviation,
like <abbr title="Professor">Prof</abbr>, if you like.</p>
<p>You can reference a book, like <cite>HTML & CSS</cite>, with cite.</p>
<p>You can note something's <dfn>defining instance</dfn>, or the first time
you mention something that requires definition, with dfn.</p>
<p>I can signify content that has been <del>removed</del> deleted, as well
as content that has been put in <ins>(inserted)</ins>.</p>
<p>There is also the s tag for content that is no longer relevant, like a
sign saying <s>Was £20</s>.</p>
<p><hr /></p>
<h3>You can use the address tag to add contact information.</h3>
<address>
<p>221B Baker Street, London.</p>
</address>
<p><hr /></p>
<!-- section on lists, and types of lists -->
<h2>There are also a number of list elements in HTML.</h2>
<ol>
<li>There is an ordered list, which is numbered.</li>
</ol>
<ul>
<li>There is an unordered list, which is bullet-pointed.</li>
</ul>
<dl>
<dt>A definition list</dt>
<dd>A type of list comprising of terms and their definitions.</dd>
</dl>
<ul>
<li>You can also have nested lists.</li>
<ul>
<li>It can be used to give sub-topic information, for example.</li>
</ul>
</ul>
<p><hr /></p>
<!-- section on links, and different types and uses -->
<h2>There are also ways to link between websites in HTML.</h2>
<ul>
<li>This link <a href="https://www.google.co.uk/" target="_blank">here</a>
will take you to google, but in a new tab.</li>
<li>This link <a href="Lists-example.html">here</a> will take you to
another page on this site, by using the file name in the folder.</li>
will let you send me an email.</li>
<li>This link <a href="#top">here</a> uses the id attribute to
take you to the top of the page.</a>
</ul>
<p><hr /></p>
<!-- section on images, and the tags to use with them -->
<h2>You can use images to provide information to the user.</h2>
<img src="ExampleSite/Images/Player_spr.png" alt="Pixel art of a ginger boy."
title="This image's title is The Player." width="32" height="32" />
<p>This image's title displays when you hover your cursor over it, and has
alt text, a width value and a height value.</p>
<figure>
<img src="ExampleSite/Images/Player_spr.png" alt="Pixel art of a ginger boy."
title="This image's title is The Player." />
<br />
<figcaption>What a lovely drawing.</figcaption>
</figure>
<p>This image uses the HTML5 figure and figcaption tags to put the image with its' caption.</p>
<p><hr /></p>
<!-- section on tables, and what tags to use with them -->
<h2>You can create tables containing useful information within.</h2>
<table>
<tr>
<td>This</td>
<td>table</td>
<td>uses</td>
</tr>
<tr>
<td>row</td>
<td>and</td>
<td>data</td>
</tr>
<tr>
<td>tags</td>
<td>for</td>
<td>creation</td>
</tr>
</table>
<br />
<table>
<tr>
<th></th>
<th scope="col">Column heading</th>
</tr>
<tr>
<th scope="row">Row heading</th>
<td>Info goes here</td>
</tr>
</table>
<br />
<table>
<tr>
<td colspan="2">Cheese</td>
</tr>
<tr>
<td rowspan="2">Cheese</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>The above table uses the rowspan and colspan attributes to make the
individual cells go across multiple columns or rows.</p>
<br />
<table>
<thead>
<th scope="col">Name</th>
</thead>
<tbody>
<tr>
<td>Brie</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Therefore, cheese</td>
</tr>
</tfoot>
</table>
<p>The above table uses the thead, tbody and tfoot tags to signify the head,
main body and end of the table - useful for long tables.</p>
<p><hr /></p>
<!-- section on forms, how to make them and what tags to use -->
<h2>You can also easily create web forms within HTML.</h2>
<form action="http://www.example.com/form.php" method="post">
<p>Insert a type of cheese:
<input type="text" name="cheese" maxlength="30" />
</p>
<p>Insert a secret type of cheese:
<input type="password" name="secretcheese" maxlength="30" />
</p>
<textarea name="cheesecomments">Insert all comments about cheese...</textarea>
<p>Please select your favourite cheese (only one):
<br />
<input type="radio" name="cheesebutton" value="brie" />Brie
<input type="radio" name="cheesebutton" value="cheddar" /> Cheddar
</p>
<p>Please select your multiple favourite cheeses:
<br />
<input type="checkbox" name="cheesecheckbox" value="brie" />Brie
<input type="checkbox" name="cheesecheckbox" value="cheddar" />Cheddar
</p>
<p>Please select your single favourite cheese:
<br />
<select name="cheeses">
<option value="brie">Brie</option>
<option value="cheddar">Cheddar</option>
</select>
</p>
<p>Please select your multiple favourite cheeses (using ctrl or cmd):
<br />
<select name="multiplecheeses" multiple="multiple">
<option value="brie">Brie</option>
<option value="cheddar">Cheddar</option>
</select>
</p>
<p>Upload your favourite cheesy picture here:
<br />
<input type="file" name="cheesypic" />
<br />
<input type="submit" value="Upload" />
</p>
<p>These forms use the label tag for accessibility:
<br />
<input id="female" type="radio" name="sex" value="f">
<label for="female">Female</label>
<label><input id="male" type="radio" name="sex" value="m" />Male</label>
</p>
<p>These forms are grouped together and named, using fieldset and legend:
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label>
</fieldset>
</p>
<p>You can use the HTML5 required tag to ensure fields aren't left blank, as well as placeholder text:
<br />
<label>Email:<input type="text" name="email" required="required" /></label>
</p>
<p>HTML5 also contains a number of tags for various input fields:
<br />
<label>Enter date: <input type="date" name="date" /></label>
<br />
<br />
<label>Enter URL: <input type="url" name="url" placeholder="http://www.example.com"/></label>
<br />
<label>Enter search term: <input type="search" name="search" placeholder="Enter term here..." /></label>
</p>
</form>
<p><hr /></p>
<!-- section on extra markup tags -->
<h2>There are various extra tags that can be used to different effects.</h2>
<p>You can use the iframe tag to place another webpage within your webpage.</p><br />
<iframe
width="1000"
height="500"
src="https://github.com/Proxymoron461/HTML-Learning">
</iframe>
<br /><p>You can use the seamless attribute to remove any scroll bars.</p><br />
<iframe
width="1000"
height="500"
src="https://github.com/Proxymoron461/HTML-Learning"
seamless="seamless">
</iframe>
<br /><p>You can also use escape codes, like & or £, to display different characters.</p>
</body>
</html>