Introduction to HTML: Hacking Google
| Aim | This activity hopes to get pupils to code HTML into websites. The extension tasks hopes to get them to understand HTML and change variables of the code and test their output. |
|---|---|
| Duration | 2 hours |
| Technology | PC, Internet Access, suitable web editor with HTML view, goodle chrome or similar browser with HTML preview panel |
| Materials | PC, Internet access, suitable web site editor with HTML view, photocopies of resources |
| Student/teacher Ratio | 1:25 |
| Age of students | 11-16 |
Special information
This activity will teach pupils how to use HTML and embed code. Examples could be Google search bar, weather bulletins or twitter feeds.
The starter task allows pupils to use google chrome's built in HTML editor to change google's homepage with the pupils inserting their own text.
Both the teacher and the pupils will need prior knowledge of what is HTML code. Youtube has plenty of educational video clips to explain what is HTML prior to the lesson.
Step by step overview
By using existing code that’s available they can see the advantage of using such a universal code format, which can be embedded into most platforms or website editors. This activity should allow pupils to use a twitter feed from their account. They should understand which parts of the code are generic and which parts of the code have the account ID, which associates the tweets with the feed.
There are extension tasks also available with sample code to further pupils understanding in using HTML, together with an assessment tool for the students to see what level of work they are reaching.
Recommended order:
Use the introduction PowerPoint with the video clip explaining why coding is important. “Don’t just use the next game, code it!”
Open the worksheet “Taflen Waith - Worksheet Changing Google Homepage using Chrome” from the playful coding website.
We would recommend that you show the pupils how to change the HTML code of Google’s homepage using Google chrome as a teacher led task then distribute the worksheet as a teaching aid as required.
3-4. Open “Taflen Waith - Worksheet Google Maps” and Taflen Waith - Worksheet Twitter from the playful coding website.
For both 3 and 4 use a simple HTMl editor. Opensource examples are below.
We would recommend that you show the pupils how to create the Google Maps HTML code first as a teacher led task, then distribute the worksheet as a teaching aid as required. Following this, pupils should be able to carry out task 4 with the twitter feed HTML code independently. If your pupils struggle with doing this task independently, there is a PowerPoint presentation to help them in the process.
Tips to make the workshop go smoothly
In the worksheet there are step by step instructions on how to embed the twitter feed and in the presentations for each task there is an example of how we have used Serif Web Plus to embed the HTML into your website. Serif Web Plus would need to be downloaded (free version available on their website), but in the presentations other open source alternatives are available.
In the weather tool HTML, students can learn about modifying the HTML code to change the width and height of the tool.
This is what one of our students said about the task: ‘Today I used some data from the school’s weather station that is linked to the website Weather Underground. The website gave me a HTML code that I could copy and paste into my serif website (I also put it on the school website using Moodle as you can see) this piece of code let me put a small box telling you what the weather is like. When I used it on my website the box was a little too big so I edited the code “width=250″” “height=250″” to “width=200″” “height=200″” so that it could fit on both my page and the schools page.’
Extensions and challenges
- Task 5 is a more challenging task for the more abled and talented pupils. The first activity is where pupils use an open source weather widget for their website and the second task is where pupils add a google search bar into their site. Task 5 gives the teacher a good opportunity to use questioning skills and possibly get the pupils to look at the code before they implement it, so they can resize it and change the attributes of the interface to customise the code with the colour scheme of their own website.
Task 5 will require the following Powerpoint presentations to be made available to the pupils: “What is HTML - Starter Google Search Task” and “What is HTML - Weather Tool Task”.
Sources of additional information
Serif Free Starter Edition Software: http://www.serif.com/web-design-software/ Note++: Open source Alternative: https://notepad-plus-plus.org/ Weather Underground Tool: http://www.wunderground.com/personal-weather-station/dashboard?ID=IMACHYNL2#history/s20151002/e20151002/mdaily Weather Underground HTML CODE site: http://www.wunderground.com/personal-weather-station/widgets?ID=IMACHYNL2