Get Into Code. 24 March 2016...

Get into code' INSET.

Collabor8 - 'Get into code' INSET



 ‘Get into code’ C8 INSET - summary. (printable .pdf)


 Roy Bazeley - pen portrait. (printable .pdf)

 Contact Roy.


National Curriculum

 Programme of Study (2013). (printable .pdf)

Naace Computing at School

 Computing in the National Curriculum. A guide for primary teachers. (printable .pdf)

Key features of working with HTML, CSS, JavaScript:

  • algorithms, programming, debugging
  • use existing apps
  • get started quickly, easily at low/no cost
  • no hardware to set-up
  • main input is knowledge acquisition - bite-size chunks
  • builds on work with floor-turtles / BeeBots
  • wide application in the workplace

Learning strategies

We'll cover getting started in 'hands-on' detail. Walk the develoipment pathway at your own pace and according to your particular needs.

  • Use the example files provided and observe the effect of simple adits
  • Use links to w3schools for support
  • Use 'blank.html' as starting point
  • Copy and paste code snippets to create your own files
  • Create your own files from scratch
  • Use this page as a starting point for your continuing learning journey
  • For pupils: 'fix this broken file' (debug)
  • For pupils: create web page for project work

Basics Workshop - a hands-on introduction to HTML

Use 'Windows Notepad' to write your code
Use Internet Explorer or Google Chrome to render your code (File | Open)
Sample files are available in MyDocuments\collabor8_coding_inset\c8_1 etc


Create an HTML document with key elements:

html element: <html> & </html> tags

head element: <head> & </head> tags within the html element

body element: <body> & </body> tags within the html element




title element: <title> & </title> tags within the head element

   <title>Page title</title>



heading elements: (1 to 6) e.g. <h1> & </h1> tags within the body element

   <title>Page title</title>

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <!-- and so on up to Heading 6... -->


paragraph element: <p> & </p> tags within the body element

   <title>Page title</title>

   <h1>Heading 1</h1>
   <p>This is some paragraph text.</p>


span element: <span> & </span> tags within e.g. heading and paragraph elements
   <p>This is some paragraph text. <span>Text within a span element is identified separately</span>.</p>

div element: <div> & </div> tags within the body element

   <title>Page title</title>

    <h1>Heading 1</h1>
    <p>This is some paragraph text.</p>


NB: (nearly) all html elements consist of an opening and a closing tag

NB: place content between opening and closing tags of an element

Some elements can be or must be 'nested' within others

Introducing html attributes - ‘name-value' pairs (attribute-name="attribute-value") such as 'id'. Name-value pairs are a core programming principle...
<div id="example1">

The importance and application of syntax in programming

Resource: example of basic html file structure

 blank.html. (right-click to download - or click then right-click and choose 'view source')

Resource: HTML tutorial at w3schools

Core Workshop 1 - separating content from presentation with CSS


Use Cascading Style Sheets (CSS) to present data within an html document:

apply in-line css to individual elements within the document body via the style="" attribute (name-value pair)
<p>This is some paragraph text. <span style="color: Blue">Text within a span element is identified separately</span>.</p>

apply css document-wide via the <style> element within the document head
  // affect all <p> elements in the current html file...
  p {color: red;}

  // #eg1 affects a single elemnt with id="eg1"...
  #eg1 p {color: white;}
  #eg2 p {color: CornflowerBlue;}

  // .alert affects multiple elements with class="alert"...
  .alert {background-color: yellow;}

  // list multiple properties to affect id="special" separated by ';'...
  #special {background-color: cyan; color: black;}

Try working with these css properties:

  • color:
  • background-color:
  • text-align:
  • padding:

Another example of ‘name-value' pairs such as 'id' - a core programming principle

This is another example of the importance and application of syntax in programming

Use the sample file sample.html to try changing values

Resource: example integration of CSS within an HTML document

 sample.html. (right-click to download - or click then right-click and choose 'view source')

Resource: CSS tutorial at w3schools

Resource: list of HTML colour names at w3schools

Core Workshop 2 - create a web

Hyperlinks - a great British invention

Link to external website:
<a href="">Visit</a>

Link from page1.html to page2.html:
<a href="page2.html">Visit page 2</a>

Link from page2.html back to page1.html:
<a href="page1.html">Visit page 1</a>

Resource: example page1.html

 page1.html. (right-click to download - or click then right-click and choose 'view source')

Resource: example page2.html

 page2.html. (right-click to download - or click then right-click and choose 'view source')

Resource: HTML links tutorial at w3schools

Developments 1

Working with images - technical and social issues

Remote image:
<img src="" style="width: 320px; height: 197px;" alt="Roy and Ducky.">

Local image:
<img src="images/bike.jpg" style="width: 320px; height: 197px;" alt="Geurciotti Lyra cyclo-cross bike.">

  • copyright issues
  • safety issues
Roy and Ducky.

Resource: sample image file


Resource: sample image file


Resource: images tutorial at w3schools

Developments 2

On to programming proper - JavaScript for kids

JavaScript is the programming language of the Internet, the secret sauce that makes the Web awesome, your favorite sites interactive, and online games fun!

Example 1

<script type="text/javascript"> document.write("Welcome to my world!!!"); </script>

Example 2

<p><button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button></p> <p id="demo"></p>

Example 3

<script type="text/javascript">
// Draw as many cats as you want!
var drawCats = function (howManyTimes) {
for (var i = 0; i < howManyTimes; i++) {
document.write(i + " =^.^=<br>");

drawCats(10); // You can put any number here instead of 10.

Resource: example integration of JavaScript within an HTML document

 js.html. (right-click to download - or click then right-click and choose 'view source')

Resource:"JavaScript for Kids: A Playful Introduction to Programming" by Nick Morgan

JavaScript for Kids is a lighthearted introduction that teaches programming essentials through patient, step-by-step examples paired with funny illustrations. You'll begin with the basics, like working with strings, arrays, and loops, and then move on to more advanced topics, like building interactivity with jQuery and drawing graphics with Canvas.

Along the way, you'll write games such as Find the Buried Treasure, Hangman, and Snake. You'll also learn how to:

  • Create functions to organize and reuse your code
  • Write and modify HTML to create dynamic web pages
  • Use the DOM and jQuery to make your web pages react to user input
  • Use the Canvas element to draw and animate graphics
  • Program real user-controlled games with collision detection and score keeping
  • Ages 10+ (and their parents!)

With visual examples like bouncing balls, animated bees, and racing cars, you can really see what you're programming. Each chapter builds on the last, and programming challenges at the end of each chapter will stretch your brain and inspire your own amazing programs. Make something cool with JavaScript today!

 Available from amazon.

Resource: JavaScript tutorial at w3schools

Resource: Google Crome - web browser with built-in JavaScript console

The console is a secret way programmers can test short JavaScript programmes. To launch:

  • Type about:blank into the address bar
  • Press ENTER
  • Windows: CTRL+SHIFT+J
  • Type some JavaScript then press ENTER to see it execute
  • Any output will appear on the next line
  • Try 3 + 4;

 Get Google Chrome.

Resource: Code Club - A nationwide network of volunteer-led after school coding clubs for children aged 9-11

Partners, Funding & Accreditation

We strive and collaborate in order to succeed and improve

...for our commitment to competition, school sport and PE...

...for children to develop good speech, language and communication skills.

" improve standards, raise achievement and enrich children's educational experiences."

A high level of participation and engagement in active travel across the whole school community.

Thanks to the Big Lottery Fund for their support in creating Worple’s new outdoor play equipment!

Thanks to the Rugby Football Union World Cup Legacy fund for their support in creating Worple’s new outdoor play equipment!