Welcome back to another edition of {Kids: Code}, the free weekly newsletter for all aspiring computer programmers! This week we celebrate Scratch Week and begin to talk a little bit about something called HTML, one of the coding languages used in making websites (like the one you're looking at now!)
If you have any questions, feel free to reach out to us or check us out on Twitter!
There are so many different things you can do with code, from building games to websites and more. Websites are one of the more accessible ways to learn how to code since you can run it right in your web browser of choice. For this week, we'll take a look at how HTML elements (the building blocks of websites) work.
HTML
HTML is how you describe a website. You build a website by combining elements (similar to blocks, if you're coming from Scratch), and HTML has many built-in elements that you can use! A few of the more common ones are:
<html>
, which is called the root element. This starts your HTML.<head>
, which contains meta information - things you can supply that don't necessarily render on the page.<body>
, which is where the things that you want to show on the screen go.A
<div>
is the most common element. Think of it as a box; by itself it has no appearance, but we can change this - keep reading!A
<p>
stands for a paragraph. You'd use this to mark some text as a paragraph.A
<strong>
tag marks some text as important, and usually appears as bold.An
<a>
tag makes some text into a link, so when you click on it you go somewhere else.The tags
<h1>
, all the way to<h6>
, make titles (often bigger text).
HTML elements usually have a beginning and end that surround their contents. End tags are marked with a leading /
- for example:
<div>my contents</div>
You can see many more tags by browsing this handy HTML reference from Mozilla, the creators of the Firefox Web Browser.
Building a Basic Website
So, how do we combine these elements into a webpage? We can do it in just one text file! To follow along, open a text editor of your choice (for example, Notepad if you’re on Windows), create a new file, and save it as my_website.html
. Then go into your browser, click File
> Open
, and open that file.
For now it's just a blank file, but this is where we can begin to build!
The Basics
To make our website actually show something on the screen, we need to set the basic structure of the file. It may end up looking like this:
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>Your own text here</p>
</body>
</html>
What's each section doing?
<!DOCTYPE HTML>
is a special line you want to put at the top of your file; it tells the browser to treat the file as the newest HTML type.<head>
starts our metadata<title>
sets our page title, which you can see on your browser tab.
</head>
closes our metadata<body>
starts our actual content (what shows in the window)<h1>
makes a title<p>
is our paragraph
</body>
ends our content</html>
ends our document
Now, save the file, and refresh your browser - and you should see a website that looks like the following!
Next Week
Play around with the HTML setup we've built here, and see what you can do! Next week, we'll go over how to apply styles to your websites, like colors, spacing, and more.
Scratch Week 2021
Mark your calendars for May 17-23 because Scratch Week is back again this year! This is an opportunity for the Scratch community to celebrate the programming language by dedicating a whole week of activities to it.
How it works is simple: Each weekday will feature a new theme from the Scratch Team, and participants are to feature these themes in their Scratch games, stories, and animations. You can then upload your creations and play around with others’ projects to see what kinds of things people came up with.
For more instructions on how to get started, check out the Scratch Week page here. We can’t wait to see what people build next week!
Thanks to Leiden University in the Netherlands, you can use a website called Hedy Code to learn coding in your browser for free! Hedy Code goes over concepts that might seem familiar to you if you’ve used Scratch and Python before and places importance on “gradual programming.” This means that you take more time to learn the individual rules of computer programming before slowly adding them all together.
Hedy Code works in all browsers, and even on your smartphone or tablet, so why not give it a shot? [Suitable for all ages]
How to Build the PlayStation 5 UI
If you’re one of the many people who can’t get your hands on a PlayStation 5, you can still have a little bit of fun with a tutorial somebody put together that brings the console’s user interface (UI) to your computer! This can be done by following a tutorial someone made here that builds the console’s user interface using JavaScript and CSS (Cascading Style Sheets) and let’s you play around with the final product.
You might look at the instructions and find them a bit scary or intimidating, but we definitely wanted to share this project to show the kinds of things you can do with programming languages like JavaScript and CSS. Who knows, maybe you’ll be building this on your own one day!
This Week’s Vocabulary Word
HTML (HyperText Markup Language)
A set of elements used to build websites.