Revision: Unit I - Web Page Designing

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-03-03

Revision Session

Unit I: Web Page Designing

Weeks 6-7 | Mid-Semester Exam Preparation
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Unit I: Complete Coverage

Topics Include:

  1. Introduction to Web Designing & Internet History
  2. HTML Basics, Structure & Syntax
  3. HTML Grouping: Div & Span
  4. HTML Lists, Images, Hyperlinks & Tables
  5. HTML Forms & Form Elements
  6. CSS Introduction & Selectors
  7. CSS Box Model & Positioning
  8. Bootstrap Framework Basics

Web & Internet Fundamentals

  • WWW invented by Tim Berners-Lee (1989)
  • HTTP protocol for communication
  • URL structure: protocol://domain:port/path
  • Web 1.0 (static) → Web 2.0 (interactive)
  • Client-Server architecture
  • DNS translates domain names to IP addresses

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  <main>
    <p>Content goes here.</p>
  </main>
</body>
</html>

Essential HTML Tags

Text Formatting:

<h1> to <h6>  <!-- Headings -->
<p>           <!-- Paragraph -->
<strong>      <!-- Bold/Important -->
<em>          <!-- Italic/Emphasis -->
<br>          <!-- Line break -->
<hr>          <!-- Horizontal rule -->

Structure:

<div>         <!-- Block container -->
<span>        <!-- Inline container -->
<header>, <footer>, <nav>, <main>, <section>, <article>

HTML Lists

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol type="1">
  <li>First</li>
  <li>Second</li>
</ol>

type can be: 1, A, a, I, i

HTML Images & Multimedia

<!-- Image -->
<img src="photo.jpg" alt="Description" width="300">

<!-- Audio -->
<audio src="song.mp3" controls></audio>

<!-- Video -->
<video src="movie.mp4" controls width="640"></video>
  • src: source path
  • alt: alternative text (accessibility)
  • controls: show play/pause controls

HTML Hyperlinks

<a href="https://example.com">External Link</a>
<a href="page.html">Internal Link</a>
<a href="#section">Anchor Link</a>
<a href="mailto:user@example.com">Email</a>

Attributes: - target="_blank": open in new tab - download: download file instead of navigate

HTML Tables

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amit</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

HTML Forms Basics

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Submit</button>
</form>

HTML Form Input Types

<input type="text">       <!-- Text input -->
<input type="email">      <!-- Email validation -->
<input type="password">   <!-- Hidden text -->
<input type="number">     <!-- Numeric only -->
<input type="date">       <!-- Date picker -->
<input type="radio">      <!-- Single selection -->
<input type="checkbox">   <!-- Multiple selection -->
<input type="file">       <!-- File upload -->
<input type="submit">     <!-- Submit button -->

Other Form Elements

<!-- Dropdown -->
<select name="city">
  <option value="delhi">Delhi</option>
  <option value="mumbai">Mumbai</option>
</select>

<!-- Textarea -->
<textarea name="message" rows="4" cols="50">
</textarea>

<!-- Button -->
<button type="button">Click Me</button>
<button type="submit">Submit Form</button>

Important Form Attributes

Form Attributes: - action: URL to submit form data - method: GET or POST - enctype: encoding type (use multipart/form-data for file uploads)

Input Attributes: - name: identifier for form data - value: default or current value - placeholder: hint text - required: validation (cannot be empty) - pattern: regex validation - min, max, step: numeric constraints

CSS: Cascading Style Sheets

Three Ways to Apply CSS:

  1. Inline: <p style="color: red;">Text</p>
  2. Internal: <style> tag in <head>
  3. External: <link rel="stylesheet" href="styles.css">

Syntax:

selector {
  property: value;
}

CSS Selectors

p { color: blue; }              /* Element */

.highlight { background: yellow; } /* Class */

#header { font-size: 24px; }    /* ID */

div p { margin: 10px; }         /* Descendant */

div > p { padding: 5px; }       /* Child */

a:hover { color: red; }         /* Pseudo-class */

CSS Selector Specificity

Priority Order (highest to lowest):

  1. !important (avoid using)
  2. Inline styles
  3. ID selectors (#id)
  4. Class selectors (.class)
  5. Element selectors (p, div)

More specific selectors override less specific ones

CSS Text & Font Properties

.text-style {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
}

CSS Color Systems

color: red;                    /* Named color */
color: #FF0000;                /* Hexadecimal */
color: rgb(255, 0, 0);         /* RGB */
color: rgba(255, 0, 0, 0.5);   /* RGBA (with opacity) */
  • Hex: #RRGGBB (00-FF)
  • RGB: 0-255 for each channel
  • Alpha: 0 (transparent) to 1 (opaque)

CSS Box Model

.box {
  width: 300px;
  height: 200px;
  padding: 20px;      /* Inside spacing */
  border: 2px solid black;
  margin: 10px;       /* Outside spacing */
}

Total Width = margin + border + padding + content width
Total Height = margin + border + padding + content height

Box Sizing Property

/* Default */
.box1 {
  box-sizing: content-box;  /* width applies to content only */
}

/* Better for layouts */
.box2 {
  box-sizing: border-box;   /* width includes padding and border */
}

CSS Display Property

display: block;        /* Full width, new line */
display: inline;       /* Width of content, same line */
display: inline-block; /* Width control, same line */
display: none;         /* Hidden, no space */
display: flex;         /* Flexbox layout */

CSS Positioning

position: static;      /* Default (normal flow) */

position: relative;    /* Offset from normal position */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

position: absolute;    /* Relative to positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed & Sticky Positioning

/* Fixed: relative to viewport */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Sticky: toggles between relative and fixed */
.sidebar {
  position: sticky;
  top: 20px;
}

CSS Flexbox Basics

.container {
  display: flex;
  justify-content: center;    /* Horizontal alignment */
  align-items: center;        /* Vertical alignment */
  gap: 10px;                  /* Space between items */
}

.item {
  flex: 1;                    /* Grow to fill space */
  flex-shrink: 0;             /* Don't shrink */
}

Flexbox Properties

Container Properties: - flex-direction: row | column - justify-content: flex-start | center | space-between | space-around - align-items: flex-start | center | flex-end | stretch - flex-wrap: nowrap | wrap

Item Properties: - flex-grow: growth factor - flex-shrink: shrink factor - order: display order

Bootstrap Framework

What is Bootstrap? - Popular CSS framework - Pre-built responsive components - Grid system for layouts - Extensive utility classes

Including Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Bootstrap Grid System

<div class="container">
  <div class="row">
    <div class="col-md-6">Half width on medium+</div>
    <div class="col-md-6">Half width on medium+</div>
  </div>
</div>

12-column grid system - col-: extra small (mobile) - col-sm-: small (≥576px) - col-md-: medium (≥768px) - col-lg-: large (≥992px)

Bootstrap Common Components

<!-- Buttons -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>

<!-- Alerts -->
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

<!-- Cards -->
<div class="card">
  <div class="card-body">Card content</div>
  <div class="card-footer">Footer</div>
</div>

Bootstrap Utility Classes

<div class="text-center">Centered text</div>
<div class="bg-primary text-white">Colored background</div>
<div class="p-3 m-2">Padding 3, Margin 2</div>
<div class="d-flex justify-content-between">Flexbox</div>
<div class="w-50">50% width</div>

Practice Question 1

Q: Create an HTML page with a registration form containing: - Full Name (text, required) - Email (email, required, pattern validation) - Password (password, min 8 characters) - Gender (radio buttons: Male/Female) - Country (dropdown with 3 options) - Terms checkbox (required) - Submit and Reset buttons

Apply CSS to: - Center the form - Add padding and borders - Style buttons with hover effects

Practice Question 2

Q: Create a webpage layout using CSS:

+------------------+
|     Header       |
+------------------+
| Side | Main      |
| bar  | Content   |
+------------------+
|     Footer       |
+------------------+

Requirements: - Header: full width, fixed height 80px - Sidebar: 20% width, float left - Main: 80% width, float right - Footer: full width, clear floats

Practice Question 3

Q: Using Bootstrap, create a responsive card grid: - 4 cards in a row on large screens - 2 cards in a row on medium screens - 1 card in a row on small screens

Each card should have: - Image at top - Title - Description text - “Read More” button

Common Mistakes to Avoid

  • Forgetting closing tags (</div>, </p>)
  • Missing alt attribute on images
  • Not using semantic HTML tags
  • Incorrect CSS selector syntax
  • Confusing id (unique) vs class (reusable)
  • Wrong box model calculations
  • Not testing responsive layouts
  • Forgetting to link CSS file

Key Exam Topics - Unit I

  1. HTML document structure
  2. Forms with all input types
  3. Tables with proper structure
  4. CSS selectors and specificity
  5. Box model calculations
  6. CSS positioning types
  7. Flexbox layout
  8. Bootstrap grid system
  9. Responsive design concepts
  10. Semantic HTML

Study Checklist

✓ Can write valid HTML structure from scratch
✓ Know all form input types and attributes
✓ Understand CSS selector priority
✓ Can calculate total box dimensions
✓ Know difference between position types
✓ Can create flexbox layouts
✓ Understand Bootstrap grid (col-md-6, etc.)
✓ Can style forms with CSS
✓ Know when to use semantic tags
✓ Practiced coding without references

Review Unit II Tomorrow!

Next: Revision - Unit II (JavaScript)