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

UNIT 4: Internet & Web Technology

1. HTML & CSS Fundamentals

Page Layout and Linking (Q1)

Structural Elements for Layout:
- <div>: Block-level container for grouping content.
- <span>: Inline container for styling a portion of text.
- Semantic Tags (HTML5): <header>, <nav>, <main>, <article>, <section>, <footer> – define meaning for content, improving SEO and accessibility.
Hyperlinks (Anchor Tags):
- Syntax: <a href="URL" target="_blank|_self|_parent|_top">Link Text</a>
- href: Hypertext reference (destination URL).
- target: Where to open the linked document (_blank for new tab/window).
- Linking Strategies: Absolute URLs (full path), Relative URLs (from current document), Fragment Identifiers (link to a section within a page using #id).

[!TIP] Always use semantic tags for layout instead of excessive <div> soup for better accessibility and SEO.

HTML Lists (Q3)

List Type	Tags	Use Case
Ordered List	`<ol>`, `<li>`	Sequential items (1, 2, 3...). Attributes: `type` (A, a, I, i), `start`.
Unordered List	`<ul>`, `<li>`	Non-sequential items (bullets). Attribute: `type` (disc, circle, square).
Definition List	`<dl>`, `<dt>`, `<dd>`	Name-value pairs (terms and definitions).

Nested Lists: Lists can be placed inside <li> of another list to create hierarchy.


<!-- Example: Nested Unordered List -->

<ul>

  <li>Fruits

    <ul>

      <li>Apple</li>

      <li>Banana</li>

    </ul>

  </li>

</ul>

HTML Forms (Q13)

Form Structure: <form action="processing_script.php" method="get|post"> ... </form>
- action: URL of the server-side script to process the form.
- method: HTTP method (GET appends data to URL, POST sends in request body).
Common Form Fields (<input>):
- type="text", type="password" (masks input).
- type="radio" (name attribute must be same for grouping), type="checkbox".
- type="submit", type="reset", type="button".
- type="file" (requires enctype="multipart/form-data" in form).
Other Elements:
- <textarea rows="" cols="">: Multi-line text input.
- <select name=""><option value="">...</option></select>: Dropdown list. <option selected> for default.
- <label for="id">: Improves accessibility; clicking label focuses associated input.
Form Validation Basics:
- Client-side: HTML5 attributes (required, pattern, min, max, type="email").
- Server-side: Mandatory for security. Use PHP/JavaScript to validate data after submission.

CSS and its Advantages (Q6)

Introduction: Cascading Style Sheets (CSS) define the presentation (look & feel) of HTML documents.
Types of CSS:
1. Inline: style="property:value;" inside HTML tag. (Low reusability)
2. Internal (Embedded): <style> ... </style> in <head> section. (For single-page styles)
3. External: .css file linked via <link rel="stylesheet" href="styles.css">. (Most efficient)
Key Advantages:
- Separation of Concerns: Content (HTML) separate from Presentation (CSS).
- Reusability: One CSS file can style multiple HTML pages.
- Consistency: Ensures uniform look across the entire website.
- Reduced Code & Bandwidth: Less code in HTML, smaller page size.
- Easier Maintenance: Change one CSS file to update the entire site's design.
- Advanced Layout & Effects: Powerful selectors, box model, flexbox, grid, animations.

2. Web Standards & Protocols

HTTP (Hypertext Transfer Protocol) (Q2)

Utility & Role: Application-layer protocol for request-response communication between clients (browsers) and servers. Foundation of data communication on the World Wide Web.
HTTP Methods:

| Method | Purpose | Idempotent? | Safe? | | :--- | :--- | :--- | :--- | | GET | Retrieve data from server. Parameters in URL. | Yes | Yes | | POST | Submit data to server (e.g., form). Parameters in body. | No | No | | PUT | Update a resource at a specific URL. | Yes | No | | DELETE | Remove a resource. | Yes | No | | HEAD | Same as GET but retrieves only headers, no body. | Yes | Yes |
Request/Response Structure:
- Request: Method SP Request-URI SP HTTP-Version CRLF + Headers + (optional) Body.
- Response: HTTP-Version SP Status-Code SP Reason-Phrase CRLF + Headers + (optional) Body.
Status Codes (First digit class):
- 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., 400 Bad Request, 404 Not Found).
- 5xx: Server Error (e.g., 500 Internal Server Error).

HTML vs XHTML (Q4)

Feature	HTML (Traditional)	XHTML (XML-based)
Syntax	Looser, forgiving.	Strict XML rules.
Case Sensitivity	Tags/attributes case-insensitive.	Case-sensitive (must be lowercase).
Closing Tags	Optional for some elements (`<p>`, `<li>`).	Mandatory for all elements (e.g., `<br />`).
Attribute Quoting	Optional (if no spaces).	Mandatory (`name="value"`).
Nesting	Can be improper.	Must be properly nested (no overlapping).
Document Type	`<!DOCTYPE HTML>` (HTML5).	Requires DTD (Document Type Definition).
Well-formedness	Not required.	Required (must parse correctly as XML).
MIME Type	`text/html`.	`application/xhtml+xml` (or `text/html` for compatibility).

DTD Types: Strict (no presentational tags), Transitional (allows presentational tags), Frameset.

XML (Extensible Markup Language) (Q7)

Purpose: To store and transport structured data in a platform-independent, self-descriptive format. Not for display (unlike HTML).
Key Attributes:
1. Well-formedness: Must follow XML syntax rules (proper nesting, case-sensitive, quoted attributes, single root element).
2. Validity: Must conform to a Document Type Definition (DTD) or XML Schema Definition (XSD) which defines allowed elements/attributes.
3. Extensibility: Users can define their own tags and structure.
4. Platform Independence: Text-based; any system can read it.
5. Self-descriptive Data: Tags describe the data content (e.g., <price>, <author>).

XSLT (Extensible Stylesheet Language Transformations) (Q17)

Role: An XML-based language used to transform an XML document into another format (HTML, text, or another XML structure).
Basics:
- XSLT Stylesheet: An XML file containing templates (<xsl:template match="pattern">).
- XPath: Language used within XSLT to navigate and select nodes in the XML source document.
- <xsl:apply-templates>: Instructs processor to apply matching templates to selected nodes.
- Output Methods: method="html", method="text", method="xml".
Process: XSLT processor takes XML source + XSLT stylesheet → produces transformed output.

3. Client-Side Scripting with JavaScript

Form Elements: Radio Buttons and Checkboxes (Q5)

HTML Implementation:


<!-- Radio Buttons (single selection) -->

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

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

<!-- Checkboxes (multiple selection) -->

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

<input type="checkbox" name="hobby" value="coding"> Coding

Radio: Same name attribute groups them; only one can be selected.
Checkbox: Independent; multiple can be selected.

JavaScript Access & Manipulation:
- Property: element.checked (boolean: true if selected).
- Property: element.value (value attribute).
- Event Handling: Use onclick or onchange event to trigger a function when state changes.
```
// Example: Check if a radio button is selected

if (document.getElementById('male').checked) {

  console.log("Male selected");

}
```

Document Object Model (DOM) (Q16)

Concept: A platform- and language-neutral interface that represents an HTML/XML document as a tree structure of nodes (objects). JavaScript uses DOM to dynamically access and manipulate document content.

DOM Tree Structure:


Document

├── <html>

│   ├── <head>...

│   └── <body>

│       ├── <h1>...

│       └── <p id="demo">...

Core DOM Objects:
- document: The root Document object.
- window: The global Window object (browser window).
- element: Represents any HTML element node.
DOM Manipulation:
- Selecting Elements:
  - document.getElementById('id')
  - document.getElementsByClassName('class') (HTMLCollection)
  - document.getElementsByTagName('tag') (HTMLCollection)
  - document.querySelector('css_selector') (first match)
  - document.querySelectorAll('css_selector') (NodeList)
- Modifying Content/Attributes:
  - element.innerHTML = "<b>New</b>"; (parses HTML)
  - element.textContent = "Plain Text"; (no HTML parsing)
  - element.setAttribute('class', 'new-class');
  - element.style.color = 'red';
- Creating/Removing Nodes:
  - document.createElement('tagName')
  - parentElement.appendChild(newElement)
  - element.removeChild(childElement) or element.remove()

4. Server-Side Programming with PHP

Loop Statements in PHP (Q8)

Loop	Syntax	Use Case
`for`	`for (init; condition; increment) { ... }`	Known number of iterations.
`while`	`while (condition) { ... }`	Execute 0 or more times; condition checked first.
`do-while`	`do { ... } while (condition);`	Execute at least once; condition checked last.
`foreach`	`foreach ($array as $value) { ... }`<br>`foreach ($array as $key => $value) { ... }`	Iterate over arrays and objects.


// Example: foreach loop
$colors = ["red", "green", "blue"];

foreach ($colors as $color) {

  echo "$color<br>";

}

Object-Oriented Programming with PHP (Q9)

Class & Object:
- Class: Blueprint/template (class Car { ... }).
- Object: Instance of a class ($myCar = new Car();).
Key OOP Concepts:
- Inheritance: class Child extends Parent (reuses parent code).
- Encapsulation: Bundling data (properties) and methods (functions) together; controlling access via visibility.
- Polymorphism: Same method name behaves differently in different classes (via inheritance/interfaces).
Special Methods:
- Constructor: __construct() – runs when object is created. Used for initialization.
- Destructor: __destruct() – runs when object is destroyed.
Visibility (Access Modifiers):
- public: Accessible from anywhere.
- private: Accessible only within the class.
- protected: Accessible within class and its subclasses.

File Handling in PHP (Q10)

Basic Process:
1. Open/Create: $file = fopen("filename.txt", "mode");
  - Modes: r (read), w (write, truncates), a (append), x (create new), r+/w+ (read/write).
2. Read/Write:
  - fread($file, filesize("filename.txt")) or file_get_contents().
  - fwrite($file, "data") or file_put_contents().
3. Close: fclose($file);
4. Check Existence: file_exists("filename.txt")
Key Functions: fopen(), fread(), fwrite(), fclose(), file_exists(), unlink() (delete).

PHP & MySQL Database Integration (Q11, Q12, Q14)

Connectivity String (using mysqli - Procedural):


$servername = "localhost";

$username = "root";

$password = "";

$dbname = "myDB";

// Create connection

$$\displaystyle conn = mysqli_connect( $$servername, $username, $password, $dbname);

// Check connection

if (!$conn) {

  die("Connection failed: " . mysqli_connect_error());

}

Using PDO (more secure, supports multiple DBs):


try {

  $$\displaystyle conn = new PDO("mysql:host= $$servername;dbname=$dbname", $username, $password);

  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

  echo "Connection failed: " . $e->getMessage();

}

Creating a Table:


$sql = "CREATE TABLE MyGuests (

  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,

  firstname VARCHAR(30) NOT NULL,

  lastname VARCHAR(30) NOT NULL,

  email VARCHAR(50),

  reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

)";

if (mysqli_query($conn, $sql)) {

  echo "Table MyGuests created successfully";

} else {

  echo "Error creating table: " . mysqli_error($conn);

}

Session vs Cookie:

| Feature | Session | Cookie | | :--- | :--- | :--- | | Storage Location | Server (file/database). | Client (browser). | | Lifetime | Ends when browser closes or session_destroy(). | Set via expire parameter; persists. | | Security | More secure (data not sent with each request). | Less secure (stored client-side, can be tampered). | | Capacity | Large (limited by server resources). | Small (~4KB per domain). | | PHP Functions | session_start(), $$\displaystyle _SESSION` superglobal. | `setcookie()`, ` $$_COOKIE superglobal. | | Primary Use | Sensitive user data (login state, user ID). | Non-sensitive preferences (theme, language). |

5. Web Application Design & Debugging

Web Design Issues (Q15)

Core Considerations:
- Usability: Intuitive navigation, clear calls-to-action, fast loading.
- Accessibility (WCAG): Perceivable, operable, understandable, robust. Use semantic HTML, ARIA labels, alt text, keyboard navigation.
- Responsiveness (Mobile-First): Design for mobile first, use CSS media queries, flexible grids (flexbox, grid), responsive images.
- Cross-Browser Compatibility: Test on major browsers (Chrome, Firefox, Safari, Edge); use vendor prefixes, feature detection (Modernizr).
- Performance Optimization: Minify CSS/JS, optimize images, leverage caching, reduce HTTP requests, use CDNs.
- SEO Basics: Semantic markup, proper heading hierarchy (<h1> to <h6>), meta tags, clean URLs, sitemap.
- Navigation Design: Consistent, logical, with breadcrumbs for deep sites.

Database Bugs in Web Applications (Q18)

Common Issues:
- SQL Injection: Malicious SQL inserted via user input. (Most Critical)
- Connection Errors: Wrong credentials, DB server down, max connections reached.
- Query Syntax Errors: Typos in SQL, missing commas/quotes, incorrect table/column names.
- Data Type Mismatches: Inserting string into integer column.
- Race Conditions: Concurrent access leading to inconsistent data.
Debugging Techniques:
- Enable Error Reporting: mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); or PDO::ERRMODE_EXCEPTION.
- Log Errors: Use error_log() or PHP's log_errors directive.
- Inspect SQL: echo $$\displaystyle sql;` or `var_dump( $$sql); before execution.
- Use mysqli_error($conn) / $stmt->error: Get specific DB error message.
- Test Queries Directly: Run generated SQL in phpMyAdmin/MySQL CLI.
Preventive Measures:
- Prepared Statements (Parameterized Queries): #1 Defense against SQL Injection. Separates SQL logic from data.
```
$$\displaystyle stmt = $$conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");

$$\displaystyle stmt->bind_param("ss", $$name, $email); // "ss" = two strings
```
- Input Validation & Sanitization: Validate type/length, sanitize with filter_var() or mysqli_real_escape_string() (less secure than prepared statements).
- Proper Connection Handling: Close connections ($conn->close()), use connection pooling.
- Use ORM/Abstraction Layer: E.g., Laravel's Eloquent, Doctrine.

Account

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

UNIT 4: Internet & Web Technology

1. HTML & CSS Fundamentals

Page Layout and Linking (Q1)

HTML Lists (Q3)

HTML Forms (Q13)

CSS and its Advantages (Q6)

2. Web Standards & Protocols

HTTP (Hypertext Transfer Protocol) (Q2)

HTML vs XHTML (Q4)

XML (Extensible Markup Language) (Q7)

XSLT (Extensible Stylesheet Language Transformations) (Q17)

3. Client-Side Scripting with JavaScript

Form Elements: Radio Buttons and Checkboxes (Q5)

Document Object Model (DOM) (Q16)

4. Server-Side Programming with PHP

Loop Statements in PHP (Q8)

Object-Oriented Programming with PHP (Q9)

File Handling in PHP (Q10)

PHP & MySQL Database Integration (Q11, Q12, Q14)

5. Web Application Design & Debugging

Web Design Issues (Q15)

Database Bugs in Web Applications (Q18)