Now I Have to Teach Coding? Getting Started with Tabby Cat (4 and 5)
Have students brainstorm the ways in which webpages are like stories. For example, you could show the school website - and ask what story it is trying to tell, a commercial website like Apple, or Animal Fact guide http://www.animalfactguide.com/. Show the websites to students and ask them to comment on things like what the site is for, who the audience is and what the site wants the audience to do.
You can assign different site screenshots to different table groups if you want to do this part of the activity ‘unplugged’ (without devices). You can also have students explore the sites for a bit in table groups to answer questions like: Purpose of the site? Intended audience for the site? What the site wants the audience to do (shop, read, play, etc.)?
Websites to use
- Animal Fact Guide
2 Direct Instruction - HTML and 'storytelling'
Explain that HTML is a coding language used to style the pages. To tell the story, you have to choose elements that help you communicate what you are trying to say ie. colours, text, images, borders, links, fonts, etc. They work behind the scenes to help tell the story. If the font is too small, or the colours are too crazy or the links don’t work, it’s hard to understand your story and it’s hard to get the audience to do what you want.
If you can learn how to code web pages and sites, you have more control over your story.
3 'Reading' html
Step 3: Hand out the Reading HTML page. We suggest copying the code included here, pasting it into Word, and saving it as a pdf. Provide students with the printed pdf of the code. NOTE: This is the link to the pdf for the handout, but you can use any html code for any webpage.
This is the developer code that they should be somewhat familiar with (from previous lessons). Tell students that they are going to learn to read the code. You can print out different web codes or just stick with this one.
Have students skim through the text, looking for keywords that might help them understand what the page looks like and what kind of page it is.
Based on the code that they see, students will now try to visualize what the page looks like both in terms of text and design. Give students about 5 - 10 minutes to read and draw/sketch what they think the page might look like and have them be prepared to explain their thinking.
Ask what they think the story of the page is. Who is the audience? What do they want them to do? Explain their thinking in note form on the page where they did their drawings.
Now have students get in larger groups or switch groups and explain their drawings and their reasoning (writing questions/answers on the paper).
Discuss as whole class and see if there are commonalities.
Show the following link and ask students what they think about the webpage. The code on the Reading HTML handout is for this website. Again, consider who it is trying to reach, what is it trying to accomplish, etc. Have students compare their ideas. You can do this with any site - the simpler the better. Have them compare clues from the code on the handout for this website. Things to look at for clues include:
4 Play with Mozilla Thimble
Introduce Thimble by Mozilla to show HTML. In this lesson or another one - students can do the tutorial or just remix a project. Instructions are on the site to guide students through a remix of an existing website.