Web Technology Learning Notes

BCA Nepal

December 14, 2024

Unit 1: HTML and CSS

1. HTML Basics

Concept Overview:
HTML provides the structure for all web pages. It defines elements like headings, paragraphs, lists, links, images, and more. A solid understanding of HTML ensures that you can create well-structured, accessible, and search-engine-friendly pages.

Key Definitions and Terms:

HTML Elements: Building blocks of a webpage, defined by a start tag, content, and an end tag.
Attributes: Additional information on elements (e.g., href on <a>).
Semantic Tags: Tags like <header>, <nav>, <article>, <section> that convey meaning about the content.

Practical Applications & Examples:

Personal Blog: Use <article> for blog posts, <header> for the blog title, <nav> for the menu.
Company Homepage: Organize sections into <section> and <footer> tags for the company’s address and contact info.
Documentation Site: Use <dl> (definition lists) for listing terms and definitions, <a> tags for linking to references.

Step-by-Step Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Company</title>
</head>
<body>
  <header>
    <h1>My Company</h1>
    <nav>
      <a href="index.html">Home</a> |
      <a href="products.html">Products</a> |
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <section>
    <h2>About Us</h2>
    <p>We are a leading provider of innovative solutions.</p>
  </section>

  <footer>
    <p>© 2024 My Company</p>
  </footer>
</body>
</html>

2. Images & Image Maps

Concept Overview:
Images add visual context. Image maps let you define clickable areas within a single image, providing interactive navigation.

Key Definitions and Terms:

<img>: Embeds images.
<map> and <area>: Define clickable regions on an image.
alt Attribute: Text description for accessibility and SEO.

Practical Applications & Examples:

Infographic Navigation: An image of a world map linked to country-specific info pages.
Product Showcases: A single product image with clickable regions to view details of different parts or accessories.
Floor Plans: A building blueprint as an image map, where clicking on different rooms displays their details.

Step-by-Step Example:

<img src="store_layout.jpg" usemap="#storemap" alt="Store Layout" />
<map name="storemap">
  <!-- Clickable area linking to the electronics section -->
  <area shape="rect" coords="50,50,200,200" href="electronics.html" alt="Electronics" />
  <!-- Clickable area linking to the clothing section -->
  <area shape="circle" coords="350,150,75" href="clothing.html" alt="Clothing" />
</map>

3. Tables

Concept Overview:
Tables display data in a grid of rows and columns. They are ideal for numerical data, schedules, or any content that naturally fits into a matrix.

Key Definitions and Terms:

<table>: Defines the table.
<tr>, <th>, <td>: Define rows, headers, and cells.

Practical Applications & Examples:

Product Price List: Show items in rows, with columns for product name, SKU, and price.
Weekly Schedule: Display a school or office timetable.
Financial Reports: Present quarterly sales figures in a structured table.

Step-by-Step Example:

<table border="1">
  <tr>
    <th>Quarter</th>
    <th>Sales ($)</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>10,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>12,500</td>
  </tr>
</table>

4. Frames

Concept Overview:
While traditional framesets are outdated, understanding them offers historical perspective. Iframes are still used today to embed third-party content securely.

Key Definitions and Terms:

<iframe>: Embeds another HTML page within the current page.

Practical Applications & Examples:

Embedded Videos: Use iframes to embed YouTube videos on your website.
Google Maps Integration: Insert a map iframe to show a business location.
Social Widgets: Embed Twitter timelines or Facebook feeds.

Step-by-Step Example:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="Sample Video"></iframe>

5. Forms

Concept Overview:
Forms enable user input. They are essential for creating interactive, data-driven websites.

Key Definitions and Terms:

<form>: Wraps all input elements and defines submission behavior.
<input>, <select>, <textarea>: Various ways to collect user data.

Practical Applications & Examples:

Contact Form: Let users submit inquiries via text fields and dropdowns.
Signup Form: Collect email, password, and preferences for user registration.
Survey or Feedback Form: Radio buttons, checkboxes, and text areas for feedback.

Step-by-Step Example:

<form action="submit_form.php" method="post">
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" required />

  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>

  <button type="submit">Send</button>
</form>

6. Style Sheets (CSS)

Concept Overview:
CSS controls visual presentation, allowing separation of structure and design. It makes pages responsive and visually consistent.

Key Definitions and Terms:

Selectors: Target HTML elements to style.
Properties & Values: Define styles like color, font-size, and layout.
Box Model: Understanding margins, borders, padding, and content area.

Practical Applications & Examples:

Responsive Layout: Create fluid, mobile-friendly designs with media queries.
Brand Consistency: Apply uniform color schemes, fonts, and spacing across pages.
Animations: Add subtle transitions and hover effects to enhance UX.

Step-by-Step Example:

/* style.css */
body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
}

h1 {
  color: #333;
  text-align: center;
}

@media (max-width: 600px) {
  body {
    background: #e0e0e0;
  }
}

Unit 2: Issues of Web Technology

Concept Overview:
Web applications can follow various architectural patterns. 2-tier, 3-tier, and n-tier architectures distribute responsibilities differently among clients, servers, and databases.

Key Definitions and Terms:

2-Tier: Direct communication between client and server.
3-Tier: Separation into presentation (client), application (server), and data (database) layers.
n-Tier: Further decomposition into multiple tiers (e.g., microservices).

Practical Applications & Examples:

2-Tier Example: A simple intranet application where a desktop client accesses a database directly.
3-Tier Example: A standard web app: a browser (front-end), a server running application logic (middle tier), and a separate database server (back-end).
n-Tier Example: A large-scale enterprise solution using multiple services: one service for user authentication, one for product catalog, one for payments, etc.

Step-by-Step Example (Conceptual):

3-Tier Setup:
- Client (Browser): Sends HTTP requests via a web form.
- Server (App Tier): Processes request in PHP/Java/Python, queries database for data.
- Database (Data Tier): Returns requested information to the server, which formats a response back to the client.

Unit 3: The Client Tier

Concept Overview:
XML, schemas, and transformations (XSLT) play key roles in data interchange and client-side data representation.

Key Definitions and Terms:

XML: A flexible format for representing structured data.
XSD: Specifies the rules (schema) that an XML file must follow.
XSLT: Transforms XML into HTML or other formats.
XPath/XQuery: Query languages to navigate and extract data from XML.

Practical Applications & Examples:

RSS Feeds: XML-based feeds that can be transformed into HTML for display in a client’s browser.
Data Configuration: Storing app configuration in XML, which can be transformed into a user-friendly settings page.
Multilingual Support: Store content in XML and use XSLT to generate localized versions of a webpage.

Step-by-Step Example: Using the earlier XML example:

Practical Transformation: Display a list of book titles and authors on a client page by applying XSLT in the browser or via JavaScript.

Unit 4: The Server Tier

Concept Overview:
The server tier handles logic, data processing, and integration with external services. Tag libraries, frameworks, and server-side languages (PHP, Java, .NET) help build scalable, maintainable solutions.

Key Definitions and Terms:

Tag Libraries: Pre-built functions or UI components for JSP/ASP.NET pages.
Error Handling: Techniques (try/catch, logging) to handle unexpected runtime issues.
Logic Flow: Conditional statements, loops, and data processing on the server.

Practical Applications & Examples:

E-Commerce Checkout: Server processes cart items, calculates totals, and stores orders in the database.
Blog Engine: Server validates user input, saves posts to a database, and displays them dynamically.
CRM Systems: Server logic handles user authentication, data retrieval, and generates reports.

Step-by-Step Example (JSP Pseudocode):

<%@ page import="java.sql.*" %>
<html>
<body>
<%
  // Retrieve products from a database and display them
  Connection conn = DriverManager.getConnection("jdbc:mysql://localhost/mydb", "user", "pass");
  Statement stmt = conn.createStatement();
  ResultSet rs = stmt.executeQuery("SELECT name, price FROM products");

  while (rs.next()) {
    out.println("<p>" + rs.getString("name") + ": $" + rs.getDouble("price") + "</p>");
  }

  rs.close();
  stmt.close();
  conn.close();
%>
</body>
</html>

Unit 5: Introduction to Advanced Server Side Issues

Concept Overview:
Advanced server-side topics include working with databases, handling authentication, setting cookies for user sessions, and managing files on the server.

Key Definitions and Terms:

Database Connectivity: Connecting to and querying a database from the server.
Authentication: Verifying identities using usernames/passwords, tokens, or integrated security.
Cookies: Storing user preferences or session data on the client.
File Handling: Reading and writing files on the server for content management or data export.

Practical Applications & Examples:

User Authentication System: Checking login credentials against a user database, storing a session cookie, and granting access to restricted pages.
E-Commerce Platform: Using database queries to retrieve product lists, prices, and order history.
Content Management System (CMS): Reading template files, updating blog posts, and writing new articles to the server’s file system.
Analytics Logging: Writing user activity logs to server files for later analysis.

Step-by-Step Example (PHP):

<?php
// Connect to DB
$conn = new mysqli("localhost", "user", "pass", "mydb");

// Check user credentials
$username = $_POST['username'];
$password = $_POST['password'];

// Prepared statement for security
$stmt = $conn->prepare("SELECT id FROM users WHERE username=? AND password=SHA1(?)");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$stmt->store_result();

if ($stmt->num_rows > 0) {
  // User authenticated
  setcookie("username", $username, time()+3600); // 1-hour session cookie
  echo "Welcome, $username!";
} else {
  echo "Invalid credentials.";
}

$conn->close();
?>

Common Mistakes and Best Practices (Recap)

HTML: Use semantic tags, validate markup, ensure accessibility with alt text and labels.
CSS: Separate style from content, leverage external style sheets, consider responsive design.
Tables & Forms: Use them semantically (tables for data, forms for input), ensure validation and accessibility.
Server-Side Logic: Avoid SQL injection with prepared statements, handle errors gracefully, separate concerns (MVC patterns).
Advanced Topics: Secure authentication, encrypt sensitive data, manage files and cookies responsibly.