Project: Code your first web page

Step 1: Some basics

1. The Internet is an enormous network of computers connected across the globe. Computers can be connected by cables but more often now by wireless links. The internet is used for things like the web, emails and downloading music and videos.

2. The World Wide Web uses the internet to share webpages. The web was invented by Tim Berners-Lee in 1989 as a way of sharing information with his science colleagues.

3. All pages on the web have their own special address, a URL Uniform Resource Locator. Most pages also have hyperlinks that contain a URL for another webpage. Clicking on hyperlinks opens the new webpage.

4. Each part of a URL address tells us something about the page and where it is. The part before the / is called the domain. To have your own webpage that is publicaly accessible you need to have a registered domain name. Web service providers are companies that charge a fee for registering your domain name on the global DNS (Domain Name System) and hosting your webpage data on their servers.

5. Most URLs start with the acronym HTTP, which stands for HyperText Transfer Protcol. A protocol is a system of rules, so http is a system of coding rules about how to transport pages over the internet. If these rules didn't exist and everyone used different sorts of code, your computer wouldn't be able to understand information from all around the world.

6. Webpages are written in a special coding language called HTML HyperText Mark-up Language. It is basically a series of 'tags' that tell a computer how to display the content/text that follows the tag.

7. HTML gives a webpage its structure and is complemented by a coding language called CSS Cascading Style Sheets, which defines how text should look in terms of style, colour, size etc.

8. Web browsers such as Chrome and Safari using HTTP to access webpages and then read and interpret the HTML/CSS code to display the pages on your screen.

9. For interactive features on a page such as buttons, search boxes or embedded videos we need to use another programming language called Javascript. So HTML/CSS determine how a web page looks and Javascript determines how it behaves.

10. On a computer you can press the F12 button and all the code that is behind the webpage you are viewing will appear!

Step 2: Let's get started

Use this link to go to the Code Club online project: projects.raspberrypi.org/en/projects/happy-birthday and follow each step in the project.

Challenge 1: Add a paragraph.

Challenge 2: Add more styles.

Challenge 3: Create a personalised card.