Piccante Web Design logo

Kids Who Code - Horsham Downs School students learn HTML

Teaching HTML and CSS basics to kids, Piccante Web Design

Lesson One - Making your first HTML page

Objective - to create our first HTML page and view it in our web browser

So what is a web page? A web page is made up of code, which displays in a web browser to show us text, images, navigation menus, video, audio and many other things... all this can be done with HTML (HyperText Markup Language) and styled with CSS (Cascading Style Sheets).

So what is HTML? A series of "tags" that tell a web browser what the content of our web page is, and how it should be displayed. Search engines, like Google also look at these tags and the content so they can index web pages and show them in search results.

Here is an example of how a top-level heading tag would look:

<h1>My web page about cats.</h1>

Paragraphs make up a lot of the text on webpages. Here is how a paragraph tag could look:

<p>I love cats. They are so fluffy and adorable. They miaow and everyone loves the cat videos on YouTube.</p>

You might notice that these two types of tags have a closing tag, this is important to make sure our page renders, or displays correctly. Some tags, such as image tags don't have closing tags - these would appear like this:

<img src="http://www.piccante.co/images/cat.jpg">

Setting up our first HTML page with a text editor

One of the challenges the kids had to overcome was how to type up their first HTML file because we had a range of computers - PCs, Apple Macs and Chromebooks. Most kids or beginners won't have Dreamweaver or HTML editing software installed on their devices - that's fine - we can create HTML files using basic text editors and we are going to call this file "index.html" as that is the default "homepage" that a browser will look for.

Chromebook users

Open the Text app from Launcher and save a blank document as "index.html" to your USB drive (there is no built-in file storage with a Chromebook).

PC users

Open Notepad and save the file as "index.html" to your Desktop.

Apple Mac users

There are a couple of extra steps for the Mac to ensure that our text editor isn't going to do weird things with our HTML. Open the TextEdit app. Go to the menu TextEdit > Preferences and in the New Document tab select "Plain Text" (under Format) and under Options uncheck the boxes for Smart quotes and Text replacement.

Click the Open and Save tab and check the "Display HTML files as HTML code instead of formatted text" (under When Opening a File). Close the Preferences window and click "New Document". File > Save and enter "index.html" as the filename and save it to the Desktop. Phew.

We're going to put our index.html file on our Desktop on PCs and Macs for this lesson for simplicity - later we'll talk about file management and structure.

Coding our first HTML page

We need to set the !DOCTYPE declaration on the first line of our file to tell our browser that it is dealing with an HTML file and create the structure by adding HTML, HEAD and BODY tags to the page. Here's how your index.html file should look when you've finished. (I've left a line in between the opening and closing head and body tags as we're going to add some content there in the next step.

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Now we've set up the page, let's add some of those tags after the opening body tag, but before the closing body tag. When you've finished your HTML file should look like this:

<!DOCTYPE html> <html> <head> </head> <body> <h1>My web page about cats.</h1> <p>I love cats. They are so fluffy and adorable. They miaow and everyone loves the cat videos on YouTube.</p> <img src="http://www.piccante.co/images/cat.jpg"> </body> </html>

Now, let's save your index.html file again with the changes you've made and you're ready for the next step - viewing it in a web browser!

Viewing your HTML file in a browser

Chromebook users

Open Files App. Find your HTML file on your USB drive, ALT-Click and Open With "View"

PC users

Find the file on your desktop and Right-Click, open with your web browser.

Mac users

Find your HTML file in Finder, Control-Click and open with Safari (or from the Desktop drag your file into Safari's URL area)

How your webpage should look

Kids who code lesson 1 by Piccante Web Design

So far so good? Apart from the picture of that weird-looking cat, the page looks a little boring doesn't it? We're going to jazz it up a bit with some CSS, add some style "rules" to make it look more interesting. Let's start with a cooler font, say Arial Black. We are using Arial Black because it is a "web safe" font - and that means that the font is installed on just about every device and computer.

If we target the body element we are going to change every tag between the opening and closing body tags. That's fine, in this case, we want to change every bit of text to Arial Black. The CSS code goes between STYLE opening and closing tags and we put it in the head part of our file

Note that the curly brackets { and } are used to start and finish the styles that we are going to apply a declaration to the body element. 'Font-family' is the property that we are going to apply and "Arial Black" is the value. After the value, we put a semi-colon ;

Note, that if you make a mistake, even if just one character is wrong the browser will pretty well ignore your CSS rules and the style won't be applied to your webpage!

<style> body { font-family: "Arial Black"; } </style>

Note - we use the quote marks “ “ around the words ARIAL BLACK because there are two words in this font. We wouldn't need the quotes, if say, we wanted the font to be VERDANA.

Save your HTML file and refresh your browser and you should now see the font has changed to Arial Black, a heavier style of font. How does that look? If you've got the heavier font displaying then well done!

That's all fine, but what if we want to be a bit more selective with our CSS rules? What if we wanted to ONLY change the style of one element, or tag? Let's say we wanted our h1 headings to be red, the rest of the text should remain in the default colour of black. We also want to increase the font-size (property) of our h1 heading to the value of 64 pixels.

We can achieve this by setting the h1 element colour to red and the font-size to 64px. Note that the CSS spelling is americanised, i.e. color, not colour. Each is finished with a semi-colon followed by a new line (just to keep things easy to read). Let's add this CSS code to the head section of our file.

h1 { color:red; font-size:64px; }

Your HTML file should now look like this:

<!DOCTYPE html> <html> <head> <style> body { font-family: "Arial Black"; } h1 { color:red; font-size:64px; } </style> </head> <body> <h1>My web page about cats.</h1> <p>I love cats. They are so fluffy and adorable. They miaow and everyone loves the cat videos on YouTube.</p> <img src="http://www.piccante.co/images/cat.jpg"> </body> </html>

And when you've saved your index.html file and refreshed your browser this is what you should be seeing:

How your webpage should look

Kids who code lesson 1 by Piccante Web Design

Hot tips

CSS is like any language, once you have learned many "words" you become fluent. But, here is a cool website that makes it easier to find how to change the properties of our HTML elements - w3schools.com.

Homework for the HDS kids!

Your challenge is to add a second-level heading (h2 heading) after the h1 heading that says "Cats are cool". This heading should be styled with CSS to be blue, 50px in size and, let's see if we can make the font style in italics! (Hint - you might need to check the w3schools link and look for font-style property to make your font show in italics).

How your webpage should look when you've done your homework correctly!

Kids who code lesson 1 by Piccante Web Design

How did you get on? Here's the finished code...

<!DOCTYPE html> <html> <head> <style> body { font-family: "Arial Black"; } h1 { color:red; font-size:64px; } h2 { color:blue; font-size:50px; font-style:italic; } </style> </head> <body> <h1>My web page about cats.</h1> <h2>Cats are cool</h2> <p>I love cats. They are so fluffy and adorable. They miaow and everyone loves the cat videos on YouTube.</p> <img src="http://www.piccante.co/images/cat.jpg"> </body> </html>

In our next lesson we will look at positioning, floating columns (which we will call "divs") and a bit more about colours - RGB and hexidecimal - along with changing our file structure so it's better set up for adding more web pages to our site!

Next lesson