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
RESOURCES
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