-
Notifications
You must be signed in to change notification settings - Fork 2
/
BASICS OF HTML.html
717 lines (521 loc) · 26.5 KB
/
BASICS OF HTML.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
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
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
<!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">
<title>HTML AND CSS</title>
<!-- this is how you include css file -->
<link rel="stylesheet" href="1st.css">
<!-- this is how you include js file -->
<script src="1st.js"></script>
</head>
<!-- The CSS background-color property defines the background color for an HTML element. -->
<!-- Set the background color for a page to powderblue: -->
<body style="background-color:powderblue;">
<!-- HEADINGS ARE 1 TO 6 -->
<!-- <h1>Pratik Chaudhari</h1> -->
<!-- The CSS text-align property defines the horizontal text alignment for an HTML element: -->
<h2 style="text-align:center; color:darkmagenta; font-size: 30px; border: 2px solid dodgerblue;">Pratik chaudhari
</h2>
<!-- The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.-->
<hr>
<!-- for paragarph -->
<!-- The CSS font-family property defines the font to be used for an HTML element: -->
<P style="font-family:cursive;">THIS IS NEW PARAGRAPH</P>
<P> the bold and italic tags are <b> "b" and "stronge" are</b> <i>bold</i> and <b>"i" and "em" are for </b>
<i>italic</i>
<!-- The HTML <br> element defines a line break. -->
<br> <strong style="font-family:Verdana;">shivaji maharaj</strong>
<br> <strong><em>beautiful</em></strong>
<br> tommorow is holiday
<br> line break tag is "br"
</P>
<!-- ctrl + enter to jump new line -->
<hr>
<!-- The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:-->
<a href="https://www.facebook.com/pratik.chaudhari.35110" target="_blank"> go to my FB profile </a><br>
<!-- target="_blank" it is use for to open link in new tab-->
<a href="https://www.google.com" target="_blank">go to google</a><br>
<a href="/ANCHOR TAG LINK COLOUR.html">this is my html</a><br>
<hr>
<!-- The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: -->
<!-- The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute. -->
<img src="pratik.jpg" alt="sorry your connection is slow"><br>
<img src="https://source.unsplash.com/user/erondu" alt="no image" width="300" height="200">
<hr>
<!-- The style attribute is used to add styles to an element, such as color, font, size, and more. -->
<h4 style="color:red;">I am pursing BE from PUNE.</h4>
<hr>
<!-- Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property: -->
<h1 style="font-size:150%;">I am a rider</h1> <!-- use % or px -->
<!-- The title attribute defines some extra information about an element. -->
<!-- The value of the title attribute will be displayed as a tooltip when you mouse over the element: -->
<h3 style="background-color:gold;" title="I'm a header">The title Attribute</h3>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
<hr>
<!-- The HTML <pre> element defines preformatted text. -->
<!-- The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: -->
<!-- EX : This poem will display AS WRITTEN: -->
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<hr>
<!-- The HTML <small> element defines smaller text: -->
<p>This is some normal text.</p>
<p><small>This is some normal text.</small></p>
<hr>
<!-- The HTML <mark> element defines text that should be marked or highlighted: -->
<p>this is the <mark>highlighted</mark> keyword</p>
<hr>
<!-- The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text: -->
<p>this is my <del>fav</del> colour</p>
<!-- The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text: -->
this is my <del> fav </del> color <ins>red</ins>
<hr>
<!-- The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O: -->
<p>jai <sub>shree</sub> ram</p>
<!-- The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]: -->
<p>jai <sup>shree</sup> ram</p>
<hr>
<!-- The HTML <blockquote> element defines a section that is quoted from another source. -->
<!-- Browsers usually indent <blockquote> elements. -->
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="https://www.w3schools.com/html/html_quotation_elements.asp">The HTML element defines a section
that is quoted from another source.</blockquote>
<hr>
<!-- The HTML q tag defines a short quotation.Browsers normally insert quotation (" ") marks around the quotation. -->
<p>on the 19 feb we celebrate the <q>SHIVAJAYANTI USTAV</q> in maharashtra.</p>
<hr>
<!-- The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.-->
<p>i am studying at <abbr title="SAVITRIBAI PHULE UNIVERSITY">SPPU.</abbr> & i am learning <abbr
title="HYPERTEXT MARKUP LANGUAGE">HTML</abbr></p>
<hr>
<!-- The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element. -->
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address>
2404,
Lane No 6,<br>
Dr.Ghogre's Hospital Oppo,<br>
Dhule,Maharashtra <br>
424001,<br>
9921221855
</address>
<hr>
<!-- The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). -->
<!-- Browsers usually display cite elements in italic. -->
<p><cite>this work</cite> is done by me</p>
<hr>
<!-- The HTML <bdo> tag is used to override the current text direction: -->
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):
</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
<hr>
<!-- this is how to add two style for 1 statement -->
<h1 style="background:chocolate; text-align: center; border: 2px solid black;">SHIVAJAYANTI 2021</h1>
<!-- You can set the color of borders like this -->
<h3 style="border: 2px solid blueviolet; text-align: center;">this is border</h3>
<hr>
<!-- ALL INFO ABOUT RGB AND RGBA -->
<h2> HTML<abbr title="RED GREEN BLUE"> RGB</abbr> and <abbr title="RGB with an Alpha channel (opacity)"> RGBA</abbr>
Colors</h2>
<p>In HTML, a color can be specified as an RGB value, using this <br>
<b>rgb(red, green, blue)</b> <br>
Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255. <br>
This means that there are 256 x 256 x 256 = 16777216 possible colors! <br>
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other
two
(green and blue) are set to 0. <br>
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the
other two (red and blue) are set to 0. <br>
To display black, set all color parameters to 0, like this: rgb(0, 0, 0). <br>
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
</p>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h2>RGBA</h2>
<p><b>rgba(red, green, blue, alpha)</b></p>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<hr>
<!-- ALL INFO HEX COLOUR -->
<h2> <abbr title="HEXADECIMAL VALUES">HEX</abbr> COLOR VALUES</h2>
<p>HTML, a color can be specified using a hexadecimal value in the form: <br>
<b>#rrggbb</b> <br>
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). <br>
For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green
and
blue) are set to 00. <br>
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other
two
(red and blue) are set to 00. <br>
To display black, set all color parameters to 00, like this: #000000. <br>
To display white, set all color parameters to ff, like this: #ffffff.
</p>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<hr>
<!-- ALL INFO ABOUT HSL -->
<h2>HTML <abbr title="HUE , SATURATION & LIGHTNESS">HSL</abbr> AND <abbr
title="HUE , SATURATION, LIGHTNESS & alpha channel">HSLA</abbr> </h2>
<p> In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form: <br>
<b>hsl(hue, saturation, lightness)</b> <br>
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue <br>
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. <br>
Lightness is also a percentage value, 0% is black, and 100% is white.
</p>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h2>HSLA</h2>
<p>hsla(hue, saturation, lightness, alpha) <br>
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):</p>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<hr>
<h1>What is CSS?</h1>
<p>
<h2>Cascading Style Sheets (CSS) is used to format the layout of a webpage.</h2>
</p>
<p>With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, <br> different displays for
different devices and screen sizes, and much more!</p>
<p>CSS can be added to HTML documents in 3 ways:</p>
<pre>
Inline - by using the style attribute inside HTML elements
Internal - by using a style element in the head section
External - by using a link element to link to an external CSS file
</pre>
<hr>
<h2>HTML Links - Syntax</h2>
<!-- SYNTAX -- <a href="url"> link text </a> -->
<p> Use the "a" element to define a link <br>
Use the href attribute to define the link address <br>
Use the target attribute to define where to open the linked document <br>
Use the "img" element (inside "a") to use an image as a link <br>
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
</p>
<hr>
<p>The most important attribute of the "a" element is the href attribute, which indicates the link's destination.
<br>
The link text is the part that will be visible to the reader. <br>
Clicking on the link text, will send the reader to the specified URL address.
</p>
<a href="https://www.youtube.com/channel/UCwkGqi-Q57LDvoCgJ_c8uSg">subscribe my channel</a>
<hr>
<p> By default, links will appear as follows in all browsers: </p>
<pre>
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
</pre>
<hr>
<p>_blank - Opens the document in a new window or tab</p>
<a href="https://www.youtube.com/watch?v=FwydNLGw5ww" target="_blank">LIKE & SHARE</a>
<hr>
<h2>Absolute URLs vs. Relative URLs </h2>
<p> Both examples above are using an absolute URL (a full web address) in the href attribute. <br>
A local link (a link to a page within the same website) is specified with a relative URL (without the
"https://www" part): </p>
<h3>Absolute URLs</h3>
<a href="https://www.youtube.com/">youtube</a>
<h3>Relative URLs</h3>
<a href="html_images.asp">HTML Images</a>
<hr>
<h2>HTML Links - Use an Image as a Link </h2>
<p>To use an image as a link, just put the "img" tag inside the "a" tag </p>
<a href="https://www.youtube.com/watch?v=FwydNLGw5ww"><img src="https://source.unsplash.com/user/erondu"
alt="LIKE & SHARE" width="50" height="50" style="border: solid greenyellow;"></a>
<hr>
<h2>Link to an Email Address</h2>
<p>Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a
new email): <br>
it directly goes in mail box for sending mail
</p>
<a href="mailto:[email protected]">EMAIL ME</a>
<hr>
<h2>Button as a Link</h2>
<p>Click the button to go to the like the videp</p>
<button onclick="document.location='//www.youtube.com/watch?v=FwydNLGw5ww'">LIKE & SHARE</button>
<button
onclick="document.location='//www.google.com/search?q=wallpaper&oq=wall&aqs=chrome.0.69i59j69i57j0i67i433l2.1564j0j7&sourceid=chrome&ie=UTF-8'">wallepapers</button>
<hr>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element</p>
<a href="https://www.youtube.com/channel/UCwkGqi-Q57LDvoCgJ_c8uSg" title="this is my channel plz subscribr">my
channel</a>
<hr>
<h2>THE COLOR LINK AND BUTTON LINK IS IN OTHER FILE </h2>
<hr>
<h2>HTML Links - Create Bookmarks</h2>
<p>HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.</p>
<pre>
# Bookmarks can be useful if a web page is very long.
# To create a bookmark - first create the bookmark, then add a link to it.
# When the link is clicked, the page will scroll down or up to the location with the bookmark.
</pre>
<p><a href="#pratik"> learn more about bookmarks</a></p>
<p><a href="#chaudhari">jump to facebook link</a></p>
<hr>
<h3>twitter link</h3>
<p>Click Here</p>
<hr>
<h3>insta link</h3>
<p>Click Here</p>
<hr>
<h3>snapchat link</h3>
<p>Click Here</p>
<hr>
<h3 id="chaudhari">facebook link</h3>
<p><a href="htto://www.facebook.com"> Click Here</a></p>
<hr>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="https://source.unsplash.com/user/erondu" alt="Smiley face"
style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="https://source.unsplash.com/user/erondu" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<hr>
<h2>HTML Image Maps</h2>
<p>With HTML image maps, you can create clickable areas on an image.</p>
<p>The HTML "map" tag defines an image map. An image map is an image with clickable areas. The areas are defined
with one or more "area" tags.</p>
<p>The image is inserted using the "img" tag. The only difference from other images is that you must add a "usemap"
attribute:</p>
<p>The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a
relationship between the image and the image map. </p>
<p>The <map> element is used to create an image map, and is linked to the image by using the required name
attribute:</p>
<p>The name attribute must have the same value as the "img's" "usemap" attribute .</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
<hr>
<h2>Background Image</h2>
<p>A background image for a div element:</p>
<div style="background-image: url('https://source.unsplash.com/user/jackie/likes/1600x900');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
<hr>
<h2>HTML "picture" Element </h2>
<p>The HTML "picture" element allows you to display different pictures for different devices or screen sizes.</p>
<p>The HTML "picture" element gives web developers more flexibility in specifying image resources.
The "picture" element contains one or more "source" elements, each referring to different images through the
srcset attribute. <br> This way the browser can choose the image that best fits the current view and/or device.
<br>
Each "source" element has a media attribute that defines when the image is the most suitable.
</p>
<picture>
<source media="(min-width: 550px)" srcset="https://source.unsplash.com/user/erondu/">
<!--this is commented beacause only this is excute-->
<source media="(min-width: 500px)" srcset="https://source.unsplash.com/user/jackie/">
<img src="https://source.unsplash.com/WLUHO9A_xik/" style="width:auto;">
</picture>
<hr>
<h2>HTML Unordered Lists</h2>
<p>The HTML "ul" tag defines an unordered (bulleted) list.</p>
<p>An unordered list starts with the <q> ul</q> tag. Each list item starts with the "li" tag. <br>
The list items will be marked with bullets (small black circles) by default: </p>
<h3>AN Unordered LIST IS</h3>
<ul>
<li>PRATIK</li>
<li>PIYUSH</li>
<li>SAMEER</li>
</ul>
<p>The CSS "list-style-type" property is used to define the style of the list item marker. It can have one of the
following values:</p>
<h3>Example - Disc</h3>
<ul style="list-style-type: disc;">
<li>AKSHAY</li>
<li>AMOL</li>
<li>BHAVESH</li>
</ul>
<h3>Example - Circle</h3>
<ul style="list-style-type: circle;">
<li>LANE NO 6</li>
<li>LANE NO 7</li>
<li>LANE NO 8</li>
</ul>
<h3>Example - Square</h3>
<ul style="list-style-type: square;">
<li>COFFEE</li>
<li>TEA</li>
</ul>
<h3>Example - None</h3>
<ul style="list-style-type: none;">
<li>PUNE</li>
<li>DHULE</li>
<li>MUMBAI</li>
</ul>
<h3>A Nested List</h3>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<hr>
<h2>Ordered HTML List</h2>
<p>The HTML "ol" tag defines an ordered list. An ordered list can be numerical or alphabetical.</p>
<p>An ordered list starts with the "ol" tag. Each list item starts with the "li" tag. <br>
The list items will be marked with numbers by default:
</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The type attribute of the "ol" tag, defines the type of the list item marker:</p>
<h3>Ordered List with Numbers</h3>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h3>Ordered List with Uppercase Letters</h3>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h3>Ordered List with Lowercase Letters</h3>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h3>Ordered List with Roman Numbers</h3>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h3>The start attribute</h3>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a
specified number:</p>
<ol start="20">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i" start="20">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h3>A Nested List</h3>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
<hr>
<h3>HTML Description Lists</h3>
<p> A description list is a list of terms, with a description of each term. <br>
The "dl" tag defines the description list, the "dt" tag defines the term (name), and the "dd" tag describes each
term:
</p>
<dl>
<dt>Chatrapati Shivaji Maharaj</dt>
<dd>The Warrier</dd>
<dt>Shivajayanti</dt>
<dd>The most celebrated festival in Maharashtra</dd>
</dl>
<hr>
<h2>HTML Block and Inline Elements</h2>
<h4>Block-level Elements</h4>
<p>A block-level element always starts on a new line. <br>
A block-level element always takes up the full width available (stretches out to the left and right as far as it
can). <br>
A block level element has a top and a bottom margin, whereas an inline element does not. <br>
</p>
<p>"div" element is block element, and will always start on a new line and take up the full width available
(stretches out to the left and right as far as it can).</p>
<div style="border: 1px solid black">Hello World see it covers whole block</div>
<p>some EX of block element : "li", "ui", "p","h1 to h6 etc."</p>
<div style="background-color:black;color:white;padding:20px;">
<p>The "div" element is often used as a container for other HTML elements.</p>
<p>When used together with CSS, the "div" element can be used to style blocks of content: LIKE THIS </p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.</p>
</div>
<hr>
<h2>Inline Elements</h2>
<p>An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
</p>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as
necessary.</p>
<p>some EX of inline element : "a", "strong", "i","sub,sup", etc.</p>
<h3>EX of SPAN element</h3>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<p>The "span" element is an inline container used to mark up a part of a text, or a part of a document.</p>
<p>When used together with CSS, the <span> element can be used to style parts of the text:</p>
<hr>
<h3>HTML CLASSES IS IN ANOTHER FILE PLZ GO THROUGH THAT</h3>
<br>
<hr>
<h3>HTML id IS IN ANOTHER FILE PLZ GO THROUGH THAT</h3>
<br>
<hr>
<h2 id="pratik">HTML Bookmarks with ID and Links</h2>
<p>
HTML bookmarks are used to allow readers to jump to specific parts of a webpage.
Bookmarks can be useful if your page is very long.
To use a bookmark, you must first create it, and then add a link to it.
Then, when the link is clicked, the page will scroll to the location with the bookmark.
</p>
<hr>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h3 id="mitesh">Hello mitesh</h3>
<button onclick="display()">One msg for You "Click here"</button>
<script>
function display(){
document.getElementById("mitesh").innerHTML = "Stop Playing free fire its bad habits !";
}
</script>
</body>
</html>
</body>
</html>
</body>
</html>