ReferenceCode/index.html at main · 1PrashantChawla/ReferenceCode · GitHub

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
<!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">

    <!-- CSS  -->
    <link rel="stylesheet" href="style.css">
    <!-- FONTS  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
    <!-- LINKING   PRISM FOR COE HIGHLIGHTING -->
    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>


    <!-- TITLE  -->

    <title>HTML Cheatsheet</title>
</head>


<body>
    <!-- NAVBAR  -->

    <div class="navbar">
        <div class="logo"><img src="./copy.png" alt=""></div>
        <div class="dropdown">
            <button class="dropbtn">
                Language &#8595;

            </button>
            <div class="dropdown-content">
                <a href="index.html">HTML cheatsheet</a>
                <a href="js.html">JS cheatsheet</a>
                <a href="css.html">CSS cheatsheet</a>
                <a href="linux.html">Linux Commands</a>
            </div>
        </div>
        <div class="searchBox">
            <input type="text" placeholder="Search Here" id="searchInput" onkeydown="search()" on>
        </div>
    </div>


    <div class="container">
        <h1 class="category"> HTML Basics</h1>


        <ol>
            <li>
                <!-- SHIFT +TAB DABA KE code class="code" KI INDENT KO THEEK KARNA PADEGA PRISM.JS KI WAJA SE  -->
                <h2>HTML Boiler Plate</h2>
                <p class="heading-intro"> The starting code or the boiler plate:</p>
                <!-- code class="code" BOX  -->
                <pre class="language-html"><code class="code">&lt!DOCTYPE html&gt
&lthtml lang="en"&gt
&lthead&gt
    &ltmeta charset="UTF-8"&gt
    &ltmeta http-equiv="X-UA-Compatible" content="IE=edge"&gt
    &ltmeta name="viewport" content="width=device-width, initial-scale=1&gt0"&gt
    &lttitle&gtDocument&lt/title&gt
&lt/head&gt
&ltbody&gt

&lt/body&gt
&lt/html&gt</code class="code"></pre>
            </li>


            <li>
                <h2>Headings:
                </h2>
                <p class="heading-intro"> There are six headings available in HTML, H1 is the largest among all, and H6
                    is the smallest.</p>
                    <!-- code class="code" BOX  -->
                <pre class="language-html"><code class="code">&lth1&gt I am h1 &lt/h1&gt</code class="code"></pre>
                <pre class="language-html"><code class="code">&lth2&gt I am h2 &lt/h2&gt</code class="code"></pre>
                <pre class="language-html"><code class="code">&lth3&gt I am h3 &lt/h3&gt</code class="code"></pre>
                <pre class="language-html"><code class="code">&lth4&gt I am h4 &lt/h4&gt</code class="code"></pre>
                <pre class="language-html"><code class="code">&lth5&gt I am h5 &lt/h5&gt</code class="code"></pre>
                <pre class="language-html"><code class="code">&lth6&gt I am h6 &lt/h6&gt</code class="code"></pre>
                <!-- //HERE WHILE USING PRISM.JS WE HAVE TO TAKE CARE OF SPACES WHILE USING IT -->
            </li>


            <li>
                <h2>Container Tag</h2>
                <p class="heading-intro"><span class="bold">Container</span>
                    tags are the tags that contain some data such as text, image, etc. There are several container tags
                    in HTML.</p>
                <h3>Div</h3>
                <p class="heading-intro"><span class="bold"> &ltdiv&gt tag</span>
                    div tag or division tag is used to make blocks or divisions in the document.</p>
                <h3>
                    &ltdiv&gt tag
                </h3>
                <!-- <pre class="language-html"> THIS CLASS HAS BEEN TAKEN FROM PRISM DOCUMENTATION -->
                <!-- code class="code" BOX  -->
                <pre class="language-html"><code class="code">&ltdiv&gt This is div block &lt/div&gt</code class="code"></pre>
            </li>


        </ol>

    </div>


    <footer>
        <p class="text-center">Copyright @2022 | Designed With Prism.js Library <a href="#">| By-Prashant Chawla</a></p>

    </footer>


    <!-- <script src="script.js" defer></script>          defer means that the script will be executed only after the whole document has been parsed -->
    <script src="script.js" ></script>
</body>

</html>