Internet and Web Technology (AL-703 (D)) - Unit 3 Short Notes

UNIT 3: Internet and Web Technology

I. Foundations of the Web

Internet vs World Wide Web (WWW)

• Internet: Global network of interconnected computers using TCP/IP protocols. Infrastructure for data communication (email, file transfer, etc.).

• World Wide Web (WWW): Information system built on top of the Internet. Uses HTTP/HTTPS, HTML, and URLs to access interlinked hypertext documents (web pages).

• Relationship: The Internet is the highway; the WWW is a service (like a delivery truck) that runs on it.

Web 2.0: Design Principles and Key Features

• Principles: User-centric design, collaboration, participatory culture, rich user experience.

• Key Features:

  • User-generated content (blogs, wikis, social media)

  • Tagging and folksonomies

  • Social networking and interoperability

  • AJAX for dynamic, responsive interfaces

  • APIs for data sharing and mashups

Web Publishing Process

1. Planning: Define purpose, audience, content structure.

2. Design: Create wireframes, mockups, choose color schemes/layouts.

3. Development: Write HTML/CSS/JavaScript, implement functionality.

4. Testing: Cross-browser/device testing, validation, performance checks.

5. Deployment: Upload to web server, configure domain/DNS.

6. Maintenance: Update content, fix bugs, monitor traffic.

[!TIP] Exam Focus: Distinguish Internet (network) from WWW (application service). Web 2.0 is about user participation, not just technology.

II. Web Architecture and Protocols

Web Browsers and Web Servers

Interaction: Browser sends HTTP request → Server processes & sends HTTP response → Browser renders.

HTTP (Hypertext Transfer Protocol)

• Request Structure:

  
  GET /index.html HTTP/1.1
  
  Host: www.example.com
  
  User-Agent: Mozilla/5.0
  
  

  • Start Line: Method, Request-URI, HTTP Version

  • Headers: Key-value pairs (Host, User-Agent, Accept)

  • Body (optional, e.g., for POST)

• Response Structure:

  
  HTTP/1.1 200 OK
  
  Content-Type: text/html
  
  Content-Length: 1387
  
  <html>...</html>
  
  

  • Status Line: HTTP Version, Status Code, Reason Phrase

  • Headers: Server, Content-Type, Cache-Control

  • Body: Requested resource

• Common Methods:

  • GET: Retrieve data (idempotent, safe)

  • POST: Submit data (non-idempotent, changes state)

  • PUT, DELETE, HEAD, OPTIONS

• Status Codes:

  • 1xx: Informational (e.g., 100 Continue)

  • 2xx: Success (e.g., 200 OK, 201 Created)

  • 3xx: Redirection (e.g., 301 Moved Permanently, 304 Not Modified)

  • 4xx: Client Error (e.g., 404 Not Found, 403 Forbidden)

  • 5xx: Server Error (e.g., 500 Internal Server Error)

Web Design Issues

[!TIP] Exam Focus: Know HTTP request/response structure, key methods (GET vs POST), and common status codes (200, 404, 500). For design issues, link each challenge to a practical solution.

III. Client-Side Web Development

A. HTML (HyperText Markup Language)

Basic Document Structure

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Page Title</title>

</head>

<body>

    <!-- Content here -->

</body>

</html>

Common Elements

• Headings: <h1> (most important) to <h6> (least important)

• Anchor Tag: <a href="https://example.com" target="_blank">Link Text</a>

  • href: URL (absolute/relative)

  • target: _self, _blank, _parent, _top

Lists

Images

<img src="image.jpg" alt="Description" width="300" height="200">

• src: Path to image (URL or relative)

• alt: Alternative text (critical for accessibility)

• width/height: Dimensions in pixels or % (prevents layout shift)

Forms and Form Controls

<form action="process.php" method="POST">

    <input type="text" name="username" placeholder="Enter username">

    <input type="password" name="password">

    <input type="checkbox" name="hobby" value="reading"> Reading

    <input type="radio" name="gender" value="male"> Male

    <input type="radio" name="gender" value="female"> Female

    <input type="submit" value="Submit">

    <input type="reset" value="Clear">

    <select name="city">

        <option value="bhopal">Bhopal</option>

        <option value="indore">Indore</option>

    </select>

    <textarea name="message" rows="4" cols="50"></textarea>

</form>

• <form> attributes:

  • action: URL to send data

  • method: GET (appends to URL) or POST (in body)

• Checkbox vs Radio:

  | Checkbox | Radio Button | |--------------|------------------| | Multiple selections allowed | Only one selection per group | | name can be same or different | Same name for group | | Independent state | Mutually exclusive |

Frames (Deprecated)

<frameset cols="25%,50%,25%">

    <frame src="left.html" name="left">

    <frame src="center.html" name="center">

    <frame src="right.html" name="right">

</frameset>

• <frameset>: Replaces <body>, defines rows/cols

• <frame>: Individual frame, src loads page

• Drawbacks: Poor SEO, accessibility issues, bookmarking problems. Use <iframe> for embedding.

Page Layout Techniques

• <div> and <span>:

  • <div>: Block-level container (for layout sections)

  • <span>: Inline container (for styling text fragments)

• Table-based Layout (Historical): Used <table> for layout (now discouraged; use CSS instead).

HTML5 Features

• Semantic Elements:

  
  <header>...</header>
  
  <nav>...</nav>
  
  <section>...</section>
  
  <article>...</article>
  
  <aside>...</aside>
  
  <footer>...</footer>
  
  

  • Improve accessibility, SEO, code readability.

• Multimedia:

  
  <audio controls src="sound.mp3"></audio>
  
  <video controls src="video.mp4" poster="preview.jpg"></video>
  
  

• Canvas: <canvas id="myCanvas"></canvas> (draw graphics via JavaScript)

• SVG: Scalable Vector Graphics (XML-based, inline or external)

• New Form Input Types: email, date, range, color, search

• New Attributes: placeholder, required, autofocus, pattern

B. CSS (Cascading Style Sheets)

Introduction

• Purpose: Separate content (HTML) from presentation (colors, fonts, layout).

• Benefits: Reusability, easier maintenance, consistent styling, faster pages (cached CSS).

Color Specification

Loading CSS

1. Inline Styles: style="color: blue;" (lowest specificity, avoid for maintainability)

2. Internal Stylesheet: <style> body { color: blue; } </style> (in <head>)

3. External Stylesheet: <link rel="stylesheet" href="styles.css"> (recommended, cached)

Cascading and Specificity

Specificity calculated as (a, b, c, d):

• a: Inline styles (1 or 0)

• b: Number of ID selectors

• c: Number of class, attribute, pseudo-class selectors

• d: Number of element, pseudo-element selectors

Example: #header .nav li a:hover → (0, 1, 2, 2)

Higher specificity wins; if equal, source order (later wins).

CSS Selectors

C. JavaScript

Client-Side vs Server-Side Scripting

Document Object Model (DOM)

• Tree Structure: HTML document represented as nodes (elements, attributes, text).

  
  Document
  
  └── html
  
      ├── head
  
      │   └── title
  
      └── body
  
          ├── h1
  
          └── p
  
  

• Accessing Elements:

  
  document.getElementById("demo");      // Single by ID
  
  document.getElementsByClassName("box"); // HTMLCollection
  
  document.getElementsByTagName("p");   // HTMLCollection
  
  document.querySelector(".active");   // First match
  
  document.querySelectorAll("div");     // NodeList
  
  

• Manipulating Elements:

  
  // Content
  
  element.innerHTML = "<strong>New</strong>";
  
  element.textContent = "Plain text";
  
  // Styles
  
  element.style.color = "red";
  
  element.setAttribute("class", "highlight");
  
  // Attributes
  
  element.src = "new.jpg";
  
  

• Event Handling:

  
  <button onclick="myFunction()">Click</button>
  
  <script>
  
    function myFunction() { alert("Clicked!"); }
  
    // Modern: addEventListener
  
    document.getElementById("btn").addEventListener("click", function() {
  
        console.log("Clicked");
  
    });
  
  </script>
  
  

Form Validation with Regular Expressions

function validateLogin() {

    const username = document.getElementById("user").value;

    const password = document.getElementById("pass").value;

    const userPattern = /^[a-zA-Z0-9_]{4,16}$/; // 4-16 alphanumeric/underscore

    const passPattern = /^(?=.*[A-Z])(?=.*\d).{8,}$/; // Min 8 chars, 1 uppercase, 1 digit

    if (!userPattern.test(username)) {

        alert("Username: 4-16 chars, letters/numbers/underscore");

        return false;

    }

    if (!passPattern.test(password)) {

        alert("Password: Min 8 chars, 1 uppercase, 1 number");

        return false;

    }

    return true; // Submit form

}

• ^ start, $ end, .* any chars, ?= positive lookahead.

Dynamic HTML (DHTML)

• Concept: Combine HTML, CSS, JavaScript to create interactive, animated pages without page reloads.

• Techniques:

  1. DOM Manipulation: Add/remove/modify elements dynamically.

  2. CSS Changes: Modify styles via JavaScript (element.style).

  3. Event-Driven Updates: Respond to user actions (click, mouseover).

• Example: Show/hide menu on hover, live search suggestions.

[!TIP] Exam Focus: DOM methods (getElementById, querySelector), event handling, and RegEx patterns for validation (username/password rules). Know client vs server scripting differences cold.

IV. Data Interchange and Markup Languages

A. XML (eXtensible Markup Language)

Purpose and Role

• Data Storage/Transmission: Platform-independent, self-describing data.

• Configuration Files: Application settings (e.g., web.xml, pom.xml).

• Web Services: SOAP messages, RSS/Atom feeds.

Basic Syntax

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

    <book category="fiction">

        <title lang="en">The Great Gatsby</title>

        <author>F. Scott Fitzgerald</author>

        <year>1925</year>

    </book>

</bookstore>

• XML Declaration: Optional but recommended (version, encoding).

• Elements: <title>, <author> (must be properly nested, case-sensitive).

• Attributes: category="fiction", lang="en" (values in quotes).

• Well-formedness Rules:

  1. Single root element (<bookstore>).

  2. Tags properly nested (no overlapping).

  3. Case-sensitive (<Title> ≠ <title>).

  4. Attribute values quoted.

  5. Special characters (<, >, &) escaped as <, >, &.

Parsing XML

JavaScript Example (DOM):

const parser = new DOMParser();

const xmlDoc = parser.parseFromString(text, "text/xml");

const titles = xmlDoc.getElementsByTagName("title");

Java Example (SAX):

SAXParserFactory factory = SAXParserFactory.newInstance();

SAXParser saxParser = factory.newSAXParser();

saxParser.parse("file.xml", new DefaultHandler() {

    public void startElement(String uri, String localName, String qName, Attributes attributes) {

        if (qName.equals("title")) { /* ... */ }

    }

});

B. DTD and XML Schema

DTD (Document Type Definition)

• Purpose: Define allowed structure/elements for XML validation.

• Internal DTD (within XML file):

  
  <!DOCTYPE bookstore [
  
      <!ELEMENT bookstore (book*)>
  
      <!ELEMENT book (title, author, year)>
  
      <!ATTLIST book category CDATA #REQUIRED>
  
      <!ELEMENT title (#PCDATA)>
  
      <!ELEMENT author (#PCDATA)>
  
      <!ELEMENT year (#PCDATA)>
  
  ]>
  
  

• External DTD (separate .dtd file):

  
  <!DOCTYPE bookstore SYSTEM "bookstore.dtd">
  
  

• Limitations: No data types (all text), limited structural constraints, no namespace support.

XML Schema (XSD)

• Purpose: Advanced validation with data types, namespaces, complex structures.

• Advantages over DTD:

  | Feature | DTD | XSD | |-------------|---------|---------| | Data Types | None (all #PCDATA) | xs:string, xs:integer, xs:date, etc. | | Namespaces | No | Yes (essential for modern XML) | | Structural Constraints | Limited | Rich (minOccurs, maxOccurs, patterns) | | Syntax | Non-XML (custom) | XML-based (consistent tooling) | | Extensibility | Low | High (inheritance, groups) |

Example XSD Snippet:

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <xs:element name="book">

        <xs:complexType>

            <xs:sequence>

                <xs:element name="title" type="xs:string"/>

                <xs:element name="author" type="xs:string"/>

                <xs:element name="year" type="xs:gYear"/>

            </xs:sequence>

            <xs:attribute name="category" type="xs:string" use="required"/>

        </xs:complexType>

    </xs:element>

</xs:schema>

C. XHTML (eXtensible HTML)

Features

• XML-based strict syntax (must be well-formed).

• Three DTDs:

  • Strict: No presentational elements (deprecated tags removed).

  • Transitional: Allows some presentational elements for migration.

  • Frameset: For pages using frames.

• MIME Type: application/xhtml+xml (or text/html for backward compatibility).

Differences from HTML

D. XML Naming Rules

• Allowed Characters: Letters (A-Z, a-z), digits (0-9), hyphen (-), underscore (_), period (.), colon (:) (colon for namespaces).

• Cannot Start With: Digit, hyphen, or period.

• No Spaces allowed.

• Case Sensitive: <Book> ≠ <book>.

• Example Valid Names: firstName, _count, ns:element.

• Example Invalid Names: 1stPlace, -tag, my name.

V. Server-Side Scripting and Database Integration

A. PHP (Hypertext Preprocessor)

Role in Web Development

• Server-side scripting language embedded in HTML.

• Generates dynamic content, processes forms, interacts with databases.

• Executed on server; sends plain HTML to client.

PHP Basics

• Variables:

  • Start with $ (e.g., $name).

  • Naming: Start with letter/underscore, case-sensitive, no spaces.

  • Scope: Local (function), Global (outside function), Static (persists).

• Data Types:

  • Scalar: integer (42), float (3.14), string ("hello"), boolean (true/false)

  • Compound: array (indexed/associative), object (instance of class)

  • Special: NULL (no value), resource (external resource)

• Operators:

  • Arithmetic: +, -, *, /, %

  • Assignment: =, +=, .= (string concatenation)

  • Comparison: ==, === (strict), !=, >, <

  • Logical: &&, ||, !

Functions

• Built-in: strlen($$\displaystyle str)`, `array_merge( $$a1, $a2), date("Y-m-d")

• User-Defined:

  
  function add($a, $b) {
  
      return $a + $b;
  
  }
  
  $sum = add(5, 3); // 8
  
  

Object-Oriented Programming in PHP

class User {

    public $name;       // Public property

    private $password;  // Private property

    protected $id;      // Protected property

    public function __construct($name, $password) {

        $$\displaystyle this->name = $$name;

        $$\displaystyle this->password = md5( $$password); // Example hashing

    }

    public function getName() {

        return $this->name;

    }

    private function validate() { /* ... */ }

}

class Admin extends User {

    public function __construct($name, $password, $id) {

        parent::__construct($name, $password);

        $$\displaystyle this->id = $$id;

    }

}

• Visibility:

  • public: Accessible everywhere.

  • private: Only within class.

  • protected: Within class and subclasses.

• Inheritance: class Child extends Parent.

PHP Interpreters

Advantages of PHP

• Open-source, cross-platform.

• Easy to learn, huge community.

• Extensive database support (MySQL, PostgreSQL, MongoDB).

• Large library of built-in functions.

• Compatible with all major web servers.

Database Connectivity with MySQL (MySQLi - Procedural)

// 1. Connect
$conn = mysqli_connect("localhost", "user", "pass", "mydb");

if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }

// 2. Execute Query
$sql = "SELECT id, name FROM users";
$$\displaystyle result = mysqli_query( $$conn, $sql);

// 3. Fetch Results

while ($$\displaystyle row = mysqli_fetch_assoc( $$result)) {

    echo "ID: " . $row["id"] . " Name: " . $row["name"] . "<br>";

}

// 4. Close Connection

mysqli_close($conn);

Steps:

1. Connect (mysqli_connect).

2. Select DB (in mysqli_connect or mysqli_select_db).

3. Execute query (mysqli_query).

4. Fetch results (mysqli_fetch_assoc, mysqli_fetch_array).

5. Free result (mysqli_free_result).

6. Close connection (mysqli_close).

Example Programs

1. String Length:

   
   <?php
   
   $str = "This is my first program";
   
   echo "Length: " . strlen($str); // 27
   
   ?>
   
   

2. Simple Calculator:

   
   <?php
   
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
   
       $$\displaystyle num1 = $$_POST['num1'];
   
       $$\displaystyle num2 = $$_POST['num2'];
   
       $$\displaystyle op = $$_POST['op'];
   
       $result = 0;
   
       switch($op) {
   
           case '+': $$\displaystyle result = $$num1 + $num2; break;
   
           case '-': $$\displaystyle result = $$num1 - $num2; break;
   
           case '*': $$\displaystyle result = $$num1 * $num2; break;
   
           case '/': $$\displaystyle result = $$num2 != 0 ? $num1/$num2 : "Error"; break;
   
       }
   
       echo "Result: $result";
   
   }
   
   ?>
   
   <form method="POST">
   
       <input type="number" name="num1" required>
   
       <select name="op"><option>+</option><option>-</option><option>*</option><option>/</option></select>
   
       <input type="number" name="num2" required>
   
       <input type="submit" value="Calculate">
   
   </form>
   
   

3. Add User to MySQL:

   
   <?php
   
   $conn = mysqli_connect("localhost", "root", "", "login_db");
   
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
   
       $$\displaystyle username = mysqli_real_escape_string( $$conn, $_POST['username']);
   
       $$\displaystyle password = password_hash( $$_POST['password'], PASSWORD_DEFAULT);
   
       $$\displaystyle sql = "INSERT INTO users (username, password) VALUES (' $$username', '$password')";
   
       if (mysqli_query($conn, $sql)) {
   
           echo "User added!";
   
       } else {
   
           echo "Error: " . mysqli_error($conn);
   
       }
   
   }
   
   ?>
   
   <form method="POST">
   
       Username: <input type="text" name="username"><br>
   
       Password: <input type="password" name="password"><br>
   
       <input type="submit" value="Register">
   
   </form>
   
   

B. JSP (JavaServer Pages)

Using JavaBeans in JSP

• JavaBean: Reusable Java class with no-arg constructor, private properties, getter/setter methods.

• JSP Tags:

  
  <jsp:useBean id="user" class="com.example.User" scope="session"/>
  
  <jsp:setProperty name="user" property="username" param="username"/>
  
  <jsp:getProperty name="user" property="username"/>
  
  

• Example Flow:

  1. Form submits to JSP.

  2. <jsp:useBean> instantiates/retrieves User bean.

  3. <jsp:setProperty> populates bean from request parameters.

  4. Bean used in scriptlets or EL (${user.username}).

C. Cookies

Purpose

• Session Management: Track logged-in users (session ID).

• Personalization: Store user preferences (theme, language).

• Tracking: Analytics (page visits, clicks).

How Cookies Work

1. Server sends Set-Cookie header in response:

   
   Set-Cookie: session_id=abc123; Expires=Wed, 09 Jun 2024 10:18:14 GMT; Path=/; Secure; HttpOnly
   
   

2. Browser stores cookie (subject to size/domain/path rules).

3. Browser sends Cookie header in subsequent requests to matching domain/path:

   
   Cookie: session_id=abc123
   
   

Cookie Attributes

VI. Additional Topics and Comparisons

Comparison of HTML and XHTML

Dynamic HTML (DHTML)

• Concept: Not a technology, but a combination of HTML, CSS, JavaScript, DOM to create dynamic, interactive pages.

• Implementation:

  1. Use JavaScript to modify DOM (add/remove elements).

  2. Change CSS properties (display, position, opacity).

  3. Bind events (onclick, onmouseover) to trigger updates.

• Example: Dropdown menu that appears on hover, image slideshow.

Page Layout and Linking Strategies

• Layout:

  • Div-based Layout: Use <div> with CSS float, flexbox, or grid (modern).

  • Avoid tables for layout (use for tabular data only).

• Linking:

  • Absolute URLs: https://example.com/page.html

  • Relative URLs: ./page.html, ../folder/page.html

  • Anchor Links: <a href="#section">Jump</a> + <h2 id="section">

  • Email Links: <a href="mailto:[email protected]">Email</a>

  • Best Practices: Descriptive link text, title attribute, target="_blank" for external links, avoid "click here".

Features of HTML5

1. Semantic Elements: <header>, <nav>, <main>, <article>, <section>, <footer>.

2. Multimedia: Native <audio>, <video> (no plugins).

3. Graphics: <canvas> (bitmap), <svg> (vector).

4. Storage: localStorage, sessionStorage (client-side).

5. APIs: Geolocation, Drag & Drop, Web Workers, Web Sockets.

6. Form Enhancements: New input types (email, date, range), attributes (required, autofocus).

7. Improved Semantics: <figure>, <figcaption>, <time>, <mark>.

[!TIP] Exam Focus: HTML vs XHTML differences (strict syntax), DHTML as a technique (not a language), HTML5 semantic tags vs generic <div>. PHP OOP basics (class, visibility) and database connectivity steps are high-yield.

Final Note: This unit is highly practical. Focus on writing code snippets (HTML forms, CSS selectors, JavaScript DOM/RegEx, PHP database scripts) and defining concepts clearly with examples. Past papers emphasize HTTP, HTML elements, CSS, JavaScript validation, XML vs DTD/XSD, PHP basics, and cookies.