IN-CLASS PRACTICAL 2.1 Duration: 30–45 Minutes Guided Workshop

HTML Quick Build (Live Demo)

A short in-class activity to build students’ confidence. We will do this together: creating headings, paragraphs, lists, links, images, tables, and basic containers — before continuing with the lab.

Back to Topic Start Practical

Class Flow

We will follow this sequence so that everyone has enough time to keep up.
1) Warm-up 2) Build Together 3) Checkpoint 4) Move to Lab

Outcomes

Target
  • Create basic HTML structure
  • Use headings + paragraphs
  • Use text formatting tags correctly
  • Create lists, links, images, and tables

Setup

Tools
  • VS Code / Notepad++
  • Chrome / Edge / Firefox
  • Internet (optional)

Rule

HTML Only
  • No CSS needed
  • Follow lecturer pacing
  • Stop at checkpoints

IN-CLASS PRACTICAL ACTIVITY

Tasks (Complete Step-by-Step)

Complete one task → save → refresh → verify output.
Pair / Small Group Allowed
Task 1 Warm-up

Create Folder + File

  1. Create folder: RegNo_Practical2_1
  2. Inside the folder, create index.html
  3. Open the folder using VS Code
Suggested:
Example folder name: 10DDT23F1705_Practical2_1
Task 2 Build Together

Paste Starter HTML

Copy this base structure into index.html.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practical 2.1 - HTML Quick Build</title>
</head>
<body>

</body>
</html>
Suggested:
Save the file first before opening it in a browser.
Task 3 Warm-up

Run in Browser (Initial Check)

  1. Right-click index.html → Open with → Chrome / Edge / Firefox
  2. Confirm the browser tab title shows: Practical 2.1 - HTML Quick Build
  3. Keep the browser open (refresh after each task)
Suggested:
Use Ctrl + R to refresh after each change.
Task 4 Build Together

Add Headings and Paragraphs

Inside the <body> tag, add:
  • One main heading using <h1>
  • Two subheadings using <h2> and <h3>
  • Two paragraphs using <p>
Suggested content (you may rephrase):
  • H1: Introduction to Web Development
  • H2: About This Practical
  • P: This practical focuses on learning the basic structure and essential elements of HTML.
  • H3: Student Information
  • P: My name is ________ and I am studying Web Design Technology.
Task 5 Build Together

Apply Text Formatting Elements

In one paragraph, apply all Nine (9) text formatting elements (use different tags).

Pick from:
<b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>
Suggested content (you may rephrase):
  • HTML is the foundation of web development.
  • It is used to create important web content.
  • Some text can appear in italic form, while other text may be emphasised.
  • Key terms can be highlighted, notes may appear in small text, old content can be removed, and new content can be inserted.
  • Chemical formula H2O and mathematical expression x2 are also supported.
Task 6 Build Together

Insert a Quotation Block

Add a quotation using <blockquote> (1–2 lines).

Suggested quote:
Web development is the process of creating and maintaining websites for the internet.
Task 7 Build Together

Create Lists

  • Create one ordered list (<ol>) with at least 3 items
  • Create one unordered list (<ul>) with at least 3 items
  • Use <li> for every item
Suggested content (you may rephrase):
  • Ordered: HTML, CSS, JavaScript
  • Unordered: Front-end Developer, Back-end Developer, Full Stack Developer
Task 8 Build Together

Insert Basic Hyperlinks Using Attributes

Create different types of hyperlinks using the <a> tag and its attributes.

Requirement:
  • Create at least 3 different types of hyperlinks
  • Use meaningful link text (avoid raw URLs)
  • Use href correctly for each link
  • At least one link must open in a new tab
Suggested links:
External website: W3Schools HTML Tutorial
Email link: student@email.com
Internal link: Contact section
File link: notes.pdf
Task 9 Build Together

Insert an Image Using <img> Attributes

In this task, you will insert images using the <img> tag and understand how image paths and attributes work in HTML.

  1. Insert image from the same folder
    Place an image (e.g. profile.jpg) in the same folder as index.html and insert it using:
    <img src="profile.jpg" alt="Profile image">
  2. Insert image from a special images folder
    Create a folder named images and place an image inside it. Use the correct path:
    <img src="images/banner.jpg" alt="Website banner">
  3. Resize image using HTML attributes
    Try setting:
    • width="300"
    • height="150"
    Observe what happens when both width and height are used together.
  4. Make image fit 100% width
    Insert a banner image that fills the page width:
    <img src="images/banner.jpg" alt="Banner image" width="100%">
  5. Insert image using online URL
    Use any online image URL, for example:
    <img src="https://via.placeholder.com/400" alt="Online image">

✅ Important: All images must include the alt attribute for accessibility and marking.

Task 10 Build Together

Create a Simple Table

Use:
<table>, <tr>, <th>, <td>
  • At least 3 columns
  • At least 3 rows (excluding header row)
Suggested topic:
“Weekly Study Plan” with columns: Day | Topic | Notes
Row 1
Day: Monday
Topic: HTML Basics
Notes: Learn structure, tags, and basic elements

Row 2
Day: Wednesday
Topic: Div and Span
Notes: Practice grouping content and highlighting text

Row 3
Day: Friday
Topic: Tables and Forms
Notes: Create tables and simple input forms
Task 11 Build Together

Apply Div and Span

Use:
<div>, <span>
  • Create one main div as the page container
  • Inside the main div, create at least 2 section divs
  • Include at least one nested div (div inside div)
  • Use <span> inside a sentence to highlight 2 words/phrases
  • HTML only (no CSS)
Suggested content:
Topic: Student Profile + Learning Reflection
Main Container
This main section contains all student profile and learning information.

Section 1: Student Profile
Name: Nur Aina
Programme: Diploma in Information Technology
Semester: 3

Section 2: Learning Reflection
I am learning semantic HTML to build structured webpages because proper structure helps developers organise content clearly and makes webpages easier to maintain in the future.
(Highlight: semantic HTML, structured webpages)

Nested Section: Current Learning Topics
HTML Structure
Div and Span
Semantic Elements

Task 12: Check + Screenshot

Verify output and capture evidence before moving to the lab.
Checkpoint
Ensure:
  • Headings, paragraphs, formatting, lists, hyperlink, image, table, and quotation are visible
  • Browser tab title is visible
  • No broken image icon (check src and file name)
Suggested:
Your screenshot should clearly show both the browser tab title and the page content.

Move to Lab

Practical 2.1 is complete. Students should now be more confident to continue the lab submission with less confusion.