Lesson 2

Coding in a question

First bits of content using HTML

Every web page and many 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.

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

Create a new project in Thimble

Replace the "Welcome to Thimble" text with the name of your app.

We’re going to call ours iQz. (Removing vowels is very trendy!)

We need to tell the browser this is our heading, so we wrap it in an h1 tag:

Next we need to put in a list of questions and answers.

Replace the "Make something amazing with the web" text with your first question.

We will want to eventually be able to detect a user's click event on the answer. We therefore need to put the available answers in their own individual HTML elements. We will use a span:

Our program needs to know which one is the right answer. So we add a "class" attribute of "correct" to the correct answer. This means that later on we can detect if the user got the question right:

Below we have one question inside a p element, and then we have two options. Both options are put inside span elements.

In your own app in Thimble, put in some more questions. Try and do it before going to the next lesson. You can write out a couple by hand. Once you've got it, it's OK to copy and paste an existing question and just change the content.

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.

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.

Attribute

Attributes are pieces of information about an element on a page. In this case our "correct" attribute is used to tell the browser which answer is correct. What's great this that unless our user looks at the source code, they won’t be able to see which answer has been marked as correct!

Go to the next lesson

index.html

the web page

New Window
Next Lesson