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

I. HTML & XHTML Fundamentals

Page Layout and Linking in HTML

• Structural Elements:

  • <div>: Block-level container for grouping content.

  • <span>: Inline container for styling a portion of text.

  • Semantic Tags (HTML5): <header>, <nav>, <section>, <article>, <footer> – define meaning for content.

• Hyperlinks: Created using <a> tag.

  • href (Hypertext Reference): Specifies the URL destination.

  • target: _blank (new tab), _self (same frame).

  • Example: <a href="https://example.com" target="_blank">Visit</a>

• Image Embedding: <img> tag is self-closing.

  • src: Source path (URL or local file).

  • alt: Alternative text (critical for accessibility & SEO).

  • Example: <img src="logo.png" alt="Company Logo">

[!TIP] Always use alt for images. For internal links, use relative paths; for external, absolute URLs.

HTML Lists

1. Ordered List (<ol>): Numbered list.

   • Attributes: type (1, A, a, I, i), start (starting number).

   • Example: <ol type="A"><li>First</li></ol>

2. Unordered List (<ul>): Bulleted list.

   • Attribute: type (disc, circle, square).

3. Definition List (<dl>): For terms and definitions.

   • <dt>: Definition Term.

   • <dd>: Definition Description.

4. Nested Lists: Lists can be placed inside <li> of another list.

HTML vs. XHTML

[!TIP] XHTML is essentially HTML written as XML. Key mnemonic: XHTML = eXtensible + Strict.

II. Styling with CSS

CSS (Cascading Style Sheets) separates content (HTML) from presentation.

• Advantages:

  1. Separation of Concerns: Easier maintenance.

  2. Reusability: One style sheet controls multiple pages.

  3. Precise Control: Over layout (Flexbox/Grid), colors, fonts, spacing.

  4. Reduced HTML Size: Less presentational markup.

  5. Browser Consistency: Normalizes default styles across browsers.

  6. Accessibility: Better control for user stylesheets.

[!TIP] CSS stands for Cascading Style Sheets – "cascading" refers to the priority scheme (inline > internal > external, and specificity rules).

III. Client-Side Scripting: JavaScript

Form Input Objects

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

  • Grouped by the same name attribute.

  • Only one option selectable per group.

  • Access state: document.formName.radioName.checked (Boolean).

• Check Boxes (<input type="checkbox">):

  • Independent selection.

  • Access state: element.checked (Boolean).

• Accessing Values:

  • For both, use .value property for the value attribute, and .checked for selection state.

  • Example: if (document.myForm.myRadio.checked) { var val = document.myForm.myRadio.value; }

IV. Server-Side Scripting: PHP

Object-Oriented Programming in PHP

• Class: Blueprint (class Car { ... }).

• Object: Instance ($myCar = new Car();).

• Properties: Variables (public $color;).

• Methods: Functions (public function drive() { ... }).

• Constructor: __construct() – runs on object creation.

• Inheritance: class SportsCar extends Car { ... }.

• Visibility:

  • public: Accessible everywhere.

  • private: Only within the class.

  • protected: Within class & subclasses.

Loop Statements in PHP

File Handling

1. Create/Open File: fopen("file.txt", "mode")

   • "w": Write (creates new, truncates existing).

   • "x": Create new (fails if exists).

   • "a": Append.

2. Write: fwrite($handle, "data"); or file_put_contents("file.txt", "data");

3. Close: fclose($handle);

4. Permissions & Errors: Check if fopen returns a valid resource. Server directory must have write permissions.

PHP & MySQL Database Connectivity

• MySQLi (Procedural):

  
  $conn = mysqli_connect("localhost", "username", "password", "database");
  
  if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }
  
  $sql = "CREATE TABLE users (id INT PRIMARY KEY, name VARCHAR(50))";
  
  mysqli_query($conn, $sql);
  
  

• PDO (Recommended - more secure, supports multiple DBs):

  
  $pdo = new PDO("mysql:host=localhost;dbname=database", "username", "password");
  
  $pdo->exec("CREATE TABLE users (id INT PRIMARY KEY, name VARCHAR(50))");
  
  

[!TIP] Always use Prepared Statements (with mysqli_prepare or PDO) to prevent SQL Injection. Never concatenate user input directly into queries.

V. Web Forms and State Management

HTML Forms and Form Fields

• <form> Attributes:

  • method: GET (data in URL, visible, limited) or POST (data in body, hidden, larger).

  • action: URL of server-side script to process data.

  • enctype: For file uploads (multipart/form-data).

• Common Input Fields: type="text", type="password", <textarea>, <select> with <option>, <button>.

Session vs. Cookie

[!TIP] Use sessions for sensitive/shopping cart data, cookies for non-critical preferences. Regenerate session ID after login to prevent fixation.

VI. Web Protocols and Data Formats

HTTP (Hypertext Transfer Protocol)

• Utility: Stateless, application-layer protocol for client-server communication (request-response).

• Methods:

  • GET: Retrieve data (idempotent, cacheable).

  • POST: Submit data (non-idempotent, not cached).

  • PUT: Replace resource.

  • DELETE: Remove resource.

  • HEAD: Get headers only.

  • OPTIONS: Query server capabilities.

• Status Codes:

  • 1xx: Informational.

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

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

  • 4xx: Client Error (400 Bad Request, 404 Not Found).

  • 5xx: Server Error (500 Internal Server Error).

• Message Format: Request line (GET /index.html HTTP/1.1), Headers, Blank line, Optional Body.

XML (Extensible Markup Language)

• Core Attributes:

  1. Well-formedness: Proper nesting, single root element, case-sensitive, quoted attributes.

  2. Self-descriptive: Tags describe data meaning.

  3. Platform Independent: Plain text, Unicode support.

• Validation: Ensures structure & data types.

  • DTD (Document Type Definition): Older, defines elements/attributes.

  • XML Schema (XSD): More powerful, defines data types & structure in XML syntax.

Document Object Model (DOM)

• Definition: Platform/language-neutral tree structure representing an HTML/XML document.

• Core Objects:

  • document: Root of the tree.

  • element: HTML/XML tags.

  • attribute: Tag attributes.

  • text: Text nodes.

• Key Manipulation Methods:

  • getElementById("id")

  • getElementsByTagName("tag")

  • createElement("tag")

  • appendChild(node)

  • innerHTML / textContent

[!DIAGRAM: CANVAS] A simple DOM tree: document -> html -> (head, body) -> body -> (h1, p) -> p has text node.

XSLT (Extensible Stylesheet Language Transformations)

• Purpose: Transform an XML document into another format (HTML, text, XML).

• Key Components:

  • XSLT Processor: Applies the stylesheet.

  • Template (<xsl:template match="...">): Defines rules for matching nodes.

  • <xsl:value-of select="..."/>: Extracts value of a selected node.

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

• Process: XSLT stylesheet (.xsl) is linked to/processed with XML document.

VII. Web Design and Security Considerations

Web Design Issues

1. Cross-Browser Compatibility: Test on Chrome, Firefox, Safari, Edge. Use vendor prefixes, feature detection.

2. Accessibility (WCAG): Semantic HTML, ARIA labels, keyboard navigation, color contrast.

3. Responsive Design: Fluid grids, flexible images, CSS media queries (@media).

4. Navigation Usability: Clear menus, consistent layout, breadcrumbs.

5. Load Time Optimization: Minify CSS/JS, compress images, leverage browser caching, reduce HTTP requests.

Database Bugs and Security Vulnerabilities

1. SQL Injection:

   • Attack: Insert malicious SQL via input fields (e.g., ' OR '1'='1).

   • Prevention: Prepared Statements (parameterized queries), input validation, least-privilege DB user.

2. Cross-Site Scripting (XSS):

   • Attack: Inject malicious scripts (<script>) into pages viewed by others.

   • Prevention: Output Encoding (htmlspecialchars() in PHP), Content Security Policy (CSP).

3. Data Integrity & Validation: Validate input on server (client-side can be bypassed). Use type/length/format checks.

4. Error Handling: Disable display_errors in production. Log errors instead of showing raw DB errors to users (prevents information leakage).

[!TIP] Never trust user input. The golden rules: Validate (on server), Sanitize (clean data), Escape (for output context). Use prepared statements for all database queries.