-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuild-a-technical-documentation-page.txt
932 lines (886 loc) · 53.1 KB
/
build-a-technical-documentation-page.txt
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
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
** start of undefined **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page - HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>HTML Documentation</header>
<ul>
<li><a class="nav-link" href="#HTML_Introduction">HTML Introduction</a></li>
<li><a class="nav-link" href="#HTML_Page_Structure">HTML Page Structure</a></li>
<li><a class="nav-link" href="#HTML_Elements">HTML Elements</a></li>
<li><a class="nav-link" href="#HTML_Attributes">HTML Attributes</a></li>
<li><a class="nav-link" href="#HTML_Headings">HTML Headings</a></li>
<li><a class="nav-link" href="#HTML_Paragraphs">HTML Paragraphs</a></li>
<li><a class="nav-link" href="#HTML_Comments">HTML Comments</a></li>
<li><a class="nav-link" href="#HTML_Links">HTML Links</a></li>
<li><a class="nav-link" href="#HTML_Images">HTML Images</a></li>
<li><a class="nav-link" href="#HTML_Tables">HTML Tables</a></li>
<li><a class="nav-link" href="#HTML_Lists">HTML Lists</a></li>
<li><a class="nav-link" href="#HTML_Block_&_Inline">HTML Block & Inline</a></li>
<li><a class="nav-link" href="#HTML_Div">HTML Div</a></li>
<li><a class="nav-link" href="#HTML_Classes">HTML Classes</a></li>
<li><a class="nav-link" href="#HTML_Id">HTML Id</a></li>
<li><a class="nav-link" href="#HTML_Iframes">HTML Iframes</a></li>
<li><a class="nav-link" href="#HTML_Semantics">HTML Semantics</a></li>
<li><a class="nav-link" href="#HTML_Entities">HTML Entities</a></li>
<li><a class="nav-link" href="#HTML_Forms">HTML Forms</a></li>
<li><a class="nav-link" href="#HTML_Video_&_Audio_Tags">HTML Video & Audio Tags</a></li>
<li><a class="nav-link" href="#HTML_Meta_Tags">HTML Meta Tags</a></li>
<li><a class="nav-link" href="#HTML_Link_&_Script_Tags">HTML Link & Script Tags</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="HTML_Introduction">
<header>HTML Introduction</header>
<article>
<p>HTML is the standard markup language for creating Web pages.
</p>
<p class="sub-heading">What is HTML?</p>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML is the standard markup language for creating Web pages</li>
<li>HTML describes the structure of a Web page</li>
<li>HTML consists of a series of elements</li>
<li>HTML elements tell the browser how to display the content</li>
<li>HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.</li>
</ul>
</article>
</section>
<section class="main-section" id="HTML_Page_Structure">
<header>HTML Page Structure</header>
<article>
<p>An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:</p>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>Document& lt;/title>
</head>
<body>
<!-- content -->
</body>
</html>
</code>
</pre>
<p>Almost every website uses this structure. The main content goes inside the body tag. No worries if this looks complicated; let's break it down!</p>
<p><span class="black">Note:</span> These are the essential elements for a basic HTML document: <span class="black"><!DOCTYPE html>, <html>, <head>, <title>, </head>, <body>, </body>, </html></span></p>
<p class="sub-heading">DOCTYPE Declaration</p>
<code class="single-line-code"><!DOCTYPE html></code>
<p>The <!DOCTYPE html> declaration informs the web browser about the HTML version being used. The latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype declaration will be helpful!</p>
<p class="sub-heading">HTML Root Element</p>
<code class="single-line-code"><html></code>
<p>The <html> tag is the root element that encapsulates all the content on the page.</p>
<code class="single-line-code"></html></code>
<p>The </html> tag marks the end of the <html> section.</p>
<p class="sub-heading">Head Section</p>
<code class="single-line-code"><head></code>
<p>The <head> tag contains metadata and links to external resources like CSS and JavaScript files.</p>
<code class="single-line-code"></head></code>
<p>The </head> tag marks the end of the <head> section.</p>
<p class="sub-heading">Title Tag</p>
<code class="single-line-code"><title>Document</title></code>
<p>The <title> tag sets the title of the web page, which is displayed in the browser's title bar or tab.</p>
<p class="sub-heading">Body Tag</p>
<code class="single-line-code"><body></code>
<p>The <body> tag contains the visible content of the web page. This is where text, images, and other elements go.</p>
<code class="single-line-code"></body></code>
<p>The </body> tag marks the end of the visible content of the web page.</p>
<p>Every HTML page should include at least these essential elements to define the basic layout.</p>
</article>
</section>
<section class="main-section" id="HTML_Elements">
<header>HTML Elements</header>
<article>
<p class="sub-heading">What is an HTML Element?</p>
<p>An HTML element is a complete set that consists of a start tag (or opening tag), content, and an end tag (or closing tag).</p>
<p class="black">HTML Element = Start Tag + Content + End Tag</p>
<p>For example:</p>
<code class="single-line-code"><h1>This is our first heading</h1></code>
<p class="sub-heading">What is a Nested HTML Element?</p>
<p>A nested HTML element is an HTML structure where one element is placed inside another element.</p>
<p>The enclosing element is often referred to as the "parent," while the enclosed element is called the "child."</p>
<p class="black">Nested HTML Element = One HTML Element Inside Another HTML Element</p>
<p>For example:</p>
<code class="single-line-code"><h1><b>This is our first heading</b></h1></code>
<p class="sub-heading">What is an Empty HTML Element?</p>
<p>An empty HTML element is one that does not have a closing tag or content. These elements are also known as "void elements" or "self-closing elements."</p>
<p class="black">Empty HTML Element = Tags with No Content</p>
<p>For example:</p>
<code class="single-line-code"><br /></code>
<p>This is a break tag, which has no content and no closing tag. It's used to insert a line break within text or other inline elements. The <hr /> tag, used for horizontal rules, is another example of an empty or void element.</p>
</article>
</section>
<section class="main-section" id="HTML_Attributes">
<header>HTML Attributes</header>
<article>
<p>HTML attributes provide additional information about HTML elements.
</p>
<ul>
<li>All HTML elements can have <span class="black">attributes</span></li>
<li>Attributes provide <span class="black">additional information</span> about elements</li>
<li>Attributes are always specified in <span class="black">the start tag</span>.</li>
<li>Attributes usually come in name/value pairs like: <span class="black">name="value"</span>
</li>
</ul>
</article>
</section>
<section class="main-section" id="HTML_Headings">
<header>HTML Headings</header>
<article>
<p>HTML headings are titles or subtitles that you want to display on a webpage.</p>
<p>HTML headings are defined with the <span class="black"><h1></span> to <span class="black"><h6></span> tags.</p>
<p><span class="black"><h1></span> defines the most important heading. <span class="black"><h6></span> defines the least important heading.</p>
<p>For example;</p>
<code>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</code>
<p><span class="black"><h1></span> headings should be used for main headings, followed by <span class="black"><h2></span> headings, then the less important <span class="black"><h3></span> , and so on.</p>
</article>
</section>
<section class="main-section" id="HTML_Paragraphs">
<header>HTML Paragraphs</header>
<article>
<p>To create well-structured text in your HTML document, the <p> tag is essential for defining paragraphs.</p>
<p class="sub-heading"><p> Tag: Defining a Paragraph in HTML</p>
<p>The <p> tag is used to format text into distinct paragraphs. Each paragraph element is separated by automatic empty line spaces above and below the content, providing a clear visual separation. The tag must be closed with its corresponding </p> tag.</p>
<p>For example:</p>
<code class="single-line-code"> <p><!-- Paragraph content --></p></code>
</article>
</section>
<section class="main-section" id="HTML_Comments">
<header>HTML Comments</header>
<article>
<p>HTML comments are not displayed in the browser, but they can help document your HTML source code.
</p>
<p>You can add comments to your HTML source by using the following syntax:</p>
<code class="single-line-code"><!-- Write your comments here --></code>
<p>Comments can be used to hide content.This can be helpful if you hide content temporarily.</p>
<p>You can also hide more than one line. Everything between the <!-- and the --> will be hidden from the display.</p>
<p>Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.</p>
</article>
</section>
<section class="main-section" id="HTML_Links">
<header>HTML Links</header>
<article>
<p>Links are fundamental to navigating the web. In HTML, links are created using the <a> tag, also known as the Anchor tag.</p>
<p class="sub-heading">Key Characteristics of HTML Links</p>
<ul>
<li>Specified by the <a> tag.</li>
<li>Also known as hyperlinks.</li>
<li>Used to link one document to another.</li>
<li>Includes a closing tag </a>.</li>
</ul>
<p class="sub-heading">Syntax of HTML Links</p>
<code class="single-line-code"><a href="Your specified path"> Content </a></code>
<p class="sub-heading">Essential Attributes of the Anchor Tag</p>
<p>HTML links primarily use two attributes:</p>
<ul>
<li><span class="black">href attribute:</span> Defines the URL the link points to.</li>
<li><span class="black">target attribute:</span> Specifies where to open the linked document.</li>
</ul>
<p class="sub-heading">Target Attribute Values</p>
<ul><li><span class="black">_blank:</span> Opens the linked document in a new window or tab.</li>
<li><span class="black">_top:</span> Opens document in the full body of the window.</li>
<li><span class="black">_self:</span> Opens document in the same window or tab (default behavior).</li>
<li><span class="black">_parent:</span> Opens the linked document in the parent frame.</li></ul>
</article>
</section>
<section class="main-section" id="HTML_Images">
<header>HTML Images</header>
<article>
<p>The HTML <img> tag is used to embed an image in a web page.</p>
<p>Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.</p>
<p>The <img> tag is empty, it contains attributes only, and does not have a closing tag.</p>
<p>The <img> tag has two required attributes:</p>
<ul>
<li><span class="black">src-</span> Specifies the path to the image</li>
<li><span class="black">alt-</span> Specifies an alternate text for the image</li>
</ul>
<p class="sub-heading">Syntax:-</p>
<code class="single-line-code"><img src="url" alt="alternatetext"></code>
<p class="sub-heading">Setting Image Dimensions</p>
<p>Although dimensions can be set using the "width" and "height" attributes in the <img> tag, modern best practices recommend using CSS for this purpose.</p>
<p>Setting the width and height attributes for images in HTML can have a positive impact on <span class="black">Search Engine Optimization (SEO)</span>. Specifying these dimensions in the <img> tag allows browsers to allocate the correct amount of space on a web page even before the image is fully loaded. This prevents layout shifts, improving the <span class="black">Cumulative Layout Shift (CLS) score</span>—a key metric in Google's Core Web Vitals. A better CLS score can lead to a higher page ranking in search engine results.
</article>
</section>
<section class="main-section" id="HTML_Tables">
<header>HTML Tables</header>
<article>
<p>HTML tables allow you to arrange data like text, images, and links in rows and columns. You use the <table> tag to start and end a table.</p>
<p class="sub-heading">Syntax of HTML Table</p>
<code class="single-line-code"><table> // table content </table></code>
<p class="sub-heading">Key Elements of HTML Table</p>
<ul>
<li><span class="black"><table></span> Defines the table itself.</li>
<li><span class="black"><tr></span> Used for table rows.</li>
<li><span class="black"><th></span> Used for table headings.</li>
<li><span class="black"><td></span> Used for table cells (data).</li>
</ul>
<p class="sub-heading">Basic Table Structure</p>
<code>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Harry</td>
<td>100</td>
</tr>
</table>
</code>
<p class="sub-heading">Rowspan and Colspan Attributes</p>
<p><span class="black">Rowspan:</span> If you want a table cell to span multiple rows, you can use the rowspan attribute.</p>
<code class="single-line-code"><td rowspan="value"></td>
</code>
<p><span class="black">Colspan:</span> If you want a table cell to span multiple columns, you can use the colspan attribute.</p>
<code class="single-line-code"><td colspan="value"></td>
</code>
<p class="sub-heading">Adding a Caption</p>
To add a title to your table, you can use the <caption> element. This element helps both in terms of SEO and accessibility.
<code>
<table>
<caption>Student Details</caption>
<!-- Rest of the table here -->
</table>
</code>
<p class="sub-heading">Table Headers and Footers</p>
<p>Besides <th> for individual header cells, HTML tables allow you to group header or footer content using <thead> and <tfoot>.</p>
<code>
<table>
<thead>
<!-- header content -->
</thead>
<tfoot>
<!-- footer content -->
</tfoot>
<tbody>
<!-- body content -->
</tbody>
</table>
</code>
</article>
</section>
<section class="main-section" id="HTML_Lists">
<header>HTML Lists</header>
<article>
<p>HTML lists allow web developers to group a set of related items in lists.</p>
<p class="sub-heading">Types of HTML Lists</p>
<p>HTML provides different types of lists to display data in various forms. Each list contains one or more list items.</p>
<ul>
<li><span class="black">Unordered List:</span> Displays items using bullets.</li>
<li><span class="black">Ordered List:</span> Displays items in a numerical sequence, and supports various numbering styles like Arabic numerals, Roman numerals, and so on.</li>
<li><span class="black">Description List:</span> Organizes items in a format similar to a dictionary, with terms and their corresponding definitions.</li>
</ul>
<p class="sub-heading">Unordered List</p>
<p>An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.</p>
<p>The list items will be marked with bullets (small black circles) by default.</p>
<p>Example:</p>
<code>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</code>
<p class="sub-heading">Ordered List</p>
<p>An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.</p>
<p>The list items will be marked with numbers by default.</p>
<p>Example:</p>
<code>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</code>
<p class="sub-heading">Description List</p>
<p>A description list is a list of terms, with a description of each term.</p>
<p>The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:</p>
<p>Example:</p>
<code>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</code>
</article>
</section>
<section class="main-section" id="HTML_Block_&_Inline">
<header>HTML Block & Inline</header>
<article>
<p>Every HTML element has a default display value, depending on what type of element it is.</p>
<p>The two most common display values are block and inline.</p>
<p class="sub-heading">Block-level Elements</p>
<p>A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.</p>
<p>A block-level element always takes up the full width available (stretches out to the left and right as far as it can).</p>
<p>Two commonly used block elements are: <span class="black"><p></span> and <span class="black"><div></span>.</p>
<p>The <span class="black"><p></span> element defines a paragraph in an HTML document.</p>
<p>The <span class="black"><div></span> element defines a division or a section in an HTML document.</p>
<p>Example:</p>
<code>
<p>Hello World</p>
<div>Hello World</div>
</code>
<p class="sub-heading">Inline Elements</p>
<p>An inline element does not start on a new line.</p>
<p>An inline element only takes up as much width as necessary.</p>
<p>This is <span style="border: 1px solid green; padding: 5px;">a <span> element inside</span> a paragraph.</p>
<p>Example:</p>
<code class="single-line-code"><span>Hello World</span></code>
</article>
</section>
<section class="main-section" id="HTML_Div">
<header>HTML Div</header>
<article>
<p>The <span class="black"><div></span> element is used as a container for other HTML elements.</p>
<p>The <span class="black"><div></span> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.</p>
<p>Example:</p>
<p>A <span class="black"><div></span> element takes up all available width:</div>
<code>Lorem Ipsum <div>I am a div</div> dolor sit amet.</code>
<p>Output:</p>
<code>Lorem Ipsum <div style="background-color: peachpuff; margin-right: 30px;">I am a div</div> dolar sit amet.</code>
<p class="sub-heading"><div> as a container</p>
<p>The <div> element is often used to group sections of a web page together.</p>
<p>Example:</p>
<code>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
</code>
<p>Result:</p>
<code>
<div style="background-color: peachpuff; line-height: 0.5; margin-right: 30px;">
<h2 style="margin: 10px;">London</h2>
<p style="margin: 10px;">London is the capital city of England.</p>
<p style="margin: 10px;">London has over 13 million inhabitants.</p>
</div>
</code>
</article>
</section>
<section class="main-section" id="HTML_Classes">
<header>HTML Classes</header>
<article>
<p>The class attribute lets you give the same name to multiple HTML elements. That way, you can easily change their look or behavior all at once. Classes are not unique and can be assigned to multiple elements. They are generally used for applying the same styles or behaviors to a group of elements.</p>
<code>
<div class="myClass">This is a div with a class.</div>
<p class="myClass">This is a paragraph with the same class.</p>
</code>
<p class="sub-heading">Multiple Classes</p>
<p>HTML elements can belong to more than one class.</p>
<p>To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.</p>
<p>Example:</p>
<code>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</code>
</article>
</section>
<section class="main-section" id="HTML_Id">
<header>HTML Id</header>
<article>
<p>An ID is an attribute, a unique identifier assigned to only one HTML element within a page. It is often used for unique styling and JavaScript manipulations.</p>
<code class="single-line-code"><div id="myUniqueID">This is a div with an ID.</div></code>
</article>
</section>
<section class="main-section" id="HTML_Iframes">
<header>HTML Iframes</header>
<article>
<p>An HTML iframe is used to display a web page within a web page.</p>
<p class="sub-heading">HTML Iframe Syntax</p>
<p>The HTML <iframe> tag specifies an inline frame.</p>
<p>An inline frame is used to embed another document within the current HTML document.</p>
<p>Syntax:</p>
<code class="single-line-code"><iframe src="url" title="description"></iframe></code>
<p class="sub-heading">Iframe - Set Height and Width</p>
<p>Use the <span class="black">height</span> and <span class="black">width</span> attributes to specify the size of the iframe.</p>
<p>The height and width are specified in pixels by default:</p>
<p>Example:</p>
<code class="single-line-code"><iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe></code>
<p class="sub-heading">Iframe - Target for a Link</p>
<p>An iframe can be used as the target frame for a link.</p>
<p>The <span class="black">target</span> attribute of the link must refer to the <span class="black">name</span> attribute of the iframe:</p>
<p>Example:</p>
<code>
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
</code>
</article>
</section>
<section class="main-section" id="HTML_Semantics">
<header>HTML Semantics</header>
<article>
<p class="black">Semantic elements = elements with a meaning.</p>
<p class="sub-heading">What are Semantic Tags?</p>
<p>Semantic tags add meaning to your HTML. They tell both the browser and the developer what kind of content is being presented.</p>
<p>Examples of <span class="black">non-semantic</span> elements: <span class="black"><div></span> and <span class="black"><span></span> - Tells nothing about its content.</p>
<p>Examples of <span class="black">semantic</span> elements: <span class="black"><form></span>, <span class="black"><table></span>, and <span class="black"><article></span> - Clearly defines its content.</p>
<p>Here are some of the key semantic tags you must know about:</p>
<ol>
<li><span class="black"><header></span>: Used to represent the top section of a web page, often containing headings, logos, and navigation.</li>
<li><span class="black"><nav></span>: Signifies a navigation menu on a web page.</li>
<li><span class="black"><article></span>: Indicates a self-contained piece of content, such as a blog post or news article.</li>
<li><span class="black"><section></span>: Represents a thematic grouping of content on a web page.</li>
<li><span class="black"><aside></span>: Typically used for sidebars or content that is tangentially related to the main content.</li>
<li><span class="black"><footer></span>: Represents the footer of a web page, usually containing copyright information and contact details.</li>
<li><span class="black"><figure> and <figcaption></span>: Used for embedding images, diagrams, or charts, along with a caption.</li>
<li><span class="black"><main></span>: Signifies the main content area of a web page.</li>
<li><span class="black"><time></span>: Used to represent time-related information, like dates and times.</li>
</ol>
<p class="sub-heading">Why Use Semantic Tags?</p>
<p>They enhance SEO, improve accessibility, and make your code easier to read and maintain.</p>
<p>Examples:</p>
<p class="sub-heading">Using the <header> tags and <footer> tags</p>
<code>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<footer>
<p>Copyright 2023</p>
</footer>
</code>
<p class="sub-heading">Using the <article> and <section> tags</p>
<code>
<article>
<h2>Article Title</h2>
<section>
<p>Content here</p>
</section>
</article>
</code>
<p class="sub-heading">Using the <aside> and <nav> tags</p>
<code>
<aside>
<p>This is an aside content</p>
</aside>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</code>
<p class="sub-heading">Using the <figure> and <figcaption> tags</p>
<code>
<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is an example image.</figcaption>
</figure>
</code>
</article>
</section>
<section class="main-section" id="HTML_Entities">
<header>HTML Entities</header>
<article>
<p>HTML entities are a crucial part of HTML markup language. They enable you to display characters that are reserved in HTML or that aren't readily available on the keyboard. In this blog, we'll explore what HTML entities are, their types, and how to use them.</p>
<p class="sub-heading">What Are HTML Entities?</p>
<p>HTML entities are used to represent special characters in a format that the browser can understand. They start with an ampersand (&) and end with a semicolon (;).</p>
<p class="sub-heading">Why Use HTML Entities?</p>
<p>Here are some reasons:</p>
<ul>
<li><span class="black">Reserved Characters:</span> Characters like <, >, and & are reserved in HTML.</li>
<li><span class="black">Special Symbols:</span> For symbols like ©, ®, or mathematical symbols.</li>
<li><span class="black">Non-Breaking Spaces:</span> To create white spaces that won't break into a new line.</li>
</ul>
<code>
<span>&lt;</span> for <
<span>&gt;</span> for >
<span>&amp;</span> for &
<span>&nbsp;</span> for a non-breaking space
<span>&copy;</span> for ©
</code>
</article>
</section>
<section class="main-section" id="HTML_Forms">
<header>HTML Forms</header>
<article>
<p>HTML forms are essential for collecting user input on web pages. Whether it's a search bar, a login screen, or a multi-field registration form, HTML forms play a key role in web interactions. They enable users to submit data, which can be processed, stored, or returned by a server.</p>
<p class="sub-heading">Why Do We Use Forms?</p>
<p>Forms serve as the gateway between the user and the server, allowing for dynamic, interactive web experiences. They are crucial for tasks such as user authentication, data submission, feedback collection, and more. Simply put, forms make websites more engaging and functional.</p>
<p class="sub-heading">HTML Forms Structure:</p>
<p>The fundamental structure of an HTML form is encapsulated within the <form> tags. Inside these tags, you'll place various form controls like text fields, checkboxes, radio buttons, and buttons for submitting the form.</p>
<code>
<form action="/submit" method="post">
<!-- Text input for username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
</code>
<p class="sub-heading">How to Use Form Controls?</p>
<p>The <input> tag is commonly used to create form controls. The attributes of this tag define the control's behavior.</p>
<code class="single-line-code"><input type="" name="" value=""></code>
<p>The <span class="black">"type"</span> attribute specifies the type of input control (e.g., text, password, checkbox).</p>
<p>The <span class="black">"name"</span> attribute is used for identifying the control, especially when the data is sent to the server.</p>
<p>The <span class="black">"value"</span> attribute sets a default value for the control, which the user can overwrite</p>
<p class="sub-heading">HTML Input Types</p>
<p>Input types in HTML forms are the backbone of interactive web applications. They allow users to send information to web servers for various purposes like searching, logging in, or providing feedback. In this blog, we'll explore common HTML input types: text, password, radio, and checkbox. </p>
<p class="sub-heading">Text Input</p>
<p>The text input type is the most basic form of input and is widely used for collecting simple text data.</p>
<code class="single-line-code"><input type="text" name="username" placeholder="Enter your username"></code>
<p class="sub-heading">Password Input</p>
<p>The password input type is similar to the text type but hides the characters entered by the user for security reasons.</p>
<code class="single-line-code"><input type="password" name="password" placeholder="Enter your password"></code>
<p class="sub-heading">Radio Buttons</p>
<p>Radio buttons are used when you want the user to select only one option from a set of choices.</p>
<code>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</code>
<p class="sub-heading">Checkbox</p>
<p>Checkboxes allow the user to select multiple options from a set.</p>
<code>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
</code>
<p class="sub-heading">Textarea & Select</p>
<p>In addition to the basic input types, HTML forms offer other controls like textarea and select for richer user interaction. These elements allow for more complex data collection and provide a better user experience. In this blog, we will dive into these form controls and provide examples.</p>
<p class="sub-heading">The Textarea Element</p>
<p>The textarea element is used when you need multiline text input from the user. This is particularly useful for comments, reviews, or any other type of input where the length is unpredictable.</p>
<code>
<textarea name="comment" rows="4" cols="50">
Enter your comment here...
</textarea>
</code>
<p>The rows and cols attributes define the visible dimensions of the textarea.</p>
<p class="sub-heading">The Select Element</p>
<p>The select element creates a dropdown menu for the user. It is useful when you have a predefined list of options for the user to choose from.</p>
<code>
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
</code>
<p>Each option inside the select tag represents an item in the dropdown list.</p>
<p class="sub-heading">Common HTML Form Attributes</p>
<p class="sub-heading">action</p>
<p>The action attribute specifies the URL where the form data should be sent after submission.</p>
<code>
<form action="/submit.php" method="POST">
</form>
</code>
<p class="sub-heading">method</p>
<p>The method attribute defines how data is sent. The two most common methods are GET and POST.</p>
<code>
<form action="/submit.php" method="POST">
</form>
</code>
<p class="sub-heading">name</p>
<p>The name attribute specifies the name for the form element, making it easier to reference in scripts or the server-side code.</p>
<code class="single-line-code"><input type="text" name="username"></code>
<p class="sub-heading">New HTML5 Attributes</p>
<p class="sub-heading">placeholder</p>
<p>This attribute provides a hint to the user as to what can be entered in the field.</p>
<code class="single-line-code"><input type="text" placeholder="Enter your username"></code>
<p class="sub-heading">required</p>
<p>The required attribute makes a field mandatory to fill out.</p>
<code class="single-line-code"><input type="text" required></code>
<p class="sub-heading">autofocus</p>
<p>The autofocus attribute automatically focuses the cursor on the particular input when the page loads.</p>
<code class="single-line-code"><input type="text" autofocus></code>
</article>
</section>
<section class="main-section" id="HTML_Video_&_Audio_Tags">
<header>HTML Video & Audio Tags</header>
<article>
<p class="sub-heading">The <video> Tag</p>
<p>The <video> tag is used to embed video files in an HTML document. It supports multiple attributes to control the video playback.</p>
<p>Example usage:</p>
<code class="single-line-code"><video src="video.mp4" controls></video></code>
<p class="sub-heading">Attributes for <video> Tag</p>
<ul>
<li><span class="black">src:</span> Specifies the path to the video file.</li>
<li><span class="black">controls:</span> Adds video controls, like play, pause, and volume.</li>
<li><span class="black">autoplay:</span> Automatically starts playing the video when the page loads.</li>
<li><span class="black">loop:</span> Repeats the video once it ends.</li>
<li><span class="black">muted:</span> Mutes the video by default.</li>
<li><span class="black">poster:</span> Specifies an image to be displayed before the video starts playing.</li>
<li><span class="black">width and height:</span> Specifies the dimensions of the video.</li>
</ul>
<p class="sub-heading">The <audio> Tag</p>
<p>The <audio> tag is used to embed audio files in an HTML document. It also supports multiple attributes for control.</p>
<p>Example usage:</p>
<code class="single-line-code"><audio src="audio.mp3" controls></audio></code>
<p class="sub-heading">Attributes for <audio> Tag</p>
<ul>
<li><span class="black">src:</span> Specifies the path to the audio file.</li>
<li><span class="black">controls:</span> Adds audio controls, like play, pause, and volume.</li>
<li><span class="black">autoplay:</span> Automatically starts playing the audio when the page loads.</li>
<li><span class="black">loop:</span> Repeats the audio once it ends.</li>
<li><span class="black">muted:</span> Mutes the audio by default.</li>
<li><span class="black">preload:</span> Specifies if and how the audio should be loaded when the page loads ('auto', 'metadata', 'none').</li>
</ul>
</article>
</section>
<section class="main-section" id="HTML_Meta_Tags">
<header>HTML Meta Tags</header>
<article>
<p>The <meta> tags in HTML provide metadata about the HTML document. Metadata is data (information) about data. <meta> tags always go inside the document's <head> tag and are typically used to specify the character set, page description, keywords, author, and other metadata.</p>
<p>Below is an example HTML code snippet that includes various types of <meta> tags commonly used:</p>
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Internet Explorer compatibility -->
<meta name="description" content="This is a description of the web page"> <!-- Description for search engines -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- Keywords for search engines -->
<meta name="author" content="Your Name"> <!-- Author name -->
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
</code>
<p class="sub-heading">Explanation of each meta tag:</p>
<ol>
<li><span class="black">Character Encoding (charset):</span> <meta charset="UTF-8"> sets the character encoding for the webpage. UTF-8 is the most common and recommended.</li>
<li><span class="black">Viewport:</span> <meta name="viewport" content="width=device-width, initial-scale=1.0"> sets the viewport to scale the page to the screen width, useful for responsive design.</li>
<li><span class="black">IE Compatibility:</span> <meta http-equiv="X-UA-Compatible" content="ie=edge"> specifies that the page should be rendered using the latest rendering engine available on Internet Explorer.</li>
<li><span class="black">Description:</span> <meta name="description" content="This is a description of the web page"> provides a brief description of the webpage, which search engines may use in search results.</li>
<li><span class="black">Keywords:</span> <meta name="keywords" content="HTML, CSS, JavaScript"> specifies keywords for the webpage, which were historically used by search engines but are less relevant today.</li>
<li><span class="black">Author:</span> <meta name="author" content="Your Name"> indicates the name of the author of the webpage.</li>
</ol>
</article>
</section>
<section class="main-section" id="HTML_Link_&_Script_Tags">
<header>HTML Link & Script Tags</header>
<article>
<p>The <link> and <script> tags are essential elements within an HTML document's <head> section. They serve various purposes, like linking external stylesheets or including JavaScript files.</p>
<p class="sub-heading">The <link> Tag</p>
<p>The <link> tag is commonly used to link external stylesheets to an HTML document. It's a self-closing tag, meaning it doesn't require a closing tag.</p>
<p>Below is an example HTML code snippet that includes a <link> tag to link an external stylesheet:</p>
<code class="single-line-code"><link rel="stylesheet" type="text/css" href="styles.css"></code>
<p class="sub-heading">The <script> Tag</p>
<p>The <script> tag is used to include JavaScript code or files in an HTML document. Unlike the <link> tag, the <script> tag must be closed with a </script> tag.</p>
<p>Below is an example HTML code snippet that includes a <script> tag to link an external JavaScript file:</p>
<code class="single-line-code"><script src="script.js" type="text/javascript"></script></code>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<p>All the documentation in this page is taken from <a target="_blank" href="https://www.w3schools.com/html/default.asp">w3schools</a> and <a target="_blank" href="https://www.codewithharry.com/tutorial/html-home/">CodeWithHarry</a></p>
</article>
</section>
</main>
</body>
</html>
** end of undefined **
** start of undefined **
html, body{
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
#navbar{
width: 300px;
height: 100%;
border-right: 2px solid rgba(0, 22, 22, 0.4);
position: fixed;
top: 0;
left: 0;
}
header{
color: black;
margin: 10px;
font-size: 1.8em;
text-align: center;
}
#main-doc header {
text-align: left;
margin: 0px;
}
#navbar ul{
height: 88%;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li{
color: #4d4e53;
border-top: 1px solid;
list-style: none;
width: 100%;
position: relative;
}
#navbar li a{
text-decoration: none;
color: #4d4e53;
padding: 10px 30px;
display: block;
cursor: pointer;
}
#navbar li a:hover{
color: black;
}
#main-doc{
position: absolute;
left: 310px;
padding: 20px;
padding-top: 0;
margin-bottom: 110px;
}
section{
margin-top: 30px;
}
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 15px 0px 0px 20px;
}
article .sub-heading{
color: black;
font-size: 1.2em;
}
pre{
margin: 0;
height: 355px;
}
code{
display: block;
color: black;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: rgb(223, 223, 223);
padding: 15px;
padding-left: 45px;
margin: 10px;
margin-right: 38px;
border-radius: 5px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1.2em;
}
.black{
color: black;
}
.single-line-code{
padding-top: 15px;
}
#Reference a{
color: black;
}
#Reference a:visited{
color: black;
}
#Reference a:active{
color: black;
}
#Reference a:hover{
text-decoration: none;
color: blue;
cursor: pointer;
}
/* Media Queries */
/* Small screens (phones, 600px and below) */
@media screen and (max-width: 600px) {
#navbar {
width: 100%;
height: auto;
position: relative;
border-right: none;
}
#main-doc {
position: relative;
left: 0;
margin: 0;
margin-bottom: 50px;
}
header {
font-size: 1.5em;
}
#navbar ul {
height: 100%;
padding: 0;
overflow: hidden;
border-bottom: 1px solid #4d4e53;
}
#navbar li a {
padding: 10px 20px;
text-align: center;
}
code {
font-size: 1em;
padding-left: 20px;
margin-right: 20px;
}
section article {
font-size: 0.9em;
}
}
/* Medium screens (tablets, 768px and below) */
@media screen and (min-width: 601px) and (max-width: 768px) {
#navbar {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#main-doc {
left: 210px;
}
header {
font-size: 1.6em;
}
#navbar ul {
height: 88%;
}
#navbar li a {
padding: 10px 20px;
}
code {
font-size: 1.1em;
padding-left: 30px;
margin-right: 30px;
}
section article {
font-size: 1em;
}
}
** end of undefined **