Lesson 3

Coding our content

First bits of content using HTML

Every web page and a lot of the apps you know and love use HTML. It allows us to tell the browser what everything is; our logos, paragraphs, any images, videos and so on.

HTML is a universal language – it is understood by every browser, and all smartphones including iPhones and Android can run apps built in HTML. See *HTML and *A Radically Open Language for more information.

We want our app to be accessible to everyone; HTML is the only language that everyone’s device can understand.

1.New Playto Project

Create a new project in Thimble

Why is the file called index.html?

A web server will automatically show the “index” file before any other file in a folder. This goes back to the days of the early web when accessing information was its sole purpose. Having an “index” of all the files in a folder was useful so that users could see every file that had been saved.

2.App Name

Replace the "Welcome to Thimble" with the text "PLAY SNAP THAT!".

Why do we need HTML?

HTML is the language of content, and it’s really useful for laying out the ‘skeleton’ of the page. Though it might not look like much, the HTML will provide the content which we can style later on.

3.Heading 1

You'll see this text is in an h1 element.

What is an h1 element?

h1 stands for heading one, and is the biggest and most important heading that you will have on a page. When Sir Tim Berners-Lee created the web, he was keen for it to be very hierarchical. h1 is the most important heading, then h2, h3, h4 and so on.

The first part '< h1 >' tells the browser an h1 has started. The second part '< /h1 >' tells the browser the h1 has finished.

Notice that these elements are lower case. See *The Importance of Cases to see how case matters in coding.

4.Paragraph

Under your h1, delete the paragraph element "Make something amazing with the web", and add text for your two players in paragraph elements.

What is a paragraph element?

A paragraph element tells the browser that you will be typing some paragraph text. This is usually longer and more descriptive than heading text.

5.Canvas

Add a new canvas element above, and below your code.
What is a canvas element?

The canvas element is a relatively new addition to HTML - as part of the HTML5 update. A canvas allows the browser to draw - or create images - in an area on the page. In our case, we’ll be using the canvas to display the snap images. For more information about how HTML is changing see *Evolving Standard.

*HTML - The Language of Content

HTML, which stands for HyperText Markup Language, was developed by the inventor of the Web, Sir Tim Berners Lee in 1989.

The original idea behind HTML was to write an open set of rules so that any browser could interpret a piece of content and know where there were paragraphs, headings, lists and so on. Sir Tim’s idea was to allow the transfer of information between different computers, and so HTML is purely a language of content.

The fact that HTML is a "Markup language" means that rather than writing rules and instructions for a computer, we are simply "marking up" content with tags.

*A radically open language

When HTML was created there were other competing markup languages. One of the reasons why HTML has become so ubiquitous across the world is because Sir Tim decided to make it completely open. This means that if you right click on any page on the web and select "view page source" you will be able to see the raw HTML that makes up the page.

*An evolving standard

Today, HTML is constantly evolving and developing as new features come out. If you use a browser like Chrome updates will happen in the background, meaning that you'll always have the latest version.

*The importance of cases

You may have seen that whether you type in upper or lower case matters sometimes when you’re coding, but not all the time. It’s normally best practice to keep everything lowercase when you are coding, to make sure that you can always reference files and elements.

Go to the next lesson

index.html

the web page

New Window
Next Lesson