-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
348 lines (274 loc) · 16.1 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
<!Doctype>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keyword" content="HTML,html for beignners,basics of html,what is html,html for beignners 2025">
<meta name="description" content="HTML is a language which is used to decide layout of a page, Html is a very versatile language and is a fundamental language that you need to learn in order to become a successfull web developer">
<meta name="author" content="Piyush Dubey">
<title>HTML for beignners</title>
<link rel="icon" type="image/png" href="favicon_io(1)/favicon-32x32.png">
</head>
<body style="border:2px solid rgb(33, 47, 13); padding: 40px; margin:10px ;">
<header>
<h1 align="center"><u>HTML FOR BEIGGNERS!</u></h1>
<nav>
<a href="index.html">HOME</a>
<a href="basics.html">BASICS</a>
<a href="LTF.html">LTF</a>
<a href="Layou.html">LAYOUT</a>
<a href="downloadpdf.html">DOWNLOAD PDF</a>
</nav>
</header>
<hr>
<main>
<section>
<br>
<!-- 1)history of html artcal 1 -->
<article>
<h2><u>HISTORY OF HTML:-</u></h2><br>
<p><b><u>BIRTH-Till Now</u></b></p>
<p><u>1989-1991:First idea</u> 💡</p>
<ul>
<li>Tim Berners-Lee, a British computer scientist, proposed the concept of the World Wide Web while working at <a href="https://home.cern/science/computing#:~:text=CERN%20is%20one%20of%20the,and%20institutes%20around%20the%20world." target="_blank">CERN</a> .</li>
<li>In 1991, Berners-Lee created the first version of HTML, known as HTML 1.0, to structure documents that could be shared over the web. It was simple, with basic tags like <p>, <a>, <h1> for paragraphs, links, and headings.</li>
</ul>
<p><u>1995:Growing up</u> 🏃</p>
<ul>
<li>
The Internet Engineering Task Force <a href="https://www.ietf.org/" target="_blank">(IETF)</a>standardized HTML with the release of HTML 2.0.
</li>
<li>
It included basic features from HTML 1.0 and added new elements for forms, tables, and basic interactive features.
</li>
</ul>
<p><u>1997-1999:Gaining friends</u> 🤝</p>
<ul>
<li>
HTML 3.2 (1997): The World Wide Web Consortium <a href="https://www.w3.org/" target="_blank">(W3C)</a> took over the standardization process. This version introduced new elements like <font> for text styling and <table> for layout.
</li>
<li>
HTML 4.01 (1999): Focused on separating content from presentation by encouraging the use of Cascading Style Sheets (CSS). It introduced the <div> and <span> tags and improved support for multimedia and scripting.
</li>
</ul>
<p><u>2000s:Changes & Confusion</u> 🎭</p>
<ul>
<li>XHTML 1.0 (2000): A stricter version of HTML based on XML. It enforced well-formed syntax and was designed to improve web compatibility.</li>
<li>
XHTML was intended to replace HTML, but its strict rules made it less popular.
</li>
</ul>
<p><u>2008:Learning and Growing again</u> 🌄</p>
<ul>
<li>
HTML5 was proposed by the Web Hypertext Application Technology Working Group <a href="https://en.wikipedia.org/wiki/WHATWG" target="_blank">(WHATWG)</a>
as a response to the limitations of XHTML.
</li>
<li>
HTML5 aimed to support modern web applications, multimedia, and interactivity without relying on external plugins like Flash.
</li>
</ul>
<p><u>2014:Moving Forward</u> 🌾</p>
<ul>
<li>HTML5 became the official standard, focusing on simplicity, multimedia support, and responsiveness</li>
<li>New Features
<ul>
<li>Semantic elements like <header>, <footer>, <article>, and <section>.</li>
<li>Support for audio (<audio>) and video (<video>).</li>
<li>APIs for offline storage, drag-and-drop, and geolocation.</li>
</ul>
</li>
</ul>
</article>
<hr>
<!-- 2) application of html articl 2 -->
<br>
<article>
<h2><u>MORDERN APPLICATION OF HTML</u></h2><br>
<p>HTML is the backbone of modern web development and plays a crucial role in creating interactive, dynamic, and responsive web applications. Its applications have expanded significantly with advancements in web technologies. Here are some key modern applications of HTML:</p>
<ol>
<li> <u>Web development</u>
<ul>
<li>
Web Pages: HTML is used to structure the content of web pages, including text, images, and multimedia.
</li>
<li>
Responsive Design: Combined with CSS and JavaScript, HTML enables the creation of responsive layouts that adapt to different screen sizes and devices.
</li>
</ul>
</li><br>
<li> <u>Progressive Web Applications (PWAs)</u>
<ul>
<li>
PWAs use HTML to deliver app-like experiences on the web. They are installable, work offline, and provide a seamless user experience.
</li>
<li>
HTML5 APIs, like the Service Worker and Web App Manifest, play a key role in PWA development.
</li>
</ul>
</li><br>
<li><u>Multimedia Integration</u>
<ul>
<li>
HTML5 introduced <audio> and <video> tags, allowing seamless embedding of multimedia content without third-party plugins like Flash.
</li>
<li>
It supports modern codecs and formats for efficient multimedia delivery.
</li>
</ul>
</li><br>
<li><u>Web APIs and Interactivity</u> <br>
<i>HTML works with JavaScript to utilize modern web APIs, enabling:</i>
<ul>
<li>
Geolocation: Access user location for mapping or location-based services.
</li>
<li>
Web Storage: Use localStorage and sessionStorage for client-side data storage.
</li>
<li>
Drag and Drop: Enable intuitive user interactions using native drag-and-drop features.
</li>
<li>
WebRTC: Facilitate real-time communication (e.g., video calls) directly in the browser.
</li>
</ul>
</li><br>
<li><u>Mobile and Cross-Platform Development</u><br>
<i>HTML is used in:</i>
<ul>
<li>
Hybrid Mobile Apps: Tools like Apache Cordova and Ionic allow developers to build mobile apps using HTML, CSS, and JavaScript.
</li>
<li>
Responsive Mobile Design: Ensures websites adapt to different screen sizes and devices.
</li>
</ul>
</li><br>
<li><u>E-Commerce Platforms</u> <br>
<i>HTML powers the structure of e-commerce websites, enabling:</i>
<ul>
<li>Product pages with dynamic content.</li>
<li>Payment gateways integrated via HTML forms.</li>
<li>Shopping cart and checkout systems.</li>
</ul>
</li><br>
<li> <u>Interactive Learning and Education</u> <br>
<i>HTML supports interactive content like:</i>
<ul>
<li>
E-learning platforms: Embedding quizzes, videos, and interactive lessons.
</li>
<li>
Online coding environments: Tools like CodePen, JSFiddle, and Replit use HTML for real-time coding and previews.
</li>
</ul>
</li><br>
<li><u>Email Design</u>
<ul>
<li>
HTML is used to create visually appealing and interactive email templates compatible with email clients.
</li>
</ul>
</li><br>
<li><u>IoT Dashboards</u>
<ul>
<li>
HTML is utilized in building user interfaces for Internet of Things (IoT) applications, such as dashboards for monitoring and controlling connected devices.
</li>
</ul>
</li><br>
<li><u>Virtual Reality (VR) and Augmented Reality (AR)</u>
<ul>
<li>
HTML is used with WebXR and other APIs to create immersive VR/AR experiences directly in the browser.
</li>
</ul>
</li><br>
<li><u>Accessibility and SEO</u>
<ul>
<li>
HTML provides semantic elements and attributes (like <alt>, <label>, <aria-*>), making web content accessible to users with disabilities and improving search engine optimization.
</li>
</ul>
</li><br>
</ol>
</article>
<hr>
<!-- 3) examples of tags & attributes article 3 -->
<br>
<article>
<h2><u>Some Examples of HTML tags and attributes</u></h2>
<p>HTML (HyperText Markup Language) is the fundamental language used to create and structure content on the World Wide Web. It acts as the backbone of web pages, providing the framework that defines how elements like text, images, videos, and links are displayed in a browser. HTML uses a system of tags and attributes to organize content, making it understandable for both users and search engines some common examples are given below:</p><br>
<h5><u>EXAMPLES</u></h5>
<ol>
<!-- orderd list item 1 -->
<li><u>VIDEO</u>
<ul>
<li>
Code written -
<i><video src="your video file location" controls, loop, autoplay, alt, title="your video title" > abcxyz </video></i>
</li><br>
<li>
This video is by <a href="https://pixabay.com/users/federicomaderno-10880779/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=99205">Federico Maderno</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=99205">Pixabay</a>
</li>
<br>
<div>
<video src="videos/bird.mp4" controls loop autoplay alt="bird video" title="Bird video by federicomaderno pixaby" width="500" style="border:5px solid greenyellow;">Your browser does not support the video tag.
</video>
</div>
</ul>
</li>
<br>
<!-- orderd list item 2 -->
<li><u>Audio</u>
<ul>
<li>
Code written - <i><audio src="your audio file location">abcxyz</audio> </i>
</li>
<br>
<li>
Song name <a href="https://youtu.be/ReXw6TOnUOc?si=z45ri8J1vLCRHcyl"
target="_blank">All black</a> by Raftaar
</li>
<br>
<div>
<audio src="audio/All Black Raftaar 320 Kbps.mp3" controls loop style="border:5px solid greenyellow;" title="All black song by Raftaar">your browser does not support audio tag of HTML</audio>
</div>
</ul>
</li>
<br>
<!-- orderd list item 3 -->
<li><u>Image</u>
<ul>
<li>
code written - <img src="your image file location" alt=" describe your image">
</li>
<br>
<li>
This image is by Image by <a href="https://pixabay.com/users/pavanprasad_ind-22614562/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9058783">Pavan Prasad</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9058783">Pixabay</a>
</li>
<br>
<div>
<img src="images/bird img.jpg" alt="bird image"style="border:5px solid greenyellow;" width="800">
</div>
</ul>
</li>
</ol>
<br>
<p>There are many such examples of attributes and tags in HTML which we will learn about in other sections of this website,HTML is an easy language which you can master in a week but if you want to become a successfull webdeveloper only knowing HTML is not enough you also need to know about different languages such as CSS and JS
to name a few, but mastering HTML is also neccessary as it is a fundamental language in web development.
</p>
</article>
</section>
</main>
<br>
<hr>
<footer>
<p><i>This website was made fully in HTML with few inline CSS</i></p>
<p><i>made by:</i></p>
<p align="center"><<<<©Piyush Dubey 2025>>>></p>
</footer>
</body>
</html>