Topic 7: Understanding the functionality of HTML
Specification links:
7: 7.1.1 to 7.3.6
Resources:
Worksheet 7
Computers
Text editing software such as Notepad or Notepad ++
Internet access is useful but not essential
Learning objectives:
Understand how HTML is used to structure web pages
Understand how structural mark-up is used
Understand how to create and format page components
Success criteria:
Students should be able to:
Create simple web pages using HTML
Include images in web pages
Create tables in web pages using HTML
Create web forms using HTML
Possible misconceptions and barriers:
May think of HTML as a programming language rather than a mark-up language
Some learners may have been taught to write HTML but not using a semantic approach
Starter
Ask students what they know about HTML and how web pages are created. Do they understand
what tags are and how they are used?
Discussion
Introduce students to the way HTML is used (tags, elements, attributes) and the basic HTML tags to
structure simple pages.
Explain how HTML is written using text editors such as Notepad or TextEdit and how it is displayed
using a browser.
Activity
Students use text editor to practice creating simple HTML pages (worksheet 7, task 1)
Discussion
Introduce the head section of HTML and explain its purpose. Topics to cover:
The lang attribute
The <title> element
The <style> element
The <link> element
The <meta> element
The <script> element
© Pearson Education Ltd 2018. Copying permitted for purchasing institution only. This material is not copyright free.
Activity
Students create simple pages to demonstrate the use of the head element, including external style
sheets (Worksheet 7, task 2).
Discussion
Explain with examples good practice for writing organised HTML syntax.
Explain with examples how to create different types of lists in HTML.
Explain with examples how to create internal and external links in HTML and how to control how the
links work.
Activity
Students create web pages to investigate how lists can be created and how links are used (worksheet
7, task 3)
Discussion
Explain and demonstrate with examples the difference between block-level and in-line elements and
how they are created and used with HTML. Explain how the <div> and <span> tags can be used to
create sections within an HTML page. Explain with examples how styles can be used to format text on
web pages.
Activity
Students create web pages to investigate the use of block-level and in-line elements (Worksheet 7,
task 4).
Discussion
Explain and demonstrate with examples how images can be included and formatted in web pages
using HTML. Explain with example how tables can be created and formatted in web pages using
HTML.
Task
Students create a simple guide book listing all the HTML tags they have used so far and providing a
brief description for each.
Activity
Students create web pages to demonstrate how images and tables can be included and formatted in
web pages using HTML (Worksheet 7, task 5).
Task
Students work in pairs reviewing the pages that they have created and suggesting improvements.
Discussion
Explain and demonstrate with examples how HTML elements can be used to structure and format a
page. Discuss the advantages of formatting a page using semantic elements.
Activity
Students create web pages using HTML elements to structure and format the sections of the page
(Worksheet 7, task 6).
© Pearson Education Ltd 2018. Copying permitted for purchasing institution only. This material is not copyright free.
Discussion
Explain and demonstrate with examples how HTML forms can be created. Discuss how forms can be
used to input data and how this can be processed by a web server. Discuss form validation, in the
browser using JavaScript and on the server.
Task
Students review web forms on a variety of websites to see how they are formatted and validated.
Activity
Students create web pages which include forms (Worksheet 7, task 7).
Discussion
Explain and demonstrate with examples how video and audio files can be embedded in web pages
and how controls can be displayed and customised. Describe the different audio and video formats
that can be used. Explain and demonstrate the use of the <iframe> tag to embed external content.
Activity
Students create web pages which include embedded audio/video files and in-line frames containing
external content (Worksheet 7, task 8).
Plenary
Discuss any issues or questions that have arisen as part of the practical activities. Quiz on the
purpose, use and syntax of different HTML tags.
Differentiation
Lower-ability students:
Create simple web page layout using basic features. Provide partially complete pages (e.g.
styles already defined) and have the student complete the page.
Higher-ability students:
Challenge students to create more complex page layouts
Ask students to research the full range of tag options and additional HTML tags.
Homework
Ask students to practice the skills they have learnt by creating and modifying web pages.
© Pearson Education Ltd 2018. Copying permitted for purchasing institution only. This material is not copyright free.
