-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path2021-03-13_Super-Simple-Intro-To-HTML-651d695f9bc.html
More file actions
453 lines (450 loc) · 36.9 KB
/
2021-03-13_Super-Simple-Intro-To-HTML-651d695f9bc.html
File metadata and controls
453 lines (450 loc) · 36.9 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Super Simple Intro To HTML</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<article class="h-entry">
<header>
<h1 class="p-name">Super Simple Intro To HTML</h1>
</header>
<section data-field="subtitle" class="p-summary">
What is HTML, CSS & JS and why do we need all three?
</section>
<section data-field="body" class="e-content">
<section name="0c06" class="section section--body section--first">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="917a" id="917a" class="graf graf--h3 graf--leading graf--title">Super Simple Intro To HTML</h3>
<h4 name="e447" id="e447" class="graf graf--h4 graf-after--h3 graf--subtitle">What is HTML, CSS & JS
and why do we need all three?</h4>
<figure name="b1fd" id="b1fd" class="graf graf--figure graf-after--h4"><img class="graf-image"
data-image-id="0*KxF-AuqgX7UklUa4.png" data-width="1600" data-height="1200"
src="https://cdn-images-1.medium.com/max/800/0*KxF-AuqgX7UklUa4.png"></figure>
<p name="f3c3" id="f3c3" class="graf graf--p graf-after--figure">HTML stands for “Hypertext Markup
Language”. Basically, HTML is the structure for the website, words, bullet points, data tables, etc. CSS
stands for “Cascading Style Sheets” which means it’s the “Style” it’s how to make your website look
professional, and look visually appealing. JS is how to make your website actually **work**.</p>
<p name="f551" id="f551" class="graf graf--p graf-after--p">For example, if you created something like
YouTube and one of the options you can watch videos, you used HTML for the title, you used CSS for the
color/s, and you have to make it actually work! So when you click on it it will run the video. This is
an example of the three programming languages working in unison to form an experience you’re already
familiar with if you’re reading this…</p>
<p name="5c01" id="5c01" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">I mean most likely… unless you printed it because you hate
trees.</strong></p>
<p name="4461" id="4461" class="graf graf--p graf-after--p">— — — — — — — — — — -</p>
<h3 name="fe7a" id="fe7a" class="graf graf--h3 graf-after--p">What are Tags and Attributes?</h3>
<p name="5492" id="5492" class="graf graf--p graf-after--h3">Tags and attributes are the basis of HTML.
</p>
<p name="3e08" id="3e08" class="graf graf--p graf-after--p">They work together but perform different
functions — it is worth investing 2 minutes in <strong
class="markup--strong markup--p-strong">differentiating the two</strong>.</p>
<h4 name="78a3" id="78a3" class="graf graf--h4 graf-after--p">What Are HTML Tags?</h4>
<p name="b6b8" id="b6b8" class="graf graf--p graf-after--h4"><a href="https://html.com/tags/"
data-href="https://html.com/tags/" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">Tags</a> are used to <strong class="markup--strong markup--p-strong">mark up the start
of an HTML element</strong> and they are usually enclosed in angle brackets. An example of a tag is:
<code class="markup--code markup--p-code"><h1></code>.</p>
<p name="9577" id="9577" class="graf graf--p graf-after--p">Most tags must be opened <code
class="markup--code markup--p-code"><h1></code> and closed <code
class="markup--code markup--p-code"></h1></code> in order to function.</p>
<h4 name="fea6" id="fea6" class="graf graf--h4 graf-after--p">What are HTML Attributes?</h4>
<p name="0eac" id="0eac" class="graf graf--p graf-after--h4"><a href="https://html.com/attributes/"
data-href="https://html.com/attributes/" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">Attributes</a> contain <strong class="markup--strong markup--p-strong">additional
pieces of information</strong>. Attributes take the form of an opening tag and additional info is
<strong class="markup--strong markup--p-strong">placed inside</strong>.</p>
<p name="47a2" id="47a2" class="graf graf--p graf-after--p">An example of an attribute is:</p>
<p name="8a09" id="8a09" class="graf graf--p graf-after--p"><code
class="markup--code markup--p-code"><img src="mydog.jpg" alt="A photo of my
dog."></code></p>
<p name="1131" id="1131" class="graf graf--p graf-after--p">In this instance, the image source (src) and
the alt text (alt) are attributes of the <code class="markup--code markup--p-code"><img></code>
tag.</p>
<h4 name="09ed" id="09ed" class="graf graf--h4 graf-after--p">Golden Rules To Remember</h4>
<ol class="postList">
<li name="e12a" id="e12a" class="graf graf--li graf-after--h4">The vast majority of tags must be <strong
class="markup--strong markup--li-strong">opened</strong> (<code
class="markup--code markup--li-code"><tag></code>) and <strong
class="markup--strong markup--li-strong">closed</strong> (<code
class="markup--code markup--li-code"></tag></code>) with the element information such as a
title or text resting between the tags.</li>
<li name="c99f" id="c99f" class="graf graf--li graf-after--li">When using multiple tags, the tags must
be <strong class="markup--strong markup--li-strong">closed in the order in which they were
opened</strong>. For example:</li>
<li name="9eb5" id="9eb5" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong><em>This is really
important!</em></strong></code></li>
</ol>
<p name="c657" id="c657" class="graf graf--p graf-after--li">Let’s have a look at how CodePen works,
firstly, you need to go to their website. After that, you must create an account. After you do that, You
will see something like this</p>
</div>
<div class="section-inner sectionLayout--outsetColumn">
<figure name="1a50" id="1a50"
class="graf graf--figure graf--iframe graf--layoutOutsetCenter graf-after--p"><iframe
src="https://codepen.io/bgoonz/embed/preview/XWNOExd?height=600&slug-hash=XWNOExd&default-tabs=css,result&host=https://codepen.io"
width="1192" height="894" frameborder="0" scrolling="no"></iframe></figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<h3 name="046b" id="046b" class="graf graf--h3 graf-after--figure">How to get started</h3>
<p name="f668" id="f668" class="graf graf--p graf-after--h3">If you’re using Visual Studio Code, congrats!
There is Emmet support built into VSCode, so you won’t need to install any extensions. If you’re working
in Atom you’ll need to install the Emmet plugin, which can be <a href="https://atom.io/packages/emmet"
data-href="https://atom.io/packages/emmet" class="markup--anchor markup--p-anchor"
rel="noopener nofollow noopener" target="_blank">found here</a>.</p>
<h3 name="4d12" id="4d12" class="graf graf--h3 graf-after--p">Basic Syntax</h3>
<p name="e314" id="e314" class="graf graf--p graf-after--h3"><strong
class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">HTML
Boilerplate</em></strong></p>
<p name="6107" id="6107" class="graf graf--p graf-after--p">If you’ve been working in VSCode, you’ve
probably seen Emmet syntax highlighting when working in HTML documents. In my opinion, the most
convenient Emmet shortcut is <strong class="markup--strong markup--p-strong"><em
class="markup--em markup--p-em">html:5</em></strong>. This will create an HTML boilerplate, and fill
out metadata tags in the head of your document.</p>
<pre name="6c6e" id="6c6e"
class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">html:5</strong></pre>
<figure name="d25f" id="d25f" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*oDrxfgtO2WE9_Z6d.png" data-width="1054" data-height="226"
src="https://cdn-images-1.medium.com/max/800/0*oDrxfgtO2WE9_Z6d.png"></figure>
<p name="0dbb" id="0dbb" class="graf graf--p graf-after--figure">Emmet Abbreviation for different HTML
boilerplates.</p>
<p name="74bf" id="74bf" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">When you see the auto complete as pictured above you can hit
tab to auto fill the boilerplate html document.</strong></p>
<p name="3ada" id="3ada" class="graf graf--p graf-after--p">That one small shortcut autogenerates all this
metadata and head and body tags:</p>
<figure name="90f5" id="90f5" class="graf graf--figure graf-after--p"><img class="graf-image"
data-image-id="0*LgiaI-W7QB4mtifR.png" data-width="1238" data-height="504"
src="https://cdn-images-1.medium.com/max/800/0*LgiaI-W7QB4mtifR.png"></figure>
<h4 name="ba38" id="ba38" class="graf graf--h4 graf-after--figure">Here’s some slightly more advanced
boilerplate for you to use as a starting point in your projects.</h4>
<figure name="51f5" id="51f5" class="graf graf--figure graf--iframe graf-after--h4">
<script src="https://gist.github.com/bgoonz/b0aae5c4079596820e37c98265f45539.js"></script>
</figure>
<h3 name="a819" id="a819" class="graf graf--h3 graf-after--figure">HTML Language</h3>
<p name="8afa" id="8afa" class="graf graf--p graf-after--h3"><strong
class="markup--strong markup--p-strong">Chapter 1: Formatting text</strong></p>
<p name="625f" id="625f" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Tags in HTML: </strong>Tags are one of the most important
parts in an HTML document. (We will get to what HTML document is after we know what tags are). HTML uses
some predefined tags which tells the browser about content display property, that is how to display a
particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p>
</p>) and to insert an image one must use the img tags(<img />).</p>
<p name="d27d" id="d27d" class="graf graf--p graf-after--p">There are generally two types of tags in HTML:
</p>
<ol class="postList">
<li name="9de4" id="9de4" class="graf graf--li graf-after--p"><strong
class="markup--strong markup--li-strong">Paired tags:</strong> These tags come in pairs. That is
they have both opening (< >) and closing(</ >) tags.</li>
<li name="4b61" id="4b61" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Singular tags: </strong>These tags do not required to be
closed</li>
</ol>
<blockquote name="4976" id="4976" class="graf graf--blockquote graf-after--li">i.e.</blockquote>
<pre name="a58d" id="a58d"
class="graf graf--pre graf-after--blockquote"><hr> <br><p> The tag above me is a horizontal line that doesn't need a closing tag </p></pre>
<p name="732a" id="732a" class="graf graf--p graf-after--pre">HTML tags have two main types: <strong
class="markup--strong markup--p-strong">block-level</strong> and <strong
class="markup--strong markup--p-strong">inline tags</strong>.</p>
<ol class="postList">
<li name="bd59" id="bd59" class="graf graf--li graf-after--p">Block-level elements take up the full
available space and always start a new line in the document. Headings and paragraphs are a great
example of block tags.</li>
<li name="2479" id="2479" class="graf graf--li graf-after--li">Inline elements only take up as much
space as they need and don’t start a new line on the page. They usually serve to format the inner
contents of block-level elements. Links and emphasized strings are good examples of inline tags.</li>
</ol>
<h3 name="3bf1" id="3bf1" class="graf graf--h3 graf-after--li">Block-Level Tags</h3>
<p name="82c1" id="82c1" class="graf graf--p graf-after--h3">The three block level tags every HTML
document needs to contain are <strong class="markup--strong markup--p-strong"><html></strong>,
<strong class="markup--strong markup--p-strong"><head></strong>, and <strong
class="markup--strong markup--p-strong"><body></strong>.</p>
<ol class="postList">
<li name="bd5d" id="bd5d" class="graf graf--li graf-after--p">The <strong
class="markup--strong markup--li-strong"><html></html></strong> tag is the highest level
element that encloses every HTML page.</li>
<li name="c015" id="c015" class="graf graf--li graf-after--li">The <strong
class="markup--strong markup--li-strong"><head></head></strong> tag holds meta
information such as the page’s title and charset.</li>
<li name="5ca8" id="5ca8" class="graf graf--li graf-after--li">Finally, the <strong
class="markup--strong markup--li-strong"><body></body></strong> tag encloses all the
content that appears on the page.</li>
</ol>
<ul class="postList">
<li name="7864" id="7864" class="graf graf--li graf-after--li">Paragraphs are enclosed by <strong
class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><p></p></em></strong>, while blockquotes use the
<strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><blockquote></blockquote></em></strong> tag.</li>
<li name="82ad" id="82ad" class="graf graf--li graf-after--li">Divisions are bigger content sections
that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements.
We can mark them up using the <strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><div></div></em></strong> tag. A div element can
contain another div tag inside it as well.</li>
<li name="39c6" id="39c6" class="graf graf--li graf-after--li">You may also use <strong
class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><ol></ol></em></strong> tags for ordered lists and
<strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><ul></ul> </em></strong>for unordered ones.
Individual list items must be enclosed by the <strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><li></li></em></strong> tag. For example, this is how
a basic unordered list looks like in HTML:</li>
</ul>
<ol class="postList">
<li name="e470" id="e470" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><ul></strong></li>
<li name="b8c5" id="b8c5" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 1<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="3c1d" id="3c1d" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 2<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="97b4" id="97b4" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 3<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="b59a" id="b59a" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"></ul></strong></li>
</ol>
<h3 name="eb2c" id="eb2c" class="graf graf--h3 graf-after--li"><strong
class="markup--strong markup--h3-strong">Structure of an HTML Document</strong></h3>
<p name="34d2" id="34d2" class="graf graf--p graf-after--h3">An HTML Document is mainly divided into two
parts:</p>
<ul class="postList">
<li name="0424" id="0424" class="graf graf--li graf-after--p"><strong
class="markup--strong markup--li-strong">HEAD</strong>: This contains the information about the HTML
document. For Example, Title of the page, version of HTML, Meta-Data etc.</li>
</ul>
<p name="6a81" id="6a81" class="graf graf--p graf-after--li">HTML TAG Specifies an html document. The HTML
element (or HTML root element) represents the root of an HTML document. All other elements must be
descendants of this element. Since the element is the first in a document, it is called the root
element.</p>
<p name="f8dd" id="f8dd" class="graf graf--p graf-after--p">Although this tag can be implied, or not
required, with HTML, it is required to be opened and closed in XHTML.</p>
<ul class="postList">
<li name="83fe" id="83fe" class="graf graf--li graf-after--p">Divisions are bigger content sections that
typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We
can mark them up using the <strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><div></div></em></strong> tag. A div element can
contain another div tag inside it as well.</li>
<li name="9d53" id="9d53" class="graf graf--li graf-after--li">You may also use <strong
class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><ol></ol></em></strong> tags for ordered lists and
<strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><ul></ul> </em></strong>for unordered ones.
Individual list items must be enclosed by the <strong class="markup--strong markup--li-strong"><em
class="markup--em markup--li-em"><li></li></em></strong> tag. For example, this is how
a basic unordered list looks like in HTML:</li>
</ul>
<ol class="postList">
<li name="4097" id="4097" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><ul></strong></li>
<li name="0103" id="0103" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 1<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="1de2" id="1de2" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 2<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="dad0" id="dad0" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"><li></strong>List item 3<strong
class="markup--strong markup--li-strong"></li></strong></li>
<li name="592f" id="592f" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong"></ul></strong></li>
</ol>
<h3 name="e81f" id="e81f" class="graf graf--h3 graf-after--li">Inline Tags</h3>
<p name="29d9" id="29d9" class="graf graf--p graf-after--h3">Many inline tags are used to format text. For
example, a <strong class="markup--strong markup--p-strong"><strong></strong> </strong>tag
would render an element in <strong class="markup--strong markup--p-strong">bold</strong>, whereas <em
class="markup--em markup--p-em"><em></em> </em>tags would show it in <em
class="markup--em markup--p-em">italics</em>.</p>
<p name="cf64" id="cf64" class="graf graf--p graf-after--p">Hyperlinks are also inline elements that
require <strong class="markup--strong markup--p-strong"><em
class="markup--em markup--p-em"><a></a></em></strong> tags and <strong
class="markup--strong markup--p-strong">href</strong> attributes to indicate the link’s destination:
</p>
<ol class="postList">
<li name="f67d" id="f67d" class="graf graf--li graf-after--p"><strong
class="markup--strong markup--li-strong"><a</strong> <strong
class="markup--strong markup--li-strong">href=</strong>”https://example.com/"<strong
class="markup--strong markup--li-strong">></strong>Click me!<strong
class="markup--strong markup--li-strong"></a></strong></li>
</ol>
<p name="a3a1" id="a3a1" class="graf graf--p graf-after--li">Images are inline elements too. You can add
one using <strong class="markup--strong markup--p-strong"><em
class="markup--em markup--p-em"><img></em></strong> without any closing tag. But you will also
need to use the <strong class="markup--strong markup--p-strong"><em
class="markup--em markup--p-em">src</em></strong> attribute to specify the image path, for example:
</p>
<ol class="postList">
<li name="3924" id="3924" class="graf graf--li graf-after--p"><strong
class="markup--strong markup--li-strong"><img</strong> <strong
class="markup--strong markup--li-strong">src=</strong>”/images/example.jpg” <strong
class="markup--strong markup--li-strong">alt=</strong>”Example image”<strong
class="markup--strong markup--li-strong">></strong></li>
</ol>
<h4 name="9ad5" id="9ad5" class="graf graf--h4 graf-after--li"><strong
class="markup--strong markup--h4-strong">BODY</strong>: This contains everything you want to display
on the Web Page.</h4>
<pre name="6ce4" id="6ce4" class="graf graf--pre graf-after--h4"><body></pre>
<pre name="b58e" id="b58e"
class="graf graf--pre graf-after--pre"><! — Everything the user sees on the webpage goes here! — ps… this is a comment →</pre>
<pre name="574f" id="574f" class="graf graf--pre graf-after--pre"></body></pre>
<p name="f99f" id="f99f" class="graf graf--p graf-after--pre">Let us now have a look on the basic
structure of HTML. That is the code which is must for every webpage to have:</p>
<p name="2545" id="2545" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong"><em class="markup--em markup--p-em"><!DOCTYPE
html></em></strong></p>
<h4 name="f09a" id="f09a" class="graf graf--h4 graf-after--p graf--trailing">Here is some boilerplate html
you can use as a starting point:!!Every Webpage must contain this code.!!</h4>
</div>
</div>
</section>
<section name="8081" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="04e9" id="04e9" class="graf graf--h3 graf--leading graf--trailing"><strong
class="markup--strong markup--h3-strong"><!DOCTYPE html></strong></h3>
</div>
</div>
</section>
<section name="ca23" class="section section--body section--last">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<p name="7f6b" id="7f6b" class="graf graf--p graf--leading">Below is the complete explanation of each of
the tags used in the above piece of HTML code:</p>
<p name="bfbc" id="bfbc" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong"><!DOCTYPE html>:</strong> This tag is used to tells the
HTML version. This currently tells that the version is HTML 5.</p>
<blockquote name="b7e9" id="b7e9" class="graf graf--blockquote graf-after--p"><strong
class="markup--strong markup--blockquote-strong"><em
class="markup--em markup--blockquote-em"><html></em>:</strong> This is called HTML root
element and used to wrap all the code.</blockquote>
<blockquote name="02fc" id="02fc" class="graf graf--blockquote graf-after--blockquote"><strong
class="markup--strong markup--blockquote-strong"><head>:</strong> Head tag contains metadata,
title, page CSS etc. All the HTML elements that can be used inside the <head> element are:
</blockquote>
<blockquote name="0df9" id="0df9" class="graf graf--blockquote graf-after--blockquote"><strong
class="markup--strong markup--blockquote-strong"><body>:</strong> Body tag is used to enclosed
all the data which a web page has from texts to links. All of the content that you see rendered in the
browser is contained within this element.</blockquote>
<h3 name="947e" id="947e" class="graf graf--h3 graf-after--blockquote">Bold Text:</h3>
<p name="de47" id="de47" class="graf graf--p graf-after--h3"><b> <strong
class="markup--strong markup--p-strong">this is bold </strong></b></p>
<p name="1c88" id="1c88" class="graf graf--p graf-after--p"><strong> ⇐ this is for strong, emergency
emotions.</p>
<p name="200e" id="200e" class="graf graf--p graf-after--p">___________</p>
<p name="a594" id="a594" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">HEADING/S:</strong></p>
<p name="c2de" id="c2de" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">6 types
from largest(h1) to smallest (h6)</em></p>
<p name="7fc9" id="7fc9" class="graf graf--p graf-after--p"><h1> <h2> <h3> <h4>
<h5> <h6></p>
<p name="7b03" id="7b03" class="graf graf--p graf-after--p">___________</p>
<p name="a8f0" id="a8f0" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">ITALICS: </strong>There are two ways to use it, the first one
is the <i> tag and the second one is the <em> tag. They both italicize the text<a
href="https://emojipedia.org/person-shrugging/" data-href="https://emojipedia.org/person-shrugging/"
class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">🤷</a></p>
<p name="7790" id="7790" class="graf graf--p graf-after--p"><i> <em
class="markup--em markup--p-em">this is fancy text that’s too good to for us</em></i></p>
<p name="e21d" id="e21d" class="graf graf--p graf-after--p">___________</p>
<p name="8e01" id="8e01" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">PARAGRAPHS: </strong>In order to make Paragraphs, just add
<p>.</p>
<p name="3f83" id="3f83" class="graf graf--p graf-after--p"><p> Hi there my name is Jason.
</p></p>
<p name="1cce" id="1cce" class="graf graf--p graf-after--p">___________</p>
<p name="d782" id="d782" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">TITLES: not the same thing as a heading (which renders on the
html page) but instead the title element represents the title of the page as shown in the tab of the
browser.</strong></p>
<p name="ee7f" id="ee7f" class="graf graf--p graf-after--p"><head></p>
<p name="ebb4" id="ebb4" class="graf graf--p graf-after--p">As such <title>This is the
title</title> it is always found between <head> tags and not in the body of the page where
all the content that gets rendered on the page is contained.</p>
<figure name="68a6" id="68a6" class="graf graf--figure graf-after--p"><img class="graf-image"
data-image-id="0*CSqPk3mD0fR-oOAb" data-width="956" data-height="298"
src="https://cdn-images-1.medium.com/max/800/0*CSqPk3mD0fR-oOAb"></figure>
<h3 name="6582" id="6582" class="graf graf--h3 graf-after--figure">Here’s a handy Cheat Sheet:</h3>
<figure name="5594" id="5594" class="graf graf--figure graf-after--h3"><img class="graf-image"
data-image-id="0*c9Vyer_N97InJsUB.png" data-width="1024" data-height="11407"
src="https://cdn-images-1.medium.com/max/800/0*c9Vyer_N97InJsUB.png"></figure>
<p name="ce7b" id="ce7b" class="graf graf--p graf-after--figure">Below I am going to Include a gist that
contains html code that uses pretty much every tag I could think of off the top of my head…</p>
<p name="ecd6" id="ecd6" class="graf graf--p graf-after--p">If it’s not included here I promise you it’s
seldom used by most webpages.</p>
<p name="05eb" id="05eb" class="graf graf--p graf-after--p">Below that I will embed an image of the
webpage that it renders too….</p>
<p name="4d5f" id="4d5f" class="graf graf--p graf-after--p">that super small text at the bottom is
actually one giant button:</p>
<figure name="d288" id="d288" class="graf graf--figure graf--iframe graf-after--p">
<script src="https://gist.github.com/bgoonz/b13743e00e7684ca220f66635803a7d5.js"></script>
</figure>
</div>
<div class="section-inner sectionLayout--fullWidth">
<figure name="ace5" id="ace5" class="graf graf--figure graf--layoutFillWidth graf-after--figure"><img
class="graf-image" data-image-id="1*gdM-6smOEc2ChCI_8_Ql_g.png" data-width="1895" data-height="3147"
src="https://cdn-images-1.medium.com/max/2560/1*gdM-6smOEc2ChCI_8_Ql_g.png"></figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<h3 name="c590" id="c590" class="graf graf--h3 graf-after--figure">If you found this guide helpful feel
free to checkout my GitHub/gists where I host similar content:</h3>
<div name="1c2f" id="1c2f" class="graf graf--mixtapeEmbed graf-after--h3"><a
href="https://gist.github.com/bgoonz" data-href="https://gist.github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz’s gists</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Instantly share code, notes, and snippets. Web Developer,
Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a
href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="ab25adbb500306703daab23d08a7739a" data-thumbnail-img-id="0*3O67jrqm3EHjTK2H"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*3O67jrqm3EHjTK2H);"></a>
</div>
<div name="3585" id="3585" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed"><a
href="https://github.com/bgoonz" data-href="https://github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz — Overview</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Web Developer, Electrical Engineer JavaScript | CSS |
Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a
href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="6ee74d5200d495ddc7ddad0c92bd6dce" data-thumbnail-img-id="0*Udg3rbeFyslZ9dyl"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*Udg3rbeFyslZ9dyl);"></a>
</div>
<h3 name="cb1a" id="cb1a" class="graf graf--h3 graf-after--mixtapeEmbed">Or Checkout my personal
Resource Site:</h3>
<div name="4bce" id="4bce" class="graf graf--mixtapeEmbed graf-after--h3 graf--trailing"><a
href="https://web-dev-resource-hub.netlify.app/" data-href="https://web-dev-resource-hub.netlify.app/"
class="markup--anchor markup--mixtapeEmbed-anchor"
title="https://web-dev-resource-hub.netlify.app/"><strong
class="markup--strong markup--mixtapeEmbed-strong">Web-Dev-Hub</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Edit
description</em>web-dev-resource-hub.netlify.app</a><a
href="https://web-dev-resource-hub.netlify.app/"
class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"
data-media-id="142b348a1c3b7cab095decda3afd6236"></a></div>
</div>
</div>
</section>
</section>
<footer>
<p>By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on <a
href="https://medium.com/p/651d695f9bc"><time class="dt-published" datetime="2021-03-13T07:29:50.596Z">March
13, 2021</time></a>.</p>
<p><a href="https://medium.com/@bryanguner/super-simple-intro-to-html-651d695f9bc" class="p-canonical">Canonical
link</a></p>
<p>Exported from <a href="https://medium.com">Medium</a> on April 3, 2021.</p>
</footer>
</article>
</body>
</html>