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

UNIT 2: Internet and Web Technology

I. Web Fundamentals and Architecture

Internet vs World Wide Web (WWW)

• Internet: A global network of interconnected computer networks using standardized protocols (TCP/IP) for data transmission. It's the underlying infrastructure.

• World Wide Web (WWW): An information-sharing model built on top of the Internet. It uses the HTTP protocol to access interlinked hypertext documents (web pages) via web browsers.

• Relationship: The Internet is the highway system; the WWW is one of the many services (like email, FTP) that travel on it.

Key Difference: Internet = network of networks (infrastructure). WWW = system of interlinked hypertext documents (service/application).

Web Browsers and Web Servers

• Web Browser (Client): Software application (Chrome, Firefox, Safari) that requests, receives, interprets, and displays web content.

• Web Server: Software/hardware (Apache, Nginx, IIS) that stores web documents and serves them to clients upon request.

• Request-Response Cycle:

  1. User enters URL in browser.

  2. Browser sends an HTTP request to the server.

  3. Server processes request, finds resource, sends back an HTTP response.

  4. Browser renders the response (HTML, CSS, JS) into a visual page.

HTTP Protocol

• Primary Function: Stateless, application-layer protocol for transmitting hypermedia.

• Structure: Request/Response messages with headers and optional body.

• Common Methods:

  • GET: Retrieve data (parameters in URL).

  • POST: Submit data (parameters in body, more secure for sensitive data).

  • PUT, DELETE, HEAD, OPTIONS.

• Status Codes (First digit indicates class):

  • 1xx: Informational

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

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

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

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

Web Publishing Process

1. Planning: Define purpose, audience, sitemap.

2. Design: Create wireframes/mockups (focus on UI/UX).

3. Development: Write code (HTML, CSS, JS, server-side scripts).

4. Testing: Cross-browser, functionality, performance, security.

5. Deployment: Upload files to a web hosting server (shared, VPS, cloud).

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

Web 2.0 Concepts

• Characteristics: User-generated content, usability, interoperability, dynamic content.

• Key Features:

  • AJAX (Asynchronous JavaScript and XML): Enables partial page updates without full reload.

  • APIs (Application Programming Interfaces): Allow third-party integration.

  • Mashups: Combine data/services from multiple sources.

  • Social Networking & Tagging.

• Examples: Facebook, YouTube, Wikipedia, Twitter.

Web Design Considerations

II. HTML and XHTML

HTML Document Structure (Basic Template)

<!DOCTYPE html> <!-- HTML5 declaration -->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Page Title</title>

    <!-- CSS, JS links, meta tags go here -->

</head>

<body>

    <!-- Visible page content goes here -->

</body>

</html>

HTML Elements & Attributes

• Syntax: <tag attribute="value">Content</tag>

• Common Attributes: id (unique), class (styling/JS), style (inline CSS), title (tooltip).

• Block vs Inline:

  • Block: Starts on new line, takes full width (<div>, <p>, <h1>-<h6>, <section>).

  • Inline: Flows within text, takes only needed width (<span>, <a>, <img>, <strong>).

Lists

• Ordered (<ol>): Numbered list. <li> for list items.

• Unordered (<ul>): Bulleted list.

• Definition (<dl>): <dt> (term), <dd> (description).

• Nesting: Lists can be nested inside <li> of another list.

Images

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

• src: Path to image file (URL or relative path).

• alt: Critical for accessibility (screen readers) and SEO. Shown if image fails to load.

• Common Formats:

  • JPEG/JPG: Photographs, millions of colors, lossy compression.

  • PNG: Transparency support, lossless, good for graphics/logos.

  • GIF: Limited colors (256), supports simple animations.

Forms and Form Controls

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

    <label for="username">Username:</label>

    <input type="text" id="username" name="username" required>

    <label>Password:

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

    </label>

    <input type="checkbox" name="interest" value="web"> Web Dev

    <input type="checkbox" name="interest" value="design"> Design

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

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

    <select name="country">

        <option value="in">India</option>

        <option value="us">USA</option>

    </select>

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

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

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

</form>

• Grouping Checkboxes vs Radio Buttons:

  • Checkboxes: Multiple selections allowed. name can be same (e.g., interest[]) to submit array.

  • Radio Buttons: Single selection from mutually exclusive options. Must share the same name attribute.

• <textarea>: Multi-line text input.

• <select>: Dropdown list with <option>.

Anchors and Hyperlinks

<a href="https://www.example.com" target="_blank" title="External Link