-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathWebTechnologies.html
More file actions
315 lines (315 loc) · 13.2 KB
/
Copy pathWebTechnologies.html
File metadata and controls
315 lines (315 loc) · 13.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Technologies Explained</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f5f7fa;
margin: 0;
padding: 0;
min-height: 100vh;
}
.container {
max-width: 900px;
margin: 40px auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(44,62,80,0.10);
padding: 32px 24px 24px 24px;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 24px;
}
.card {
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(44,62,80,0.06);
margin-bottom: 24px;
padding: 20px 24px 16px 24px;
}
.card h2 {
margin-top: 0;
color: #1976d2;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.card-content {
display: none;
margin-top: 10px;
font-size: 1.08em;
color: #333;
line-height: 1.7;
}
.card-content.active {
display: block;
animation: fadeIn 0.3s;
}
pre, code {
background: #f4f4f4;
border-radius: 6px;
padding: 10px;
font-size: 1em;
overflow-x: auto;
}
.diagram {
display: flex;
justify-content: center;
margin: 18px 0;
}
.quiz {
background: #e3f2fd;
border-radius: 8px;
padding: 12px 16px;
margin-top: 12px;
}
.quiz label {
display: block;
margin-bottom: 8px;
cursor: pointer;
}
.quiz-result {
margin-top: 8px;
font-weight: bold;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 700px) {
.container { padding: 12px 2vw 12px 2vw; }
.card { padding: 12px 8px 10px 8px; }
}
</style>
</head>
<body>
<div class="container">
<h1>Web Technologies Explained</h1>
<!-- HTML Card -->
<div class="card">
<h2 onclick="toggleCard('html-card')">HTML <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="html-card">
<b>HTML (HyperText Markup Language)</b> is the standard language for creating web pages.<br><br>
<ul>
<li>Defines the structure of web content using <b>tags</b> (e.g., <code><h1></code>, <code><p></code>, <code><img></code>).</li>
<li>Browsers read HTML to display text, images, links, forms, and more.</li>
</ul>
<b>Example:</b>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a web page.</p>
</body>
</html></code></pre>
<div class="diagram">
<img src="https://www.w3schools.com/html/img_sem_elements.gif" alt="HTML Structure" style="max-width:100%;border-radius:8px;box-shadow:0 2px 8px #ccc;">
</div>
</div>
</div>
<!-- CSS Card -->
<div class="card">
<h2 onclick="toggleCard('css-card')">CSS <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="css-card">
<b>CSS (Cascading Style Sheets)</b> is used to style and layout web pages.<br><br>
<ul>
<li>Controls colors, fonts, spacing, layout, and responsiveness.</li>
<li>Can be written inline, in the <code><style></code> tag, or in external files.</li>
</ul>
<b>Example:</b>
<pre><code>body {
background: #f5f7fa;
color: #333;
font-family: Arial, sans-serif;
}
h1 {
color: #1976d2;
}</code></pre>
<div class="diagram">
<img src="https://www.w3schools.com/css/img_selectors.gif" alt="CSS Selectors" style="max-width:100%;border-radius:8px;box-shadow:0 2px 8px #ccc;">
</div>
</div>
</div>
<!-- JavaScript Card -->
<div class="card">
<h2 onclick="toggleCard('js-card')">JavaScript <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="js-card">
<b>JavaScript</b> is the programming language of the web.<br><br>
<ul>
<li>Makes web pages interactive (respond to clicks, show/hide content, fetch data, etc.).</li>
<li>Runs in the browser (and on servers with Node.js).</li>
</ul>
<b>Example:</b>
<pre><code>document.getElementById('myBtn').onclick = function() {
alert('Button clicked!');
};</code></pre>
<div class="diagram">
<img src="https://www.w3schools.com/js/pic_htmltree.gif" alt="JavaScript DOM" style="max-width:100%;border-radius:8px;box-shadow:0 2px 8px #ccc;">
</div>
</div>
</div>
<!-- HTTP Card -->
<div class="card">
<h2 onclick="toggleCard('http-card')">HTTP & Web Servers <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="http-card">
<b>HTTP (HyperText Transfer Protocol)</b> is the protocol for transferring data on the web.<br><br>
<ul>
<li>Browsers (clients) send <b>requests</b> to servers, which send <b>responses</b> back.</li>
<li>Common methods: <b>GET</b> (fetch data), <b>POST</b> (send data), <b>PUT</b>, <b>DELETE</b>.</li>
</ul>
<b>Example HTTP Request:</b>
<pre><code>GET /index.html HTTP/1.1
Host: www.example.com</code></pre>
<div class="diagram">
<img src="https://www.w3schools.com/whatis/img_clientserver.jpg" alt="Client-Server" style="max-width:100%;border-radius:8px;box-shadow:0 2px 8px #ccc;">
</div>
</div>
</div>
<!-- APIs Card -->
<div class="card">
<h2 onclick="toggleCard('api-card')">APIs <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="api-card">
<b>API (Application Programming Interface)</b> lets programs talk to each other.<br><br>
<ul>
<li>Web APIs allow your site to fetch or send data to other services (like weather, maps, or your own backend).</li>
<li>APIs use HTTP and data formats like <b>JSON</b> or <b>XML</b>.</li>
</ul>
<b>Example (fetching data with JavaScript):</b>
<pre><code>fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));</code></pre>
</div>
</div>
<!-- Frontend & Backend Card -->
<div class="card">
<h2 onclick="toggleCard('frontend-backend-card')">Frontend & Backend <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="frontend-backend-card">
<b>Frontend</b> is everything the user sees and interacts with (HTML, CSS, JavaScript in the browser).<br>
<b>Backend</b> is the server-side logic, databases, and APIs that power the site.<br><br>
<div class="diagram">
<img src="https://www.w3schools.com/whatis/img_frontbackend.jpg" alt="Frontend vs Backend" style="max-width:100%;border-radius:8px;box-shadow:0 2px 8px #ccc;">
</div>
<ul>
<li><b>Frontend:</b> React, Angular, Vue, plain HTML/CSS/JS</li>
<li><b>Backend:</b> Node.js, Python, Java, PHP, Ruby, etc.</li>
</ul>
</div>
</div>
<!-- Databases Card -->
<div class="card">
<h2 onclick="toggleCard('db-card')">Databases <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="db-card">
<b>Databases</b> store and organize data for web applications.<br><br>
<ul>
<li><b>SQL Databases:</b> Structured, use tables (e.g., MySQL, PostgreSQL, SQLite).</li>
<li><b>NoSQL Databases:</b> Flexible, use documents or key-value pairs (e.g., MongoDB, Redis).</li>
</ul>
<b>Example SQL Query:</b>
<pre><code>SELECT * FROM users WHERE age > 18;</code></pre>
</div>
</div>
<!-- Quiz Card -->
<div class="card">
<h2 onclick="toggleCard('quiz-card')">Quick Quiz <span style="font-size:1.2em;">▼</span></h2>
<div class="card-content" id="quiz-card">
<div class="quiz">
<b>Which language is used to style web pages?</b><br>
<label><input type="radio" name="quiz1" value="HTML"> HTML</label>
<label><input type="radio" name="quiz1" value="CSS"> CSS</label>
<label><input type="radio" name="quiz1" value="JavaScript"> JavaScript</label>
<div class="quiz-result" id="quiz1-result"></div>
</div>
<div class="quiz" style="margin-top:18px;">
<b>What does API stand for?</b><br>
<label><input type="radio" name="quiz2" value="Application Programming Interface"> Application Programming Interface</label>
<label><input type="radio" name="quiz2" value="Advanced Page Integration"> Advanced Page Integration</label>
<label><input type="radio" name="quiz2" value="Automated Program Index"> Automated Program Index</label>
<div class="quiz-result" id="quiz2-result"></div>
</div>
</div>
</div>
</div>
<div style="text-align:center; margin: 40px 0;">
<a href="Java.html" id="open-java-btn" style="
display: inline-block;
background: #4caf50;
color: white;
font-size: 1.5em;
padding: 20px 40px;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(44,62,80,0.08);
transition: background 0.2s;
"
onmouseover="this.style.background='#388e3c'"
onmouseout="this.style.background='#4caf50'"
>
Learn JavaScript
</a>
</div>
<div style="text-align:center; margin: 40px 0;">
<a href="index.html" id="open-practical-btn" style="
display: inline-block;
background: #ff9800;
color: white;
font-size: 1.5em;
padding: 20px 40px;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(44,62,80,0.08);
transition: background 0.2s;
"
onmouseover="this.style.background='#f57c00'"
onmouseout="this.style.background='#ff9800'"
>
Practical Programs
</a>
</div>
<script>
function toggleCard(id) {
var content = document.getElementById(id);
if (content.classList.contains('active')) {
content.classList.remove('active');
} else {
content.classList.add('active');
}
}
// Quiz logic
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('input[name="quiz1"]').forEach(function(input) {
input.addEventListener('change', function() {
var result = document.getElementById('quiz1-result');
if (this.value === 'CSS') {
result.textContent = 'Correct! CSS is used for styling.';
result.style.color = '#388e3c';
} else {
result.textContent = 'Try again!';
result.style.color = '#e53935';
}
});
});
document.querySelectorAll('input[name="quiz2"]').forEach(function(input) {
input.addEventListener('change', function() {
var result = document.getElementById('quiz2-result');
if (this.value === 'Application Programming Interface') {
result.textContent = 'Correct!';
result.style.color = '#388e3c';
} else {
result.textContent = 'Try again!';
result.style.color = '#e53935';
}
});
});
});
</script>
</body>
</html>