Loopcode/2html.html at main · Dharmandra-singh/Loopcode · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-D0ENCWPZL9');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>2. Basic Structure of HTML</title>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9360644363281735"
     crossorigin="anonymous"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body, html {
      height: 100%;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
      background-color: #1cc9be ;
}
    .section {
      background-color: rgba(255, 255, 255, 0.3);
      margin: 20px auto;
      padding: 20px;
      border-radius: 12px;
      width: 90%;
      max-width: 1000px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    }
    h2, h3 {
      color: #333;
      margin-bottom: 15px;
    }
    p {
      font-size: 18px;
      margin-bottom: 20px;
      line-height: 1.7;
    }
    textarea {
      width: 100%;
      height: 190px;
      font-family: monospace;
      font-size: 16px;
      padding: 10px;
      border: 2px solid white;
      border-radius: 8px;
      margin-top: 10px;
      margin-bottom: 10px;
      background: rgba(255,248,240,0.4);
    }
    button {
      background-color: #28a745;
      color: white;
      border: aqua;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 20px;
    }
    iframe {
      width: 100%;
      height: 150px;
      background: rgba(255,248,240,0.4) ;
      border: 2px solid white;
      border-radius: 8px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
<div class="section">
  <h2>2. Basic Structure of HTML</h2>

  <h3>I. HTML Document Structure</h3>
  <p><strong>Explanation:</strong> Jab hum koi HTML file banate hain, to ek fix structure follow karte hain. Ye structure browser ko batata hai ki kaunsa part kaise dikhana hai. Jaise ek ghar ka naksha hota hai, waise hi ek HTML document ka naksha hota hai.</p>

  <textarea id="code1">
<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first web page.</p>
</body>
</html>
  </textarea>
  <button onclick="runCode('code1', 'output1')">Run Code</button>
  <iframe id="output1"></iframe>


  <h3>II. DOCTYPE Declaration</h3>
  <p><strong>Explanation:</strong> <code>&lt;!DOCTYPE html&gt;</code> batata hai ki document HTML5 ka hai. Agar hum ye nahi likhenge, to browser purane tareeke se page render karega ya kuch features kaam nahi karenge. Ye ek line sabse upar honi chahiye.</p>

  <textarea id="code2">
<!DOCTYPE html>
<html>
<body>
  <h2>DOCTYPE Declaration Example</h2>
</body>
</html>
  </textarea>
  <button onclick="runCode('code2', 'output2')">Run Code</button>
  <iframe id="output2"></iframe>


  <h3>III. Head and Body Tags</h3>
  <p><strong>Explanation:</strong>
  <ul>
    <li><strong>Head:</strong> Is part me title, meta information (SEO, responsive design), CSS links, aur JavaScript ke links diye jaate hain. Jo cheeze user ko directly nahi dikhti wo sab yaha hoti hain.</li>
    <li><strong>Body:</strong> Ye user ka visible part hota hai, jaise headings, paragraphs, images, videos wagairah.</li>
  </ul>
  </p>

  <textarea id="code3">
<!DOCTYPE html>
<html>
<head>
  <title>Head and Body Example</title>
</head>
<body>
  <h1>This is Body</h1>
  <p>Visible content for users.</p>
</body>
</html>
  </textarea>
  <button onclick="runCode('code3', 'output3')">Run Code</button>
  <iframe id="output3"></iframe>


  <h3>IV. Comments</h3>
  <p><strong>Explanation:</strong> Comments ka use hum code me notes ya explanations likhne ke liye karte hain. Jo browser ignore kar deta hai. Ye dusre developers ko samjhne me madad karta hai.</p>

  <textarea id="code4">
<!DOCTYPE html>
<html>
<body>
  <!-- This is a comment -->
  <h1>Comments Example</h1>
</body>
</html>
  </textarea>
  <button onclick="runCode('code4', 'output4')">Run Code</button>
  <iframe id="output4"></iframe>

</div>

<script>
function runCode(textareaId, iframeId) {
  var code = document.getElementById(textareaId).value;
  var iframe = document.getElementById(iframeId);
  iframe.contentDocument.open();
  iframe.contentDocument.write(code);
  iframe.contentDocument.close();
}
</script>

</body>
</html>