0% found this document useful (0 votes)
17 views3 pages

Intro to HTML: Lesson Plan for Students

This lesson plan focuses on teaching students the basics of HTML, including creating a simple web page and understanding key HTML tags. Students will learn about the structure of web pages, the importance of file extensions, and how to edit and view HTML files using a text editor and web browser. The lesson includes practical activities, worksheets, and a plenary to reinforce learning objectives.

Uploaded by

luky luca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views3 pages

Intro to HTML: Lesson Plan for Students

This lesson plan focuses on teaching students the basics of HTML, including creating a simple web page and understanding key HTML tags. Students will learn about the structure of web pages, the importance of file extensions, and how to edit and view HTML files using a text editor and web browser. The lesson includes practical activities, worksheets, and a plenary to reinforce learning objectives.

Uploaded by

luky luca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Lesson plan

Lesson 1 HTML

Learning Objectives:
 Understand the meaning of the term the World Wide Web
 Be able to make a simple web page including:
o Creating HTML in a text editor
o Viewing the page in a web browser
 Be able to use the following HTML tags:
o Headings, paragraphs, images, line breaks, hyperlinks

Content

Starter
PowerPoint Guide: Lesson 1 HTML

Before creating any web pages, it is worth asking pupils to consider what the World Wide
Web is and where it is located.
Once pupils have considered these questions, go through the Answers slide that follows.
Be aware that in these lessons, pupils will only be developing their web pages as local
files. If pupils ask how they can view them on the Internet, explain that they would need to
use a web server.
If pupils wish to show their work at home, they may find it easiest to email their files or
store them on USB removable storage. They will then be able to open the files at home.

Main Activity
Introduction to HTML
Make it clear to pupils that HTML deals with the content of web pages, not the appearance.
For instance, on the shown image, HTML would deal with the titles, subtitles and
associated images. It would be CSS that deals with the text styling and positioning of all
these elements. Hence, the same HTML could be used for both devices, but different CSS
might be used.

Open and close tags


Explain to pupils that html tags surround content. Start tags have the form of <tag>, whilst
end tags are written as </tag>.
The technical name for what goes inside a tag is an element. For instance, the h1 and p
and em elements are used on this page.
Some tags, such as <br> (for a line break) do not require an end tag as they don’t
surround any content. These are often also written as <br/> which shows that they
encompass both a start and end tag in one tag. To save confusion for pupils, these
resources just use the open tag which is perfectly valid html.

Key Stage 3 HTML and website development © 2023 PG Online Limited 1


Parts of a web page
This slide shows the general structure of web pages.
The head section of html defines the title. Confusingly, this is not a visible title on the page.
It is however, used by the browser as a title for the page. It is often displayed in the window
title or web page tab title.
The head section also contains properties that aren’t the actual content of the page. For
instance, CSS styles, meta data and JavaScript.
Once pupils have answered the question on the slide, go through the answers on the
following slide.

Saving and viewing web pages


Show the process of editing a web page with a text editor such as Notepad and then how
the page is viewed in a web page.
Highlight the importance of the file extension being .html. Without this, it will typically be a
text file that when double clicked opens a text editor rather than a web browser.
It is recommended that a practical demonstration of editing an HTML file, saving and
opening with a web browser are carried out. Explain to students that F5 will typically
refresh the browser which makes testing easier.
Hand out Worksheet 1 and ask pupils to complete Task 1.
Lesson 1 Worksheet 1

Lesson 1 Worksheet 1 Answers

Creating a web page


Introduce the activity which is going to be demonstrated in the subsequent slides. Students
will replicate this activity, but could use an alternative country if they wish. Explain to
students that in lesson 3 onwards they will be able to choose their own topic to develop a
website on. Lessons 1 and 2 are used to teach key concepts.

Page development – Stages 1-8


Go through the sequence of slides which demonstrate how the addition of each part of
HTML is reflected on the webpage.
Now ask pupils to complete Task 2 on Worksheet 2.

Plenary
Show the various tags and ask pupils what they do. You may wish to ask students to
complete this task in pairs.
Once they have had a chance to consider all the tags, go through the Answers slide that
follows.
Give out Homework 1.
Lesson 1 Homework 1

Lesson 1 Homework 1 Answers

Key Stage 3 HTML and website development © 2023 PG Online Limited 2


Acknowledgements
The authors and publisher would like to thank all contributors for their kind permission to
reproduce their photographs or images, screenshots of their websites or other copyright
material in the PowerPoint Guides.

All other images © [Link]


New Zealand landscape image © Ketan Kumawat, [Link]
Aerial photo of lagoon and coral reef © Vincent Rivaud, [Link]
Japanese website images © [Link]

Every effort has been made to trace the copyright holders and we apologise in advance for
any unintentional omissions. We would be pleased to insert the appropriate
acknowledgement in any subsequent edition of this publication.
This material contains links to relevant websites featured in the teacher’s guide. Every effort
has been made to ensure that at the time of distribution, the links remain unbroken, the
material remains up-to-date and that links are not inadvertently linked to sites that could be
considered offensive. PG Online cannot be held responsible for the content of any website
mentioned in this material. It is sometimes possible to find relocated sites by typing the
original URL into a browser. Any errors should be reported directly to
support@[Link] and changes will be made in any subsequent editions of the
material.

Key Stage 3 HTML and website development © 2023 PG Online Limited 3

Common questions

Powered by AI

Students can continue web development projects at home by saving their HTML files with a .html extension, transferring them using USB storage or email to ensure they can open them on a home computer. They would then edit the files with a text editor and refresh them in a web browser using the F5 key to view changes efficiently .

Educators should initially evaluate the students' prior knowledge and tailor lessons to introduce basic concepts like tags and structure before advancing to connections with CSS or JavaScript. Differentiated tasks can help cater to varied skill levels, while providing hands-on activities ensures practical understanding. Use of visual aids and progressive complexity in examples can engage diverse learners effectively .

The head section of an HTML document is not visible on the webpage itself because it contains meta-information about the document, such as the page title, links to stylesheets, and scripts, rather than the actual content to be displayed. This section's main role is to provide the browser with information on how to handle the displayed content .

A practical demonstration in teaching HTML helps beginner students visualize how code translates into web elements. It bridges theoretical knowledge with real-world application, enabling learners to see immediate results of their coding efforts and fostering deeper comprehension through interactive learning .

The .html file extension is significant because it indicates that a file is intended to be rendered by a web browser rather than opened as a plain text document. Without this extension, the file is typically recognized as a text file, which when opened will display its code rather than the interpreted webpage .

Emphasizing copyright and acknowledgment in web development education is important to teach students the value of respecting intellectual property. It encourages critical thinking about the ethical use of resources and helps prevent legal issues related to unauthorized use of copyrighted content in their projects .

To teach HTML tags to intermediate students, it is suggested to demonstrate the creation of a web page step-by-step, allowing students to replicate the activity with assigned or chosen topics. Practical demonstrations of editing, saving, and viewing HTML files in a browser should be included. Worksheets and tasks should accompany these lessons to reinforce learning through practice .

Open tags in HTML, denoted as <tag>, mark the beginning of an element, while close tags, indicated as </tag>, signify the end of that element. They function as markers that help define the structure and format of the content within the document, differentiating between visible and functional elements .

Incorrect or outdated web links can hinder the learning experience by directing learners to unavailable or irrelevant content, diminishing the material's utility. Solutions include regularly checking and updating links, reporting errors to support teams, and instructing students on how to find relocated sites using original URLs for continuity in accessing resources .

HTML deals with the content of web pages, including elements like titles, subtitles, and images, whereas CSS handles the styling and positioning of these elements. It is important to keep them separate when teaching beginners to emphasize the distinction between content and presentation, helping learners understand the fundamental roles each language plays in web development .

You might also like