Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Introduction to Web Development. Join the course to learn more.

Browsers and HTML pages

In the previous step I wrote about Sir Tim Berners-Lee inventing the web by linking documents together. This developed into Hypertext Markup Language (HTML), which is now the standard language for creating webpages. Now you are going to look at what makes a webpage and how webpages appear on your devices, by working with a Raspberry Pi Fan Club page.

HTML

HTML uses tags to define elements of a webpage; for example, the tags can make the text appear in different sizes.

Throughout this week you will use this Trinket to show how a Raspberry Pi Fan Club webpage uses HTML. Trinket shows the HTML (including all the tags) on the left and the resulting webpage on the right. It is important to recognise the relationship of each line of the HTML to what appears on the webpage. You can change the text slightly on the left and see it change on the right.

  1. Sign up and log in to Trinket using the links at the top-right.

  2. Correct the launch date of the Raspberry Pi 4 to 24 June 2019 in the Trinket for the Raspberry Pi Fan Club webpage.

  3. In Trinket, click on “Remix” (at the top right of the screen) and save your Trinket, as you will be using your own version in the next steps.

A screenshot of the "remix" button on a Trinket project, found in the top right of the screen. A red arrow points to the button, with a circle around it.

You will notice some tags open and close by using a /, such as <p> and </p>; however, not all tags need to close, for example <br> and <hr> do not.

The Raspberry Pi Fan Club webpage you looked at in this Trinket uses only a limited number of tags, which is similar to early webpages. As webpages increased in popularity and usage, developers wanted images and other media to appear. This meant that more tags were created to define these elements; you will learn more about some of them in the next steps and use them to improve the Raspberry Pi Fan Club webpage.

Browsers and HTML pages

Today you may use one of these common web browsers: Microsoft Edge, Google Chrome, Mozilla Firefox, or Apple Safari. The function of the web browser is to process the HTML (and other code) to appear in the web browser’s window. This displays what we see as the webpage.

Browser icons for Safari, Firefox, Chrome and Explorer

HTML is not programming

You may now be starting to think that HTML is a programming language, but it is not. HTML is a markup language that uses tags to identify elements of a webpage and tells a browser how to lay a webpage out on a screen.

By contrast, computer programming is a way of giving computers instructions about what they should do in order to complete a set task. A computer program will have the ability to take input data from a device such as a keyboard, process calculations, and make decisions based on certain conditions.

Unlike a programming language, HTML does not:

  • Use logic
  • Use conditional statements such as If/Else
  • Use mathematical expressions
  • Take inputs
  • Produce outputs
  • Declare variables
  • Write functions

To view webpages, browsers use Hypertext Transfer Protocol (HTTP) as the rules to send and receive HTML. HTTP is called a “stateless protocol”, because each request is executed independently, without any knowledge of the requests that were executed before it. There is no requirement to store user data on the web server and every visitor to a website will be given the same information.

How do you make the Raspberry Pi Fan Club webpage interactive?

HTML is not programming, but you can still program for the web using JavaScript. JavaScript allows the webpage to respond to actions from the user without the need to load a new webpage. You will learn more about JavaScript in week three.

Next step

In the next step you will look at the structure of HTML and at some more tags, as you start to think about what is used to create a webpage.

Share this article:

This article is from the free online course:

Introduction to Web Development

Raspberry Pi Foundation