Web Development Fundamentals: HTML, CSS, XML, & Sessions

Posted on Aug 3, 2025 in Arts and Humanities

What is CSS? Types & Examples

CSS (Cascading Style Sheets) is a stylesheet language used to control the look and formatting of HTML elements on a web page. It separates content (HTML) from presentation (design), allowing for better flexibility and control in web development. CSS is used to define styles such as:

Font size and color
Layout and positioning
Backgrounds and borders
Animations and transitions

Types of CSS

There are three main types of CSS:

Inline CSS
- Applied directly to an HTML element using the style attribute.
- Affects only that specific element.
Example:
```
<p style="color: blue; font-size: 18px;">This is inline CSS.</p>
```

Internal CSS

Written inside a <style> tag within the <head> section of the HTML document.
Applies styles to the whole page.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>This is internal CSS.</p>
</body>
</html>

External CSS

Written in a separate .css file.
Linked to the HTML document using the <link> tag.
Best for styling multiple pages.

Example:

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>This is external CSS.</p>
</body>
</html>

style.css

p {
  color: red;
  font-size: 22px;
}

HTML5: Features & Characteristics

HTML5 is the latest version of HyperText Markup Language (HTML) — the standard language used to create and structure content on the web. It was introduced to improve and modernize web development by supporting multimedia, graphics, and better APIs without relying on external plugins (like Flash). HTML5 focuses on making web content more semantic, interactive, and cross-platform compatible, especially for mobile devices. Here are the key characteristics of HTML5:

Feature	Description
Semantic Tags	Improves structure and meaning of content
Multimedia Support	`<audio>` and `<video>` elements
Graphics	`<canvas>` and `<svg>` for 2D/3D drawing
Form Features	New input types and validations
Offline Storage	`localStorage` and `sessionStorage`
Geolocation API	Detects user location
Device Friendly	Supports responsive and mobile-friendly design
JavaScript APIs	Advanced web functionalities

XML: Schema vs. DTD Comparison

XML (eXtensible Markup Language) is a markup language used to store and transport data in a structured, human-readable, and machine-readable format. Unlike HTML, which is used for displaying data, XML is designed to describe data.

Feature	DTD (Document Type Definition)	XML Schema (XSD – XML Schema Definition)
Syntax	Uses its own custom syntax	Written in XML format
Data Types	Limited (e.g., only basic text)	Rich data types (e.g., `string`, `int`, `date`, etc.)
Namespace Support	Does not support XML namespaces	Fully supports namespaces
Validation	Less strict; suitable for simple XML	More powerful and precise validation
Readability	Simple and easy to read	More complex, but more expressive
Extensibility	Not easily extendable	Highly extensible and supports custom types
Usage	Older and less used in modern systems	Preferred in modern applications and web services

HTML Forms: Tags & Attributes

An HTML form is used to collect user input and submit it to a server for processing. It is created using the <form> tag and includes various form controls like text fields, checkboxes, and buttons.

Important Form Attributes

Attribute	Description
`action`	URL where form data will be sent after submission
`method`	HTTP method to use (`GET` or `POST`)
`target`	Specifies where to display the response (`_self`, `_blank`)
`enctype`	Encoding type for submitted data (e.g., for file uploads)
`name`	Name of the form (used in JavaScript)
`autocomplete`	Enables/disables auto-filling (`on` or `off`)

Common HTML Form Input Tags

Tag	Purpose
`<label>`	Defines a label for an input element
`<fieldset>`	Groups related elements in a form
`<legend>`	Title/caption for a `<fieldset>`
`<datalist>`	Defines autocomplete options for an `<input>`
`<output>`	Displays the result of a calculation

HTML Tags vs. Attributes: Key Differences

Aspect	Tags	Attributes
Definition	Tags are elements used to define structure.	Attributes provide extra information about an element.
Syntax	Enclosed in angle brackets: `<tag>`	Written inside the opening tag: `attribute="value"`
Function	Define content and layout of the page.	Modify or describe tag behavior or properties.
Example	`<img>`, `<p>`, `<a>`, `<form>`, etc.	`src`, `href`, `alt`, `type`, `name`, etc.
Usage	Always paired (opening and sometimes closing)	Always used inside opening tag

CSS Selectors: Types & Usage

A CSS selector is a pattern used to select and style HTML elements. It tells the browser which elements the CSS rules should apply to.

Selector Type	Symbol / Format	Targets
Universal	`*`	All elements
Element	`p`, `div`, etc.	Specific HTML tags
Class	`.classname`	Elements with that class
ID	`#idname`	Single element with that ID
Grouping	`h1, p, div`	Multiple elements
Descendant	`div p`	`p` inside `div`
Child	`ul > li`	Direct children
Attribute	`[type="text"]`	Elements with given attribute
Pseudo-class	`a:hover`	Special state (hover, focus)
Pseudo-element	`p::first-line`	Part of an element

Web Sessions: Understanding Server-Side Data Storage

A session is a way to store information (like user data) on the server to keep track of a user’s interaction across multiple web pages or visits. Unlike cookies, which store data on the client-side, sessions store data on the server and use a unique session ID to identify the user.

How Does a Session Work?

When a user visits a website, the server creates a session and assigns a unique session ID.
This session ID is sent to the user’s browser as a cookie.
As the user navigates through pages, the browser sends the session ID back to the server.
The server uses the session ID to retrieve the stored data related to that user.
The session lasts until the user logs out, closes the browser, or the session times out.

PHP Code Examples

dbconnect.php

<?php
// $hostname = 'localhost';
// $username = 'root';
// $password = '';
// $database = 'new_database';

$con = new mysqli('localhost', 'root', '', 'new_database');

if (!$con) {
    die(mysqli_error($con));
}
?>

insert_users.php

<?php
// Assuming dbconnect.php is included here
// include 'dbconnect.php';

if (isset($_POST['submit_btn'])) {
    $Name = $_POST['name'];
    $Roll = $_POST['roll'];
    $Address = $_POST['address'];

    $insert_sql = "INSERT INTO users(name, roll, address, status) VALUES ('$Name', '$Roll', '$Address', '1')";

    $insert_result = mysqli_query($con, $insert_sql);

    if ($insert_result) {
        echo " <script>alert('Data Inserted');</script> ";
        echo " <script>window.location.href='view_users.php';</script> ";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert Users</title>
</head>
<body>
    <h1>Add Users</h1>
    <form method="POST">
        <label for="name">Name: </label>
        <input type="text" id="name" name="name">
        <br><br>

        <label for="roll">Roll: </label>
        <input type="number" id="roll" name="roll">
        <br><br>

        <label for="address">Address: </label>
        <input type="text" id="address" name="address">
        <br><br>

        <button type="submit" name="submit_btn">Submit</button>
    </form>
</body>
</html>

edit_users.php

<?php
// Assuming dbconnect.php is included here and $id_2 is defined from URL parameter or session
// include 'dbconnect.php';
// $id_2 = $_GET['id']; // Example of how $id_2 might be set

if (isset($_POST['update_btn'])) {
    $newName = $_POST['newname'];
    $newRoll = $_POST['newroll'];
    $newAddress = $_POST['newaddress'];

    $update_sql = "UPDATE users SET name='$newName', roll='$newRoll', address='$newAddress' WHERE id='$id_2'";

    $update_result = mysqli_query($con, $update_sql);

    if ($update_result) {
        echo " <script>alert('Data Updated');</script> ";
        echo " <script>window.location.href='view_users.php';</script> ";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update Users</title>
</head>
<body>
    <h1>Update Users</h1>
    <form method="POST">
        <label for="name">New Name: </label>
        <input type="text" id="name" name="newname">
        <br><br>

        <label for="roll">New Roll: </label>
        <input type="number" id="roll" name="newroll">
        <br><br>

        <label for="address">New Address: </label>
        <input type="text" id="address" name="newaddress">
        <br><br>

        <button type="submit" name="update_btn">Update</button>
    </form>
</body>
</html>

view_users.php

<?php
// Assuming dbconnect.php is included here
// include 'dbconnect.php';

$fetch_sql = "SELECT * FROM users WHERE status='1'";
$fetch_result = mysqli_query($con, $fetch_sql);

if ($fetch_result) {
    $local_id = 1;
    echo '<table border="1">';
    echo '<thead>';
    echo '<tr>';
    echo '<th>ID</th>';
    echo '<th>Name</th>';
    echo '<th>Roll</th>';
    echo '<th>Address</th>';
    echo '<th colspan="2">Actions</th>';
    echo '</tr>';
    echo '</thead>';
    echo '<tbody>';
    while ($row = mysqli_fetch_array($fetch_result)) {
        echo '<tr>';
        echo '<td>' . $local_id++ . '</td>';
        echo '<td>' . htmlspecialchars($row['name']) . '</td>';
        echo '<td>' . htmlspecialchars($row['roll']) . '</td>';
        echo '<td>' . htmlspecialchars($row['address']) . '</td>';
        echo '<td><a href="edit_users.php?id=' . $row['id'] . '">Edit</a></td>';
        echo '<td><a href="delete_users.php?id=' . $row['id'] . '">Delete</a></td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
} else {
    echo "Error fetching data: " . mysqli_error($con);
}
?>

delete_users.php

<?php
// Assuming dbconnect.php is included and $id_1 is defined from URL parameter
// include 'dbconnect.php';
// $id_1 = $_GET['id']; // Example of how $id_1 might be set

$delete_sql = "UPDATE users SET status='0' WHERE id='$id_1'";
$delete_result = mysqli_query($con, $delete_sql);

if ($delete_result) {
    echo " <script>alert('Data deleted');</script> ";
    echo " <script>window.location.href='view_users.php';</script> ";
}
?>

XML Code Examples

employee.xml

<employee xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
          xs:schemaLocation="employee.xsd">
    <name>
        <firstName>Arjun</firstName>
        <lastName>Gautam</lastName>
    </name>
    <contact>
        <mobile>432432</mobile>
        <landline>4535453</landline>
    </contact>
    <address>
        <city>Kathmandu</city>
        <street>Nepal</street>
        <tole>Bihar</tole>
    </address>
</employee>

employee_XSD.xsd

<!-- Content for employee.xsd would go here -->
<!-- Example: -->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="employee">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="name">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="firstName" type="xs:string"/>
              <xs:element name="lastName" type="xs:string"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
        <xs:element name="contact">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="mobile" type="xs:string"/>
              <xs:element name="landline" type="xs:string"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
        <xs:element name="address">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="city" type="xs:string"/>
              <xs:element name="street" type="xs:string"/>
              <xs:element name="tole" type="xs:string"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

employee_XSLT.xsl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:ns="https://www.arjungtm.com.np">
  <xsl:template match="/">
    <html>
      <body>
        <h2>Employee Details</h2>
        <table border="1" cellspacing="0" cellpadding="5px">
          <tr>
            <th>Name</th>
            <th>Contact</th>
            <th>Address</th>
          </tr>
          <xsl:for-each select="employee">
            <tr>
              <td>
                <xsl:value-of select="name/firstName"/>
              </td>
              <td>
                <xsl:value-of select="contact/mobile"/>
              </td>
              <td>
                <xsl:value-of select="address/city"/>
              </td>
            </tr>
            <tr>
              <td>
                <xsl:value-of select="name/lastName"/>
              </td>
              <td>
                <xsl:value-of select="contact/landline"/>
              </td>
              <td>
                <xsl:value-of select="address/street"/>
              </td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td>
                <xsl:value-of select="address/tole"/>
              </td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>