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