Fountain of knowledge school

Web Design and Development Student Note

Module I
1.1 Information Technology (IT) as a Career
IT focuses on the use of computer systems to store, retrieve, and transmit information. It supports
industries such as education, healthcare, finance, and entertainment.
1.2 Web Design and Development Career Paths
Web development careers are diverse, requiring technical and creative expertise. The field is divided
into several specialized roles:
1. Web Designer: Creates the visual and interactive elements of a website using tools like Adobe
Photoshop, or Illustrator.
2. Front-End Developer: Works on the client-facing side of websites, focusing on layout, design,
and interactivity using HTML, CSS, and JavaScript.
3. Back-End Developer: Manages server-side operations, databases, and APIs to ensure seamless
website functionality.
4. Full-Stack Developer: Combines front-end and back-end skills to manage entire projects.
5. UX Designer: Optimizes user experience through research, testing, and prototyping.
6. Content Manager: Maintains and updates website content using CMS platforms like WordPress.

1.2.1 Front-End Development

Focuses on the user-facing aspects of websites or web applications.
Responsibilities:
 HTML (Hypertext Markup Language): Structuring content (headings, images, forms, etc.).
 CSS (Cascading Style Sheets): Styling content (layout, colors, fonts, etc.).
 JavaScript: Adding interactivity and dynamic behavior (handling events, updating content).
 Responsive Design: Ensuring websites are optimized for various devices (desktops, tablets,
mobile).
 Cross-Browser Compatibility: Ensuring websites work across different browsers (Chrome,
Firefox, Safari).
 Web Performance Optimization: Improving website speed (minifying files, optimizing images).
 Accessibility: Ensuring websites are usable by people with disabilities (semantic markup,
alternative text for images).
Skills:
 Technical skills in HTML, CSS, JavaScript.
 Creativity in design and user interface.
 Collaboration with back-end developers for seamless integration.

1.2.2 Back-End Development

Focuses on the server-side functionality of websites or web applications.
Responsibilities:
 Server-Side Programming: Writing code in languages like Python, PHP, Java, and Node.js for
server-side logic.
 Databases: Designing, managing, and interacting with databases (MySQL, MongoDB, etc.).
 APIs (Application Programming Interfaces): Enabling communication between front-end and
back-end systems.
 Server Management: Configuring and managing web servers (Apache, Nginx), handling hosting
environments.
 Security: Implementing security measures like authentication, encryption, and protecting
against vulnerabilities (e.g., SQL injection).
 Frameworks and Libraries: Using frameworks like Django, Ruby on Rails, or Express.js to
streamline development.
 Testing and Debugging: Ensuring the stability and reliability of server-side systems.
Skills:
 Proficiency in server-side languages.
 Knowledge of databases and server management.
 Focus on security, performance, and functionality.

1.2.3 Full-Stack Development

Involves proficiency in both front-end and back-end development, managing all layers of a web
application.
Responsibilities:
 Front-End Development: Creating user interfaces using HTML, CSS, and JavaScript.
 Back-End Development: Developing server-side logic, databases, and APIs.
  Databases: Designing and managing databases and optimizing data operations.
 Server Management: Handling server configuration and deployment.
 APIs and Integration: Building and consuming APIs, integrating third-party services.
 Version Control: Using tools like Git for managing code versions.
 Problem Solving and Troubleshooting: Debugging issues across the entire web application.
 Project Management: Contributing to planning, estimating, and task prioritization in web
development projects.
Skills:
 Broad knowledge of both front-end and back-end technologies.
 Ability to handle full development lifecycle (from user interface to server-side).
 Strong problem-solving and troubleshooting skills.
 Familiarity with version control and project management practices.
Unit 2: Hardware and Network Peripherals
2.1 Introduction to Computers
Computers have revolutionized the way we work, communicate, and access information. They are
powerful electronic devices that execute instructions and process data rapidly. The section covers the
basics of computer systems, including peripherals and buses.
Peripherals
 Definition: Peripherals are optional computer hardware devices added to expand functionality.
They are categorized as internal or external.
 Types of Peripherals:
o Input Devices: Keyboards, mice, touchscreens, scanners, webcams.
o Output Devices: Monitors, printers, speakers.
o Storage Devices: USB drives, external hard drives, and network drives.
Buses
A bus is a subsystem that transfers data between components or computers. It connects peripherals via
defined connectors:
 Internal Buses: Connect internal components like CPUs, RAM, and storage.
 External Buses: Connect external peripherals like printers and USB drives.

Internal Peripherals

Internal peripherals connect to the computer's motherboard through specific slots.

Types of Slots

1. PCI (Peripheral Component Interconnect):

o A widely used bus in modern PCs, though being replaced by PCI Express.
o Supports peripherals like network cards, sound cards, modems, extra USB ports, TV
tuner cards, and disk controllers.
o Limitations: Insufficient bandwidth for high-performance video cards.
2. PCI Express (PCIe):
o Introduced by Intel in 2004 to replace PCI and AGP.
o Uses point-to-point serial links called "lanes" rather than a shared bus system.
o Offers significantly higher bandwidth than PCI, making it ideal for high-end video cards
and demanding applications.
3. AGP (Accelerated Graphics Port):
o A high-speed connection designed specifically for attaching graphics cards.
o Primarily used for accelerating 3D computer graphics.
o Obsolescence: Replaced by PCI Express, though AGP hardware is still available.

Types of Cards

1. Video Card (Graphics Card):

o Generates and outputs images to displays, often used for tasks like 3D rendering and
multiple-monitor setups.
o Components:
 GPU (Graphics Processing Unit): A specialized microprocessor optimized for
rendering 3D graphics.
 Video BIOS: Contains the card's basic operational instructions.
 Video RAM (VRAM): Stores graphics data; capacity ranges from 128 MB to 2 GB.
Integrated graphics cards use system RAM instead.
 RAMDAC: Converts digital signals to analog for compatibility with certain
displays.
o Outputs: Includes connectors like HD-15 (VGA), DVI, S-Video, composite video, or
component video.
2. Sound Card:
o Facilitates audio input and output under software control.
o Common uses: multimedia applications such as audio editing, video editing, music
production, and gaming.
o Modern computers often have built-in sound capabilities, reducing the need for
standalone sound cards.
3. Network Card (NIC - Network Interface Card):
o Enables communication over a network, allowing computers to connect via cables or
wirelessly.
o Ethernet Standard: The most widely adopted technology, with NICs containing a unique
48-bit MAC address stored in ROM.
External Peripherals

External peripherals connect to a computer through ports or wireless interfaces, often used for easy
installation and portability.

Types of Connections

1. USB (Universal Serial Bus):

o A versatile and dominant connection standard for external devices.
o Features:
 Hot-swappable: Devices can be added or removed without restarting the
computer.
 Power supply: Provides power to low-consumption devices (e.g., keyboards,
mice) without requiring external power sources.
 Plug-and-play compatibility: Reduces the need for device-specific drivers.
o Commonly used for devices like keyboards, mice, printers, external drives, and cameras.
2. FireWire (IEEE 1394):
o A high-speed serial interface for real-time data transfer.
o Frequently used in audio-visual devices like digital camcorders.
o Adoption: Selected as the High-Definition Audio-Video Network Alliance (HANA)
standard for A/V component communication.

3. PS/2 Ports:
o An older standard for connecting keyboards and mice.
o Functionality varies: If a PS/2 mouse is connected to a keyboard port, it may not be
recognized, depending on the system configuration.
o Largely replaced by USB in modern computers.

2.1.1 Generation of Computers

Computers have evolved through five generations, each marked by technological advancements:
1. First Generation (1940-1959):
o Technology: Vacuum tubes.
o Characteristics: Large size, slow speed, limited storage, overheating issues.
o Programming: Machine language.
2. Second Generation (1959-1964):
o Technology: Transistors and diodes.
o Characteristics: Smaller, faster, less heat generation, improved storage.
o Programming: High-level languages like COBOL and FORTRAN.
 3. Third Generation (1965-1970):
o Technology: Semiconductor circuits.
o Characteristics: Desk-sized computers with better performance and flexibility.
4. Fourth Generation (Since 1970):
o Technology: Microprocessors.
o Characteristics: Compact, high-speed, modular design, widespread use of PCs.
5. Fifth Generation (Future):
o Technology: AI and robotics with superconductors.
o Characteristics: Focus on intelligent systems.

2.1.2 Characteristics of a Computer System

A computer system is distinguished by several defining characteristics:
 Speed: Executes millions of instructions per second.
 Accuracy: Performs precise operations with minimal errors.
 Storage Capacity: Stores massive amounts of data in primary (RAM) and secondary (HDD, SSD)
storage.
 Versatility: Processes text, images, audio, and video across various industries.
 Security: The measures and protocols implemented to protect the computer system and its data
from unauthorized access, breaches, or malicious activities.
 Automation: Reduces manual intervention through programmed instructions.
 Reliability: Consistently performs tasks without frequent failures.
 Scalability: Adapts to increased workloads with additional resources.
 Compatibility: The ability of the computer system to work efficiently with different hardware,
software, or data formats.
 Upgradeability: Enhances performance with hardware or software updates.
2.1.3 Classification of Computers
Computers are classified by size, purpose, and capabilities:

2.1.4 Applications of Computers

Computers are utilized in various sectors for different purposes:
 Education: Online learning and research.
 Healthcare: Patient record management, diagnostics.
 Communication: Email, video conferencing.
 Transportation: GPS and traffic management.
 Government: Data management, public service delivery.
 Entertainment: Multimedia creation, gaming.

2.2 Organization of Computer Systems

A computer system's organization includes components that work together to process information
efficiently:
 1. Central Processing Unit (CPU):
o Includes the Arithmetic Logic Unit (ALU) for calculations and the Control Unit (CU) for
instruction flow.
2. Memory:
o RAM: Temporary, volatile storage for active processes.
o ROM: Permanent, non-volatile storage for essential instructions.
3. Storage Devices:
o HDDs, SSDs, and optical drives for long-term data storage.
4. Input Devices:
o Examples: Keyboards, mice, microphones, and touchscreens.
5. Output Devices:
o Examples: Monitors, printers, speakers, and projectors.
6. Motherboard:
o Connects all hardware components and facilitates communication.
7. Expansion Cards:
o Examples: Graphics cards, sound cards, and network cards.
8. Bus System:
o Enables data transfer between components.
9. Operating System (OS):
o Manages resources and provides a platform for applications.
o Coordinates hardware and software interaction.
10. Software:
o Programs and applications that run on the computer system
Computer Ports

Computer ports and cables are crucial for data transfer, power supply, and communication between
devices. Common types include:

1. USB Ports: Versatile connections for peripherals like keyboards, mice, and external drives,
available in various versions (USB 2.0, 3.0, 3.1, and USB-C).
2. HDMI: For high-quality audio and video connections to monitors, TVs, and projectors.
3. DisplayPort: Similar to HDMI, supporting high-resolution video and audio.
4. Ethernet Ports: Enable wired internet and LAN connections.
5. Audio Ports: Allow connection of headphones, speakers, and microphones.
6. VGA: Older analog video ports for displays, now less common.
 7. DVI: Digital and analog video connections, found on older monitors.
8. Thunderbolt: High-speed ports for data and video, often used on Apple devices.
9. Power Ports: Connect computers to power sources, varying by device model.

2.3 Safe Work Conditions and Procedures

Guidelines for Safe Practices

General Safety Guidelines for Computer Use

1. Maintain a Clean Workspace: Keep the area tidy and free of clutter, food, and liquids to prevent
accidents and equipment damage.
2. Use Surge Protectors and UPS: Safeguard against power surges and outages to protect devices
and data.
3. Regular Data Backups: Securely back up critical files to prevent data loss.
4. Install Antivirus Software: Use and update reputable antivirus software to guard against
malware and security threats.
5. Exercise Email Caution: Avoid opening suspicious email attachments or links; verify senders
before interacting.
6. Create Strong Passwords: Use unique, strong passwords or a password manager for account
security.
7. Ensure Ergonomics: Maintain proper posture, adjust desk setup, and prevent strain with an
ergonomic workspace.
8. Take Breaks: Follow the 20-20-20 rule to reduce eye strain and fatigue during prolonged
computer use.
9. Optimize Display Settings: Adjust screen brightness, contrast, and font size for comfort.
10. Secure Devices: Lock computers when not in use and enable automatic updates for security.
11. Beware of Social Engineering: Avoid phishing scams or fake information requests by verifying
authenticity.
12. Report Suspicious Activity: Immediately notify IT staff of unusual behaviour or security issues.

Fire Safety Guidelines

Fire safety is critical when using computers to prevent accidents, safeguard equipment, and ensure the
safety of individuals in the vicinity. Below are the detailed measures to follow:
1. Electrical Safety:
o Use surge protectors to shield equipment from voltage spikes and avoid overloading
electrical outlets.
o Regularly inspect power cords and plugs for signs of wear or damage, replacing faulty
cords immediately.
o Avoid running cables or cords under carpets or rugs, as this can lead to overheating.
o Minimize the use of extension cords for computer equipment and ensure they meet
safety standards.
2. Proper Ventilation:
o Ensure computers, servers, and other devices are placed in well-ventilated areas to
maintain airflow and prevent overheating.
o Avoid placing objects on top of or around equipment that could obstruct ventilation and
increase heat.
3. No Smoking Policy:
o Prohibit smoking in areas with computers and electronic equipment to reduce the risk
of fires caused by discarded cigarette ashes or butts.
4. Adequate Fire Protection and Suppression:
o Install smoke detectors near computer equipment and conduct regular maintenance to
ensure functionality.
o If feasible, implement fire suppression systems, such as sprinklers, particularly in areas
with critical equipment like servers.
5. Knowledge of Evacuation Procedures:
o Familiarize all users with workplace fire evacuation procedures, including the locations
of fire exits, assembly points, and fire extinguishers.
o Ensure that pathways to exits are unobstructed for easy access during emergencies.
6. Fire Extinguisher Awareness:
o Identify fire extinguisher locations in the workspace and learn proper usage techniques.
o Use the PASS method for extinguishing small fires:
 Pull the pin.
 Aim at the fire's base.
 Squeeze the handle.
 Sweep side-to-side.
7. Reporting Hazards:
o Promptly report any malfunctioning equipment or fire risks, such as sparks, smoke, or
unusual smells, to supervisors or the maintenance team.
o Disconnect faulty equipment immediately and notify the responsible personnel.
8. Data Backup and Storage:
o Regularly back up important data and store backups off-site or in a secure location to
prevent data loss during emergencies.
Equipment Protection
Protecting computer equipment from electrical hazards and damage requires the following guidelines:
1. ESD Protection:
o Electrostatic Discharge (ESD), caused by static charge imbalance, can damage sensitive
components. Prevent ESD by:
 Properly grounding workstations and personnel.
 Using ESD wrist straps while handling electronic components to dissipate static
charges.
 Installing ESD mats on work surfaces and using ESD flooring in areas with
sensitive equipment.
 Storing equipment in ESD bags or containers during transport.
2. Types of Power Fluctuations:
o Protect against these common power disturbances:
 Voltage Sag: Temporary drop in voltage due to increased power demand.
 Voltage Surge: Brief voltage increase, often caused by lightning or grid issues.
 Voltage Spike: Rapid voltage rise, typically caused by sudden load changes or
high-power device shutoffs.
 Voltage Interruption: Complete loss of power for a short time due to outages or
faults.
 Voltage Transient: Sudden, brief fluctuations caused by electrical disturbances
like lightning or electromagnetic interference.
3. Power Protection Devices:
o Use the following devices to safeguard equipment:
 Surge Protectors: Absorb excess voltage and redirect it away from equipment.
 Uninterruptible Power Supplies (UPS): Provide backup power during outages
and protect against sags, surges, and interruptions.
 Voltage Regulators: Maintain a stable power supply, compensating for voltage
changes.
 Isolation Transformers: Isolate equipment from the power grid, reducing spikes
and noise.
 Line Conditioners: Regulate voltage, filter noise, and offer surge protection.
 Automatic Voltage Regulators (AVR): Monitor and adjust voltage levels to
prevent fluctuations.
 Power Filters: Remove interference and noise from the power supply.
Environment Protection
Proper disposal of computer equipment minimizes environmental impact and ensures compliance with
local regulations. Key practices include:
1. Recycling Programs:
o Utilize local e-waste recycling programs that specialize in processing computer
equipment.
2. Authorized E-Waste Recyclers:
o Engage with certified recyclers to handle electronic waste responsibly, ensuring
environmentally friendly practices.
3. Data Security:
o Securely erase all data from devices before disposal using industry-standard data-wiping
tools to prevent unauthorized access.
4. Donation or Resale:
o Donate functional equipment to organizations or individuals in need, or sell it to extend
its useful life and reduce waste.
5. Manufacturer Take-Back Programs:
o Check if manufacturers offer recycling or take-back programs for their products.
6. Disassembly and Component Recycling:
o Separate components (metals, plastics, circuit boards) for proper recycling, ensuring
hazardous materials are handled appropriately.
7. Hazardous Materials Handling:
o Safely dispose of devices containing hazardous substances like lead or mercury in
accordance with local regulations.
8. Compliance with Regulations:
o Familiarize yourself with and adhere to environmental laws regarding e-waste disposal
to avoid penalties and contribute to sustainability.
Unit 3: Operating Systems and Application Software
3.1 Operating Systems (OS)
 Definition: The OS manages hardware resources and provides a platform for applications.
 Examples:
o Windows: Versatile and widely used.
o macOS: Seamless integration with Apple hardware.
o Linux: Open-source and flexible for various use cases.
o UNIX: A multi-user and multitasking operating system used in servers and enterprise
environments.
 Functions:
o Resource management (CPU, memory, storage).
o User interface for interacting with hardware and software.

Operating System Installation

Installing an operating system involves preparing installation media (DVD or USB drive) and following a
systematic process to set up the system.
1. Preparation:
o Ensure compatible hardware for the OS.
o Back up critical data for clean installations.
2. OS Preparation:
o Download installation files from the official website or obtain physical media.
3. Creating Installation Media:
o Use tools to create bootable USB drives or burn installation files to DVDs.
4. Configuring BIOS/UEFI:
o Access BIOS/UEFI settings and set the boot priority to the installation media.
5. Installation Process:
o Insert media, restart the computer, and follow on-screen instructions.
6. Setting Preferences:
o Select language, region, and installation type (clean install or upgrade).
o Specify the installation location and configure additional settings.
 7. Completing Installation:
o Wait for the system to copy and configure files.
o Create user accounts, set passwords, and finalize settings.
o Install device drivers and updates for hardware functionality.
8. Post-Installation Tasks:
o Restore backed-up data for clean installations.
o Restart the system to apply all settings.

Application Software
Application software is designed for specific tasks. Common types include:
1. Word Processing Software: For creating and editing text (e.g., Microsoft Word).
2. Spreadsheet Software: For managing and analyzing data (e.g., Microsoft Excel).
3. Presentation Software: For creating slideshows (e.g., PowerPoint).
4. Database Software: For organizing structured data (e.g., MySQL).
5. Graphics/Design Software: For editing visual content (e.g., Adobe Photoshop).
6. Web Browsers: For navigating websites (e.g., Google Chrome).
7. Communication Software: For emails, messaging, and video calls (e.g., Skype).
8. Multimedia Software: For creating and editing audio/video (e.g., Adobe Premiere).
9. Utility Software: For maintenance and security (e.g., Norton Antivirus).
10. Educational Software: For learning and teaching (e.g., Moodle).

Software Licensing
Software licensing defines usage rights:
 Proprietary Licenses: For commercial use with restrictions.
 Open-Source Licenses: Freely accessible source code.
 Freeware Licenses: Free for use without modification.
Installing Device Drivers
Device drivers enable communication between the OS and hardware.
1. Driver Types and Importance:
o Drivers allow the OS to utilize hardware capabilities.
o Ensure device compatibility and performance.
2. Driver Installation Methods:
o Automatic Installation: Through OS updates (e.g., Windows Update).
o Manual Installation:
 From the manufacturer’s website or Using Device Manager to update drivers.
o Using Installation Media: CD or USB provided with the hardware.
3. Updating Drivers:
o Regularly check and update drivers to ensure compatibility and functionality.
Steps for Installing Office Applications
1. Download and run the installation file.
2. Follow prompts, input license details, and configure settings.
3. Launch applications via desktop shortcuts or menus.
Driver Installation and Updates on Windows 10
1. Using Windows Update:
o Navigate to Settings > Update & Security > Check for updates.
o Install optional driver updates.
2. Using Device Manager:
o Access Device Manager from the Start menu.
o Expand categories, right-click the device, and select “Update Driver.”
o Search automatically or provide downloaded driver files.
3. From Manufacturer’s Website:
o Identify hardware and download the latest drivers compatible with your OS.
o Run the installer and follow instructions.
4. Checking Drivers:
o Use Device Manager or Windows Update to verify installed drivers.
o Visit manufacturer websites for specific updates.
Important keyboard shortcuts
 Module II
1.1. Introduction to the Internet

The Internet and the World Wide Web (WWW) are transformative technologies enabling global
communication, data access, and business operations. Though often conflated, the Internet provides the
underlying infrastructure for the WWW, facilitating data exchange between devices.

1.1.1. Internet

The Internet is a global, decentralized network connecting billions of devices via standardized protocols.
It acts as the backbone for data transfer, supporting emails, file sharing, web browsing, and streaming.

History of the Internet

 1969: ARPANET launched, connecting major universities (e.g., UCLA, Stanford) for file sharing
and research collaboration.

 1970s: Introduction of email and the TCP/IP protocol, standardizing data transfer and making
the Internet more accessible.

 1986: NSFNET expanded connectivity, paving the way for personal computing.

 1990s: The University of Minnesota developed the first user-friendly interface, and NSFNET
lifted commercial use restrictions in 1995, accelerating growth.

 Today: Over 3 billion daily users leverage the Internet for communication, learning, work, and
entertainment. Projections estimate 7.5 billion users and 500 billion connected devices by 2030.

1.1.2. How the Internet Works

The Internet operates as a layered architecture involving interconnected networks and standardized
protocols.

Key Components:

1. Devices and Endpoints: Computers, smartphones, and servers use unique IP addresses to
communicate.

2. Physical Infrastructure:

o Cables: Fiber optics, copper wires, and undersea cables enable data transmission.

o Routers and Switches: Manage traffic and direct data packets.

o Servers and Data Centers: Store, process, and exchange information.

3. Internet Service Providers (ISPs): Gateways to the Internet, offering connections, domain
hosting, and network security.

4. Protocols:
 o TCP/IP: Manages data packet transmission and routing.

o DNS: Translates domain names into IP addresses.

o HTTP/HTTPS: Facilitates data transfer for web browsing.

o SMTP and FTP: Handle email and file transfers.

5. Clients and Web Servers:

o Clients (browsers) send requests to servers, which respond with requested content.

o Servers run software (e.g., Apache) to handle and deliver files.

6. Data Transmission: Data travels in packets through routers, dynamically routed for efficiency.

7. Security: Firewalls, SSL/TLS encryption, and VPNs secure data and prevent unauthorized access.

8. IP Addresses:

o IPv4: 32-bit addressing with limited capacity (e.g., 192.168.1.1).

o IPv6: 128-bit addressing for more devices (e.g., 2001:0db8:85a3::7334).

1.1.3. Applications of the Internet

The Internet has revolutionized various sectors by democratizing access to information and facilitating
global connections.

Key Applications:

1. Communication:

o Email, social media (e.g., Gmail, Facebook), and video conferencing (e.g., Zoom).

2. Information and Research:

o Search engines (e.g., Google), online encyclopedias, and scholarly articles support
education and professional growth.

3. Entertainment:

o Streaming platforms (e.g., Netflix), online gaming, and music services (e.g., Spotify).

4. E-Commerce:

o Online shopping (e.g., Amazon), food delivery, and global marketplaces for goods and
services.

5. Education:

o E-learning platforms (e.g., Coursera, Khan Academy) and virtual classrooms expand
educational opportunities.
 6. Healthcare:

o Telemedicine enables remote consultations and online health management.

7. Banking and Finance:

o Internet banking, digital currencies, and mobile payment systems (e.g., PayPal, Venmo).

8. Cloud Computing:

o On-demand access to computing resources like storage and software.

1.2.1 Definition of the World Wide Web

The World Wide Web (WWW) is a system of interlinked hypertext documents accessed through the
Internet. It provides a graphical interface via web browsers, enabling users to:

 Navigate websites.

 View and interact with multimedia content such as text, images, and videos.

 Use hyperlinks to move between web pages.

The Web relies on the Internet’s infrastructure for data transfer, functioning as an information-sharing
platform.

1.2.2 Internet vs. the World Wide Web

While often used interchangeably, the Internet and WWW are distinct:

 Internet: A vast global network connecting millions of computers to facilitate data exchange.

 WWW: An information-sharing model built on the Internet, consisting of web pages linked via
URLs and accessed through protocols like HTTP.

1.2.3 History of the World Wide Web

 Invention: Created by Sir Tim Berners-Lee in the late 1980s at CERN to facilitate information
sharing across diverse computer systems.

 Evolution:

o Initially featured static web pages with basic content.

o Advanced to dynamic, interactive platforms with multimedia and user-generated

content (Web 2.0).

o Modern developments include mobile internet and the semantic web.

1.2.4 How the World Wide Web Works

The Web operates as a client-server model where:

  Web Servers host websites and provide web pages upon request.

 Clients (user devices) request and display these pages via web browsers.

Components of the WWW:

1. Web Pages: HTML documents containing multimedia and linked via hyperlinks.

2. Web Browsers: Applications (e.g., Chrome, Firefox) that render and display web pages.

3. Web Servers: Store and deliver web pages to users.

4. Hyperlinks: Links connecting web pages for easy navigation.

5. URLs (Uniform Resource Locators): Unique addresses identifying specific web pages.

6. HTTP/HTTPS: Protocols for data transfer between browsers and servers; HTTPS adds encryption
for security.

1.2.4.2 Step-by-Step Process of Accessing the Web

1. Enter a URL: The user inputs a web address (e.g., https://www.example.com) into the browser.

2. DNS Lookup: The browser converts the URL into an IP address (e.g., 192.0.2.1) via the Domain
Name System (DNS).

3. HTTP Request: The browser sends an HTTP request to the server at the IP address, requesting
the web page.

4. Server Response: The server processes the request and sends back the requested web page
along with related resources (e.g., images, CSS).

5. Browser Displays Web Page: The browser receives the data and renders the web page for the
user to view.

1.2.4.3 HTTP and HTTPS

 HTTP (Hypertext Transfer Protocol):

o A client-server protocol enabling browsers to request web pages from servers.

o HTTP transmits data unencrypted, making it vulnerable to interception and

manipulation, which poses a security risk, especially for sensitive information.

 HTTPS (Hypertext Transfer Protocol Secure):

o An extension of HTTP that encrypts data between the browser and server using SSL
(Secure Sockets Layer) or TLS (Transport Layer Security) protocols.

o HTTPS ensures confidentiality and prevents tampering, making it secure for transactions
involving sensitive data.

o Websites with HTTPS have SSL/TLS certificates verified by trusted Certificate Authorities,
and browsers indicate secure connections with "https://" and a padlock icon.
1.2.4.4 The Domain Name System (DNS)

 DNS Structure:

o DNS is a hierarchical system that translates human-readable domain names (e.g.,

www.example.com) into machine-readable IP addresses.

o It works by querying multiple servers, starting from the root DNS server to the TLD
server (e.g., .com), and finally to the domain's nameserver, which provides the IP
address.

o The browser then sends an HTTP request to this IP, and the server returns the requested
webpage.

step-by-step process of how the Domain Name System (DNS) resolves a domain name into an IP
address, allowing the browser to load the desired web page.

1. The DNS resolver forwards the request to a root nameserver to begin the process of finding the
IP address for example.com.
2. The root server responds by directing the resolver to a Top-Level Domain (TLD) DNS server (for
.com, .net, etc.).
3. The DNS resolver sends a request to the .com TLD DNS server, seeking information about the
domain example.com.
4. The .com TLD server returns the IP address of the domain's nameserver (i.e., the authoritative
server for example.com).
5. The DNS resolver then queries the domain's nameserver for the IP address of example.com.
6. The domain's nameserver returns the IP address of example.com to the DNS resolver.
7. The DNS resolver sends the IP address back to the web browser.

1.2.4.5 Uniform Resource Locator (URL)

 Definition: A URL is a string of characters that provides the address of a specific resource on the
web.

 Structure of a URL:

1. Protocol: Indicates the connection method (HTTP or HTTPS).

2. Subdomain: A section of the URL before the main domain (e.g., www). It can also
include specific sections of a website like blog or store.

3. Domain: The main part of the URL, identifying the website (e.g., example.com).

4. Top-Level Domain (TLD): The domain extension that follows the main domain (e.g.,
.com, .org, .net).
  Examples of TLDs include:

 Generic TLDs (gTLDs): .com, .org, .edu.

 Country Code TLDs (ccTLDs): .us (USA), .ca (Canada), .jp (Japan).

5. Subfolder: A directory within the website’s hierarchy that organizes content (e.g.,
www.example.com/shoes/).

6. Slug: Identifies a specific page or post on a website, usually descriptive of the page's
content (e.g., /best-baby-shampoos/).

7. URL Parameters: Additional data in a URL, appearing after a question mark (?), typically
used for tracking or passing information (e.g.,
www.example.com/page?item=123&category=shoes).

1.3. Introduction to Websites

A website is a collection of web pages and related content hosted on a web server, accessible via the
World Wide Web. It serves as a platform for individuals, businesses, and organizations to share
information, showcase products, and engage with users. Websites can range from simple one-page sites
to complex multi-page portals and are accessed through web browsers.

1.3.1. Purpose of Websites

Websites serve a variety of purposes across different sectors. Key functions include:

1. Information Dissemination:

o Websites like news platforms, blogs, and informational portals provide articles, reports,
and guides on various topics.

2. E-commerce:

o Websites such as Amazon and eBay enable businesses to sell products and services
globally, facilitating transactions and supporting online shopping.

3. Marketing and Branding:

o Websites help businesses establish their brand identity, communicate with potential
customers, and build relationships through engaging content.

4. Customer Service:

o Websites function as customer service hubs, offering resources like FAQs, live chat, and
help desks.

5. Community Building:

o Websites host social media platforms, forums, and discussion boards, fostering
communities where people can share interests and discuss topics.
 6. Entertainment:

o Websites dedicated to entertainment offer services like streaming, online games, and
interactive media.

1.3.2. Web Pages

Web pages are documents coded in HTML (Hypertext Markup Language) that structure and lay out
content. Key components of a web page include:

1. Web Page Structure:

o Web pages are organized using HTML elements like headings, paragraphs, lists, images,
tables, and forms.

2. Hyperlinks:

o Hyperlinks (or links) connect web pages, enabling easy navigation by allowing users to
click and move between pages or external resources.

3. Multimedia Elements:

o Web pages often incorporate images, videos, audio, and other media types to enhance
the user experience.

4. Forms and User Input:

o Forms collect user input via elements such as text fields, checkboxes, radio buttons,
dropdown menus, and submit buttons.

1.3.3. Types of Websites

Websites can be categorized into static and dynamic types, depending on how the content is generated
and managed.

A. Static Websites

 Characteristics:

o Fixed Content: Content remains the same for every visitor and is updated manually.

o Quick to Load: Static pages load faster as they do not require server-side processing.

o Simplicity: Easier to create and host with minimal server-side infrastructure.

 Typical Uses:

o Landing Pages: Used for marketing campaigns or informational pages.

o Small Business Websites: Ideal for businesses needing a simple online presence.

o Documentation Sites: Where content changes infrequently.

B. Dynamic Websites

 Characteristics:

o Interactive and Personalized Content: Content changes based on user input or

interactions.

o Server-Side Processing: Uses languages like PHP, Python, or Node.js to process data and
dynamically generate content.

o Flexibility: Can support complex functionalities, like online stores or social media
platforms.

 Typical Uses:

o E-commerce Sites: For managing product listings, user accounts, and shopping carts.

o Social Media Platforms: To handle real-time updates, user interactions, and content
personalization.

o Blogs and News Portals: Where content is constantly updated, archived, and searched.