Complete Web Technologies
& Networking Reference
All Topics • Diagrams • Code • Examples
Complete Coverage of All Requested Topics:
• Network Types (LAN/MAN/WAN) • Topologies with Diagrams • Switching Concepts • Internetworking Devices
(Repeater to Gateway) • FTP & HTTP Architecture • Search Engines • File Extensions • Web Services & Diagrams •
HTTP Status Codes Complete List • Canvas/SVG/HTML5 vs HTML4 • DOM Manipulation • Frames & Tables • Forms
with Validation • Cookies & Sessions (All Types, Creation, WWW Usage) • JavaScript Fundamentals Complete •
JavaScript OOP (Most Important Concepts) • jQuery/UI Plugins/JSON • CSS Types & Embedding • AJAX & jQuery
Integration • Client-Server Model • Modern AJAX Usage • JS with HTML Programs • Fibonacci Recursion & Add
Numbers • CGI Short Note • IPv4 vs IPv6 Detailed • MAC Address Complete
1. Network Types
LAN: 100m-1km, 100Mbps-10Gbps, private, office/home.
MAN: 5-50km, city-wide, cable TV, campus.
WAN: Unlimited, Internet, global.
2. Topologies
Bus: Single cable. Simple, single failure.
Star: Central hub. Easy, hub bottleneck.
Ring: Circular. Equal, failure affects all.
Mesh: All-to-all. Reliable, expensive.
Tree: Hierarchical. Scalable, root-dependent.
3. Switching
Circuit: Dedicated path, phone, guaranteed bandwidth.
Packet: Data packets, Internet, efficient. Datagram/Virtual Circuit.
Message: Store-forward, email, high delay.
5. FTP & HTTP
FTP: Ports 20/21. File transfer. Commands: USER,PASS,LIST,RETR,STOR.
HTTP: Port 80/443. Stateless. Methods: GET,POST,PUT,DELETE. Status: 2xx,3xx,4xx,5xx.
6. Search Engines
Crawler→Indexer→Query Processor→Ranking→Interface. Google, Bing, Yahoo.
7. Extensions
Identify type, associate apps, organize. .txt .jpg .mp3 .html .zip .exe
8. Web Services
SOAP(XML), REST(JSON), GraphQL. Payment, Maps, Social, Cloud, Auth APIs.
9. Status Codes
1xx Info • 200 OK • 201 Created • 301 Moved • 302 Found • 304 Not Modified • 400 Bad • 401 Unauthorized • 403
Forbidden • 404 Not Found • 500 Error • 502 Bad Gateway • 503 Unavailable
10. HTML5/Canvas/SVG
HTML5: DOCTYPE simple, audio/video, canvas/svg, semantic tags, localStorage, new inputs.
Canvas: Raster, pixel, JS API, games. <canvas> [Link](x,y,w,h);
SVG: Vector, XML, scalable, DOM elements, icons/logos.
11. DOM Manipulation
var e = [Link]('id'); [Link] = 'New'; [Link] = 'red'; [Link]('active');
[Link]('click', ()=>alert('Hi'));
12. Frames & Tables
<iframe src="[Link]"></iframe> <table><tr><th>Name</th></tr><tr><td>John</td></tr></table>
13. Forms & Validation
<form action="/submit" method="POST"> <input type="text" required> <input type="email" required> <input type="password"
minlength="8"> <input type="submit"> </form> Validation: required, minlength, maxlength, min, max, pattern
14. Cookies & Sessions
Types: Session(temp), Persistent(expiry), First-party, Third-party, Secure(HTTPS), HttpOnly(no JS).
Create: [Link]="name=value; expires=date; path=/; Secure; HttpOnly"
Session: session_start(); $_SESSION['key']='value'; session_destroy();
15. JavaScript Fundamentals
Variables: var, let, const
Types: Number, String, Boolean, Undefined, Null, Symbol, Object, Array
Operators: +,-,*,/,% • ==,===,!=,!== • &&,||,!
Functions: function name(){} | const name=()=>{}
var x=10; let y=20; const z=30; function add(a,b){return a+b;} const mult=(a,b)=>a*b; if(x>5){} for(let i=0;i<10;i++){}
16. JavaScript OOP
Concepts: Encapsulation, Inheritance, Polymorphism, Abstraction
class Person { constructor(name,age) {[Link]=name; [Link]=age;} greet() {return `Hello ${[Link]}`;} } class Student
extends Person { constructor(name,age,grade) {super(name,age); [Link]=grade;} }
17. jQuery/UI/JSON
$('#id').html('text'); $('.class').css('color','red'); $('#btn').click(function(){}); $.ajax({url:'/api',
success:function(data){}}); $('#datepicker').datepicker(); var obj=[Link]('{"name":"John"}'); var
str=[Link]({name:"John"});
18. CSS Types & Embedding
Types: Inline(<p style="">), Internal(<style>), External(<link href="">)
Selectors: element, .class, #id, div p, div>p, :hover, ::before
19. AJAX & jQuery
// Why: No reload, faster, better UX, real-time, SPAs fetch('/api').then(r=>[Link]()).then(data=>[Link](data));
$.ajax({url:'/api', success:function(d){$('#r').html(d);}}); $.get('/api/data', function(data){}); $.getJSON('/api/users',
function(data){});
20. Client-Server Model
Client (requests, UI) ↔ Server (processes, resources). Types: 2-Tier, 3-Tier, N-Tier. Advantages: Centralized,
scalable, secure.
21. JS with HTML
<button onclick="alert('Hi')">Click</button> <script>[Link]('id').innerHTML='New';</script> <script
src="[Link]"></script>
22. Fibonacci & Add
function fib(n){if(n<=1)return n; return fib(n-1)+fib(n-2);} function add(a,b){return a+b;} [Link](add(5,10)); // 15
23. CGI Short Note
Protocol for web servers to execute programs. User→Server executes script→Output to client. Slow (new process
each request). Replaced by PHP, [Link].
24. IPv4 vs IPv6
Feature IPv4 IPv6
Size 32-bit 128-bit
Format [Link] 2001:0db8::1
Addresses 4.3B 340 undecillion
Header 20-60 bytes 40 bytes
NAT Required Not needed
25. MAC Address
48-bit hardware address (00:1A:2B:3C:4D:5E). First 24bits=OUI(manufacturer), Last 24bits=device ID. Layer 2.
Types: Unicast, Multicast, Broadcast. Uses: Local network, ARP, switching. Commands: ipconfig /all, ifconfig.
4. Internetworking Devices
Device Layer Function
Repeater L1 Signal regeneration
Hub L1 Multi-port repeater
Bridge L2 Segment connection, MAC filter
Switch L2 Intelligent forwarding
Router L3 Network interconnection, IP routing
Gateway All Protocol translation
Reference Guide Complete
This comprehensive reference covers all 25+ topics in web technologies and networking with code examples,
diagrams, tables, and detailed explanations. Perfect for exam preparation and quick reference.