2025
GRADE 8 – HTML/ WEB
DEVELOPMENT: Advanced
Thapelo Twala
0
,Contents
1. Revision for Basic HTML ................................................................................. 1
1.1. What is HTML? ........................................................................................ 1
1.2. Basic Structure of an HTML Document ..................................................... 2
1.3. Common HTML Elements........................................................................ 3
2. Advanced tables ............................................................................................ 6
2.1. Merging Cells.......................................................................................... 6
2.2. Table Captions and Styling ...................................................................... 7
2.3. Advanced Table Styling with CSS .............................................................. 8
Activity: Applying Advanced Table Features ......................................................... 9
3. Forms in html .............................................................................................. 10
3.1. What are forms ..................................................................................... 10
3.2. Basic Form Structure ............................................................................ 10
Activity ........................................................................................................... 13
3.3. Saving Form Data in Local Storage. ........................................................ 13
4. Embedding Multimedia and Navigation ......................................................... 14
4.1. Adding a Video...................................................................................... 14
4.2. Adding Audio ........................................................................................ 14
4.3. Creating Links (Navigation) .................................................................... 15
5. JavaScript ................................................................................................... 16
5.1. Main Purpose of JavaScript: ................................................................... 16
5.2. How Does JavaScript Work? .................................................................. 16
5.3. How to Add JavaScript to a Webpage ...................................................... 18
5.4. Key Concepts in JavaScript .................................................................... 18
5.5. Where is JavaScript Used?..................................................................... 19
5.6. Retrieving Data using JavaScript ............................................................ 20
Activity 1......................................................................................................... 21
6. Final Project: Build a Simple Website ......................................................... 22
Resource list ................................................................................................... 23
i
, 1. REVISION FOR BASIC HTML
Before moving into advanced topics, let’s quickly revise the fundamental
concepts of HTML.
1.1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and
design web pages. It provides the structure for a webpage by using a system of
elements (tags) that define different types of content. HTML is not a programming
language but a markup language, meaning it structures content rather than
performing logic-based operations.
A markup language is a type of language used to structure and format text using
tags or annotations. Unlike programming languages that perform calculations and
logic-based operations, markup languages define how content should be
displayed or structured.
1.1.1. Purpose of HTML
• Defines the structure and layout of web pages.
• Allows embedding of multimedia elements like images, videos, and
audio.
• Enables the creation of links to connect different web pages.
• Forms the foundation for styling (CSS) and interactivity (JavaScript).
1.1.2. Why learn HTML?
Introduction to Web Development – HTML is the building block of
web pages, helping students understand how content is structured
online.
Logical and Structured Thinking – Writing HTML teaches students
how to organize information in a systematic way.
Digital Literacy – In a technology-driven world, knowing how websites
are built enhances digital skills and awareness.
Prepares for Advanced Topics – Learning HTML early sets the
foundation for CSS, JavaScript, and broader programming concepts in
later grades.
Creativity and Problem-Solving – Students can create their own
webpages, experimenting with design and functionality.
1
GRADE 8 – HTML/ WEB
DEVELOPMENT: Advanced
Thapelo Twala
0
,Contents
1. Revision for Basic HTML ................................................................................. 1
1.1. What is HTML? ........................................................................................ 1
1.2. Basic Structure of an HTML Document ..................................................... 2
1.3. Common HTML Elements........................................................................ 3
2. Advanced tables ............................................................................................ 6
2.1. Merging Cells.......................................................................................... 6
2.2. Table Captions and Styling ...................................................................... 7
2.3. Advanced Table Styling with CSS .............................................................. 8
Activity: Applying Advanced Table Features ......................................................... 9
3. Forms in html .............................................................................................. 10
3.1. What are forms ..................................................................................... 10
3.2. Basic Form Structure ............................................................................ 10
Activity ........................................................................................................... 13
3.3. Saving Form Data in Local Storage. ........................................................ 13
4. Embedding Multimedia and Navigation ......................................................... 14
4.1. Adding a Video...................................................................................... 14
4.2. Adding Audio ........................................................................................ 14
4.3. Creating Links (Navigation) .................................................................... 15
5. JavaScript ................................................................................................... 16
5.1. Main Purpose of JavaScript: ................................................................... 16
5.2. How Does JavaScript Work? .................................................................. 16
5.3. How to Add JavaScript to a Webpage ...................................................... 18
5.4. Key Concepts in JavaScript .................................................................... 18
5.5. Where is JavaScript Used?..................................................................... 19
5.6. Retrieving Data using JavaScript ............................................................ 20
Activity 1......................................................................................................... 21
6. Final Project: Build a Simple Website ......................................................... 22
Resource list ................................................................................................... 23
i
, 1. REVISION FOR BASIC HTML
Before moving into advanced topics, let’s quickly revise the fundamental
concepts of HTML.
1.1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and
design web pages. It provides the structure for a webpage by using a system of
elements (tags) that define different types of content. HTML is not a programming
language but a markup language, meaning it structures content rather than
performing logic-based operations.
A markup language is a type of language used to structure and format text using
tags or annotations. Unlike programming languages that perform calculations and
logic-based operations, markup languages define how content should be
displayed or structured.
1.1.1. Purpose of HTML
• Defines the structure and layout of web pages.
• Allows embedding of multimedia elements like images, videos, and
audio.
• Enables the creation of links to connect different web pages.
• Forms the foundation for styling (CSS) and interactivity (JavaScript).
1.1.2. Why learn HTML?
Introduction to Web Development – HTML is the building block of
web pages, helping students understand how content is structured
online.
Logical and Structured Thinking – Writing HTML teaches students
how to organize information in a systematic way.
Digital Literacy – In a technology-driven world, knowing how websites
are built enhances digital skills and awareness.
Prepares for Advanced Topics – Learning HTML early sets the
foundation for CSS, JavaScript, and broader programming concepts in
later grades.
Creativity and Problem-Solving – Students can create their own
webpages, experimenting with design and functionality.
1
