HTML Pupil Activity Pack
What is HTML and why teach it?
HTML (HyperText Markup Language) is a computer language to help website creation. In this activity pack you are going to learn how to program a simple website using HTML. Watch the introduction video above to learn more about what HTML is.
What do you need?
JS Fiddle website, which is free, online and works on any device.
Google Maps for the iframe activity.
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.