-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
593 lines (492 loc) · 20.6 KB
/
index.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
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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
<!--HTML HYPER TEXT MARKUP LANGUAGE-->
<!DOCTYPE html> <!-- To identify this is a HTML5 Document -->
<html> <!-- Root element of HTML page -->
<head> <!-- Contains meta info about the page -->
<!-- Title of the page -->
<title>
Learn HTML
</title>
<!-- Information about HTML Document -->
<meta charset="utf-8"> <!-- Character encoding for the document -->
<meta name="keywords" content="learn-html, HTML, CSS, JavaScript">
<!-- Enter keywords Search Engine Optimization ( SEO ) -->
<meta name="description" content="This page is to help the budding developers to learn html"> <!-- Description -->
<meta name="author" content="Thirumalai K G"> <!-- Author -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Makes it look good on all devices (Adaptable to all screens) -->
<!-- Provides an HTTP header for the information/value of the content attribute -->
<meta http-equiv="refresh" content="30"> <!-- Refreshes the document every 30 secs-->
<!-- Different http-equiv
content-security-policy
content-type
default-style
refresh
-->
<!-- Favicon - Image that is displayed next to the title of the page -->
<link rel="icon" type="image/x-icon"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2048px-HTML5_logo_and_wordmark.svg.png">
</head>
<!-- Visible part of the html document -->
<body>
<!-- To align the items in center -->
<center>
<!-- Heading Tag -->
<h1>Learn HTML</h1>
</center>
<!-- Line break - Empty Tag (No closing bracket required) -->
<br>
<h3>Basic</h3>
<!-- Paragraph -->
<p> <b> <p> </b> is used to align items in paragraph </p>
<!-- Line Break -->
<p> <b> <br> </b> is used to for line break - Empty Tag ( No closing bracket required ) ^ </p>
<!-- Links -->
<p> <b> <a> </b> is to allow users to click their way from page to page. There are various types of links. For
example link to an email </p>
<p></a> <a href="https://github.com/Thiru-Malai/"> Get out my github page</a></p>
<p>
<pre><b> <a href="https://github.com/Thiru-Malai/"> Get out my github page </a> </b> </pre>
</p>
<p> Link Target </p>
<p> The target attribute specifies where to open the linked document </p>
<pre><a> href="https://www.w3schools.com/" <b>target="_blank" </b>>Visit W3Schools!</a></pre>
<ul>
<li>_self - Default opens the document in the same window</li>
<li>_blank - Opens the document in a new window or tab</li>
<li>_parent - Opens the document in the parent frame</li>
<li>_top - Opens the document in the full body of the window</li>
</ul>
<!-- Image -->
<p> <b> <img> </b> is used to display images in the web page</p>
<img src="https://avatars.githubusercontent.com/u/73980589?v=4" width="100" height="100" alt="Thirumalai"></img>
<p>
<pre> <b> <img src="https://avatars.githubusercontent.com/u/73980589?v=4" width="100" height="100" alt="Thirumalai"> </b> </pre>
</p>
<hr>
<p>
<h3>Headings - 6 Types</h3>
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
<p>
<h3>Text Formatting Elements </h3>
</p>
<p>
<ul>
<li><b><b> - Bold Text</b></li>
<li><strong><strong> - Important Text</strong></li>
<li><i><b><i></b> - Italics Text</i></li>
<li><u><b><u></b> - Underlined Text</u></li>
<li><em><b><em></b> - Emphasized Text</em></li>
<li><mark><b><mark></b> - Marked Text</mark></li>
<li><small><b><small></b> - Smaller Text</small></li>
<li><ins><b><ins></b> - Inserted Text</ins></li>
<li><b><sup></b><sup> - Superscript Text</sup></li>
<li><b><sub></b><sub> - Subscript Text</sub></li>
<li>
<pre><b><pre></b> - Preformatted Text It is rendered as the same format as you have entered ( No trimming )</pre>
</li>
</ul>
</p>
<hr>
<h3>Quotations</h3>
<p>
<li><b><abbr></b> - <abbr title="World Health Organization">WHO</abbr> hover the text to see the full form
</li>
<br>
<li><b><address></b>
<blockquote>
<address>
<br>
Written by Elon Musk.
<br>
Visit us at:<br>
https://www.tesla.com/
abcd
<br>
USA
</address>
</blockquote>
</li>
<br>
<li><b><cite></b> - <cite>Learn HTML</cite> is the title of this page. It defines the title of the work.
</li>
<br>
<li><b><blockquote></b> - It defines a section that is quoted from another source
<blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, architecto vitae laboriosam itaque dolorum
odio similique sed debitis non qui dolore incidunt quibusdam optio dignissimos minus amet ipsam omnis,
eveniet corrupti, aperiam ipsum. Iure adipisci laborum, aut eius nisi magni enim voluptas iste quisquam
perferendis explicabo, atque itaque.
</blockquote>
</li>
<li><b><bdo></b>Bi-directional Override. It overrides the text direction.
<br>
<!-- dir
rtl - right to left
ltr - left to right
-->
<blockquote>
<bdo dir="rtl">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, labore!
</bdo>
</blockquote>
</li>
</p>
<hr>
<h3>Favicon</h3>
<p>A favicon is a small icon ( image ) that is displayed next to the title of the webpage.</p>
<pre>
<link rel="icon" type="image/x-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2048px-HTML5_logo_and_wordmark.svg.png">
</pre>
<hr>
<h3>Tables</h3>
<!-- Table Tag -->
<table border="1px">
<!-- Defines the table caption <caption> -->
<caption style="text-align: center;">STUDENT TABLE</caption>
<!-- Create a row in the table <tr> -->
<tr>
<!-- Headings of the column <th> -->
<th>SNO</th>
<th>NAME</th>
<th>PHONENUM</th>
<th>ADDRESS</th>
<th>TOTAL MARKS</th>
</tr>
<!-- Contents of the table <tbody> -->
<tbody>
<tr>
<!-- Content of the cell <td> -->
<td>1</td>
<td>BILL GATES</td>
<td>9123456789</td>
<td>ABC, XYZ</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>ELON MUSK</td>
<td>9123456789</td>
<td>DEF, GHI</td>
<td>100</td>
</tr>
</tbody>
<!-- Summarized content <tfoot> -->
<tfoot>
<tr>
<!-- Colspan and rowspan are used to combine multiple cols or rows together. It is an attribute of tr or td tags -->
<td colspan="4">TOTAL MARKS SCORED</td>
<td>200</td>
</tr>
</tfoot>
</table>
<pre>
<code>
<table border="1px">
<caption style="text-align: center;">STUDENT TABLE</caption>
<tr>
<th>SNO</th>
<th>NAME</th>
<th>PHONENUM</th>
<th>ADDRESS</th>
<th>TOTAL MARKS</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>BILL GATES</td>
<td>9123456789</td>
<td>ABC, XYZ</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>ELON MUSK</td>
<td>9123456789</td>
<td>DEF, GHI</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">TOTAL MARKS SCORED</td>
<td>200</td>
</tr>
</tfoot>
</table>
</code>
</pre>
<hr>
<h3>Lists</h3>
<p>Various types of lists</p>
<p>
<ol>
<li>Ordered List - 1, I, i, A, a</li>
</ol>
<ul>
<li>Unordered List - Shapes</li>
</ul>
<ol>
<li>Description List</li>
</ol>
</p>
<b>
<p>Ordered List</p>
</b>
<ol type="A">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ol>
<pre>
<code>
<ol type="A">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ol>
</code>
</pre>
<b>
<p>Unordered List</p>
</b>
<ul type="circle">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>
<pre>
<code>
<ul type="circle">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>
</code>
</pre>
<b>
<p>Description List</p>
</b>
<!-- Defines a Description List -->
<dl>
<!-- Defines a Description Term -->
<dt>Batman</dt>
<!-- Describes the Description Term -->
<dd> - DC Movie</dd>
<dt>Iron man</dt>
<dd> - Marvel Movie</dd>
</dl>
<pre>
<code>
<dl>
<dt>Batman</dt>
<dd> - DC Movie</dd>
<dt>Iron man</dt>
<dd> - Marvel Movie</dd>
</dl>
</code>
</pre>
<hr>
<h3>HTML Block And Inline Elements</h3>
<p>
<ul>
<li><cite>Block Elements</cite> starts on a new line with some margin</li>
<li><cite>Inline Elements</cite> does not start on a new line and continues in the same line</li>
</ul>
</p>
<p><b>Block Elements</b></p>
<pre>
<code>
<address> <article> <aside> <blockquote> <canvas> <dd> <dl> <dt> <div>
<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr>
<li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
</code>
</pre>
<p><b>Inline Elements</b></p>
<pre>
<code>
<a> <abbr> <b> <bdo> <br> <button> <cite> <code> <dfn> <em> <i> <u>
<img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select>
<small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
</code>
</pre>
<hr>
<h3>Iframes</h3>
<p>iframes is used to display a webpage within a web page</p>
<iframe src="index.html" width="100%" height="360px" title="This page"></iframe>
<pre>
<code>
<iframe src="index.html" width="80%" height="360px" title="Learn HTML"></iframe>
</code>
</pre>
<hr>
<h3>
Computer Code Elements
</h3>
<p>
<pre>
<b>code</b> - Defines a piece of computer code
<code>
x = 6;
y = 6;
z = x + y;
</code>
</pre>
<pre>
<b>kdb</b> - Defines keyboard input
Press <kbd>Ctrl + S</kbd> to save the content
</pre>
<pre>
<b>samp</b> - Defines a sample output from a computer program
<samp>Cannot locate the file. Please make sure it is available</samp>
</pre>
<pre>
<b>pre</b> - Preformatted Text It is rendered as the same format as you have entered ( No trimming )
</pre>
</p>
<hr>
<h3>Sections</h3>
<p>Sections divided the content into separate paragraphs. It groups related content together like Introduction,
Chapters, etc.</p>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ea modi sint, eveniet tenetur
voluptatum aspernatur aut a commodi velit veritatis pariatur adipisci harum sequi possimus est? Voluptas,
corporis eaque fugiat sint veniam porro maxime dignissimos, dolore fuga vel quia molestias possimus eveniet
minima accusantium ad, quos quae! Quaerat, praesentium?</section>
<br>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam odio illo provident ab, minima accusamus
fuga dignissimos molestiae incidunt at vitae libero dolores quasi reprehenderit maiores! Adipisci iusto
provident quos ut, ratione aliquid amet commodi voluptatum obcaecati quis et reprehenderit soluta ducimus
dignissimos, error voluptates magnam eligendi nisi libero sequi.</section>
<pre>
<code>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, ad.</section>
</code>
</pre>
<hr>
<h3>Article</h3>
<p>Article tag specifies independent, self-contained content. It is more commonly used in blog posts, article, forum
post,news story and comments.</p>
<article>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea magni alias ratione culpa nesciunt sed
laudantium ipsam obcaecati consequatur, aliquid hic cum doloribus illum perferendis, numquam quidem non!
Obcaecati doloremque quia distinctio commodi sed atque, quo animi cum vitae autem voluptatum quos quas repellat
odio cupiditate. Voluptates, officia? Odio, voluptatum.</article>
<br>
<article>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, ullam accusantium. Sit sint accusamus,
fugiat ipsam omnis numquam porro ea! Autem excepturi exercitationem eveniet dignissimos aliquid, rerum molestias
ut non, praesentium corrupti aliquam tempore at odio beatae optio quis hic. Consectetur porro doloribus sint
nulla, recusandae tempore libero voluptas pariatur!</article>
<pre>
<code>
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit, voluptate.</article>
</code>
</pre>
<hr>
<h3>Aside</h3>
<p>Aside </p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, aspernatur accusamus itaque magnam, nostrum
debitis ipsa sit amet similique veritatis iusto sunt iure, delectus veniam animi eveniet harum impedit
voluptatem repellendus eaque velit provident. Itaque illo asperiores animi dolores autem a! Odit, quas nostrum
culpa minima voluptates mollitia suscipit velit.
</p>
<b>
<aside style="width: 20%; padding-left: 15px; margin-left: 15px; float: right;">ASIDE Content - Lorem ipsum
dolor sit amet consectetur adipisicing elit. Accusantium, quidem?</aside>
</b>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis, nulla iste consectetur provident voluptate
aliquam corrupti asperiores totam iure molestiae et magnam animi assumenda, ab enim eos nostrum sunt! Aliquam
sed saepe et ducimus eaque labore, possimus quos iste quas commodi quod corporis architecto odit. Laudantium
quis distinctio perferendis eveniet?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque officia laudantium aspernatur vero quo ipsa
reprehenderit pariatur fugit et? Sed, cupiditate ipsum assumenda dignissimos dolorum vitae. Magni blanditiis
saepe asperiores molestias incidunt velit pariatur dolore modi hic nisi ducimus animi voluptatem libero
similique perferendis, aperiam quia quod eum ipsum obcaecati.</p>
<hr>
<h3>Forms</h3>
<p>A HTML Form is used to collect user input. The user input is sent to the server for processing.</p>
<form action="#" method="POST">
<label for="name">Name:
<input type="name" name="name" id="name">
</label>
<br>
<br>
<label for="phonenum">Phone Number:
<input type="text" name="phonenum" id="phonenum">
</label>
<br>
<br>
<label for="address">Address:
<br>
<textarea rows="10" cols="20" id="address">
</textarea>
<br>
<label for="gender">Gender:
<label for="male">Male</label><input type="radio" name="gender" id="male" checked>
<label for="female">Female</label><input type="radio" name="gender" id="female">
</label>
<br>
<br>
<label for="Favourite Characters">Choose your favourite characters</label>
<br>
<input type="checkbox" name="character" id="superman">Superman
<br>
<input type="checkbox" name="character" id="spiderman">Spider man
<br>
<input type="checkbox" name="character" id="batman">Bat man
<br>
<input type="checkbox" name="character" id="ironman">Iron man
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
<pre>
<code>
<form action="#" method="POST">
<label for="name">Name:
<input type="name" name="name" id="name">
</label>
<br>
<br>
<label for="phonenum">Phone Number:
<input type="text" name="phonenum" id="phonenum">
</label>
<br>
<br>
<label for="address">Address:
<br>
<textarea rows="10" cols="20" id="address">
</textarea>
<br>
<label for="gender">Gender:
<label for="male">Male</label><input type="radio" name="gender" id="male" checked>
<label for="female">Female</label><input type="radio" name="gender" id="female">
</label>
<br>
<br>
<label for="Favourite Characters">Choose your favourite characters</label>
<br>
<input type="checkbox" name="character" id="superman">Superman
<br>
<input type="checkbox" name="character" id="spiderman">Spider man
<br>
<input type="checkbox" name="character" id="batman">Bat man
<br>
<input type="checkbox" name="character" id="ironman">Iron man
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
</code>
</pre>
<hr>
</body>
</html>