Module Overview

This practical module builds on the basics introduced in PM-01. Learners will now begin to program structured web pages using HTML, applying elements, tags, attributes, and content organisation.

The focus is on developing the ability to create well-structured and meaningful web content using HTML.

Module Outcomes

After completing this module, learners will be able to:

• Use a variety of HTML tags correctly
• Apply HTML attributes to elements
• Structure content using headings, paragraphs, and lists
• Create links and insert images
• Organise content using proper HTML structure

Practical Activities

Activity 1: Working with Headings and Paragraphs

Task:

Create a webpage that includes:

• One main heading (<h1>)
• Two subheadings (<h2>)
• Three paragraphs (<p>)

Expected Outcome:

• Learner structures text content correctly using headings and paragraphs

Activity 2: Creating Lists

Task:

Add the following to your webpage:

• One unordered list (<ul>) with 3 items
• One ordered list (<ol>) with 3 items

Example:

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

Expected Outcome:

• Learner correctly uses list elements

Activity 3: Adding Links

Task:

Add a hyperlink to your page:

• Link to any website (e.g., Google)

Example:

<a href="https://www.google.com">Visit Google</a>

Expected Outcome:

• Learner correctly applies the href attribute

Activity 4: Adding Images

Task:

Insert an image into your webpage:

• Use the <img> tag
• Include:
  • src attribute
  • alt attribute

Example:

<img src="image.jpg" alt="Sample Image">

Expected Outcome:

• Learner displays an image correctly

Activity 5: Using Attributes

Task:

Apply at least:

• One id attribute
• One class attribute

Expected Outcome:

• Learner demonstrates understanding of attributes

Activity 6: Organising Content

Task:

Structure your page using:

• <div> or semantic elements
• Clear content sections

Expected Outcome:

• Learner organises content logically