-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-tags.html
116 lines (106 loc) · 6.48 KB
/
html-tags.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/pico.css">
<title>HTML Tags</title>
</head>
<body class="container">
<div id="tnb"></div>
<div class="parent">
<div class="div1">
<div id="toc"></div>
</div>
<div class="div2">
<h2 id="1-basic-html-tags">1.Basic HTML Tags</h2>
<p><strong>Attributes are used to add more information to the tag</strong></p>
<pre><code class="lang-html"><<span class="hljs-selector-tag">html</span> lang=<span class="hljs-string">"en"</span>>
</code></pre>
<h2 id="2-heading-tag">2.Heading Tag</h2>
<p><strong>Attributes are used to add more information to the tag</strong></p>
<h1 id="heading-1-most-important-">Heading 1 (most important)</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4 id="heading-4">Heading 4</h4>
<h5 id="heading-5-least-important-">Heading 5 (least important)</h5>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h5</span>></span>Heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h6</span>></span>
</code></pre>
<h2 id="3-paragraph-tag">3.Paragraph Tag</h2>
<p><strong>Used to add paragraphs in HTML</strong></p>
<pre><code class="lang-html"><p> This <span class="hljs-keyword">is</span> a sample <span class="hljs-built_in">paragraph</span> </p>
</code></pre>
<h2 id="4-anchor-tag">4.Anchor Tag</h2>
<p><strong>Used to add links to your page</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://google.com"</span>></span> Google <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
</code></pre>
<p><strong>How it looks</strong> </p>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/5.png?raw=true"/>
</p>
<h2 id="5-image-tag">5.Image Tag</h2>
<p><strong>Used to add links to your page</strong></p>
<pre><code class="lang-html"><<span class="hljs-selector-tag">img</span> src=<span class="hljs-string">"/image.png"</span> alt=<span class="hljs-string">"Description"</span>>
</code></pre>
<p align="center">
<img src="assets/image.png"/>
</p>
<h2 id="6-br-tag">6.Br Tag</h2>
<p><strong>Used to add next line(line breaks) to your page</strong></p>
<pre><code class="lang-html"><span class="hljs-section"><br></span>
</code></pre>
<p align="center">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1590818624-1.jpg"/>
</p>
<h2 id="7-bold-italic-underline-tags">7.Bold, Italic & Underline Tags</h2>
<p><strong>Used to highlight text in your page</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">b</span>></span> Bold <span class="hljs-tag"></<span class="hljs-name">b</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span>></span> Italic <span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"><<span class="hljs-name">u</span>></span> Underline <span class="hljs-tag"></<span class="hljs-name">u</span>></span>
</code></pre>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/6.png?raw=true"/>
</p>
<h2 id="8-big-small-tags">8.Big & Small Tags</h2>
<p><strong>Used to display big & small text on your page</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">big</span>></span> Big <span class="hljs-tag"></<span class="hljs-name">big</span>></span>
<span class="hljs-tag"><<span class="hljs-name">small</span>></span> Small <span class="hljs-tag"></<span class="hljs-name">small</span>></span>
</code></pre>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/7.png?raw=true"/>
</p>
<h2 id="9-hr-tag">9.Hr Tag</h2>
<p><strong>Used to display a horizontal ruler, used to separate content</strong></p>
<pre><code class="lang-html"><span class="hljs-section"><hr></span>
</code></pre>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/8.png?raw=true"/>
</p>
<h2 id="10-subscript-superscript-tag">10.Subscript & Superscript Tag</h2>
<p><strong>Used to display a horizontal ruler, used to separate content</strong></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">sub</span>></span> subscript <span class="hljs-tag"></<span class="hljs-name">sub</span>></span>
<span class="hljs-tag"><<span class="hljs-name">sup</span>></span> superscript <span class="hljs-tag"></<span class="hljs-name">sup</span>></span>
</code></pre>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/9.png?raw=true"/>
</p>
<h2 id="11-pre-tag">11.Pre Tag</h2>
<p><strong>Used to display text as it is (without ignoring spaces & next line)</strong></p>
<pre><code class="lang-html"><span class="hljs-symbol"><pre></span> This
<span class="hljs-keyword">is</span> <span class="hljs-keyword">a</span> sample
text.
</<span class="hljs-keyword">pre</span>>
</code></pre>
<p align="center">
<img src="https://github.com/Subham-Maity/HTML-Tutorial-for-Beginners/blob/master/5.Images(ignore)/10.png?raw=true"/>
</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>