Programming in HTML Activity Pack – teacher notes
Pupil Activity Code: HTM4 – What is it?
Progression of skills in this pack:
1. Add and align text and change colour.
2. Program background colour.
3. Add and align images.
4. Add hyperlinks to other websites.
5. Add an iframe (such as a Google Map) and adjust the height and width.
National Curriculum Content
Design, write and debug programs that accomplish specific goals; solve problems by decomposing them into smaller parts.
Select, use and combine a variety of software (including internet services) on a range of digital devices to design and create a range of programs, systems and content that accomplish given goals, presenting data and information.
Use a textual programming language to solve a variety of computational problems. (Key Stage 3)
3-4 hours
Introduction
HTML (HyperText Markup Language) is a computer language to help website creation. In this activity pack pupils are going to learn how to program and publish a simple website. Watch the introduction video above to learn more about what HTML and all the activities/video tutorials are also included in the pupil activity pack.
HTML can be fascinating to learn for pupils as they start building their own websites from scratch and learn text-based programming, which is a big part of the Key Stage 3 Computing Curriculum.
🛠 What do pupils and teachers need?
Pupils will need a topic to make a website about. For the videos below we are linking it with our Year 6 History of Computing Activity Pack. Once pupils have worked through the activities below, they could expand their website with multiple pages.
You may want to watch the videos together below, as a class and discuss them before pupils try the code themselves.
👨🏫 Teacher Input
Watch the video at the top of this page together with your class and also the videos for each activity below. It is a good idea to model each HTML tag with your class if you feel comfortable to do so but also pupils of this age should be encouraged to learn these skills independently using the video tutorials in the pupil activity pack.
🚦 Differentiation
Lower ability pupils can use the pupil help sheets below to support them with the text to add (as well as the videos). Once pupils have finished the activities below and their web-page is working, more able pupils could use the W3 Schools tutorials to add more HTML tags.
✅ Assessment
The video tutorial in activity 1 below demonstrates to pupils that when they create their project in JS Fiddle website, it generates a unique web address. This needs to be copied and pasted somewhere pupils can find again, such as Word etc. This means pupils can go back to the web-link the following lesson and resume their code. At the very least, pupils could write the web address in their book, but it needs to be exactly the same.
📝 Unplugged Assessment Activity
Below is a downloadable and printable activity sheet/cards that can be used to assess pupil understanding of the vocabulary and application of the skills, either individually or as a group task/extension task.
Pupil Activity Pack (Teacher view)
1.Creating a HTML Project and adding the <body>
Watch the video to show you how to set up your HTML project in JS Fiddle website and then add the HTML body code. The tutorial also demonstrates how to save your project as a web-link.
2. Aligning Text
Use HTML styling below before your body text (between <body> and </body> ) to put your text in the middle or choose left or right. Note the American spelling of Center. End your alignment by putting </p> tag below the text you want to align. Watch the video to help you.
3. Formatting Text
Watch the video to learn how to add some more text and use the table below to format your text. Remember to end each formatting, such as:
This text will be bold text
Some are missing, experiment with what they are and fill in the missing descriptions.
4. Background Colours
Use the styling code below within your < body> tag to change the background colour of your website. Note the spelling of colour (color). Watch the video to help you understand where to put the code.
5.Text colours, style and size
Watch the video tutorial to learn how to change the colour, style and size of the text in the different paragraphs of text. The video demonstrates how to add styling to your first paragraph by putting the code below into the text alignment tag. You will find the name of different font styles here.
6. Hexadecimal Colours
This is a 6 digit code that allows programmers to choose a specific colour from millions. Use the image to find the colour you are looking for then put it in your font or background with # at the start. E.g #CC9900
7. Adding Images
Add some images to your web-page by copying the direct link for an image from the internet and then using the <img src=”imageexamplelink.jpeg”> tag.
Watch the video to help you understand this better.
Use a percentage of the image width and height to adjust the size of your image.
Use the same alignment code you used on your text in task 2 to align your images left, centre or right.
8. Hyperlinks
Use the <href=> tag to an a hyperlinks to another website. Use the screenshot below and video tutorial to help you.
Challenge: Could you add target=”_blank” so that the link opens into a new tab? For example:
<a href=”https://www.computing history/” target=”_blank”>Click here to learn more</a>
9. iframes
An iframe is part of a HTML webpage that can be embedded into another webpage, such as a video or map. Watch the tutorial to learn how to embed a Google Map into your website as an iframe. You can then adjust the height and width to suit your web-page.