Week 2: Feb 2 - Feb 8, 2026

Unit I: Web Page Designing - HTML Elements (Advanced) & CSS Introduction

Week Overview

This week covers the remaining HTML elements (lists, images, hyperlinks, tables, iframes, forms) and introduces CSS fundamentals including the CSS Box Model and Bootstrap.

Course Outcome: CO-1 (K3 - Application)
Duration: 1 week (4 lectures + 1 lab)
Lab: Lists, Frames, and Media Embedding Home Assignment 1 Due: Feb 11

Lecture 5: HTML Lists, Images & Hyperlinks

NoteLecture Materials

Take Quiz View Lecture

Learning Objectives

  • Create ordered, unordered, and description lists
  • Insert images with proper alt text and accessibility
  • Create internal and external hyperlinks using the anchor tag

HTML Lists

Unordered Lists (<ul>)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered Lists (<ol>)

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Description Lists (<dl>)

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

HTML Images

Image Tag Syntax

<img src="image.jpg" alt="Description" width="300" height="200">

Image Formats

  • JPG: Photographs and complex images
  • PNG: Graphics with transparency
  • GIF: Animations and simple graphics
  • WebP: Modern format with better compression
  • SVG: Scalable vector graphics

Best Practices

  • Always use descriptive alt text
  • Optimize image sizes for web
  • Use appropriate formats
  • Provide multiple resolutions (srcset)

Lecture 6: HTML Tables, Iframes & Forms

NoteLecture Materials

Take Quiz View Lecture

Learning Objectives

  • Build structured HTML tables with thead, tbody, and tfoot
  • Embed external pages using the iframe element
  • Create accessible HTML forms with various input types

HTML Tables

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Table Elements

  • <table>: Container for table
  • <thead>: Table header rows
  • <tbody>: Table body rows
  • <tfoot>: Table footer rows
  • <tr>: Table row
  • <th>: Table header cell
  • <td>: Table data cell

Accessibility & Best Practices

  • Use semantic table structure
  • Provide table captions
  • Use <thead>, <tbody>, <tfoot>
  • Add headers with scope attribute

Lecture 7: CSS Introduction, Syntax & Selectors

NoteLecture Materials

Take Quiz View Lecture

Learning Objectives

  • Understand what CSS is and how it works with HTML
  • Write correct CSS rule syntax (selector, property, value)
  • Apply element, class, ID, and pseudo-class selectors

What is CSS?

  • Controls visual presentation and layout of HTML elements
  • Separates content (HTML) from styling (CSS)
  • Three ways to apply: inline, internal, external stylesheet

CSS Rule Syntax

selector {
  property: value;
}
/* Examples */
p { color: blue; }
.highlight { background: yellow; }
#logo { width: 120px; }

Key Selectors

h1       { color: navy; }          /* element */
.btn     { padding: 8px 16px; }    /* class */
#logo    { width: 120px; }         /* ID */
a:hover  { color: red; }           /* pseudo-class */
div > p  { margin: 0; }            /* child combinator */

Common CSS Properties

  • Text: color, font-size, font-family, text-align
  • Box: margin, padding, border, width, height
  • Display: display: block | inline | flex | grid

Lecture 8: CSS Box Model, Float/Clear, Bootstrap & Revision

NoteLecture Materials

Take Quiz View Lecture

Learning Objectives

  • Understand the CSS Box Model (content, padding, border, margin)
  • Apply float and clear for multi-column layouts
  • Use Bootstrap’s responsive grid and utility classes

CSS Box Model

Every element is a rectangular box with four layers: - Content: text or image area - Padding: space between content and border (inside) - Border: visible edge around the element - Margin: space outside the border (between elements)

div {
  margin: 20px;           /* space outside */
  border: 2px solid #333;
  padding: 15px;          /* space inside */
  width: 300px;
  box-sizing: border-box; /* width includes border + padding */
}

Float & Clear

img  { float: left; margin-right: 10px; }  /* text wraps around */
.col { float: left; width: 50%; }
.clearfix::after { content: ""; display: block; clear: both; }

Bootstrap Grid (Responsive)

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

<div class="container">
  <div class="row">
    <div class="col-md-4">Left (1/3)</div>
    <div class="col-md-8">Right (2/3)</div>
  </div>
</div>

Useful Bootstrap Classes

  • Layout: .container, .row, .col-*
  • Typography: .text-center, .fw-bold, .text-muted
  • Buttons: .btn .btn-primary, .btn-outline-secondary
  • Cards: .card, .card-body, .card-title

Lab 2: Lists, Frames, and Media Embedding

Objectives

  • Create various types of HTML lists
  • Embed media content using iframes
  • Practice table building and form creation

Activities

  1. Create a navigation menu using ordered and unordered lists
  2. Embed a YouTube video or Google Map using <iframe>
  3. Build a structured data table with <thead> and <tbody>
  4. Add a contact form with labels and HTML5 validation attributes
  5. Apply basic CSS to style the page (external stylesheet)

Deliverables

  • index.html with lists, iframe, table, and form
  • styles.css with external stylesheet
  • GitHub commit with changes

Key Takeaways

✅ Lists, images, hyperlinks, tables, iframes, and forms are core HTML elements
✅ Semantic tables use <thead>, <tbody>, <tfoot> for accessibility
✅ CSS separates styling from content — always prefer external stylesheets
✅ The CSS Box Model (margin, border, padding, content) governs element spacing
✅ Bootstrap’s grid system enables responsive multi-column layouts

Next Steps

Next week we begin JavaScript programming: - Lecture 9: JavaScript Introduction & Variables - Lecture 10: Functions in JavaScript & Returning Data - Lecture 11: UI Events & Event Handling - Lecture 12: Conditions & Looping in JavaScript