HTML Programmer

Module Overview

This practical module introduces learners to the basic setup and use of HTML. Learners will begin creating simple web pages and applying foundational concepts learned in KM-01 and KM-02.

The focus is on hands-on practice, allowing learners to become comfortable with writing and running HTML code.

Module Outcomes

After completing this module, learners will be able to:

Set up a basic HTML development environment
Create a simple HTML document
Use basic HTML structure correctly
Display text using headings and paragraphs
Save and open HTML files in a browser

Practical Activities

Activity 1: Setting Up the Environment

Task:

Open a text editor (e.g., Notepad / VS Code)
Create a new file
Save it as: index.html

Expected Outcome:

Learner successfully creates and saves an HTML file

Activity 2: Create Your First HTML Page

Task:

Create a basic HTML document that includes:

<!DOCTYPE html>
<html>
<head>
<title>
<body>

Example Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Expected Outcome:

Learner creates a correctly structured HTML page

Activity 3: Display Text Content

Task:

Add the following to your page:

One main heading
One subheading
Two paragraphs

Expected Outcome:

Learner demonstrates correct use of:
- <h1>, <h2>
- <p>

Activity 4: Save and View in Browser

Task:

Save your file
Open it in a web browser

Expected Outcome:

Learner successfully views their webpage

Activity 5: Make Simple Changes

Task:

Change the heading text
Add another paragraph

Expected Outcome:

Learner understands how edits affect output