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
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.
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):