Introduction to HTML: Hacking Google

PROJECT INFORMATION

INSTITUTION NAME
Ysgol Bro Hyddgen
ESTIMATED DURATION
2 hours
AGE OF KIDS ADRESSED
12+
MATERIALS
PC, Internet access, suitable web site editor with HTML view
TECHNOLOGY
PC, Internet Access, suitable web editor with HTML view
Nº OF STUDENTS
Could be used individually or in groups
Nº OF STUDENTS/TEACHER
 1:25
Nº OF STUDENTS/RESOURCE
1:1 or 1:2

CODING ACTIVITY GOAL

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.

SPECIAL REQUIREMENTS

Knowledge level
Skills required
Teacher
Some prior knowledge of html
Ability to import/embed HTML code
Student
prior knowledge of how websites use HTML
Able to create basic websites
To take into account
This activity will teach pupils how to use HTML and embed code. Examples could be Google search bar, weather bulletins or twitter feeds.

 

PROJECT DESCRIPTION

By using existing code that’s available they can see the advantage of using such a universal format of code that can be embedded into most platforms or website editors. This activity hopes to allow pupils to use a twitter feed from their account. Understand which parts of the code is generic code and which parts of the code has 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 but also a assessment tool for the kids to see what level of work they are reaching.

STEPS TO FOLLOW TO CARRY OUT THE ACTIVITY

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 schools weather station that is linked to the website weather underground . The website gave me a HTML code that I could copy and past 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 edit the code “width=”250″ height=”250″” to “width=”200″ height=”200″” so that it could fit on both my page and the schools page.

 

FOTOS/VIDEOS OF THE ACTIVITY

HTML-code

HTML-code-2

 

RESOURCES

zip1

LINKS RELATED TO THE PROJECT

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