-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
370 lines (368 loc) · 12.4 KB
/
index.html
File metadata and controls
370 lines (368 loc) · 12.4 KB
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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Tutorial</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<h2>This is a list of HTML tags and what they do.</h2>
<h3>
I took the most important HTML tags and gave them a very brief description. This was made
for self-education purposes. It gave me a general idea of the power of pure HTML.
</h3>
<br /><hr /><br />
<h2>Tags index</h2>
<h3><a href="#basics">Basics</a></h3>
<h3><a href="#head-elements">Head elements</a></h3>
<h3><a href="#text">Text</a></h3>
<h3><a href="#navigation">Navigation</a></h3>
<h3><a href="#embedded-content">Embedded content</a></h3>
<h3><a href="#misc">Misc.: Tables, forms, br and hr</a></h3>
<br /><hr /><br />
<div id="basics"></div>
This is just text. No tags.<br />
<h1><html></h1>
<p>
The <html> tag wraps all of the content on the page. It is also
known as the root element.
</p>
<h1><head></h1>
<p>
The <head> tag contains everything that the webpage will not show.
This includes keywords, page description, css references, etc.
</p>
<h1><body></h1>
<p>
The <body> contains all of the content that is displayed to the
user.
</p>
<h1 id="head-elements"><meta></h1>
<p>
The <meta> tag adds metadata (such as the character set) to the
document.
</p>
<h1><link></h1>
<p>
The <link> tag specifies relationships between the current document
and an external resource. Use the <strong>href</strong> attribute to point
to a file and the <strong>rel</strong> attribute to specify what the file
does.
</p>
<h1><title></h1>
<p>
The <title> tag specifies the webpage's title.
</p>
<h1><script></h1>
<p>
The <script> tag loads a JavaScript file. Use the <strong>defer</strong>
attribute to optimize loading.
</p>
<h1 id="text">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
</h1>
<p>
These tags are the headings of the page. Their font sizes are:
<br /><h1>: 2em, <h2>: 1.5em, <h3>: 1.17em, <h4>:
1em, <h5>: 0.83em, <h6>: 0.75em.
</p>
<h1><p></h1>
<p>
The <p> tag makes your text a paragraph.
</p>
<h1><em></h1>
<p>
<em>The <em> tag gives emphasis to your text, like this.</em>
</p>
<h1><strong></h1>
<p>
<strong>The <strong> tag gives importance to your text, like
this.</strong>
</p>
<h1><a></h1>
<p>
The <a> tag makes your text a link,
<a href="/" title="This will take you nowhere.">like this one</a>. You can
specify where the link leads to with the <strong>href</strong> tag. You
can also specify the text that is shown when hovering over it, with the
<strong>title</strong> attribute, and the browsing context (if it opens a
new window, tab, etc) with the <strong>target</strong> attribute.
</p>
<h1><span></h1>
<p>
The <span> tag wraps content that you want to style with CSS,
without giving any extra meaning to it.
</p>
<h1><ul>, <li></h1>
<p>
The <ul> tag makes an unordered list, of which each item is wrapped
with a <li> tag.
</p>
<ul>
<li>Like</li>
<li>this</li>
<li>list.</li>
</ul>
<h1><ol>, <li></h1>
<p>
The <ol> tag makes an ordered list, of which each item is wrapped
with a <li> tag.
</p>
<ol>
<li>Like</li>
<li>this</li>
<li>list.</li>
</ol>
<h1><dl>, <dt>, <dd></h1>
<p>
These tags mean, respectively: description list, description term and
description definition. These are used in lists of terms and their
definitions or in questions and answers.
</p>
<dl>
<dt>melancholic</dt>
<dd>
Melancholic individuals tend to be analytical and detail-oriented, and
they are deep thinkers and feelers.
</dd>
<dt>phlegmatic</dt>
<dd>
Phlegmatic individuals tend to be relaxed, peaceful, quiet, and
easy-going.
</dd>
<dt>sanguine</dt>
<dd>
Sanguine personality type is described primarily as being highly
talkative, enthusiastic, active, and social.
</dd>
<dt>choleric</dt>
<dd>
Choleric individuals tend to be more extroverted. They are described as
independent, decisive, goal-oriented, and ambitious.
</dd>
</dl>
<h1><blockquote></h1>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">
If a section of block level content (be it a paragraph, multiple
paragraphs, a list, etc.) is quoted fromsomewhere else, you should wrap it
inside a <blockquote> element to signify this, and include a URL
pointing to the source of the quote inside a
<strong>cite</strong> attribute.
</blockquote>
<h1><q></h1>
<p>
The <q> tag is
<q cite="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">intended
for short quotations that don't require paragraph breaks</q>.
</p>
<h1><cite></h1>
<p>
According to the <cite>MDN cite page</cite>, <cite> contains the
title of the source being quoted.
</p>
<h1><abbr></h1>
<p>
The <abbr> tag is used for abbreviations. You can include the
<strong>title</strong> attribute and it will be shown when hovered over,
like this: <abbr title="Hyper Text Markup Language">HTML</abbr>.
</p>
<h1><address></h1>
<p>
The <address> tag wraps contact details, such as addresses, telephone numbers and emails.
<address>
<p>P. Sherman 42 Wallaby Way, Sydney</p>
</address>
</p>
<h1><sup>, <sub></h1>
<p>
These tags make your text superscript or subscript.<br />
I finished 1<sup>st</sup> and drank some H<sub>2</sub>O.
</p>
<h1><code>, <pre></h1>
<p>
The <code> wraps code. The <pre> tag retains all monospace, displaying
text exactly as it is written inside the HTML document.
<pre>
<code>
let x = 5;
if (x === 5)
return x;
</code>
</pre>
</p>
<h1><var></h1>
<p>
The <var> tag wraps variables, like <var>x</var> and <var>y</var>.
</p>
<h1><kbd></h1>
<p>
The <kbd> tag wraps input types, like <kbd>Ctrl</kbd> and <kbd>Shift</kbd>.
</p>
<h1><samp></h1>
<p>
The <samp> tag wraps program outputs, like <samp>ERROR 404 NOT FOUND</samp>.
</p>
<h1><time></h1>
<p>
The <time> tag is used for specifying times and dates. Use the <strong>datetime</strong>
attribute to make it machine-readable.<br />
The time now is <time datetime="18:28">18h28</time>.
</p>
<h1 id="navigation"><header></h1>
<p>
The <header> tag represents introductory and/or navigational content that
usually sits on top of the page.
</p>
<h1><nav></h1>
<p>
The <nav> tag represents a section whose purpose is purely navigational, like
menus and tables.
</p>
<h1><main></h1>
<p>
The <main> tag contains the dominant content of the page, or the web app's functionality.
</p>
<h1><article></h1>
<p>
The <article> tag contains texts like blog posts, forum posts and newspaper articles.
</p>
<h1><section></h1>
<p>
The <section> tag separates texts into blocks. Used in step-by-step guides or recipes.
</p>
<h1><div></h1>
<p>
The <div> tag is a generic container. It is easily styled using the <strong>class</strong>
and <strong>id</strong> attributes.
</p>
<h1><aside></h1>
<p>
The <aside> tag contains content which is indirectly related to the main content.
</p>
<h1><footer></h1>
<p>
The <footer> tag contains content at the bottom of the page. Documents, copyrights, etc.
</p>
<h1 id="embedded-content"><img></h1>
<p>
The <img> tag displays an image. You can specify the source with the
<strong>src</strong> attribute and if the image fails to load, an
alternative text with the <strong>alt</strong> attribute.
<img src="imgs/img.png" alt="image of the img code for this image" />
</p>
<h1><video></h1>
<p>
The <video> tag displays a video. Use the <strong>src</strong>
attribute. The <strong>controls</strong> attribute makes a user interface.<br />
<video src="videos/video.mp4" controls></video>
</p>
<h1><audio></h1>
<p>
The <audio> tag display audio. Use the <strong>src</strong>
attribute. The <strong>controls</strong> attribute makes a user interface.<br />
<audio src="audios/audio.mp3" controls></audio>
</p>
<h1><canvas></h1>
<p>
The <canvas> is used to create graphics via scripting. Since this website
doesn't have any JavaScript, it won't appear.
<canvas></canvas>
</p>
<h1><iframe></h1>
<p>
The <iframe> tag embeds another webpage into your own webpage. The most
important attributes are:
<ul>
<li><strong>src</strong>, for your source</li>
<li><strong>allowfullscreen</strong>, to allow fullscreen</li>
<li><strong>width</strong> and <strong>height</strong></li>
<li><strong>sandbox</strong>, to request heightened security settings.</li>
</ul>
<iframe src="https://www.html.am/" width="500" height="300"></iframe>
</p>
<h1><embed>, <object></h1>
<p>
Similar to the <iframe> tag. However, not used anymore.
</p>
<h1><svg></h1>
<p>
The <svg> tag creates a vector graphic, like this one.<br />
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
</p>
<h1><picture>, <source></h1>
<p>
The <picture> is used for responsive images, meaning images that
fit right in the device screen. The <source> tag has a <strong>media</strong>
attribute, which specifies the size of device you want to show this particular
image on. The <strong>srcset</strong> tag determines the source.<br />
<picture>
<source media="(min-width: 800px" srcset="imgs/img2.jpg">
<source media="(max-width: 799px)" srcset="imgs/img3.png">
<img src="imgs/img2.jpg" alt="landscape" width="25%">
</picture>
</p>
<h1 id="misc"><table>, <tr>, <td>, <th>, <caption></h1>
<p>
The <table> tag makes tables with data. Inside it, you can add
rows with the <tr> tag, and inside those you add data with the
<td> tag. You can also add headers with the <th> tag, and
they will be treated as headers. There are lots of attributes you can
use for all of them, so they will not all be listed. The <caption>
tag is placed beneath the <table> tag and gives a caption to the
table.
</p>
<table>
<caption>Properties of Planets</caption>
<tr>
<th>Name</th>
<th>Mass (10^<sup>24</sup>kg)</th>
<th>Diameter (km)</th>
</tr>
<tr>
<td>Mercury</td>
<td>0.33</td>
<td>4.879</td>
</tr>
<tr>
<td>Venus</td>
<td>4.87</td>
<td>12.104</td>
</tr>
<tr>
<td>Earth</td>
<td>5.97</td>
<td>12.756</td>
</tr>
</table>
<h1><thead>, <tbody>, <tfoot></h1>
<p>
These tags don't do anything to the table data, but are useful for styling.
Use <thead> for headings, <tbody> for most of the data and
<tfoot> for the footer, which is usually some operation like the column's
sum, but not always the case.
</p>
<h1><form>, <label>, <input></h1>
<p>
The <form> tag allows the creation of forms to be filled and sent by the user. The <label> and
<input> tags create the components of the form.
</p>
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<h1><br></h1>
<p>
The <br> tag creates a line break in a paragraph, like <br />this.
</p>
<h1><hr></h1>
<p>
The <hr> tag displays a horizontal line, like this one.
<hr />
</p>
</body>
</html>