Module Overview

This practical module builds on previous HTML and CSS skills by introducing intermediate functionalities that make web pages more interactive and dynamic.

Learners will work with:

• HTML forms
• Multimedia elements
• Basic interactivity features

The focus is on creating web pages that engage users and collect input, moving beyond static content.

Module Outcomes

After completing this module, learners will be able to:

• Create and use HTML forms
• Collect user input using form elements
• Add multimedia (audio and video) to webpages
• Apply basic interactive features
• Combine structure, styling, and interactivity

Practical Activities

Activity 1: Creating a Basic Form

Task:

Create a simple HTML form that includes:

• Name input (text)
• Email input (email)
• Submit button

Example:

<form>
  <label>Name:</label>
  <input type="text"><br><br>

  <label>Email:</label>
  <input type="email"><br><br>

  <button type="submit">Submit</button>
</form>

Expected Outcome:

• Learner creates a functional basic form

Activity 2: Expanding the Form

Task:

Enhance your form by adding:

• Password field
• Radio buttons
• Checkboxes
• Textarea

Expected Outcome:

• Learner demonstrates ability to collect different types of input

Activity 3: Adding Multimedia (Images, Audio, Video)

Task:

Add to your webpage:

• One image
• One audio or video element

Example:

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

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

Expected Outcome:

• Learner successfully integrates multimedia

Activity 4: Using Form Attributes

Task:

Update your form to include:

• action attribute
• method attribute

Example:

<form action="submit.php" method="post">

Expected Outcome:

• Learner understands form behaviour

Activity 5: Basic Interactivity

Task:

Add at least one interactive feature:

• Styled button
• Form interaction
• Media controls

Expected Outcome:

• Learner demonstrates basic interactivity

Activity 6: Combine Features

Task:

Create a single webpage that includes:

• Structured content
• Styled elements (from PM-03)
• Form
• Multimedia

Expected Outcome:

• Learner integrates multiple concepts