Web Programming IIUnit 19 min read

HTML Basics & Web Programming Fundamentals

Unit 1 of Web Programming II introduces the foundational concepts of web development, focusing on HTML’s structure, semantic tags, multimedia embedding, and basic CSS integration—essential for building responsive web pages and understanding how browsers render content.

Padhai · Based on the official syllabus and past papers
Updated 29 Sept 2026

TAKEAWAYS:

HTML is the backbone of web pages, using tags to define structure and content (e.g., <header>, <table>).
Semantic tags improve accessibility and SEO by clearly labeling page sections (e.g., <article>, <nav>).
Multimedia (images, audio, video) is embedded via <img>, <audio>, and <video> tags with attributes like src and controls.
CSS enhances HTML by styling content (colors, layouts) without altering structure.
Forms (<form>) collect user input (text, checkboxes) and validate data client-side.
Real-world apps like eSewa and Daraz use HTML/CSS for transaction forms and product listings, while Pathao relies on semantic navigation for ride requests.

1. What is HTML?

HTML (HyperText Markup Language) is a markup language that defines the structure and content of web pages. It uses tags (e.g., <p>, <h1>) to wrap text, images, and other elements. Browsers interpret these tags to render pages.

Key Features of HTML:

Platform-independent: Works across all devices (desktop, mobile).
Extensible: Supports plugins (e.g., Flash, JavaScript).
Interoperable: Compatible with other web technologies (CSS, PHP, JavaScript).
Human-readable: Clear syntax for developers.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

Caption: Basic HTML5 document structure with <!DOCTYPE>, <html>, <head>, and <body> tags.

2. HTML Document Structure

Every HTML page follows a hierarchical structure:

graph TD
  A["<!DOCTYPE html>"] --> B["<html>"]
  B --> C["<head>"]
  B --> D["<body>"]
  C --> E["<title>"]
  C --> F["<meta charset='UTF-8'>"]
  C --> G["<meta name='viewport' content='width=device-width, initial-scale=1.0'>"]
  D --> H["<header>"]
  D --> I["<main>"]
  D --> J["<footer>"]
  D --> K["<section>"]
  D --> L["<article>"]
  D --> M["<div>"]

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Student Records</title>
  </head>
  <body>
    <h1>Class 12 Results</h1>
    <table border="1">
      <tr><th>Name</th><th>Marks</th></tr>
      <tr><td>Ramesh</td><td>85</td></tr>
    </table>
  </body>
</html>

Output:

Name	Marks
Ramesh	85

3. Semantic HTML Tags

Semantic tags describe the meaning of content, improving accessibility and SEO. Compare non-semantic (<div>) vs. semantic tags:

Hierarchy of semantic HTML5 tags in a typical webpage.

Non-Semantic	Semantic	Purpose
`<div>`	`<header>`	Page header (logo, nav)
`<div>`	`<nav>`	Navigation menu
`<div>`	`<article>`	Independent content (blog post)
`<div>`	`<section>`	Thematic grouping
`<div>`	`<footer>`	Footer (copyright, links)

Example:

<header>
  <h1>Daraz Delivery</h1>
  <nav>
    <a href="/track">Track Order</a>
    <a href="/help">Help</a>
  </nav>
</header>

Figure 2: Semantic <header> and <nav> tags for a delivery app.

4. Text Formatting in HTML

Basic text formatting tags:

Tag	Example	Output
`<b>`	`<b>Bold</b>`	Bold
`<i>`	`<i>Italic</i>`	Italic
`<u>`	`<u>Underline</u>`	<u>Underline</u>
`<strong>`	`<strong>Important</strong>`	Important (semantic bold)
`<em>`	`<em>Emphasis</em>`	Emphasis (semantic italic)
`<sup>`	`H<sub>2</sub>O`	H₂O

Worked Example:

<p>Nepal's GDP <strong>grew</strong> by <em>4.1%</em> in 2023.</p>

Output: Nepal's GDP grew by 4.1% in 2023.

5. Embedding Multimedia

Images

<img src="logo.png" alt="eSewa Logo" width="100" height="50">

src: Path to image.
alt: Text for accessibility (e.g., screen readers).
width/height: Dimensions (optional).

Audio

<audio controls>
  <source src="alert.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

controls: Adds play/pause buttons.

Video

<video width="320" height="240" controls>
  <source src="traffic.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Caption: eSewa uses <img> tags to display its logo and transaction icons.

6. HTML Tables

Tables organize data in rows (<tr>) and cells (<td>).

Example: Student Marks Table

<table border="1">
  <thead>
    <tr><th>Name</th><th>Maths</th><th>Science</th></tr>
  </thead>
  <tbody>
    <tr><td>Anita</td><td>90</td><td>85</td></tr>
    <tr><td>Binod</td><td>78</td><td>92</td></tr>
  </tbody>
</table>

Output:

Name	Maths	Science
Anita	90	85
Binod	78	92

Key Attributes:

border="1": Adds borders (deprecated in HTML5; use CSS instead).
<thead>: Table header (bold by default).
<tbody>: Table body (data rows).

7. Forms in HTML

Forms collect user input (e.g., login, surveys). Key elements:

Tag	Attribute	Example	Purpose
`<input>`	`type`	`<input type="text" name="name">`	Text input
`<input>`	`type="password"`	`<input type="password">`	Hidden input (e.g., passwords)
`<textarea>`	`rows`/`cols`	`<textarea rows="4" cols="50"></textarea>`	Multi-line text
`<select>`	`multiple`	`<select multiple><option>Option 1</option></select>`	Dropdown list (multiple selection)
`<button>`	`type="submit"`	`<button type="submit">Submit</button>`	Submit form

Example: Login Form

<form action="login.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>
  <button type="submit">Login</button>
</form>

Caption: Khalti’s checkout form uses <input>, <select>, and <button> tags.

8. CSS Basics for Styling

CSS (Cascading Style Sheets) enhances HTML by adding styles. Example:

<style>
  body { font-family: Arial; background-color: #f0f0f0; }
  h1 { color: #333; }
</style>

Key Selectors:

Element: p { color: blue; }
Class: .highlight { background: yellow; }
ID: #header { font-size: 2em; }

Example: Styling a Table

<style>
  table { border-collapse: collapse; width: 50%; }
  th, td { border: 1px solid #ddd; padding: 8px; }
</style>

Output:

Name	Maths	Science
Anita	90	85
Binod	78	92

In the Real World

eSewa App
- Idea Used: Semantic HTML (<header>, <nav>) for transaction menus.
- How: The app’s dashboard uses <article> tags to separate each transaction history entry, improving accessibility for visually impaired users.
Daraz Order Tracking
- Idea Used: HTML tables (<table>) to display order statuses.
- How: The "Track Order" page shows a table with columns for Order ID, Status, and Delivery Date, sorted by Status.
Pathao Ride Request
- Idea Used: Forms (<form>) with <input type="date"> and <select> for pickup/drop locations.
- How: The app’s "Book Ride" form validates user input (e.g., ensures pickup time is after current time) before submitting to the server.

Worked Example: Daraz Product Listing

<!DOCTYPE html>
<html>
<head>
  <title>Daraz Electronics</title>
  <style>
    .product { border: 1px solid #ddd; padding: 10px; margin: 5px; }
  </style>
</head>
<body>
  <h1>Laptops</h1>
  <div class="product">
    <img src="laptop1.jpg" alt="Dell XPS">
    <h2>Dell XPS 15</h2>
    <p>₹32,999</p>
  </div>
</body>
</html>

Output: ![Dell XPS 15 product card with image, title, and price.] Figure 3: Daraz-style product listing using HTML + CSS.

Exam Tip

Focus on:
- Structure: Always include <!DOCTYPE>, <html>, <head>, and <body> in answers.
- Semantics: Prefer <header>, <nav>, <article> over <div> for full marks.
- Attributes: Remember src, alt, controls, type, and name for multimedia/forms.
- Tables: Use <thead>, <tbody>, and <th> for clarity.
- CSS: Link styles to HTML (e.g., <style> tags) or external files (not required for TU/PU exams but good practice).
Common Pitfalls:
- Forgetting </tag> closures (e.g., <p>Hello</p> not <p>Hello).
- Using deprecated tags like <font> or <center>.
- Not including alt text for images (critical for accessibility).
Practice Questions:
- Write a semantic HTML5 page for a bank’s loan application form (include <form>, <input>, and <button>).
- Create a table showing NEPSE stock prices for 5 companies with headers and borders.
- Embed a YouTube video in HTML (use <iframe>) and style it with CSS.

Mermaid Flowchart: HTML Form Validation Process

flowchart TD
    A["User submits form"] --> B{"Valid input?"}
    B -->|"Yes"| C["Send data to server"]
    B -->|"No"| D["Show error message"]
    C --> E["Process data"]
    D --> F["Prompt user to correct input"]

Based on the TU BITM syllabus for Web Programming II (IT219), unit 1.

Discussion

Loading…