Lesson 3

Adding more questions

Universal structure and more questions

HTML is the language we use for telling the browser what things are. These instructions go beyond the content into the meta information of your app. Things like Google Analytics, Stylesheets and JavaScript files all need to go somewhere in our HTML.

If you preview your app in the browser (by clicking "Publish" in Thimble) you will notice that the title in the tab at the top is "Made in Thimble". To give the app its own name we need to update the information in the "head".

All html pages are made up of two sections: the head for information about the page, and the body for content the user sees.

The indentation is purely there to show us as coders what’s where. The browser ignores "white space". It does look neater, doesn’t it? It’s up to you, but here at Decoded we like to keep our code nice’n’tidy.

Lastly for now, let’s put in something before the end of the body to hold our score:

We've used an em element (which means it is emphasised) with two spans in it – one to hold the running score, the other the total number of questions. For now we’ve just made up the numbers; we will populate these from the JavaScript later on.

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.

The separation of concerns

You'll probably notice that with just HTML your web-app won't look that exciting. This is because we haven't included any design yet.

In computing we often talk about the idea of the "separation of concerns", and in web development this means having separate languages and files for content, design and interactivity.

Challenge

Why not add an image to your page? To do this, find an image that you like on the web (if you go to Google Image search and then select ‘search tools’ you can select images that are “labeled for reuse” to make sure the photographer is OK for you to use your photo).

Once you have found an image that you like, copy its address (in the top bar of your browser) and then write this line in your HTML file (replacing image.jpg with your image address):

Go to the next lesson

index.html

the web page

New Window
Next Lesson