Code a secret message with Trinket and SPYnet | Explore | Awesome Activities & Fun Facts | CBC Kids

CBC Kids | Play Games, Watch Video, Explore

explore,make-do,

Code a secret message with Trinket and SPYnet

 

Photo by Lelia Ribeiro licensed CC BY-SA 2.0

Have you ever tried having a conversation with your computer? It can be a bit tough unless you speak a language the computer understands. HTML is a programming language that gives people a way to give computers instructions. HTML stands for HyperText Markup Language and is a computer language used to make most of your favourite websites (like this one!).

 

via GIPHY

To work with HTML, you’ll be using a tool called Trinket. You can see the HTML computer language on the left. Output, or how the computer displays the code to us, is on the right. Today you’re going to decode some HTML to create your own secret message to send to a friend.

HTML uses "tags" in angle brackets ("<","/>") to tell the computer what we want it to do with the information inside the tags. The computer doesn’t understand just anything in angle brackets like <pizza> for pizza but only certain ones, such as <p> for paragraph. For today don’t worry too much about what each tag does. 

SPYnet Secret Message Activity

YOUR MISSION: To quickly locate the sentences you see on the web page, and change the code to create your secret message!

Some things to know before you get started

  • Clicking on this button opens a menu bar that lets you reset your code if you make a mistake or want to start fresh.
    Trinket screenshot 1
  • Clicking on this button lets you see the changes you’ve made to the code.
    Trinket screenshot 2

Now you’re ready to become a coder!

 

via GIPHY

STEP by STEP How to Create your own message

  1. Open the coding activity in a new window so that you can easily go back and forth between the instructions and the application. This activity uses a program called Trinket that allows you to see your code on one side of the window and the display or what your code does on the other. 
     
  2. You can download the instructions for the activity and print them out if that's easier for you to work from, or follow the steps below. The PDF will open in a new window that you can print.
     
  3. Look through the code in the left part of the window and see if you can find the <p> tags.  In HTML <p> stands for paragraph. When you see a <p> tag you know that the text inside these tags will be visible as a paragraph of text on the web page. When you see the  "closing" </p> tag,  that section of text is finished.
    Trinket screenshot 3
     
  4. Make a change to the text between the two <p> </p> tags. Unlike talking to a human, talking to a computer means you have to give it instructions it understands. If you change any of the <> or [] tags then sometimes the instructions get lost in the translation.
     
  5. Press RUN. What happens? You should see your text change. If you deleted some HTML by mistake, you might need to press the reset button and try again.
     
  6. Scroll down lower on the left to find the text on the second page. That’s where you’re going to create your secret message.
     
  7. Change the text here to leave a secret message to send to your pals. It can be anything you want.
    Trinket screenshot 4
     
  8. Congratulations! You’re officially on your way to becoming an awesome coder! To send your message to a friend click the Share button and follow the instructions to send your code as an e-mail. 

BONUS CHALLENGE

Decode some CSS.  This is the language that programmers use to make web pages cool! It stands for Cascading Style Sheets.

  1. Click on the tab "style.css."
     
  2. You’ll see an entirely different kind of code. Search for the code under #outside.  You’ll see that background-color (CSS uses the American spelling “color”)  is set for "lightgrey."  Change the colour to green, blue, pink, or any other colour you can name. Make sure not to change any of the code, or delete any important punctuation (especially the semi-colon ";"). What happens?
     
  3. Look further down the page you’ll see the code for #inside.  Can you change the background-color from "white" to your favourite colour?

You’re officially on your way to becoming a web page designer!