Course Content
KM-01: Hypertext Markup Language (HTML) Basics
This module introduces learners to the foundational concepts required to begin working with HTML programming. It covers basic computer concepts, the introduction to HTML programming, suitable Integrated Development Environments (IDEs), Git and GitHub, problem-solving in programming, the life cycle for developing a solution, and an overview of the look and feel of a website. The module builds the learner’s understanding of the fundamentals of HTML as a programming language and prepares them for more detailed HTML document structure, styling, and practical web development work in later modules.
0/15
Lesson 1: Computers
Lesson 1 Quiz.
Lesson 2: Introduction to HTML Programming
Lesson 2 Quiz.
Lesson 3: Introduction to IDE (Integrated Development Environment)
Lesson 3 Quiz.
Lesson 4: Git and GitHub
Ledsson Quiz
Lesson 5: Problem Solving in Programming
Lesson 5 Quiz
Lesson 6: Life Cycle for Developing a Solution
Lesson 6 Quiz
Lesson 7: The Look and Feel of a Website
Lesson 7 Quiz.
Summative Assessment: KM-01 – HTML Basics
KM-02: HTML Programming Principles
This module builds on the foundational knowledge from KM-01 and focuses on the core principles of HTML programming. It introduces learners to the structure of an HTML document, including tags, elements, and attributes, and how these are used to organise and present content on web pages. The module also covers HTML data types, text formatting, tables, file and folder structures, and semantic organisation of content. In addition, learners are introduced to how web pages communicate with remote servers. By the end of this module, learners will have a solid understanding of how to create well-structured, readable, and functional HTML documents that form the backbone of web development.
0/21
Lesson 1: Structure of an HTML Document
Lesson1 Quiz.
Lesson 2: HTML Data Types
Lesson 2 Quiz.
Lesson 3: HTML Attributes
Lesson 3 Quiz
Lesson 4: Structure of an HTML Element
Lesson 5 Quiz
Lesson 5: HTML Tags
Lesson 5 Quiz.
Lesson 6: Tables in HTML
Lesson 6 Quiz.
Lesson 7: Folders, Files and File Paths
Lesson 7 Quiz
Lesson 8: HTML Text Basics
Lesson 8 Quiz
Lesson 9: Semantics and Organisation of Content
Lesson 9 Quiz.
Lesson 10: Communicating with a Remote Server
Lesson 10 Quiz.
Summative Assignment: KM-02 – HTML Programming Principles
KM-03: HTML and Cascading Style Sheets (CSS) Styling Principles
This module introduces learners to the principles of styling web pages using Cascading Style Sheets (CSS). While HTML provides the structure of a webpage, CSS is used to control the appearance, layout, and visual presentation. Learners will develop the ability to design visually appealing and user-friendly web pages by applying styling techniques such as colours, fonts, spacing, layouts, and responsive design. The module also introduces HTML forms, which are used to collect user input and are an important part of interactive web applications. By the end of this module, learners will be able to apply CSS styling principles to improve the readability, usability, and overall user experience of web pages.
0/7
Lesson 1: Styling HTML5 Pages
Lesson 1 Quiz
Lesson 2: CSS Basics
Lesson 2 Quiz.
Lesson 3: HTML Forms
Lesson 3 Quiz.
Summative Assessment: KM-03 – HTML and CSS Styling Principles
KM-04: HTML Intermediate Programming Functionalities
This module builds on foundational HTML knowledge and introduces learners to more advanced and interactive web development features. Learners will explore how to create dynamic and interactive web pages using HTML5 functionalities and APIs, as well as how to work with multimedia, offline capabilities, and modern web technologies. The module focuses on improving user experience and preparing learners for real-world web development environments.
0/15
Lesson 1: Creating Interactive Webpages using HTML5 APIs
Lesson 1 Quiz.
Lesson 2: Adding Multimedia to Webpages
Lesson 2 QUiz.
Lesson 3: Offline Web Applications
Lesson 3 Quiz.
Lesson 4: Adaptive User Interfaces
Lesson 4 Quiz.
Lesson 5: WebSockets and Web Workers
Lesson 5 Quiz.
Lesson 6: Packaging and Deployment
Lesson 6 Quiz.
Lesson 7: Publishing Websites Live
Lesson 7 Quiz.
Summative Assessment: KM-04 – HTML Intermediate Programming Functionalities
PM-00: Practical Modules
Introduction to Practical Modules Practical Modules are where you will learn: -Apply what they learned in Knowledge Modules -Build real, working solutions -Demonstrate hands-on competence
0/12
PM-01: Getting Started with Hypertext Markup Language (HTML)
PM-01: Mini Practical Assessment
PM-02: Program with HTML
PM-02: Mini Practical Assessment
PM-03: Style Webpages with HTML and Cascading Style Sheets (CSS)
PM-03: Mini Practical Assessment
PM-04: Use Intermediate HTML Programming Functionalities
PM-04: Mini Practical Assessment
PM-05: Apply Advanced Graphics, Animation and Styling
PM-05: Mini Practical Assessment
PM-06: Projects with HTML
Final Project: Website Development
WM-01: Workplace Module
Introduction to Workplace Modules Workplace Modules are designed to ensure that learners: -Apply their skills in a real or simulated work environment -Demonstrate industry readiness -Perform tasks aligned with real job roles
0/1
WM-01: Apply Web Development Skills in a Workplace Environment
HTML Programmer

Lesson Outcomes

After completing this lesson, learners will be able to:

  • Define Hypertext Markup Language (HTML).
  • Explain the purpose of HTML in web development.
  • Identify basic HTML elements, tags, and attributes.
  • Describe how HTML is used to structure web pages.
  • Understand how HTML works with web browsers.

Overview

HTML (Hypertext Markup Language) is the standard language used to create and structure web pages.

It is not a programming language in the traditional sense, but a markup language that uses tags to define elements on a web page.

HTML allows developers to:

  • Structure content (text, images, links)
  • Create web pages
  • Link pages together
  • Embed multimedia content

Understanding HTML is the first step in becoming a web developer.

1. What is HTML?

HTML stands for Hypertext Markup Language.

It is used to create the structure of web pages by marking up content with tags.

Key concepts of HTML include:

  • Hypertext
    • Allows linking between web pages
    • Enables navigation using hyperlinks
  • Markup Language
    • Uses tags to define elements
    • Tells the browser how content should be displayed
  • Web Pages
    • HTML is the foundation of all web pages
    • Every website uses HTML in some form

HTML provides the structure, while other technologies like CSS and JavaScript add styling and interactivity.

2. Purpose of HTML

HTML is used to organise and present content on the web.

The main purposes of HTML include:

2.1 Structuring Content

HTML helps organise content into sections such as:

  • Headings
  • Paragraphs
  • Lists
  • Tables

This makes web pages easy to read and understand.

2.2 Creating Links

HTML allows developers to create hyperlinks that connect:

  1. Web pages
  2. Files
  3. Sections within a page

These links make navigation possible across websites.

2.3 Embedding Media

HTML supports adding media such as:

  • Images
  • Audio
  • Video

This improves user experience and engagement.

2.4 Supporting Accessibility

HTML helps make web content accessible by:

  • Structuring content properly
  • Supporting screen readers
  • Using meaningful tags

3. HTML Tags, Elements, and Attributes

HTML uses tags to define elements on a page.

3.1 Tags

Tags are keywords enclosed in angle brackets.

Examples include:

  • <p> for paragraphs
  • <h1> for headings
  • <a> for links

Tags usually come in pairs:

  • Opening tag → <p>
  • Closing tag → </p>

3.2 Elements

An HTML element consists of:

  • Opening tag
  • Content
  • Closing tag

Example:

 
<p>This is a paragraph</p>
 

This is a complete HTML element.

3.3 Attributes

Attributes provide additional information about elements.

They are included in the opening tag.

Examples:

  • href in links
  • src in images
  • alt for image descriptions

Example:

 
<a href="https://example.com">Visit Site</a>
 

4. Structure of an HTML Page

An HTML document has a standard structure.

Basic structure includes:

  1. <!DOCTYPE html> → Defines the document type
  2. <html> → Root element
  3. <head> → Contains metadata
  4. <title> → Page title
  5. <body> → Visible content

Example structure:

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

Key Points

  • The <head> section is not visible to users.
  • The <body> contains all visible content.
  • Browsers read HTML from top to bottom.

5. How HTML Works

HTML works together with web browsers.

Process of how HTML works:

  • A developer writes HTML code.
  • The file is saved with a .html extension.
  • A web browser reads the HTML file.
  • The browser interprets the tags.
  • The content is displayed as a web page.

Role of the Browser

Browsers such as:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox

are responsible for:

  • Rendering HTML content
  • Interpreting tags and elements
  • Displaying the page visually

6. HTML in Web Development

HTML is one of the core technologies used in web development.

It works together with:

6.1 CSS (Cascading Style Sheets)

  • Controls appearance and layout
  • Adds colours, fonts, spacing

6.2 JavaScript

  • Adds interactivity
  • Handles user actions
  • Creates dynamic content

Together, these technologies form the foundation of modern web development.

Key Notes

  • HTML stands for Hypertext Markup Language.
  • It is used to structure content on web pages.
  • HTML uses tags, elements, and attributes.
  • A basic HTML page includes <html>, <head>, and <body>.
  • Browsers interpret HTML and display it to users.
  • HTML works with CSS and JavaScript to create complete web applications.
Previous
Next
Scroll to Top