-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHTML_blog.html
195 lines (170 loc) · 9.41 KB
/
HTML_blog.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
<!DOCTYPE>
<html>
<head>
<link rel="icon" type="image/x-icon" href="https://as1.ftcdn.net/v2/jpg/00/99/98/14/1000_F_99981436_kAbBqwOKn0KPBD8XtAqPfg5jf7yTFhep.jpg">
<titlte></tittle>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>HTML: HYPERTEXT MARKUP LANGUAGE</h1>
<h3>1. Introduction</h3>
<p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the
meaning and structure of web content. Other technologies besides HTML are generally used to describe
a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).</p>
<p>"Hypertext" refers to links that connect web pages to one another, either within a single website or
between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and
linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
<p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML
markup includes special "elements" such as
<i>'head', 'title', 'body', 'header', 'footer', 'article', 'section', 'p', 'div', 'span', 'img',
'aside', 'audio', 'canvas', 'datalist', 'details', 'embed', 'nav', 'output', 'progress', 'video', 'ul', 'ol', 'li'</i> and many others.</p>
<h3>2. THE HISTORY OF HTML</h3>
<p>
HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in
Switzerland. He came up with the idea of an Internet-based hypertext system. Hypertext means a
text that contains references (links) to other texts that viewers can access immediately. He
published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new
version of the HTML language came with new tags and attributes (tag modifiers) to the markup.
According to Mozilla Developer Network’s HTML Element Reference, currently, there are 140
HTML tags, although some of them are already obsolete (not supported by modern browsers). Due
to a quick rise in popularity, HTML is now considered an official web standard. The HTML
specifications are maintained and developed by the World Wide Web Consortium (W3C). You
can check out the latest state of the language anytime on W3C’s website. The biggest upgrade of
the language was the introduction of HTML5 in 2014. It added several new semantic tags to the
markup, that reveal the meaning of their own content, such as <i>'article', 'header', & 'footer'</i>.
</p>
<h3>3. HTML EVOLUTION, WHAT DIFFERS BETWEEN HTML AND HTML5?</h3>
<p>
Since the first days, HTML has gone through an incredible evolution. W3C constantly publish
new versions and updates, while historical milestones get dedicated names as well. HTML4 (these
days commonly referred to as “HTML”) was published in 1999, while the latest major version
came out in 2014. Named HTML5, the update has introduced many new features to the language.
One of the most anticipated features of HTML5 is native support for audio and video embedding.
Instead of using Flash player, we can simply embed videos and audio files to our web pages using
the new <i>'audio' and 'video'</i> tags. It also includes in-built support for scalable
vector graphics (SVG) and MathML for mathematical and scientific formulas. HTML5 introduced
a few semantic improvements as well. The new semantic tags inform browsers about the meaning
of content, which benefits both readers and search engines.
The most popular semantic tags are:<i>'article', 'section', 'aside', 'header',
and 'footer'.</i>
</p>
<h3>PROS AND CONS OF HTML</h3>
<p>
Like most things, HTML comes with a handful of strengths and limitations.<br>
Pros:
<ul>
<li>A widely used language with a lot of resources and a huge community behind.</li>
<li>Runs natively in every web browser.</li>
<li>Comes with a flat learning curve.</li>
<li>Open-source and completely free.</li>
<li>Clean and consistent markup.</li>
<li>The official web standards are maintained by the World Wide Web Consortium (W3C).</li>
<li>Easily integrable with backend languages such as PHP and Node.js.</li>
</ul>
Cons:
<ul>
<li>Mostly used for static web pages. For dynamic functionality, you may need to use
JavaScript or a backend language such as PHP.</li>
<liIt does not allow the user to implement logic. As a result, all web pages need to be created
separately, even if they use the same elements, e.g. headers and footers.</li>
<li>Some browsers adopt new features slowly.</li>
<li>Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render
newer tags).</li>
</ul>
</p>
<h3>5. HOW ARE HTML, CSS, AND JAVASCRIPT RELATED?</h3>
<p>While HTML is a powerful language, it isn’t enough to build a professional and fully responsive
website. We can only use it to add text elements and create the structure of the content. However,
HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets),
and JavaScript. Together, they can achieve rich user experience and implement advanced
functions.
<ul>
<li>CSS is responsible for stylings such as background, colors, layouts, spacing, and
animations.</li>
<li>JavaScript lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.</li>
</ul>
</p>
<h3>6. SO...WHAT IS HTML?</h3>
<p>HTML is the main markup language of the web. It runs natively in every browser and is maintained
by the World Wide Web Consortium. You can use it to create the content structure of websites and web applications. It’s the lowest level of frontend technologies, that serves as the basis for styling you can add with CSS and functionality you can implement using JavaScript.</p>
<h3>7. HOW DOES HTML WORK?</h3>
<p>HTML documents are files that end with a .html or .htm extension. You can view then using any
web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML
file and renders its content so that internet users can view it. Usually, the average website includes
several different HTML pages. For instance: home pages, about pages, contact pages would all
have separate HTML documents. Each HTML page consists of a set of tags (also
called elements), which you can refer to as the building blocks of web pages. They create a
hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.
Most HTML elements have an opening and a closing that use the 'tag' syntax.
Below, you can see a code example of how HTML elements can be structured:
<pre>
<xmp>
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
</xmp>
</pre>
</p>
<h3>8. HTML TAG TYPE</h3>
<p>
HTML tags have two main types: block-level and inline tags.
<ol>
<li>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>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>
</p>
<h4>8.1 BLOCK-LEVEL TAGS</h4>
<p>
The three block level tags every HTML document needs to contain are 'html', 'head',
and 'body'
<ol>
<li>The 'html' tag is the highest level element that encloses every HTML page.</li>
<li>The 'head' tag holds meta information such as the page’s title and charset.</li>
<li>Finally, the 'body' tag encloses all the content that appears on the page.</li>
</ol>
<pre>
<xmp>
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
</xmp>
</pre>
<ul>
<li>Headings have 6 levels in HTML. They range from 'h1' to 'h6', where h1
is the highest-level heading and h6 is the lowest one. Paragraphs are enclosed by 'p',
while blockquotes use the 'blockquote' tag.</li>
<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 'div' tag. A div element can contain another div tag inside it as well.</li>
<li>You may also use 'ol' tags for ordered lists and 'ul' for unordered ones.
Individual list items must be enclosed by the 'li' tag. For example, this is how a
basic unordered list looks like in HTML:</li>
</ul>
</p>
<h4>8.2 Inline Tags</h4>
<p>Many inline tags are used to format text. For example, a 'strong' tag would render an
element in bold, whereas 'em' tags would show it in italics.<br>
Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the
link’s destination:<xmp><a href="https://example.com/">Click me!</a></xmp>
Images are inline elements too. You can add one using 'img' without any closing tag. But you
will also need to use the src attribute to specify the image path, for example:
<xmp><img src="/images/example.jpg" alt="Example image"></xmp>
</p>
</body>
</html>