This repository was archived by the owner on Nov 21, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml-cheatsheet.html
More file actions
638 lines (546 loc) · 27.2 KB
/
html-cheatsheet.html
File metadata and controls
638 lines (546 loc) · 27.2 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
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
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
<html>
<head>
<!--Start of Title-->
<title>
HTML Cheatsheet
</title>
<!--End of Title-->
<!--Start of Meta-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--End of Meta-->
<!--Start of CSS Connection-->
<link type="text/css" rel="stylesheet" href="css/global.css"><!--css in every file-->
<link type="text/css" rel="stylesheet" href="css/code-options.css"><!--css in the cheatsheet files-->
<link text="text/css" rel="stylesheet" href="css/html-cheatsheet.css"><!--css in just the html cheatsheet file-->
<!--End of CSS Connection-->
<!--Start JS Connection-->
<script src="js/popup.js"></script>
<!--End JS Connection-->
</head>
<body>
<!--Figure out how to do a top menu bar properly-->
<!--Start Title Heading-->
<h1 class="title">
HTML Cheatsheet
</h1>
<!--End Title Heading-->
<div class="main">
<!--Start Introduction-->
<p>
Hypertext Markup Lanaguage or <span class="lantext">HTML</span> is a language used to code websites (this website was even coded in HTML). HTML was invented in 1993. Files written in HTML use <span class="lantext">.html</span> file indicator.
This is one of the languages in the web 3 lanaguages. The other two are
<span class="lantext">Cascading Stylesheets</span> (or
<span class="ib">CSS</span>) and <span class="lantext">JavaScript</span> (or <span class="bold">JS</span>)
<br>
<br> <span class="bold"> NOTE: MAJORITY OF THE COMMAND WILL HAVE
<span class="codetext"> </></span> CONTAINED IN IT!</span> Will say if a command is an exception to this rule. Every command (or
<span class="italic">tag</span>) listed in this page will be written between <span class="codetext"><html></span> and
<span class="codetext"></html></span>.
</p>
<!--End of Introduction-->
</div>
<!--Start Nagivation Sidebar-->
<div class="sidenav">
<!--Start Logo-->
<br> <!--Makes it look a bit nicer on webpage-->
<h1>
<a id="cs" href="homepage.html"><span id="c">Coding</span><span id="s">Sheets</span></a>
</h1>
<!--End Logo-->
<!--Start Cheatsheet Dropdown-->
<div class="dropdown">
<!--The Button's color is done in the css file linked to this one, in this file it is called 'template.css'-->
<button class="dropbtn">Cheatsheets</button> <!--Cheatsheet dropdown button-->
<!--Start Dropdown content-->
<div class="dropdown-content"> <!--Breaks if called anything other than 'dropdown-content'-->
<a href="css-cheatsheet.html">CSS</a>
<a href="js-cheatsheet.html">JS</a>
<a href="md-cheatsheet.html">Markdown</a>
<a href="python-cheatsheet.html">Python</a>
</div>
<!--End Dropdown Conent-->
</div>
<!--End Cheatsheet Dropdown-->
<!--Start Sections-->
<h2>
<span class="bold">Sections</span>
</h2>
<!--Start Nagivation Table-->
<nav id="sidetable">
<a class="link" href="#keyterms">Key Terms</a>
<br> <!--for placement on webpage-->
<div class="cheat_drop">
<a class="link" href="#cheatsheet">Cheatsheet</a>
<!--Start Cheatsheet Dropdown-->
<br> <!--Temporary element-->
<!--Temporary element-->
<a class="link" href="#structure">Structure Tags</a>
<!--Start Head Sub-Section-->
<div class="head_drop">
<!--Temporary element-->
<a class="link" href="#head">Head Tags</a>
<!--Start Head Content-->
<div class="head_content">
<!--Temporary element-->
<!--Temporary element-->
<a class="link" href="#head_text">Head Text Tags</a>
<br> <!--Temporary element-->
<!--Temporary element-->
<!--Temporary element-->
<a class="link" href="#file">File Tags</a>
</div>
<!--End Head Content-->
</div>
<!--End Head Sub-Table-->
<!--Start Body Dropdown-->
<div class="body_drop">
<a class="link" href="#body">Body Tags</a>
<!--Start Body Content-->
<div class="body_content">
<!--Temporary element-->
<!--Temporary element-->
<a class="link" href="#attribute">Attribute Tags</a>
<br> <!--Temporary elemen-->
<!--Temporary element-->
<!--Temporary element-->
<a class="link" href="#container">Container Tags</a>
<br> <!--Temporary element-->
<!--Temporary element-->
<!--Temporary element-->
<a hreaf="#text">Body Text Tags</a>
</div>
<!--End Body Content-->
</div>
<!--End Body Dropdown-->
</div>
<!--End Cheatsheet Dropdown-->
</nav>
<!--End Navigation Table-->
</div>
<!--End Nagivation Sidebar-->
<!--Start of Key Terms-->
<h2 id="keyterms">
Key Terms
</h2>
<div class="main">
<!--Start Key Intro-->
<p>
Before getting into the actual tags, let's get some terms defined that will be used.
</p>
<!--End Key Intro-->
<!--Start of Key Terms Table-->
<div class="tables">
<ul>
<!--Start Tag Term-->
<li>
<span class="bold">Tags</span>
<br> In coding, tags are what is put between <span class="commandtext"><</span> and <span class="commandtext">></span>.
</li>
<!--End Tag Term-->
<!--Start Attribute Term-->
<li>
<span class="bold">Attributes</span>
<br> Attributes are additions to tags. This can have a word tied to a <span class="lantext">css</span> file or to a <span class="lantext">js</span> file.
It also can mean linking a word to a website url. These will be discussed in [insert section name]. This is explained more in
<a class="link" href="#attribute">Attributes</a>.
</li>
<!--End Attribute Term-->
<!--Start Block-Level Term-->
<li>
<span class="bold">Block-Level</span> Code that is using another file to define a command. An example
would be like <span> for using css in an html document.
<br> <span class="bold">NOTE: USING THIS NEEDS A CSS OR JS
FILE TO BE LINKED TO!</span>
<br>The ways to link those files will be explained in the
<span class="codetext"><link></span> tag below.
</li>
<!--End Block-Level Term-->
<!--Start In-Line Term-->
<li>
<span class="bold">In-Line</span> is code that is used for another language but is still in the same file (lke having <span class="lantext">CSS</span> in an
<span class="codetext">html</span> file.)
</li>
<!--End In-Line Term-->
</ul>
</div>
<!--End of Key Terms Table-->
</div>
<!--End of Key Terms-->
<!--Start Cheatsheet-->
<h2 id="cheatsheet">
Cheatsheet
</h2>
<div class="main">
<!--Start of Section Description-->
<p>
The Cheat Sheet is here to help you find the tag or attribute that you're looking for.
</p>
<!--End of Section Description-->
</div>
<!--Start of Structure Tags-->
<h3 id="structure">
Structure Tags
</h3>
<div class="main">
<p>
Structure tags are used to define areas which other tags can appear on the page.
</p>
<!--Start of Structure Tags Table-->
<div class="tables">
<ul>
<li>
<span class="codetext"--><head></span> is used for define tags that aren't on the main portion (or <span class="bold">body</span>) of the page.
</li>
<li>
<span class="codetext"><body></span> is used to define tags in the body portion of the page.
<br> This tag is the most common out of the three tags.
</li>
<li>
<span class="codetext"><footer></span> is used to define tags in the footer portion of the page. With it being uncommon to use, it can be used to
have buttons in the bottom section of the page.
<br>This tag is also able to be put under <span class="codetext"><body></span> as well as being below the <span class="bold">body</span>.
</li>
</ul>
</div>
<!--End of Structure Tags Table-->
</div>
<!--End of Structure Tags-->
<!--Start of Head Tags-->
<h3 id="head">
Head Tags
</h3>
<div class="main">
<!--Start Head Tag Intro-->
<p>
These are tags used to input text on things like the webpage, put<span class="lantext">CSS</span> or <span class="lantext"> onto the HTML file, or connect a
<span class="lantext">CSS</span> or <span class="lantext">JS</span> file to the <span class="lantext">HTML</span> file.
</p>
<!--End Head Tag Intro-->
</div>
<!--Start of Head Text Tags-->
<h4 id="head_text">
Head Text Tags
</h4>
<div class="main">
<div class="tables">
<ul>
<li>
<span class="codetext"><title></span> is used to have text appear in the web browser tab.
</li>
</ul>
</div>
<!--End of Head Text Tags-->
</div>
<!--Start of File Tags-->
<h4 id="file">
File Tags
</h4>
<div class="main">
<!--Start of File Table-->
<div class="tables">
<ul>
<li>
<span class="codetext"><style></span> is used to have
<span class="lantext">css</span> code in an html file.
<br> (This is only used for in-line <span class="lantext">CSS</span> code.)
</li>
<li>
<span class="codetext"><script></span> is used to have
<span class="lantext">JavaScript</span> in an htmlfile.
<br> (This is used for in-line and block-level JavaScript code.)
</li>
<!--Start Script SUb-Table-->
<ul>
<li>
<span class="codetext"><script src="myjavascript.js"> </script></span> (<span class="bold">NOTE:
<span class="codetext"></script></span> is required to be used) is often used for block-level JavaScript. It can also have the additional
attribute of <span class="commandtext">type="text/javascript"</span>.
</span>
</li>
<li>
<span class="codetext"><link></span> is used to link a file to your
<span class="lantext">html</span> file.
<br><span class="bold">You wouldn't use <span class="codetext"></link></span> at all for this.</span>
</li>
<ul>
<li>
<span class="commandtext"><span class="codetext"><link</span> type="text/css" rel="stylesheet" href="css/style.css"> </span> is used to link
an external <span class="lantext">css</span> file to your <span class="lantext">html</span> file. You should have a separate folder labeled
<span class="italic">css</span>
<br> <span class="bold">NOTE: in <span class="commandtext">href="css/style.css"</span>, the <span class="commandtext">style.css</span> would be
changed to the name of your CSS file. </span>
</li>
</ul>
</ul>
<!--End Script Sub-Table-->
</div>
<!--End of File Table-->
</div>
<!--End of Head Tags-->
<!--Start of Body Tags-->
<h3 id="body">
Body Tags
</h3>
<!--Start of Attributes-->
<h4 id="attribute">
Attributes
</h4>
<div class="main">
<!--Start Attribute Intro-->
<p>
Attributes are things that can be added to tags. These can often be found with <span class="codetext"><div></span>, <span class="codetext"><span></span>,
and <span class="codetext"><a></span>. Though attributes are not just limited to those tags, attributes can be on any tag, like <span class="codetext"><h1></span>, <span class="codetext"><p></span>, and other similar tags.
<br> All of attributes will be on a tag and will be followed by <span class="bold">" "</span>.
</p>
<!--End Attribute Intro-->
<!--Start of Attributes Table-->
<div class="tables">
<ul>
<li>
<span class="commandtext">id</span> is used if a tag will be different and <span class="ib">only used once</span> in a file. This is often used for CSS.
<br>This only is only one time <span class="italic">per</span> file. it will be typed as <span class="commandtext">id=" "</span>, inside the quotation marks
(" ") will have the name you want to identify the tag as.
<br><span class="bold">THIS TAG IS NEED IF YOU ARE DOING LINKING TO HEADINGS! The
</li>
<li>
<span class="commandtext">class</span> is similar to to <span class="commandtext">id</span> but can be used multiple times in a file. This will typed as
<span class="commandtext">class=" "</span>, and just like <span class="commandtext">id</span>, <span class="bold">class</span> will have what you want to
identify the class as between the quotation marks (" ").
</li>
<li>
<span class="commandtext">href</span> is used for linking files, pages, or headings.
</li>
</ul>
</div>
<!--End of Attributes Table-->
</div>
<!--End of Attributes-->
<!--Start of Grouping Tags-->
<h4 id="container">
Container Tags
</h4>
<div class="main">
<!--Start Container Intro-->
<p>
Container tags are tags that you can use for connecting specific sections to <span class="lantext">CSS</span> code. You will often see these tags for specific areas like sidebars, bolded words (unless it uses the <span class="lantext">HTML</span> method, which is talked about in the <a class="link" href="#text">Text Tags</a> section), change in text color, font family (like <span class="bold">Arial</span>, <span class="bold">Times New Roman</span>, and <span class="bold">Roboto</span>), and many other changes in text. See <a class="link" href="css-cheatsheet.html">CSS Cheatsheet</a> for what these changes are.
</p>
<!--End Container Intro-->
<!--Start Container Table-->
<div class="tables">
<ul>
<!--Start Span-->
<li>
<span class="codetext"><span></span> is used to identify what text in you <span class="lantext">html</span> file that you want a css tag applied to.
</li>
<!--Start Span Sub Section-->
<ul>
<li>
<span class="commandtext"><span class="codetext"><span</span> class="text">
</span> is used to have text style that would be repeated in the <span class="lantext">html</span> represented. Like <span class="bold">bold</span> or <span class="italic">italics</span>
</li>
</ul>
<!--End Span Sub-Section-->
<li>
<span class="codetext"><div></span> is used for major and/or broad changes like layout, grouping sections, and scripting.
<br>Scripting with <span class="codetext"><div></span> is often done for dynamic elements, which often uses <span class="lantext">JavaScript</span>
</li>
</ul>
</div>
<!--End Container Table-->
<p>
If you are just starting out with using HTML, I would recommend heading to
<a id="w3" href="https://w3schools.com/">w3schools</a> or taking a web programming course at your school (if it has it available).
</p>
</div>
<!--End Group Tags-->
<!--Start of Text Tags-->
<h4 id="text">
Text Tags
</h4>
<div class="main">
<!--Start Text Intro-->
<p>
With the structure tags being defined, lets move to the tags that can be used to have text contained in them. This list will include some tags that can be used to
add various changes to the text.
</p>
<!--End Text Intro-->
<!--Start Text Table-->
<div class="tables">
<ul>
<li>
<span class="codetext"><h[#]></span> is used to make header text.
<br><span class="bold">The heading font sizes in the sub-table below (<span class="codetext">h1</span> to <span class="codetext">h6</span>) are listed with their fonts on a 1920 pixel by 1080 pixel (1080p or a <span class="italic">Full HD</span>) computer monitor)</span>.
<br> The <span class="bold">px</span> next to the font sizes stands for <span class="italic">pixel(s)</span>.
</li>
<!--Start of Headings Sub Table-->
<ul>
<!--Start of H1-->
<li>
<span class="codetext"><h1></span> is used to make a Heading 1. This heading is 32px big.
</li>
<!--End of H1-->
<li>
<span class="codetext"><h2></span> is used to make Heading 2. This heading is 24px big.
</li>
</ul>
<!--End of Headings Sub Table-->
<li>
<span class="codetext"><p></span> is used to make standard text. The most common tag to find on any website for text.
<br> The <span class="bold">p</span> stands for
<span class="italics">paragraph</span>.
</li>
<li>
<span class="codetext"><br></span> is used to add line break to your text (like in <span class="codetext"><p></span>).
<span class="bold">You won't have
<span class="codetext"></br></span> used
your document.</span>
</li>
<p>
<span class="bold">THE NEXT TAGS ARE CAN ALSO BE DONE
IN A <a class="link" href="css-cheatsheet.html" class="link">CSS</a> FILE</span>
</p>
<li>
<span class="codetext"><b></span> is used to
<span class="italic">bold</span> text.
</li>
<!--Start Bold Sub-Table-->
<ul>
<li>
<span class="codetext"><strong></span> is also used to bold text.
</li>
</ul>
<!--End Bold Sub-Table-->
<li>
<span class="codetext"><i></span> is used to italize text.
</li>
<!--Start Italic Sub-Table-->
<ul>
<li>
<span class="codetext"><em></span> is also used to italize text
</li>
</ul>
<!--End Italic Sub-Table-->
<li>
<span class="codetext"><a></span> is used for linking a word to a website, file, and/or heading (you can only combine file and heading).
<br>Though this does require you to use have it typed as <span class="codetext"><a
<span class="commandtext">href="[url, file path, and/or heading]"</span>></span>.
</li>
<ul>
<li>
For linking to headings you will have to have the heading with <span class="codetext"><a
<span class="commandtext">href="#[heading name]"</span>></span>
</li>
</ul>
</ul>
</div>
<!--End Text Table-->
</div>
<!--End Text Tags-->
<!--Start List Tags-->
<div id="list"> <!--Used to group this section as list-->
<h4 id="list">
List Tags
</h4>
<!--Start List Body-->
<div class="main">
<!--Start List Intro-->
<p>
Lists are used to organize specific section on a webpage.
</p>
<!--End List Intro-->
</div>
<!--End List Body-->
<!--Start List Types-->
<h5 id="list_types">
List Type tags
</h5>
<!--Start List Types Body-->
<div class="main">
<!--Start Types Intro-->
<p>
</p>
<!--End Types Intro-->
<!--Start List Table-->
<div class="tables">
<ul>
<li>
<span class="codetext"><ul></span> is used to make a bullet-point list.
</li>
<li>
<span class="codetext"><ol></span> is used to make a number list.
</li>
</ul>
</div>
<!--End List Table-->
</div>
<!--End List Types Body-->
<h5 id="point">
Point Tags
</h5>
<!--Start Point Body-->
<div class="main">
<!--Start Point Intro-->
<p>
Pointer tags are used for the various points in a list, the points being the number of bullet.
</p>
<!--Start Point Table-->
<div class="tables">
<ul>
<li>
<span class="codetext"><li></span> is used to make the bullets/numbers in a list.
<br>This tag will be between either the <span class="codetext"><ul></span> and <span class="codetext"></ul></span> or <span class="coodetext"><ol></span> and
<span class="codetext"></ol></span>.
</li>
</ul>
</div>
<!--End Point Table-->
</div>
<!--End List Body-->
</div>
<!--End List-->
<!--Start Form Tags-->
<h4 id="form">
Form Tags
</h4>
<div class="main">
<!--Start Form Intro-->
<p>
The form tags are used if you are making a form that is specifically talored For
your site, though you could use sites like
<a class="link" href="https://docs.google.com/forms">Google Forms</a> instead.
</p>
<!--End Form Intro-->
<div class="tables">
<ul>
<li>
<span class="codetext"><form></span> is used to declare a form section.
<br>Go to <a class="link" href="#form_attri">Form Attributes</a>
</div>
<!--End Form Tags-->
<!--Start Form Attributes-->
<h5 id="form_attri">
Form Tag attributes
</h5>
<div class="main">
<!--Start Form Attribute Introduction-->
<p>
</p>
<!--End Form Attribute Introduction-->
</div>
<!--End Form Attributes-->
<!--End Cheatsheet-->
<!--Start of Footer-->
<footer>
<h4 id="legal">
Legal Notice
</h4>
<div class="main">
<p>
<span class="bold">CodingSheets</span> is an open-sourced site and is using the <a class="link" href="https://opensource.org/license/mit/">MIT Open-Source License</a>. You can find the source code at the <a class="link" href="<!--CodingSheets GitHub Link-->">CodingSheets GitHub</a>.
<br>For the extent of what this entails, see the <a class="link" href="LICENSE.txt" download="LICENSE.txt">License</a>.
</p>
</footer>
<!--End of Footer-->
</body>
</html>