Web Programming Basics & HTML Fundamentals

Core Concepts of Web Programming

The Web Architecture: Client-Server Model

The web operates on a client-server model, where:

• Client: Your browser (Chrome, Firefox, etc.) requests web pages.
• Server: A remote computer (hosted by companies like Google, Daraz, or NTC) stores and sends web pages.

flowchart LR
    A["Client (Browser)"] -->|"HTTP Request"| B["Internet"]
    B -->|"HTTP Request"| C["Server"]
    C -->|"HTTP Response"| B
    B -->|"HTTP Response"| A

How it works:

1. You type daraz.com in your browser → DNS lookup (converts domain to IP address).
2. Browser sends an HTTP request to Daraz’s server.
3. Server processes the request and sends back an HTTP response (HTML, CSS, JS).
4. Browser renders the page.

Real-world example: When you open eSewa to pay a bill:

• Your browser (client) sends a request to eSewa’s server.
• The server checks your login, processes the payment, and sends back a confirmation page.

HTML: The Backbone of Web Pages

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure of a webpage (not styling or behavior—CSS and JavaScript handle those).

Key Features of HTML:

• Markup language: Uses tags (<tag>content</tag>) to define elements.
• Static content: HTML alone cannot perform actions (e.g., form submissions, animations). It relies on CSS (styling) and JavaScript (interactivity).
• Versioning: Current standard is HTML5 (replaced HTML4 and XHTML).

HTML Document Structure

Every HTML file starts with a root element (<html>) and contains two main sections:

1. Head section (<head>): Metadata (title, links to CSS/JS, character set).
2. Body section (<body>): Visible content (text, images, links).

Example of a basic HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Real-world tie-in: When you visit NEPSE’s website, the HTML structure defines how stock prices, charts, and navigation menus are organized. The <head> might include links to CSS for styling and JavaScript for real-time price updates.

Common HTML Tags and Attributes

HTML tags are categorized by their purpose. Below are the most essential ones:

Worked Example: Creating a Simple Stock Price Table (NEPSE-Style)

Task: Create an HTML table showing NEPSE’s top 3 stocks.

<!DOCTYPE html>
<html>
<head>
    <title>NEPSE Top Stocks</title>
</head>
<body>
    <h1>NEPSE Top 3 Stocks</h1>
    <table border="1">
        <tr>
            <th>Company</th>
            <th>Symbol</th>
            <th>Price (NRs)</th>
        </tr>
        <tr>
            <td>Nepal Bank</td>
            <td>NBL</td>
            <td>1200</td>
        </tr>
        <tr>
            <td>Global IME</td>
            <td>GIME</td>
            <td>850</td>
        </tr>
        <tr>
            <td>NTC</td>
            <td>NTC</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

Output Preview:

+-------------+--------+------------+
| Company     | Symbol | Price (NRs)|
+-------------+--------+------------+
| Nepal Bank  | NBL    | 1200       |
| Global IME  | GIME   | 850        |
| NTC         | NTC    | 500        |
+-------------+--------+------------+

Why this matters:

• NEPSE’s website uses similar tables to display real-time stock data.
• Daraz’s product listings rely on <table>-like structures for categories and filters.

Semantic HTML: Meaningful Structure

Semantic HTML uses tags that describe their meaning (not just presentation). This improves accessibility (for screen readers) and SEO.

Example:

<header>
    <h1>NEPSE Stock Market</h1>
    <nav>
        <a href="/index">Home</a>
        <a href="/stocks">Stocks</a>
    </nav>
</header>
<main>
    <article>
        <h2>Top Gainer</h2>
        <p>NBL surged by 5% today.</p>
    </article>
</main>
<footer>
    <p>© 2023 NEPSE</p>
</footer>

Real-world use:

• Pathao’s app uses semantic HTML to structure ride details, payment options, and driver info for better accessibility.
• Khalti’s checkout page uses <form> with semantic tags like <label> for better user experience.

HTML vs. Other Web Technologies

Key Takeaway:

• HTML = Skeleton
• CSS = Skin
• JavaScript = Brain

In the Real World

1. eSewa’s Payment Page:

   • Uses HTML forms (<form>, <input type="password">) to collect user credentials.
   • Semantic tags like <section> group related fields (e.g., "Bill Details").
   • Why it matters: Secure form handling (via PHP/JS) prevents data loss.

2. Daraz’s Product Listings:

   • Tables (<table>) display products in grids (category, price, rating).
   • Semantic HTML (<article> for each product) helps search engines rank pages.
   • Real-time updates: JavaScript dynamically loads more products (but HTML defines the initial structure).

3. NTC’s Service Booking System:

   • Forms (<form action="book.php" method="POST">) let users request connections.
   • Validation: HTML5 attributes like required or type="email" ensure correct input before submission.
   • Example:

     <input type="email" name="user_email" required placeholder="your@email.com">
     

Common HTML Mistakes and How to Avoid Them

Exam Tip

1. Structure Matters:

   • Always start with <!DOCTYPE html> and include <html>, <head>, and <body>.
   • Marks are deducted for missing or incorrect doctype.

2. Practical Questions:

   • Expect questions like:
     • "Write HTML for a login form with fields for username, password, and a submit button."
     • "Convert this non-semantic HTML to semantic HTML."
   • Always use semantic tags where possible.

3. Real-World Scenarios:

   • Questions may ask you to design a webpage for:
     • A bank’s loan calculator (use <form> with <input type="number">).
     • A Daraz order status page (use <table> for order history).
   • Trace the flow: Show how data moves from HTML (input) → PHP (processing) → HTML (output).

4. Common Pitfalls:

   • Forgetting action and method in <form>:

     <!-- Wrong -->
     <form>
         <input type="text" name="username">
     </form>
     <!-- Correct -->
     <form action="login.php" method="POST">
         <input type="text" name="username" required>
     </form>
     

   • Always include method="POST" for sensitive data (like passwords).

5. Visuals in Exams:

   • If asked to "draw the structure of an HTML document," sketch:

     flowchart TD
         A["<!DOCTYPE html>"] --> B["<html>"]
         B --> C["<head>"]
         B --> D["<body>"]
         C --> E["<title>"]
         C --> F["<meta>"]
         D --> G["<h1>"]
         D --> H["<p>"]