Advancers – Program + Recursion

Introduction

This week we looked at both the Progam project and the Recursion (Branching) project. with a plan to get the output of the Recursion project be the input of the Program project.

The 2 Projects

Program Project

The Program project that we did a couple of weeks ago can read a list of commands and get Scratch to perform those commands. We programmed it to be able to:

  • Put the Pen Up or Down (P:0 or P:1)
  • Move some steps (M:100, where 100 is the number of steps)
  • Turn in a different direction (T:90, where 90 is how far to turn)

Each Command was identified by the First Letter.

Recursion Project

The Recursion project that we did last week can draw a branching Tree pattern. The commands it uses to draw the Tree are:

  • Pen Up and Down
  • Move some steps
  • Turn in a different direction.

Joining them together

The Recursion Project changes

You can see that the Recursion project using the same commands as the Program project, but in order to get the commands from the Recursion project to the Program project we have to add some code to the Recursion project.

First job is to create a List, we called it Commands as it will store all the commands that we have run.

CommandsList

We then need to read through the code and wherever there is a Pen Up, Pen Down, Move or Turn we need to add an item to the Commands list.

This is the code and I have highlighted where

You can see that I have marked 7 places where we need to add code to Insert into commands.

AllCodeMarked

When the Inserts are added the code will look like this, just remember that the Insert has to put in the Command letter that Progam needs Joined to the same action that the Recursion code is doing. All the entries go in the last place in Commands.

GreenFlagCommands

 

You can see that we have added a delete all to start and then after the Pen down we have added a P:1 to the last place in Commands.

On the Pen up we have added a P:0 to the last place in Commands.

 

 

Then we did the same to the Code that did the drawing of the Branches.

CustomBlockCommands

 

Notice that all the Inserts use a JOIN block, the first section is the Command letter that the Program project is expecting, the second section is the exact same code from the code block above.

For example when the code turns Degrees * -2 the insert also has Degrees * -2 in the second section of the JOIN.

 

 

 

 

 

If we run the Recursion Program now, the Commands list will end up with lots of commands, if you have 10 Branches it creates 5117 Commands!

CommandsPopulated

 

You can see that Commands starts with a Pen Down (P:1) and then starts all the Moves (M:…) and Turns (T:…) and when the Tree is finished there are 5117 items in Commands.

 

Next step is to Export the Commands to a file. This is simply a case of Right Clicking on the Commands List and selecting Export, just make sure you add a .txt to the file name and also remember where you saved it!

The Program Project changes

Now we switch projects and open the Program Project.

First thing we changed was to remove all the test code, add some instructions and move the broadcast Play to when the space key pressed.

Instructions

Next step, click the green Flag and follow the instructions.

So right click on the Program List and Import the file that you Exported from the Recursion Project. And then press the Space key…

FirstTest

Hmm, not quite what we were expecting, but close, the Tree is on it’s side and the drawing has started in the centre of the screen rather than at the bottom.

This test has highlighted a number of problems with our Program Project. We don’t have any code to set the Direction of the Sprite or the X and Y Positions.

Well that is easy to fix, we just add some more Command Letters to our Programming code:

  • D:nnn – This will set the Direction to point in, where nnn is the Direction to point in.
  • X:nnn – This will set the X Position, where nnn is the X position.
  • Y:nnn – This will set the Y Position, where nnn is the Y Position.

This gave us 3 more IF sections in our code like this:

NewCommands

 

 

 

You can see that the new commands are almost the same as the old ones, we just change the letter we are looking for and the code block that gets run if we find one of the New letters.

So D:0 for example will run the Point in Direction code with the value 0 (Up).

 

 

The Recursion Project – more changes

Now this where we have to jump back to the recursion project and add some more Inserts so we can set the correct direction and the correct X and Y positions. Again this is not too difficult, we just look for code that sets the direction or X and Y Positions and add some Inserts into the Command list.

ExtraInserts

 

You can see 3 extra insert code blocks, 1 for the point in direction code and 2 for the go to x: y: code block. We have to add 2 here because our Program project is very basic and doesn’t know how to do a Go To…

 

 

 

 

The Commands List will now get 3 new entries at the beginning and have a total of 5120 commands now. Don’t forget to Export this new list to test the Program project again.

ExtraCommands

And Finally

Program Project – test 2

Now that we have the Recursion project writing out the extra Direction and X and Y commands we can test again in the Program project.

And, test 2 is a little better than test 1.

SecondTest

 

It’s still not perfect, the line is all the same thickness and the colour is always the same.

But you could easily add some more Program letters to add this extra functionality.

 

 

Notes:

As always the code is on the Scratch web site, I have added 2 projects that should produce the results you see above:

  • ClassVersion-Program
  • ClassVersion-Recursion

User Id : cdadvancers1819

Password : advancers

Creators – Tanks

tank-1530043_640

The main purpose of this week’s session was to explore the idea of transforms by using them to make a little top-down tank that we could drive about the screen. I close a tank because:

  • It’s easy to draw a recognisable tank with a few simple shapes
  • It’s easy to see which way is forward
  • Tanks move in a very simple way (either turn or drive forward or backwards)

Origin and Axes

We don’t often use the word, but the top left of the screen (0, 0) can be referred to as the origin.

Another useful word is axes (plural of axis). We have two axes in 2D – the X-axis which normally runs horizontally left-to-right on the screen and the Y-axis that runs top-to-bottom.

Transforms

With these words in hand, let’s talk transform. P5 has three functions that allow us to make transforms. Once we call them, they effect everything that’s subsequently drawn. Here they are:

  • translate() – Move the origin by a given amount along the x and y axes.
  • rotate() – Rotate about the origin (wherever it currently is).
  • scale() – Scale along x and y axes.

Design of our Tank class

Our Tank class has five main things:

  • A constructor that takes and stores a vector for the tank’s position [this.pos]
  • A property to store the tank’s angle [this.angle]
  • A function to draw the tank [draw()]
  • A function to tell the tank to turn left/right [turn()]
  • A function to tell the tank to drive forwards/backwards [drive()]

We draw our tank as if it’s centered on (0, 0) and facing right.  We then can use translate(this.pos) to move it and rotate(this.angle) to change its angle.

For turn() all we need to do is to to change this.angle by a requested amount.

For drive(), we do a little more. We:

  • Create a copy of the current position
  • Create a vector (1, 0) which is facing right (representing the tank’s forward direction)
  • Multiply that vector by how fast we want the tank to move
  • Rotate that vector to point in the tank’s actual direction this.angle
  • Add to the copy of the current position we took initially
  • Check that new position to make sure we wouldn’t end up off-screen and, as long as we we wouldn’t, update the tanks actual position this.pos

Getting user input

We then need to get input from the user. In sketch.js we created a new function getInput() and put a call to it in our draw() function.

In getInput() we just look for the arrow keys. If we see Left or Right then we tell the tank to turn. If we see Up or Down we tell the tank to drive. We use the P5 function keyIsDown() for this.

Download

The files for this week can be found on our GitHub repository. The actual files uploaded have expanded the game a little. There are now two tanks and the Tank constructor takes two new arguments for the tank’s colours. The second tank is controlled not with the arrow keys but with WSAD and we use the P5 variables keyIsPressed and key to detect those being held down (as they’re different to the arrow keys).

Advancers – Recursion (Broccolli!)

Introduction

This week we created another drawing program using recursion, code that calls itself.

This drawing program will draw a Tree with 2 number of Branches, each Branch will split in 2 and be a little smaller than the previous Branches, The Branches will split X number of times. The finished picture will look something like this when X = 5:

Tree5

 

You can see that each branch splits into 2 new branches which are a little thinner and a little shorter than the previous branches, just like a real tree.

 

 

The Plan

Very simple plan for this one, we wanted to be able to control:

  1. the amount of branches
  2. how many degrees the split should be
  3. and what size the first branch would be

So we created a variable for each of these and left them on the Screen as a Slider. We set some minimum and Maximum values as well.

  1. Branches (1-10)
  2. Degrees (0-180)
  3. Size (30-100)

Sliders

The Code

As always we have some code that initialises everything when the Green Flag is clicked.

GreenFlag

 

We point upwards, we go to the middle of the bottom of the screen, clear everything, set the Pen colour and then call our code with the values from the Sliders.

Improvement : This should be “When Spacebar Pressed”, then we could just adjust the Sliders and then click the Spacebar to see the next tree.

 

The recursive code

This is the code that calls itself, because the Branching code is just the same thing repeated over and over again, but with slightly different values (the branches are getting smaller) it is ideal to use recursive code. You just need to remember that the code next to be able to finish.

CustomBlock

The code has two values sent in the number of branches and the size of the branches.

First thing we do is check to see if the number of branches is > 0 otherwise we exit, this is our way to finish the code.

We move (draw the branch), turn and then call ourself with slightly different values.

Just for a bit of variety we change the Pen colour each time as well.

 

This results in some quite nice Trees 🙂

SampleTree

Notes

The project that we built is available on the Scratch Web Site:

User Name : cdadvancers1819
Password : advancers

Project : ClassVersionRecursion

Remember, you can put your own projects up there as well if you want.

 

Creators – Painting

watercolors-854491_640

This week we looked at making a painting program.

We started with three built in P5.js variables:

  • mouseIsPressed – true whenever the mouse button is held down
  • mouseX – contains the X position of the mouse pointer
  • mouseY – contains the Y position of the mouse pointer

We put the call to background() in the setup() function because we didn’t want to clear the background every frame. After that, in the draw() function, we just needed to draw an circle at the mouse’s position every time the mouse button was pressed.

This gave us an very basic painting program in just a few lines of code!

Toolbar

We then looked at the idea of a toolbar to contain buttons for selecting colours and the size of the brush.

We first need to decide where it would be (the left side of the screen) and we created a variable toolbarSize to store the width of it.

In the draw() function we then added a check not to draw an circle if we were inside the toolbar area.

We then added a new function called mouseClicked(). This is a special function name (like setup() and draw()) that P5.js will call at the appropriate time. In this case its called when the mouse is clicked (button pressed down and the released).

Colour and Sizes

We created two arrays to store a list of colours and brush sizes at the top of our script:

let colours = ['black', 'white', 'red', 'blue', 'green'];
let sizes = [5, 10, 20, 40, 80, 160];

To draw the toolbar, we made a new function called drawToolbar() and put a call to it in our draw() function. In the new function, we looped over the colours array, drawing a new button, filled with the respective colour and then another loop over sizes drawing a square with a circle inside to represent the brush size. We needed to scale those circles to make them fit inside our buttons.

Detecting Selected Button

Since everything in our toolbar was toolbarSize high, to determine what had been clicked on, we just needed to divide mouseY by toolbarSize to get the index of the button that had been clicked on. We looked at that index, if it was less than the number of colours, we must have clicked on a colour. If greater, it had to be a size (or beyond the end).

Selected colours and selected sizes were stored in two variables called currentColour and currentSize respectively and used within the draw() function when creating our circles.

Featured Artwork

Mark suggested that people draw a portrait of me to test our new program and there were some brilliant renderedings. Three people were kind enough to share theirs with me so that I could put them here. I think they’re great!

Download

The files for this week can be found on our GitHub repository.

Bodgers – Introducing Gpio Zero

Hi again everyone.

This week we started looking at physical computing and the Raspberry Pi. This involves attaching various components such as sensors, motors or controllers to the GPIO pins on our Pi. This week we connected a LED and two buttons, and we used the GPIO Zero module for Python to control them. I’ve made a video, it’s a little bit long, that covers everything from Saturday’s session.

 

At the end of the session the group started working on a traffic light idea and we will combine this with HC-SR04 ultrasonic distance sensor next week to create a measuring device.

I don’t have any slides this week as we worked directly from the GPIO Zero Documentation available at https://gpiozero.readthedocs.io. This is also available on Dropbox, along with this week’s code and a sheet that contains a drawing of our circuit and drawing of the GPIO pin layout, here: https://www.dropbox.com/sh/k26mbrfmdvq9tro/AAB5jfjkIlBqLhfnUAVVUvtJa?dl=0.

See you all next Saturday.

Declan, Dave and Alaidh.

Bodgers – Finishing Our Game

Hi again everyone.

This week we put the final touches to our game.

uwin

We added some code to increase the speed of the alien sprite as the score increased to make the game a little more difficult.

We then added some code to control what happens when the game is over.

You can find our code on Dropbox here: https://www.dropbox.com/sh/ccfaycpa1zluh8l/AAAA4dQH8EPNJicsQj7RwGgsa?dl=0

Next week we will do a quick recap of this game and then we will start looking at hardware on the Raspberry Pi.

See you all then.

Declan, Dave and Alaidh.

Bodgers – Making a better game

Hello again everyone.

We continued working with Pygame Zero this week, we began by getting everyone up to date with where we were with the game. I forgot to mention we were following the tutorial at https://pygame-zero.readthedocs.io/en/stable/introduction.html. We then changed the screen size and added a score to make our game more fun.

Capture6

Next week we will add some elements to make our game more difficult and even more fun.

I don’t have any slides this week but the code for both versions of the game are available here: https://www.dropbox.com/sh/ccfaycpa1zluh8l/AAAA4dQH8EPNJicsQj7RwGgsa?dl=0

See you all next week.

Declan, dave and Alaidh.

 

Creators – Pattern

washer-machine-porous-mechanical-83852

This week we looked at two important concepts, loops and lists.

Loops

Start by imagining we wanted to draw four circles next to each other. We could write four calls the ellipse function, like this:

let size = 50;

ellipse(25, 25, size, size);
ellipse(75, 25, size, size);
ellipse(125, 25, size, size);
ellipse(175, 25, size, size);

Pretty easy. What if we had variables for the positions? We’d get this:

let size = 50;
let x = size / 2;
ley y = size / 2;

ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;

It’s longer than before, but notice how the same two lines now keep repeating. If we had a way to say “do these two lines four times” then this would get much shorter, and we do. We use the for statement:

let size = 50;
let x = size / 2;
ley y = size / 2;

for (let i = 0; i < 4; i++){
  ellipse(x, y, size, size);
  x = x + size;
}

The for statement is a bit complicated, so let’s break it down:

for (do first; check to see if we keep going; do every time 2) {
  do every time 1
}

Note the curly brackets (braces) containing the stuff we want repeated.

So in our case we:

  1. First create a new variable called i and give it the value 0
  2. Check to make sure that i is less than 4
  3. Draw our ellipse and make x bigger
  4. Increase i by 1
  5. Go back to step 2 and check if we can keep going, otherwise stop

This means that i will have the values 0, 1, 2 and 3 and our two lines will be run four times in total. Result! Our code can draw a row of circles. If we increase the value in the check, we can have as many as we like. We choose to have 8.

Nested Loops

Nesting a loop means putting one loop inside another. What’s the point of that? Well in our case we have a loop that can draw a single row of circles. If we put all of that inside another loop we could draw several rows. The row outside has a different variable j and also runs eight times. After we draw our row we do two things:

  1. We make y bigger move down the screen
  2. We move x back to the left to its starting position for the next row

The code now looks like this:

let size = 50;
let x = size / 2;
let y = size / 2;

for (let j = 0; j < 8; j++){
  for (let i = 0; i < 8; i++){
    ellipse(x, y, size, size);
    x = x + size;
  }
  y = y + size; // Move down and
  x = size / 2; // Back to the left
}

We now have 8 x 8 = 64 circles in a grid.

Changing the Colour of Some Circles Based on a Check

We then added code just before our call to ellipse() to change the colour based on some check:

if( /* some check here */ ){
  fill("red");
}
else {
  fill("white");
}

We experimented with some different checks to see what might happen. This check turns the upper-left of the grid red:

if (i + j < 8 ){ 
  :  :  :

This check, using the modulus operator, turns every third circle of the grid red:

if ((i + j) % 3 == 0){ 
  :  :  :

This check paints a red cross through the centre of the grid:

if (i == 3 || i == 4 || j == 3 || j == 4){ 
  :  :  :

Lists

We then jumped quickly into lists. Also called arrays, lists are like a variable that can store several values. We create them simply like this:

let a = []; // An empty list
let b = [1, 2, 4, 7]; // A list created with four entries

To get at the entries in a list you just use the list variable’s name and square brackets containing the number of the entry in the list you want to get out, noting that the first one is zero:

b[0] = 10; // Set the first entry in the list to ten
b[4] = 301; // Set the fifth entry in the list to three hundred and one

A list isn’t just for holding numbers though, it can hold anything. It can hold strings for example, or even other lists!

It’s this idea of holding lists that we use to define our pattern.

Defining our Pattern

We make a list with eight entries, each of which is a list also containing eight entries, all zero. We write it so it forms a neat block like this:

let pattern = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0]
];

Then down in our code, where we’re deciding what colour to make our circles, we change the check to read:

if (pattern[j][i] == 1){  
  : : :

What does this mean? Well, j is a counter that goes from 0 -> 7 as we go down our eight rows. Given that, pattern[j] means get entry from our list for that row. Since pattern[j] is a list too, we need to say which entry we want in. The variable i goes from 0 -> 7 as we go across each row. So, pattern[j][i] gets the list for the row and then picks out the number for that column.

Once it’s set up, we can then change zeros to one in our pattern and have our circles turn red to match (red in the text below to make them stand out):

let pattern = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 1, 0, 0],
  [0, 0, 1, 0, 1, 0, 0, 0],
  [0, 0, 1, 1, 0, 0, 0, 0],
  [0, 0, 1, 1, 0, 0, 0, 0],
  [0, 0, 1, 0, 1, 0, 0, 0],
  [0, 0, 1, 0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0]
];

Screenshot 2018-10-15 at 18.14.34

We have essentially built something that works like an image file! Our pattern is the image data and our program is the code that draws it.

As several smart people already noticed, you’re not limited to one and zero. By using more numbers, and expanding the if statement, you can have as many colours as you like.

Download

The files for this week are on our GitHub, as always.

Creators – Basic Scripting

Screenshot 2018-09-30 at 11.22.16

 

This week we were joined by some additional ninjas, welcome! We had to do a little revision of the first week’s content and probably didn’t manage to get quite a much done as I’d hoped.

Let’s review what we did manage to get done.

Embed a simple script in a web-page

The first thing we did was to create our folders for this week and then create a brand new HTML file called index.html. We then embedded a simple script in our html file using the tag, like this:

window.alarm("I'm alarmed");

When we opened our page in Chrome, our message popped up as an alert.

Seperate that script into its own file

We then created a new file in our folder called script.js. We cut out everything from in between our and tags and pasted it into this new file:

window.alarm("I'm alarmed");

and in our HTML file we gave the tag the name of this file instead, using the src= attribute (short for “source”) :


Our script continued to work as before, as we’d hoped.

The advantage of moving scripts into their own files is that as we get more scripts and these scripts get more complex, keeping them all within the HTML file gets messy and difficult to work with.

Developer Tools

The developer tools build into Chrome, and some other browsers, help us see what is happening with our pages and scripts and helps us to fix them when they’re not working correctly.

To open the developer tools, open the menu in Chrome (the three dots in the upper-right of the program) and select More Tools | Developer Tools.

The console, part of the developer tools, is a place for us, as programmers, to write out things that will help us check if our script is doing what we want it to do. Ordinary users never see what developers write to the console.

To write to the console, we changed our script.js to read:

console.log("I'm alarmed");

The message box stopped appearing and this message could only be seen by looking at the console.

Basic Script Concepts

The most important basic concept in programming is that of a variable. A variable is just a place to store something and a name to refer to it by. We can make a new variable, in this case called a, like this:

let a;

The first word, let, is known as a keyword and tells JavaScript “we’re going to make a new variable”. The name of the variable, in this case a, comes next and finally a semi-colon (;) to show that this line is finished. The semi-colon is how we mark the end of a command in JavaScript and it’s an easy thing to forget.

We quickly made this example more complex:

let a = 4;
let b = 5;
let c = a + b;

console.log("c");
console.log(c);

In this extended example we defined three variables called a, b, and c respectively. Not only do we define them, we also assign them a value (using the operator =) at the same time. The first two are just given a simple value, but c has a value calculated from adding a and together.

The two console.log() line are to show the difference between actually writing the letter c to the console (as in the first line) and writing the value of the variable called c to the console (as in the second line).

Strings

Strings are how we hold a piece of text in a program. Strings are surrounded by quotations marks:

"This is a string"

I didn’t mention the last day, although I mean to, that JavaScript also allows strings with single quotes, which many other programming languages do not:

'This is also a string'

We experimented with changing our script so that instead of numbers we set our variable to strings:

let a = "4";
let b = "5";
let c = a + b;

console.log("c");
console.log(c);

and in the console saw the perhaps surprising result:

c
45

We determined that when we have two number variables the operator + does normal addition but when one or both are strings it makes a new string with the two stuck together (this is often called “concatenation”).

We introduced the following four mathematical operators:

  • + : Plus does addition
  • – : Minus does subtraction
  • * : Asterix does multiplication
  • / : Forward-slash does division  (don’t confuse with back-slash \)

Conditions

We looked at a simple condition. This allows us to choose between two options based on whether a check was true or not:

if (c < 1){
  console.log("c is less than one")
}
else {
  console.log("c is greater than one")
}

The keyword if  starts this check. The thing we’re testing is then inside roundy brackets (). Here we’re checking “is c less than one?”. After this we get a block of code (contained in the curly brackets {}) to do if it is true. Here we’ve also added (which is optional, you don’t have to have this if you don’t need it) the keyword else and another block of code to do if it is not true.

Basic Functions

Functions perform an action. They contain a bunch of commands to run together.

They’re great where we’re doing the same thing repeatedly but from different places and they help to logically break-up and organise our scripts.

Here’s a basic function that just writes to the console:

function SayHi(){
  console.log("Hi");
}

The keyword function indicates that we’re going to define a function. Next comes the function name, SayHi in this case, followed by roundy brackets (), followed by a block of code surrounded by curly brackets {}. Inside the curly brackets are the commands that make up this function.

To make this function actually run we need this in our script:

SayHi();

Without this the function would never run. Functions only run when we “call” them.

Function Arguments

Sometimes it’s nice to be able to give a function more information about what we want to do. A function can take several values as input, these are called arguments.

Let’s imagine we don’t want our function to log the same thing to the console every time. We want to tell it what to write. Let’s see what that looks like:

function MyFunction(what){
  console.log(what);
}

MyFunction("Testing the function");

Here our function is defined as before, but we have a name, what, inside the roundy brackets. Firstly, this means that when you call the function, you’re expected to provide a value. Secontly, inside MyFunction(), we have a new variable, here called what, containing the supplied value and usable like any normal variable.

Finally here’s a more complex example with two arguments:

function Divide(m, n){
  return m / n;
}

There’s a new keyword here, return. This means “send back this value to the place that called me”. Let’s see how we might use it:

let a = 4;
let b = 5;
let c = Divide(a, b);

The third line here both calls the Divide() function and stores the value sent back.

P5.js

We had the briefest of introductions to P5.js and a flying visit to the new P5.js web editor. We’ll follow up properly on these next week.

Download

Files from this week can be found on our GitHub page.

 

 

Creators – Starting Off

code-944499_640

We kicked off our 2018/2019 session this week and it was good to see some new faces and also many familiar ones. Welcome all!

Our plan for the year is similar to last year’s, though we plan to do different projects, week-to-week. This week though we started with the basics.

Getting The Right Tools

We got pretty-much everyone set up with Google Chrome as our standard web browser and Visual Studio Code as our standard text editor.

512px-google_chrome_icon_28201129-svg

Google Chrome is a great browser for programers as it contains useful tools to help you debug your code. https://www.google.com/chrome/

512px-visual_studio_code_1-18_icon-svg

Visual Studio Code is a great text editor. It helps you with writing many languages, including the two we’ll be using, HTML and JavaScript. It also works well to help you manage your files and folders. Finally, we will see later in the year how it integrates with source control software.  https://code.visualstudio.com/download

Files and Folders

We talked about how computers store information and what’s inside a hard disk.

800px-seagate_st33232a_hard_disk_inner_view

The computer organises files with folders (also known as directories) and sub-folders (subdirectories). No two files in the same folder can have exactly the same name.

We looked at how to find your way, using File Explorer on Windows and Finder on Mac, to your account’s home directory and how to find your desktop folder. We all created folders to store our files for this year.

Web Pages

We talked about how there are three main languages used for most modern web pages:

  • HTML: This is the content of the page. HTML stands for HyperText Markup Language. Hypertext means enhanced text with links that can bring you to new pages. A markup language is one that adds tags around the text-based content. A program (web browser in this case) can interpret these tags to know how to treat the content.
  • CSS: This is the style of the page. CSS stands for Cascading Style Sheets. Colors, sizes, fonts, etc. are normally specific in CSS. The great benefit is that you can have one set of CSS files for your entire website and can quickly update the appearance of all pages in one go. Having said all that, we won’t be looking at them and we’ll be doing more old-fashioned formatting directly in the HTML files themselves.
  • JavaScript: This is the logic of the page. Scripts bring webpages to life and allow them to react when you interact with them. This is the language we will spend the vast majority of our time looking at this year.

Writing HTML

Tags in HTML generally come in pairs. We have a start tag such as <html> and and its corresponding end tag </html>. End tags are identical to their matching start tag except there is a forward slash before the name.

Some tags don’t need to enclose content. We saw <img> which didn’t need a </img> as it wasn’t around anything else. It was enough in itself.

Some tags had attributes. This was additional information inside the tag itself. For <img>, for example we specificified the src=”” attribute to provide the location of the image file. We also specified the width=”” and height=”” attributes. It looked something like this:

<img src="picture.jpg" width="400" height="300" >

Some of the tags we saw were:

  • <html> – The tag which wraps the entire content of the HTML file.
  • <head> – A section at the top of the file containing document information. In our case it just contained the page title.
  • <title> – The page title. Belongs in the <head> section.
  • <body> – The main content of the page. We saw how the bgcolor=”” attribute can be used to set the colour and talked about RGB colour and HTML colour names.
  • <p> – A paragraph.
  • <h1>,<h2>,<h3>,<h4>,<h5> – Heading levels. Large text in different levels.
  • <b>, <i>, <u> – Bold, italics and underscore respectively.
  • <img> – An image. We saw the scr=””, height=”” and width=”” attributes.
  • <a>: A link to another page. We saw the href=”” attribute to specify the destination.

 

Download

The files for this week can be found on GitHub.

Useful Resources

A really handy reference location for both JavaScript and HTML is:

https://www.w3schools.com/

Specifically, one page which is particularly convenient is the table of HTML colour names:

https://www.w3schools.com/colors/colors_names.asp