-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml.html
More file actions
538 lines (502 loc) · 22.9 KB
/
html.html
File metadata and controls
538 lines (502 loc) · 22.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Aligned Website</title>
</head>
<body>
<header class="navigation">
<div class="nav-container">
<div class="branding">
<a href="./index.html"><i class="fas fa-user"></i></a>
<h1><a href="./index.html">Aligned Website</a></h1>
</div>
<nav class="mid-nav">
<a href="./html.html" class="current"> HTML</a>
<a href="./css.html">CSS</a>
<a href="./design-principle.html">Design Principle</a>
</nav>
<div class="nav-right">
<a href="instagram.com" target="blank_" class="fab fa-instagram"></a>
<a href="twitter.com" target="blank_" class="fab fa-twitter"></a>
<a href="facebook.com" target="blank_" class="fab fa-facebook"></a>
</div>
</div>
</header>
<section class="blogs">
<div class="blog-container">
<div class="article-heading">
<h1>Introduction to HTML</h1>
</div>
<div class="article-heading">
<p>How HTML structured the modern web</p>
</div>
</div>
<div class="blog-container">
<div class="content">
<div class="image">
<img src="https://bit.ly/2YaArV5" alt="html wallpaper" />
<small>Hyper Text Markup Language (HTML)</small>
</div>
<p>
HTML (Hypertext Markup Language) is the most fundamental component
of the Internet. It establishes the structure and meaning of web
content. Links that connect online pages inside a single website or
between websites are referred to as "hypertext." The text document
within the tag that specifies the structure of web pages is defined
using a markup language. This language is used to annotate (at the
note for computer) text so that it may be understood by a machine
and manipulated appropriately.
</p>
<p>
The majority of markup languages (for example, HTML) are human
readable. Tags are used in the language to specify what type of text
modification is required. It's used for organizing and displaying
material on web pages. The Internet would not exist without links.
By publishing material to the Internet and linking it to other
people's pages, you become an active participant in the World Wide
Web. (developer.mozilla., 2021).
</p>
<div class="boiler-plate">
<div class="image"><img src="./assets/html-boilerplate.jpg" alt="html boilerplate" /></div>
<p>
Above is an example of an HTML boilerplate. In programming
boilerplate refers to the co-template that can be reused.
</p>
<p>
HTML code is written in any text editor and phrased by any
browser. However, in order to make the code look developer
friendly it is written in a code editor that highlights the HTML
keywords and making it easier for developer to write the code.
Some common code editors include a VS Code, Sublime Text, and Atom
and so on.
<div class="image">
<img src="./assets/atom-editor.jpg" alt="atom text editor">
</div>
</p>
<div class="card">
<p>
HTML (Hypertext Markup Language) establishes the structure and
meaning of web content. It's used for organizing and displaying
material on web pages. By publishing material to the Internet
and linking it to other people's pages, you become an active
participant in the World Wide Web.
</p>
</div>
</div>
<div class="html-html5">
<div class="blog-container">
<div class="article-heading">
<h2>HTML VS HTML5</h2>
</div>
<div class="image">
<img src="https://bit.ly/3AV5fXZ" alt="html vs html5">
</div>
<p>HTML 5 is a new version of HTML, the standard computer language for
specifying the contents and look of Web pages. HTML5 was created to
address compatibility issues with the current HTML4 standard. One of
the most significant changes between HTML5 and prior versions of the
standard is the requirement for proprietary plugins and APIs in older
versions of HTML (whatis.techtarget, 2021). To make loading
components easier, HTML5 provides a single standard interface. In
HTML5, for example, there's no need to install a Flash plugin because
the element runs on its own. Many elements are removed or modified
from HTML5.</p>
<div class="card">
<p>HTML5 was developed to address concerns with the existing HTML4 standard. HTML5 eliminates the
requirement for proprietary plugins and APIs that were previously required in older versions of HTML. As
part of the standard update, many components from HTML5 are eliminated or updated.</p>
</div>
<p>Some major difference between HTML and HTML5 are listed in the table below. </p>
<table cellspacing="0" class="table-design">
<thead>
<tr>
<th>HTML</th>
<th>HTML5</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML uses cookies to save
temporary data.</td>
<td>To save offline data, SQL databases
and application cache are used in
HTML5.</td>
</tr>
<tr>
<td>Does not allow JavaScript to run in
browser.</td>
<td>Allows JavaScript to run in
background. This is possible due to
JS Web worker API in HTML5.</td>
</tr>
<tr>
<td>With the aid of different
technologies like as VML,
Silverlight, Flash, and others, vector
graphics may be shown in HTML.</td>
<td>Vector graphics is additionally an
integral a part of HTML5.</td>
</tr>
<tr>
<td>With the aid of a browser, obtaining
a user's real GeoLocation is nearly
difficult</td>
<td>One can track the GeoLocation of a
user easily by using JS GeoLocation
API.</td>
</tr>
<tr>
<td>There was no presence of Symantic
elemetns like nav, header in HTML.</td>
<td>New element for web structure like
nav, header, footer etc was
introduced in HTML5.</td>
</tr>
<tr>
<td>Older version of HTML are less
mobile-friendly.</td>
<td>HTML5 language is more mobile-friendly</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="semantic">
<div class="blog-container">
<div class="article-heading">
<h2>Semantic HTML</h2>
</div>
<p>A semantic element clearly describes its meaning to both the browser and
the developer (w3schools, 2021).</p>
<div class="boiler-plate">
<img src="./assets/non-semantic.jpg" alt="atom text editor">
</div>
<p>The following are some of the advantages of using semantic markup:</p>
<ul>
<li>Search engines will use the contents of the page as important
keywords in determining the page's search rankings.</li>
<li>It can be used as a signpost by screen readers to assist visually
impaired users in navigating a page.
</li>
<li>Finding meaningful code blocks is much easier than sifting through
endless dives, whether or not they contain semantic or namespace
classes.</li>
<li>Assists the developer in determining the type of data that will be used</li>
<li>Semantic naming corresponds to the proper naming of custom
elements and components.</li>
</ul>
</div>
</div>
<div class="tags-html">
<div class="blog-container">
<div class="article-heading">
<h2>Tags in HTML</h2>
</div>
<p>HTML tags are similar to keywords in that they specify how a web
browser will structure and display material. A web browser can tell the
difference between HTML and plain material thanks to tags. The opening
tag, the content tag, and the closing tag are the three primary elements of
an HTML tag. Some HTML tags, however, are not closing tags.</p>
<p>There are commonly three types of tags in HTML. They are:</p>
<div class="article-heading">
<h3>Paired and unpaired tags</h3>
</div>
<p>When an HTML tag has an opening tag and a closing tag as its
companion tag, it is known as a paired tag. The opening tag in an
HTML Paired tag is the tag name contained in angle brackets.</p>
<div class="boiler-plate"><img src="./assets/tags-html.jpg" alt="tags in html"></div>
<div class="article-heading">
<h3>Self-closing tags</h3>
</div>
<p>When an HTML tag only contains an opening tag and no closing
tag or companion tag, it is referred to as an unpaired tag. The
Unpaired HTML element does not require a closing tag; in this
case, the opening tag suffices. </p>
<div class="boiler-plate"><img src="./assets/self-closing-tag.jpg" alt="tags in html"></div>
<div class="article-heading">
<h3>Meta tags</h3>
</div>
<p>Metadata about an HTML document is defined using the Meta
element. Metadata is data about data (information). Meta tags are
used to provide character set, page description, keywords,
document author, and viewport settings. They are always placed
inside the <code><head></code> element. The metadata will not be shown on the
website, but it may be parsed by machines. Browsers (how to show content or reload page), search engines
(keywords), and other
online services all employ metadata
</p>
<p>Some example of Meta tags are:</p>
<div class="boiler-plate"><img src="./assets/meta-tags.jpg" alt="tags in html"></div>
<div class="article-heading">
<h3>Link tag in HTML</h3>
</div>
<p>In order to link the elements such as Cascading Style Sheet (CSS) and
JavaScript, link and Script elements are used. For Example:
</p>
<div class="boiler-plate"><img src="./assets/link-tag-1.jpg" alt="linking css"></div>
<p>In order to add inline CSS, style attribute is used and to add internal css
Style element is used.</p>
<p>In order to add JavaScript in HTML, Script element is used. </p>
<div class="boiler-plate"><img src="./assets/link-tag-2.jpg" alt="add JavaScript in HTML"></div>
<p>However JavaScript is generally written in another file, so instead of
writing it natively inside html, that JavaScript file is referenced in
HTML. For Example:</p>
<div class="boiler-plate"><img src="./assets/link-tag-3.jpg" alt="referring js file"></div>
</div>
</div>
<div class="attributes-html">
<div class="article-heading">
<h2>Attributes in HTML</h2>
</div>
<p>Additional characteristics or properties of an element, such as the width
and height of an image, are defined by attributes. Attributes are always
specified in the start tag (also known as the opening tag) and are typically
made up of name/value pairs. like <code>name="value"</code>. Attribute values should always be enclosed in
quotation marks. Some of the commonly used
attributes include <code> href, class, ID, placeholder</code> and so on. </p>
<p>An attribute is used to define the characteristics of an HTML element
and is placed inside the element's opening tag.</p>
<p class="example"> All attributes are made up
of two parts − a name and a value:</p>
<ul>
<li>The name is a property that is to be set to an element. For Example
<code><a></code> carries an attribute whose name is href. href provides the link
to the website the text inside the element redirects. If the link is to
be opened in the other tab there is an attribute called target where
we can specify the value for it to perform the action.</li>
<li>
The value is what you want the value of the property to be set and
always put within quotations. For example, all the CSS properties
can be written inside the quote of style name.
</li>
</ul>
<p>In a style sheet, the class attribute is frequently used to point to a class
name. A JavaScript can also use it to access and manipulate elements that
have the specified class name.</p>
<p>While ID attribute is used for just a single element. <code>#</code> Symbol is used to
manipulate that specific class name in CSS or JavaScript. </p>
<p>Html Attributes played vital part in designing the website back in the
day, with the attributes such as:</p>
<div class="image"><img src="./assets/attribute.jpg" alt="attributes example"></div>
</div>
<div class="display-values">
<div class="article-heading">
<h2>Display Values in HTML</h2>
</div>
<p>Initially, HTML components were classified as either "block-level" or
"inline-level" elements. Because this is a presentational feature, it is now
described in the Flow Layout using CSS. A Block-level element takes up
the whole horizontal space of its parent element (container) as well as the
vertical space equivalent to the height of its contents, forming a "block."</p>
<p>Depending on the kind of element, every HTML element has a default
display value. Block and inline are the two display options</p>
<ul>
<div class="article-heading">
<div class="article-heading">
<h3>Block-Level Element</h3>
</div>
<li>A new line always begins with a block level element. The whole
available width is a block-level element (stretches out to the left
and right as far as it can). The top and bottom margins of a block
level element, but an inline element does not.
One of the prominent example of the Block Level Element is
<code><div></code>. The element <code><div></code> commonly is utilized in other HTML
Hyper Text Markup Language (HTML)
NITESH POUDEL 20
components as a container. There are no required attributes for the
<code><div></code> element, just common style, class and id. The <code><div></code> element
may be utilized in combination with CSS to design content blocks.</li>
<div class="article-heading">
<h3>Block-Level Element</h3>
</div>
<li>
A new line does not begin with an inline element. Only the breadth
of an inline element is needed. It is an element within the <code><span></code> of
a subsection.
</li>
</div>
</ul>
</div>
<div class="comments">
<div class="article-heading">
<h2>Comments in HTML</h2>
</div>
<p>HTML comments are not displayed in the browser, but they could
help document HTML source code. In HTML <code><!-- --></code> tag is used. </p>
<p>Comments could be added in HTML by using the following syntax:</p>
<p><code><!--Write your comments here--></code></p>
</div>
<div class="favicon">
<div class="article-heading">
<h2>Favicon</h2>
</div>
<p>A favicon is a graphical picture (icon) of a website and/or website. Many
modern user agents, such as graphical browsers and news readers, display
them in the address bar or in tabs as a visual reminder of the Website's
identity (w3, 2021). Favicon can be created in favicon.cc where an image
could be uploaded and the website minimalizes the pixels of the image to
fit in the tab. The favicon could be a still image or an animated gif. </p>
<div class="image"><img src="./assets/favicon.jpg" alt="favicon"></div>
</div>
<div class="used-tags">
<div class="article-heading">
<h2>Some commonly used tags in HTML</h2>
</div>
<table class="table-design" cellspacing="0">
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><!--...--></td>
<td>Defines a comment</td>
</tr>
<tr>
<td><!DOCTYPE></td>
<td>Defines the document type</td>
</tr>
<tr>
<td><a></td>
<td>Defines a hyperlink</td>
</tr>
<tr>
<td><abbr></td>
<td>Defines an abbreviation or an acronym</td>
</tr>
<tr>
<td><address></td>
<td>Defines contact information for the
author/owner of a document</td>
</tr>
<tr>
<td><area></td>
<td>Defines an area inside an image map</td>
</tr>
<tr>
<td><article></td>
<td>Defines an article</td>
</tr>
<tr>
<td><aside></td>
<td>Defines content aside from the page content</td>
</tr>
<tr>
<td><b></td>
<td>Defines bold text</td>
</tr>
<tr>
<td><blockquote></td>
<td>Defines a section that is quoted from another
source</td>
</tr>
<tr>
<td><body></td>
<td>Defines the document's body</td>
</tr>
<tr>
<td><br></td>
<td>Defines a single line break</td>
</tr>
<tr>
<td><button></td>
<td>Defines a clickable button</td>
</tr>
<tr>
<td><canvas></td>
<td>Used to draw graphics, on the fly, via
scripting (usually JavaScript)</td>
</tr>
<tr>
<td><caption></td>
<td>Defines a table caption</td>
</tr>
<tr>
<td><cite></td>
<td>Defines the title of a work</td>
</tr>
<tr>
<td><code></td>
<td>Defines a piece of computer code</td>
</tr>
<tr>
<td><col></td>
<td>Specifies column properties for each column
within a <element></td>
</tr>
<tr>
<td><data></td>
<td>Adds a machine-readable translation of a
given content</td>
</tr>
<tr>
<td><datalist></td>
<td>Specifies a list of pre-defined options for
input controls
</td>
</tr>
<tr>
<td><div></td>
<td>Defines a section in a document</td>
</tr>
<tr>
<td><em></td>
<td>Defines emphasized text
</td>
</tr>
<tr>
<td><embed></td>
<td>Specifies self-contained content</td>
</tr>
<tr>
<td><figure></td>
<td>Defines the document type</td>
</tr>
<tr>
<td><footer></td>
<td>Defines a footer for a document or section</td>
</tr>
<tr>
<td><form></td>
<td>Defines an HTML form for user input</td>
</tr>
<tr>
<td><to></td>
<td>Defines HTML headings</td>
</tr>
<tr>
<td><head></td>
<td>Contains metadata/information for the
document
</td>
</tr>
<tr>
<td><header></td>
<td>Defines a header for a document or section</td>
</tr>
</tbody>
</table>
</div>
<div class="conclusion card">
<p>In conclusion, HTML is the universal markup language for the Web.
HTML lets you format text, add graphics, create links, input forms,
frames and tables, etc., and save it all in a text file that any browser can
read and display.</p>
</div>
</div>
</div>
</section>
<footer class="nav-container">
<p>Aligned Website © 2021</p>
</footer>
</body>
</html>