-
Notifications
You must be signed in to change notification settings - Fork 13
/
web_tech.html
729 lines (650 loc) · 39.1 KB
/
web_tech.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Helpdesk</title>
</head>
<style>
#img1 {
width: 300px;
transition: transform .2s ease-in-out;
}
#img1:hover {
transform: scale(1.2);
cursor: zoom-in
}
h3 {
margin-left: 0 !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="icon" href="logo.png" type="image/png">
<link rel="stylesheet" type="text/css" href="style.css?v=0" />
<script src="script.js"></script>
<body>
<header class="navbar navbar-expand-md d-flex flex-wrap justify-content-center p-3 mb-2 border-bottom">
<div class="container-fluid">
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img src="logo.png" id="imglogo">
<span class="fs-4 mr-5 lo"><h2 class="bold-text">Helpdesk</h2></span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills navbar-nav ms-auto" id="myNav">
<!-- Sem1 -->
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Semister 1</a>
<ul class="dropdown-menu">
<li><a class="nav-link dropdown-item" href="c_language.html">C-Language</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Semister 2</a>
<ul class="dropdown-menu">
<li><a class="nav-link dropdown-item" href="data_structure.html">Data Structure</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Semister 3</a>
<ul class="dropdown-menu">
<!-- Add subjects for Sem1 here -->
<li><a class="nav-link dropdown-item" href="dbms.html">DBMS</a></li>
<li><a class="nav-link dropdown-item" href="mech_updated.html">Mechanics</a></li>
<li><a class="nav-link dropdown-item" href="object_updated.html">OOPS Code</a></li>
<li><a class="nav-link dropdown-item" href="daa_updated.html">DAA</a></li>
</ul>
</li>
<!-- Sem2 -->
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Semister 4</a>
<ul class="dropdown-menu">
<li><a class="nav-link dropdown-item" href="python.html">Python</a></li>
<li><a class="nav-link dropdown-item" href="os.html">OS</a></li>
<li><a class="nav-link dropdown-item" href="web_tech.html">Web Technologies</a></li>
<li><a class="nav-link dropdown-item" href="archi.html">Comp. Architecture</a></li>
<li><a class="nav-link dropdown-item" href="math.html">Mathematics</a></li>
<li><a class="nav-link dropdown-item" href="archi_lab.html">Comp. Architecture Lab</a></li>
<li><a class="nav-link dropdown-item" href="web_tech_lab.html">Web Technologies Lab</a></li>
<li><a class="nav-link dropdown-item" href="os_lab.html">OS Lab</a></li>
<li><a class="nav-link dropdown-item" href="startup.html">Startup</a></li>
</ul>
<li><a class="nav-link dropdown-item" href="contributers.html"><center>Our Valuable Contributers</center></a></li>
<li><a class="nav-link dropdown-item" href="Admin.html"><center>Admin Portal</center></a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="body">
<div id="watermark">@Debuggers</div>
<a href="Quizes/web_tech_quiz.html">MCQ</a>
<a href="web_imp.html">Important Questions</a><hr>
<center>
<h1>Web Technology</h1>
</center>
<b>Web Server : </b>Web communicatation takes place between a client process and the web server. The server process
creates a socket and client process access the server through the socket mechanism.<br>
<ol type="1">
<li>HTTP server process is created on a port, which wait for clients to establish TCP (Transmission Control
Protocol) connection. </li>
<li>An HTTP client initiate a TCP connection with HTTP server at the deginated port.</li>
<li>The HTTP server accept this connection.</li>
<li>The HTTP client send a request for a resources to the server.</li>
<li>The HTTP server closes the TCP connection.</li>
<li>The HTTP client receive the response containing information and process it.</li>
</ol>
</ol>
<b>Web technologies</b> Www is an application that runs the internet and it’s applications. There are several types
of browsers such as Mozilla Firefox, internet explorer, Google Chrome are the hyperlink through www.
<br>
<b>TCP/IP ( Transmission control protocol)/(Internet protocol) <br>5 layers
</b>
<ol type="1">
<li>Physical layer</li>
<li>link layer</li>
<li>Internet layer </li>
<li>Transport layer</li>
<li>Application layer</li>
</ol>
<ol type="1">
<li><b>Physical Layer - </b> This layer deals with the hardware connectivity, voltage, etc..</li>
<li><b>Data Link Layer - </b> It is also very similar to the other network model. This cover mac ( media access
control ) that is how can send the data when needed. This also deals with frame formats. </li>
<li><b>Internet Layer - </b> It is very important from the context of communication over ans internal. THis layer
function with format of datagram as define in IP and also about the mechanism of forwarding the datagram from
source computer to the final destination via one or more route.</li>
<li><b>Transport Layer - </b> There are two main protocols in this layer TCP and UTP. TCP ensure that
communication between the sender and reciever is relaible, error free and is sequence however UTP does not offer
relaiblity. Hence, TCP is a connection oriented protocol and VTP is a connectionless protocol. </li>
<li><b>Application Layer - </b> It allows and end user to run various applications on the internet and used the
internet in the different way. These applications are FTP(File transfer protocol), SMTP(Simple main transfer
protocol), TFTP(TRival file transfer protocol), HTTP(HYper text transfer protocol).</li>
</ol>
<ol>
<br>
<b>Q. What is UNIX and LINUX server?</b><br>
Linux and Unix is a server running variant of LINUX open source operating system. It is designed to handle the
most demanding business applications such as web services and databases. UNIX/LINUX server provides a strong
foundation for complex, enterprise level data centre and container workload environment ranging bare metal to
machine container including public or private cloud. Its is open source software OS, build around the LINUX, UNIX
kernel. LINUX is also leading OS on servers and popular on mainframe and supercomputers. LINUX server have
virtually no downtimes. It gives software developers a degree of control when creating certain softwares as a
service tool.
<br>
<img src="img\webtech\image (3).jpg" alt="" srcset="" id="img1">
<img src="img\webtech\image (2).jpg" alt="" srcset="" id="img1">
</ol>
<b>File organisation</b>
<ol type="1">
<li><b>Ordinary file :- </b>An ordinary file consists of characters stored in the disk.</li>
<li><b>Special file :- </b>A special file is always representing devices such as terminal, printer etc. </li>
<li><b>Directory:- </b>It is a collection of files and other sub directories.</li>
<li><b>Bin :- </b>It contains executable files for booting the process and system software.</li>
<li><b>Dev :- </b>It contains the special files that represent devices like terminal, console, printer etc.</li>
<li><b>Home :- </b>The route of the subtree of user directories. After logging, user is placed in the default directories is called home / home directories.</li>
</ol>
<img src="img\webtech\image (1).jpg" alt="" srcset="" id="img1">
<br>
<b>HTML:- </b>An HTML document is a text file that contains text and mark-up called "tags".
<br>
<b>HTML elements:- </b>:HTML elements are the fundamentals building blocks of web pages. An element consist of a tag, it is a attributes and content. The content of the tag may be simple text, or maybe one or more tags both. These elements are organised in a tree , like structure.
<br>
<xmp>
The root element of HTML documents
<html>
<head>…………</head>
<body>…………</body>
</html>
</xmp>
<br>
<b>OS commands </b>
<ol type="1">
<li><b>ls :- </b>Displays information about files in the current directory.</li>
<li><b>mkdir :- </b>Creates a directory.</li>
<li><b>rmdir :- </b>Removes empty directories from the directory lists.</li>
<li><b>chmod :- </b>allows an administrator to set or modify a file permission.</li>
<li><b>cd :- </b>To navigate between different folders.</li>
</ol>
<b>HTML commands</b>
<xmp> <html></xmp>: beginning and end of an HTML document.
<xmp> <header>: </xmp> header information of the document.
<xmp><title>:</xmp> specifies the title of the page.
<xmp><body>: </xmp>contains the main content.
<xmp><h1> to <h6>: </xmp>define headings of different sizes.
<xmp> <p>: </xmp>This tag defines a paragraph of text.
<xmp> <a>: </xmp>creates a hyperlink.
<xmp> <img>: </xmp>inserts an image into the page.
<xmp> <ul>: </xmp>create an unordered list.
<xmp> <ol>: </xmp>create an ordered list.
<xmp> <br>: </xmp>inserts a single line break
<xmp> <hr>: </xmp>the element is displayed as a horizontal rule that is used to separate content.
<ol type=None>
<li><img src="img/webtech/dif_html_xml.jpg" alt="" srcset="" id="img1"></li>
</ol>
<h2>Steps for Web Designing</h2>
<ol>
<li>Goal identification</li>
<li>Scope definition</li>
<li>Site creation</li>
<li>Content creation</li>
<li>Visual elements</li>
<li>Testing</li>
<li>Launch</li>
</ol>
<p><strong>1. Goal identification:</strong> Where we work with the client to determine what goals the new website needs to fulfill, that is, what is its purpose?</p>
<p><strong>2. Scope definition:</strong> Once we know the site’s goal, we can define the scope of the project, that is, what web pages and features the site requires to fulfill the goals.</p>
<p><strong>3. Site creation:</strong> With the scope well defined, we can start digging into the site map, defining how the contents and features appear. We define the scope definition with intermediate.</p>
<p><strong>4. Content creation:</strong> Now that we have a bigger picture of the site in mind, we can start content creation for individual pages and keep the page’s focus on a single topic.</p>
<p><strong>5. Visual elements:</strong> With the site architecture and a few contents in place, we can start working on visual ways.</p>
<p><strong>6. Testing:</strong> We have got all our pages and defined how they are displayed to the site visitor so as to make sure that it all works.</p>
<p><strong>7. Launch:</strong> Once everything is working successfully, it’s time to plan and execute our website launch.</p>
<h2>IP Addresses and their Classes</h2>
<p>Internet protocol in the TCP/IP protocol should assign a new address called IP Address, to each device participating in a computer network. An IP Address serves basically host network interfaces and the location address.</p>
<p>IPv4 = 32 bits address<br>
IPv6 = 128 bits address<br>
But due to tremendous network growth in the internet, a new system is used that is IPv6.</p>
<p>IP Address is usually written using four decimal numbers. Each represents 8 bits in the range 0-255.<br>
Ex: 203.197.107.107</p>
<h3>Classes of IP Address</h3>
<ol>
<li>Class A: 0-127</li>
<li>Class B: 128-191</li>
<li>Class C: 192-223</li>
<li>Class D: 224-239</li>
<li>Class E: 240-255</li>
</ol>
<h2>DNS server (Domain Name System Servers)</h2>
<p>DNS servers or Domain Name System servers allow us to interact with devices on the internet without actually remembering the string of the number. Each computer on the internet has a unique address called as IP address, which is similar to the address required for sending a direct mail.</p>
<p>107.218.10.33 is an IP Address consisting of four decimal numbers in the range 0-255.</p>
<h3>Purpose of DNS</h3>
<ol>
<li>DNS helps with the resolving of domain name to IP Addresses.</li>
<li>It identifies and locates different hosts on the internet such that they can communicate successfully.</li>
<li>DNS is used for routing services.</li>
<li>It is used for the verification of hosts, emails, and services.</li>
</ol>
<br><br>
<h1>IMPORTANT QUESTION</h1>
<h2>1.Designing a Webpage</h2>
<p>Designing a webpage involves several steps to ensure it meets both aesthetic and functional criteria. Here's a breakdown of the process:</p>
<ol>
<li><strong>Define Objectives and Audience:</strong>
<ul>
<li>Understand the purpose of the webpage (e.g., informational, e-commerce).</li>
<li>Identify the target audience and their preferences to tailor the design accordingly.</li>
</ul>
</li>
<li><strong>Research and Planning:</strong>
<ul>
<li>Explore existing websites for inspiration and to understand design trends.</li>
<li>Plan the layout and structure of the webpage, considering user experience and navigation flow.</li>
</ul>
</li>
<li><strong>Choose a Development Platform:</strong>
<ul>
<li>Decide whether to use a website builder or code from scratch using HTML, CSS, and JavaScript.</li>
</ul>
</li>
<li><strong>Create Wireframes and Mockups:</strong>
<ul>
<li>Develop wireframes to visualize the layout and placement of elements.</li>
<li>Design high-fidelity mockups to refine the visual appearance and user interface.</li>
</ul>
</li>
<li><strong>Content Creation and Organization:</strong>
<ul>
<li>Generate or gather content such as text, images, and multimedia elements.</li>
<li>Organize content logically to ensure easy navigation and comprehension for users.</li>
</ul>
</li>
<li><strong>Coding and Implementation:</strong>
<ul>
<li>Write HTML to create the structure and content of the webpage.</li>
<li>Use CSS to style the webpage, including layout, colors, typography, and responsive design.</li>
<li>Implement JavaScript for interactivity and functionality, such as forms and animations.</li>
</ul>
</li>
<li><strong>Testing and Optimization:</strong>
<ul>
<li>Test the webpage across different browsers and devices for compatibility and responsiveness.</li>
<li>Check for errors, broken links, and usability issues.</li>
<li>Optimize the webpage for performance by minimizing file sizes and improving loading times.</li>
</ul>
</li>
<li><strong>Launch and Maintenance:</strong>
<ul>
<li>Publish the webpage for public access.</li>
<li>Monitor user feedback and analytics to identify areas for improvement.</li>
<li>Regularly update content and make necessary adjustments to keep the webpage relevant and engaging.</li>
</ul>
</li>
</ol>
<h2>2. Explain TCP/IP</h2>
<p>TCP/IP (Transmission Control Protocol/Internet Protocol):</p>
<ul>
<li>TCP/IP is a set of networking protocols used for communication over the internet.</li>
<li>TCP (Transmission Control Protocol) manages the sending and receiving of data packets between devices, ensuring reliability and error correction.</li>
<li>IP (Internet Protocol) handles the addressing and routing of data packets across networks, enabling devices to communicate with each other.</li>
<li>TCP/IP provides a standardized framework for transmitting data between devices on a network, making it a fundamental component of internet communication.</li>
</ul>
<h2>3. Structure of Unix and Linux</h2>
<p>The structure of Unix and Linux operating systems is organized in a hierarchical manner, typically following the Filesystem Hierarchy Standard (FHS). Here's a breakdown of the key components and structure:</p>
<ul>
<li><strong>Root Directory ("/"):</strong>
<ul>
<li>At the top level is the root directory, denoted by a forward slash ("/").</li>
<li>The root directory contains all other directories and files in the system.</li>
</ul>
</li>
<li><strong>Basic Directories:</strong>
<ul>
<li>/bin: Contains essential executable binaries (commands) used by all users.</li>
<li>/boot: Contains boot loader files and kernel images.</li>
<li>/dev: Contains device files representing hardware devices.</li>
<li>/etc: Contains system-wide configuration files.</li>
<li>/home: Contains user home directories.</li>
<li>/lib and /lib64: Contains shared library files used by executables in /bin and /sbin.</li>
<li>/media: Mount point for removable media devices (e.g., USB drives).</li>
<li>/mnt: Mount point for temporary file systems.</li>
<li>/opt: Contains optional software packages.</li>
<li>/proc: Contains system process information and kernel parameters (virtual file system).</li>
<li>/root: Home directory for the root user.</li>
<li>/run: Contains system runtime data.</li>
</ul>
</li>
<li><strong>System Administration Directories:</strong>
<ul>
<li>/sbin: Contains system administration binaries (commands) for root users.</li>
<li>/srv: Contains data for services provided by the system.</li>
<li>/sys: Contains information about the system's hardware devices and drivers (virtual file system).</li>
<li>/tmp: Contains temporary files.</li>
<li>/usr: Contains user binaries, libraries, documentation, and other resources.</li>
<li>/var: Contains variable data, such as log files, spool files, and temporary files generated by programs.</li>
</ul>
</li>
</ul>
<h2>3. Differences between XML and HTML</h2>
<p><strong>Purpose:</strong></p>
<ul>
<li><strong>XML:</strong> Used for storing and transporting structured data, content-agnostic.</li>
<li><strong>HTML:</strong> Used for creating web pages, specifically designed for presenting content on the internet.</li>
</ul>
<p><strong>Syntax:</strong></p>
<ul>
<li><strong>XML:</strong> Strict syntax rules, including properly nested tags with opening and closing tags.</li>
<li><strong>HTML:</strong> Less strict syntax, predefined tags with some flexibility in nesting.</li>
</ul>
<p><strong>Content:</strong></p>
<ul>
<li><strong>XML:</strong> Represents any structured data, including text, numbers, and hierarchical structures.</li>
<li><strong>HTML:</strong> Defines the structure and content of web documents, including text, images, links, forms, etc.</li>
</ul>
<p><strong>Usage:</strong></p>
<ul>
<li><strong>XML:</strong> Widely used for data storage, configuration files, and data interchange between systems.</li>
<li><strong>HTML:</strong> Standard markup language for web development, interpreted by web browsers to render web pages.</li>
</ul>
<p><strong>Extensibility:</strong></p>
<ul>
<li><strong>XML:</strong> Highly extensible, allows users to define custom tags and document structures.</li>
<li><strong>HTML:</strong> Less extensible, primarily designed for web document structure, limited customization compared to XML.</li>
</ul>
<h2>4. Web Server</h2>
<p>A web server is a software application or hardware device that serves web content to users over the internet.</p>
<p>It receives requests from client web browsers (like Chrome, Firefox) and responds by delivering web pages, images, videos, or other content stored on the server.</p>
<p>Common web server software includes Apache HTTP Server, Nginx, Microsoft Internet Information Services (IIS), and LiteSpeed Web Server.</p>
<p>Web servers use protocols like HTTP (HyperText Transfer Protocol) and HTTPS (HTTP Secure) for communication with clients, ensuring secure data transfer.</p>
<h2>5. IP Address and Classes</h2>
<p>An IP address is a unique numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication.</p>
<p>IP addresses are divided into classes based on the range of values in the first octet:</p>
<ul>
<li>Class A (1-126)</li>
<li>Class B (128-191)</li>
<li>Class C (192-223)</li>
<li>Class D (224-239)</li>
<li>Class E (240-255)</li>
</ul>
<p>Classes A, B, and C are used for host addressing, while Class D is reserved for multicast addressing, and Class E is reserved for experimental use.</p>
<p>IP addresses allow devices to communicate with each other over a network, enabling data transmission and internet connectivity.</p>
<h2>6. DNS (Domain Name System)</h2>
<p>DNS is a hierarchical decentralized naming system that translates human-readable domain names (e.g., www.example.com) into IP addresses.</p>
<p>It provides a way to map domain names to IP addresses, allowing users to access websites using easy-to-remember domain names instead of numeric IP addresses.</p>
<p>DNS operates through a distributed network of DNS servers, which store and manage domain name records (such as A records, CNAME records, MX records).</p>
<p>When a user enters a domain name into a web browser, the DNS resolver queries DNS servers to obtain the corresponding IP address, enabling the browser to connect to the requested website.</p>
<h2>7. Explain Form Elements in HTML</h2>
<p>HTML form elements allow creating interactive forms on web pages.</p>
<p>Input fields include text, password, email, number, checkbox, and radio button.</p>
<p>Text areas enable multi-line text input.</p>
<p>Buttons allow form submission, resetting, or triggering JavaScript functions.</p>
<p>Dropdown menus provide a list of options for selection.</p>
<p>Labels describe input fields for better accessibility.</p>
<p>These elements collectively facilitate the creation of user-friendly and interactive forms on web pages.</p>
<h2>8. Table Tags in HTML</h2>
<p>HTML table tags are used to create structured tabular data on web pages.</p>
<p>The main table tags include <code><table></code>, <code><tr></code>, <code><td></code>, and <code><th></code>.</p>
<ul>
<li><code><table></code>: Defines a table.</li>
<li><code><tr></code>: Defines a row within a table.</li>
<li><code><td></code>: Defines a cell within a row for regular data.</li>
<li><code><th></code>: Defines a cell within a row for table headers.</li>
</ul>
<p>Additional tags like <code><thead></code>, <code><tbody></code>, and <code><tfoot></code> can be used to structure the table header, body, and footer sections respectively.</p>
<p>Attributes like <code>colspan</code> and <code>rowspan</code> can be used to span cells across multiple rows or columns.</p>
<h2>9. List Tags in HTML</h2>
<p>HTML list tags are used to create lists of items on web pages.</p>
<p>There are three main types of list tags: <code><ul></code>, <code><ol></code>, and <code><li></code>.</p>
<ul>
<li><code><ul></code>: Defines an unordered list, where items are marked with bullets.</li>
<li><code><ol></code>: Defines an ordered list, where items are marked with numbers or letters.</li>
<li><code><li></code>: Defines a list item within <code><ul></code> or <code><ol></code>.</li>
</ul>
<p>Attributes like <code>type</code> and <code>start</code> can be used to customize the list style and starting number for ordered lists.</p>
<p>Nested lists can be created by placing lists within list items (<code><ul></code> or <code><ol></code> within <code><li></code>).</p>
<h2>10. CSS (Cascading Style Sheets)</h2>
<p>CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML.</p>
<p>It defines the styles, layout, and appearance of HTML elements on a web page, including colors, fonts, margins, and positioning.</p>
<h3>Ways to Include CSS in HTML:</h3>
<ol>
<li><strong>Inline CSS:</strong>
<p>Inline CSS is applied directly to an HTML element using the style attribute.</p>
<p>Example:</p>
<pre><code><p style="color: red; font-size: 16px;">This is a paragraph with inline CSS.</p></code></pre>
</li>
<li><strong>Internal CSS:</strong>
<p>Internal CSS is defined within the <code><style></code> element in the <code><head></code> section of an HTML document.</p>
<p>Example:</p>
<pre><code><head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
</body></code></pre>
</li>
<li><strong>External CSS:</strong>
<p>External CSS is defined in a separate CSS file and linked to an HTML document using the <code><link></code> element.</p>
<p>Example:</p>
<pre><code><head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head></code></pre>
<p>Contents of "styles.css":</p>
<pre><code>p {
color: green;
font-size: 20px;
}</code></pre>
</li>
</ol>
<h2>11. Selectors in HTML</h2>
<p>Selectors are used in CSS (Cascading Style Sheets) to target and style HTML elements.</p>
<p>They allow developers to apply styles to specific elements or groups of elements on a webpage.</p>
<p>Selectors can target elements based on various criteria such as tag name, class, ID, attributes, and hierarchy.</p>
<p>There are different types of selectors in CSS:</p>
<ul>
<li><strong>Element Selector:</strong> Targets HTML elements based on their tag name.</li>
<li><strong>Class Selector:</strong> Targets elements with a specific class attribute.</li>
<li><strong>ID Selector:</strong> Targets a single element with a specific ID attribute.</li>
</ul>
<p>Selectors can be combined and nested to create more specific and targeted styles.</p>
<p>CSS selectors play a crucial role in styling HTML elements and creating visually appealing and user-friendly web pages.</p>
<h2>12. Program in JavaScript to Find Area of Circle</h2>
<xmp>function calculateArea(radius) {
return Math.PI * radius * radius;
}
const radius = 5;
const area = calculateArea(radius);
console.log("Area of the circle:", area.toFixed(2));
</xmp>
<h2>13. Program in JavaScript to Add Two Numbers and Take Input from User</h2>
<xmp>
function addNumbers(num1, num2) {
return num1 + num2;
}
const number1 = parseFloat(prompt("Enter the first number:"));
const number2 = parseFloat(prompt("Enter the second number:"));
const sum = addNumbers(number1, number2);
console.log("Sum of", number1, "and", number2, "is", sum);
</xmp>
<h2>14. Explanation of Function in JavaScript with Example</h2>
<p>Functions in JavaScript are reusable blocks of code that perform a specific task.</p>
<p>They encapsulate a set of instructions and can accept input parameters and return values.</p>
<p>Functions in JavaScript are declared using the <code>function</code> keyword, followed by the function name and a pair of parentheses containing optional parameters.</p>
<p>Parameters are variables that hold values passed to the function when it is called.</p>
<p>Functions can be called or invoked by using the function name followed by parentheses, optionally passing arguments.</p>
<p>Functions can have local variables declared inside them, which are accessible only within the function's scope.</p>
<p>Functions can also have a <code>return</code> statement that specifies the value to be returned to the caller.</p>
<h2>15. Program in JavaScript to Check if Number is Even or Odd</h2>
<xmp>
// Function to check if a number is even or odd
function checkEvenOrOdd(number) {
if (number % 2 === 0) {
return "Even";
} else {
return "Odd";
}
}
// Test the function
const numberToCheck = 7;
const result = checkEvenOrOdd(numberToCheck);
console.log(numberToCheck + " is " + result);
</xmp>
<h2>16. Program in JavaScript to Find Factorial</h2>
<xmp>
// Function to calculate factorial of a number
function calculateFactorial(number) {
if (number === 0 || number === 1) {
return 1;
} else {
let factorial = 1;
for (let i = 2; i <= number; i++) {
factorial *= i;
}
return factorial;
}
}
// Test the function
const numberToFindFactorial = 5;
const factorial = calculateFactorial(numberToFindFactorial);
console.log("Factorial of " + numberToFindFactorial + " is " + factorial);
</xmp>
<h2>17. Difference between GET and POST Method</h2>
<h3>GET Method:</h3>
<ul>
<li>GET requests are used to retrieve data from a server.</li>
<li>Data is sent in the URL as query parameters.</li>
<li>Parameters are appended to the URL after a question mark (?), separated by ampersands (&).</li>
<li>GET requests have limitations on the amount of data that can be sent (limited by the maximum URL length supported by browsers).</li>
<li>GET requests can be bookmarked and cached by browsers, making them suitable for retrieving static data or navigating between pages.</li>
<li>GET requests are idempotent, meaning they can be repeated without causing different results.</li>
</ul>
<h>POST Method:</h3>
<ul>
<li>POST requests are used to submit data to a server for processing or storage.</li>
<li>Data is sent in the body of the request.</li>
<li>POST requests can send large amounts of data without limitations on the size.</li>
<li>POST requests are not bookmarked or cached by browsers, making them suitable for sending sensitive or dynamic data, such as form submissions.</li>
<li>POST requests are not idempotent by default, meaning they can cause different results if repeated. However, they can be made idempotent by implementing server-side logic.</li>
</ul>
<h2>18. Advantages of CSS:</h2>
<p>Advantages of CSS:</p>
<ul>
<li>Separation of Concerns: CSS allows for separation of content from presentation, making it easier to maintain and update the visual appearance of a website without altering the underlying HTML structure.</li>
<li>Consistency: CSS enables consistent styling across multiple web pages by applying the same styles to different elements, ensuring uniformity in design and layout.</li>
<li>Flexibility: CSS offers a wide range of styling options, including colors, fonts, margins, padding, borders, and positioning, allowing developers to create diverse and visually appealing designs.</li>
<li>Efficiency: CSS enables efficient styling of web pages by applying styles globally or targeting specific elements, reducing redundancy and improving code readability.</li>
<li>Accessibility: CSS supports accessibility features such as screen reader compatibility, alternative text for images, and keyboard navigation, making web content more accessible to users with disabilities.</li>
<li>Faster Page Loading: CSS files can be cached by browsers, reducing page load times and bandwidth usage, especially for repeated visits to a website.</li>
</ul>
<p>Uses of CSS:</p>
<ul>
<li>Styling HTML Elements: CSS is primarily used for styling HTML elements to control their appearance, including colors, fonts, sizes, margins, padding, borders, and backgrounds.</li>
<li>Responsive Web Design: CSS facilitates responsive web design by using media queries and flexible layout techniques to adapt web pages to different screen sizes and devices, ensuring optimal viewing experience on desktops, tablets, and smartphones.</li>
<li>Layout Control: CSS provides layout control through techniques like floats, flexbox, and grid, allowing developers to create complex page layouts with multiple columns, grids, and positioning.</li>
</ul>
<h2>19. Drawbacks of HTML:</h2>
<p>Drawbacks of HTML:</p>
<ul>
<li>Limited Styling and Presentation Options: HTML alone lacks advanced styling features like gradients, animations, and complex layouts.</li>
<li>Semantic Markup Complexity: Maintaining semantic markup in HTML can be complex as web pages become more intricate.</li>
<li>Accessibility Challenges: Ensuring full accessibility compliance can be difficult, requiring careful implementation and testing.</li>
<li>Cross-Browser Compatibility: Ensuring consistent rendering across different browsers and versions can be challenging due to inconsistencies.</li>
<li>Limited Interactivity: HTML has limited capabilities for creating interactive and dynamic web applications without additional technologies like JavaScript.</li>
</ul>
<h2>20. How do you define grouping in CSS:</h2>
<p>Defining Grouping in CSS:</p>
<p>Grouping in CSS allows you to apply the same style rules to multiple selectors. Multiple selectors can be grouped together, separated by commas. The same style rules will then be applied to all elements targeted by the grouped selectors. Grouping reduces redundancy and improves code readability.</p>
<p>Example:</p>
<xmp>
h1, h2, h3 {
color: blue;
font-size: 20px;
}
</xmp>
<h2>21. What are inline elements in CSS:</h2>
<p>Inline elements are HTML elements that are displayed inline, meaning they flow along with surrounding content and do not start on a new line. Examples of inline elements include <code><span></code>, <code><a></code>, <code><img></code>, <code><strong></code>, <code><em></code>, <code><br></code>, and <code><input></code>. Inline elements only occupy the space necessary for their content and cannot have width and height applied to them directly. They can be styled with CSS properties such as color, font, and text-decoration.</p>
<h2>22. In how many ways can you select HTML tags:</h2>
<p>By Tag Name: Selects all elements with a specific tag name.</p>
<p>By Class Name: Selects elements with a specific class attribute.</p>
<p>By ID: Selects a single element with a specific ID attribute.</p>
<p>By Attribute: Selects elements based on specific attribute values.</p>
<p>Combining Selectors: Combines multiple selectors to apply styles to different elements.</p>
<p>Descendant Selector: Selects elements that are descendants of a specific parent element.</p>
<p>Adjacent Sibling Selector: Selects elements immediately preceded by a specific sibling element.</p>
<p>Child Selector: Selects elements that are direct children of a specific parent element.</p>
<p>These selectors offer versatile ways to target HTML elements for styling in CSS.</p>
<h2>23. Describe the method of changing font using CSS:</h2>
<p><strong>Font Family Property:</strong></p>
<ul>
<li>Use the <code>font-family</code> property to specify the font family for text.</li>
<li>It allows you to define a prioritized list of font family names or generic font family keywords.</li>
</ul>
<p><strong>Specify Font Family Names:</strong></p>
<ul>
<li>Specify the font family names enclosed in quotation marks, separated by commas.</li>
<li>If the specified font is not available, the browser will use the next font in the list.</li>
</ul>
<p><strong>Using Generic Font Families:</strong></p>
<ul>
<li>Alternatively, you can use generic font family keywords like <code>sans-serif</code>, <code>serif</code>, <code>monospace</code>, <code>cursive</code>, or <code>fantasy</code>.</li>
<li>These keywords represent font families that fall under certain styles or classifications.</li>
</ul>
<p><strong>Using Google Fonts:</strong></p>
<ul>
<li>You can also use external fonts provided by services like Google Fonts.</li>
<li>Include a link to the Google Fonts stylesheet in your HTML document, and then specify the font family in your CSS.</li>
</ul>
<h2>24. Demonstrate with an example how inner elements inherit style information from outer elements in CSS:</h2>
<p>HTML:</p>
<xmp>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="outer">
<p class="inner">This is an inner paragraph.</p>
</div>
</body>
</html>
</xmp>
<p>CSS:</p>
<xmp>
.outer {
font-family: Arial, sans-serif;
color: blue;
}
.inner {
font-style: italic;
}
</xmp>
<br><br><br><br>
<center>
<hr>
Previous Year Paper<br> <hr>
<img src="img/pre/web tech.jpg" alt="" id="img1">
<img src="img/pre/webtech2.jpg" alt="" id="img1">
<img src="img/pre/pyq_mid-webtech_23-24.jpg" alt="" id="img1">
<img src="img/pre/pyq_end_webtech1_23-24.jpg" alt="" id="img1">
<img src="img/pre/pyq_end_webtech2_23-24.jpg" alt="" id="img1">
</center>
</body>
</div>
</html>