Internet & Web Technology (CY-603 (A)) - Unit 2 Short Notes

Unit 2: Internet & Web Technology - Short Notes

(Based on CY-603(A) May 2023 Exam Pattern)

I. HTML (HyperText Markup Language)

Page Layout and Linking

• Page Layout Types:

  • Fixed Layout: Uses absolute units (pixels). Does not adapt to different screen sizes.

  • Fluid Layout: Uses relative units (%, em, rem). Adapts to browser window size but may break on extreme sizes.

  • Responsive Layout: Uses CSS media queries to adapt layout, content, and images to different device viewports (mobile-first approach).

• Linking Methods:

  • Absolute URL: Full path including protocol (https://www.example.com/page.html). Used for external links.

  • Relative URL: Path relative to current document (page.html, ../folder/page.html). Used for internal site navigation.

  • Anchor Link: Link to a specific section within a page using id attribute (<a href="#section1">).

Lists

• Ordered List (<ol>): Creates a numbered list. Attributes: type (1, A, a, I, i), start, reversed.

  
  <ol type="A">
  
      <li>First Item</li>
  
  </ol>
  
  

• Unordered List (<ul>): Creates a bulleted list. Attribute: type (disc, circle, square).

• Definition List (<dl>): Creates a list of terms and definitions.

  
  <dl>
  
      <dt>Term</dt>
  
      <dd>Definition</dd>
  
  </dl>
  
  

Forms and Form Fields

• <form> Element: Container for all form controls. Key attributes: action (URL to send data), method (GET/POST), enctype (for file uploads).

• Input Types (<input>): type attribute defines field.

  • text, password (masked), submit, reset, button.

  • radio (name must be same for group), checkbox.

  • email, number, date, file, hidden.

• Other Form Elements:

  • <textarea>: Multi-line text input.

  • <select> & <option>: Drop-down list.

  • <label>: Associated with an input via for attribute (improves accessibility).

  • <fieldset> & <legend>: Groups related form controls with a caption.

HTML vs XHTML

[!TIP] Exam Focus: XHTML is stricter. Key difference: XHTML is HTML re-written as XML, enforcing XML rules (closed tags, quotes, lowercase).

II. CSS (Cascading Style Sheets)

Introduction to CSS

• What is CSS? A style-sheet language used to describe the presentation (layout, colors, fonts) of a document written in HTML or XML. It separates content (HTML) from presentation (CSS).

• Methods of Inclusion:

  1. Inline: Using style attribute within an HTML tag. (Lowest priority, least reusable).

  2. Internal/Embedded: Using <style> block in the <head> section. (Applies to single page).

  3. External: Using <link> tag to an external .css file. (Most efficient, reusable across pages).

Advantages of CSS

1. Reusability & Maintainability: One CSS file can style multiple HTML pages. Global changes require editing one file.

2. Consistency: Ensures uniform look and feel across the entire website.

3. Reduced Code Complexity & Size: Cleaner HTML, smaller page size, faster loading.

4. Accessibility & Device Compatibility: Enables responsive design (media queries) and better support for assistive technologies. Provides alternate styling for print.

III. Client-Side Scripting

JavaScript Form Objects

• Radio Buttons (<input type="radio">):

  • Used for selecting one option from a set.

  • Key Property: checked (boolean, true if selected).

  • All radios in a group must share the same name attribute.

• Checkboxes (<input type="checkbox">):

  • Used for selecting multiple options.

  • Key Property: checked (boolean).

• Event Handling: Use onclick, onchange events to trigger JavaScript functions when user interacts.

  
  if (document.getElementById('myRadio').checked) {
  
      // Code if radio is selected
  
  }
  
  

Document Object Model (DOM)

• What is DOM? A cross-platform, language-neutral interface that treats an HTML/XML document as a tree structure of nodes (elements, attributes, text). JavaScript uses DOM to dynamically access and manipulate the document.

• Accessing Elements:

  • document.getElementById('id') → Single element by unique ID.

  • document.getElementsByTagName('tag') → Live HTMLCollection of elements by tag name.

  • document.getElementsByClassName('class') → Live HTMLCollection by class.

• Manipulation:

  • Content: element.innerHTML, element.textContent, element.setAttribute().

  • Style: element.style.property = "value" (e.g., element.style.color = "red").

  • Structure: element.appendChild(), element.removeChild(), element.insertBefore().

[!TIP] Common Pitfall: innerHTML parses HTML tags, textContent does not. Use textContent for plain text to prevent XSS.

IV. Server-Side Scripting with PHP

Basic Constructs

• Loop Statements:

  • for ($$\displaystyle i = 0; $$i < 10; $i++) { ... }

  • while (condition) { ... } / do { ... } while (condition);

  • foreach ($array as $value) { ... } // Iterates over arrays/objects.

File Handling

• Core Functions:

  • $handle = fopen("file.txt", "mode") → Opens file. Modes: r (read), w (write, truncates), a (append), x (create new), r+/w+ (read/write).

  • fread($handle, length) / fgets($handle) → Read content.

  • fwrite($handle, string) → Write content.

  • fclose($handle) → Close file pointer.

  • file_put_contents("file.txt", "data") → Shorthand for write.

• File Creation: Use fopen() with mode w, a, or x. If file doesn't exist, PHP attempts to create it (permissions permitting).

Database Connectivity (PHP & MySQLi)

• Procedural Connection String:

  
  $conn = mysqli_connect("localhost", "username", "password", "database");
  
  if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }
  
  

• Creating Table via PHP:

  
  $sql = "CREATE TABLE Users (
  
      id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  
      name VARCHAR(30) NOT NULL,
  
      email VARCHAR(50)
  
  )";
  
  if (mysqli_query($conn, $sql)) { echo "Table created"; }
  
  

Object-Oriented Programming in PHP

• Class & Object: class ClassName { ... } defines a blueprint. $obj = new ClassName(); creates an instance.

• Properties & Methods: Variables (public $prop;) and functions (public function method() { ... }) inside a class.

• Constructor: __construct() method called automatically on object creation. Used for initialization.

• Key Principles:

  • Encapsulation: Restricting direct access using private/protected and providing public getter/setter methods.

  • Inheritance: class Child extends Parent { ... }. Child inherits Parent's properties/methods.

  • Polymorphism: Same method name behaves differently in different classes (via method overriding).

State Management: Sessions vs Cookies

• PHP Usage:

  • Session: session_start(); $_SESSION['user'] = 'Alice';

  • Cookie: setcookie("theme", "dark", time() + 3600); // 1 hour → Access via $_COOKIE['theme'].

[!TIP] Exam Key: Sessions store data on server, cookies on client. Sessions are for secure, temporary data; cookies for persistent, non-sensitive preferences.

V. Data Formats and Transformation

XML (Extensible Markup Language)

• What is XML? A meta-language for creating custom, self-describing markup languages. Designed to store and transport data in a structured, platform-independent format.

• Key Attributes:

  • Well-formed: Follows XML syntax rules (single root, proper nesting, case-sensitive, quoted attributes).

  • Valid: Conforms to a defined DTD or XML Schema.

  • Extensible: Users define their own tags and structure.

  • Platform-independent: Plain text format, readable by any system.

XSLT (Extensible Stylesheet Language Transformations)

• What is XSLT? A language for transforming an XML document into another format (HTML, PDF, another XML) using a stylesheet (.xsl or .xslt).

• Key Elements:

  • <xsl:template match="pattern">: Defines a template rule for matching nodes.

  • <xsl:apply-templates>: Instructs processor to apply templates to child nodes.

  • <xsl:value-of select="expression">: Extracts and outputs the value of a selected node.

  • <xsl:for-each select="node-set">: Iterates over a set of nodes.

  
  <xsl:template match="/">
  
      <html><body>
  
          <xsl:apply-templates/>
  
      </body></html>
  
  </xsl:template>
  
  <xsl:template match="student">
  
      <p><xsl:value-of select="name"/></p>
  
  </xsl:template>
  
  

VI. Web Protocols and Standards

HTTP (HyperText Transfer Protocol)

• Utility & Model:

  • Foundation of data communication for the Web.

  • Request-Response Model: Client (browser) sends a request, server sends a response.

  • Stateless: Each request is independent. Server does not retain user session info between requests (requires sessions/cookies for state).

• Common HTTP Methods:

  • GET: Retrieve data from server. Parameters in URL. Idempotent & safe.

  • POST: Submit data to server (e.g., form). Parameters in request body. Not idempotent.

  • PUT: Update/replace a resource at a given URL.

  • DELETE: Remove a resource.

  • HEAD: Same as GET but retrieves only headers (no body).

  • OPTIONS: Queries server for supported methods.

VII. Web Design and Development Considerations

Web Design Issues

• Usability: Intuitive navigation, clear calls-to-action, fast loading.

• Accessibility (WCAG): Design for users with disabilities (semantic HTML, ARIA, keyboard navigation, color contrast).

• Responsiveness: Layout adapts to all device sizes (fluid grids, flexible images, media queries).

• Cross-Browser Compatibility: Ensure consistent functionality/appearance across browsers (Chrome, Firefox, Safari, Edge). Use vendor prefixes, progressive enhancement.

• Navigation Design: Consistent, logical, and accessible menus (breadcrumbs, sitemap).

• Visual Hierarchy & Content Organization: Use size, color, spacing to guide user attention. Organize content with headings, lists, and whitespace.

Database Bugs

• Common Issues:

  • SQL Injection: Malicious SQL code inserted via input fields. Prevention: Use prepared statements with parameterized queries (mysqli_stmt, PDO).

  • Data Integrity: Inconsistent or corrupted data due to failed transactions or lack of constraints. Prevention: Use transactions (BEGIN, COMMIT, ROLLBACK), foreign keys, data validation.

  • Connection Failures: Network issues, incorrect credentials, server overload. Prevention: Robust error handling (try-catch), connection pooling, retry logic.

• Debugging Techniques:

  • Log errors to a file (error_log()).

  • Use mysqli_error($conn) or PDO exceptions.

  • Test queries directly in a database client (phpMyAdmin, MySQL CLI).

  • Validate and sanitize all user input before use.

[!TIP] Critical Security: Always use prepared statements for any query involving user input. Never concatenate user input directly into SQL strings.