mattwynne/worksheeet.md

## worksheeet.md

      
    Raw
  

              worksheeet.md
            
          
    Welcome back to Pi Club!

Link to your website: http://localhost
Worksheet 2

Adding some style

Open your HTML code in your editor. It's in /var/www/html/index.html
Change the code to add a <style> tag within the <head> like this:
...
<head>
<style>
body {
  background-color: red;
}
</style>
</head>
...
Save the file and refresh your browser. What do you see?
Now, pick your own colour from this list. Change your page's background colour to something you like.
Putting your website on the internet!

Open the terminal.
cd /var/www/html
git add .
git commit -m "Update"
git push
Now go to https://goil-pi.github.io and click the link for your Pi's number. Give it a few seconds and your changes should appear!
Congratulations, you've just put your first web page on the internet! 🎉💃🌈🕺
Write down the URL for your website, so you can show your parents. It should look something like https://goil-pi.github.io/pi-1/

Worksheet 1

This term, we're going to be doing some coding, learning about how to make web pages for the internet.
Web pages on the internet are made using a coding language called HTML:
Hyper-Text Markup Language
The internet is made of web servers that serve web pages. You have a web server running on your Raspberry Pi right now!
Want to take a look? Visit http://localhost to take a look. Hold down CTRL while you click this link to open it in a new tab.
Not very impressed?
Editing your Pi's website

You can edit your Pi's website by editing this file:
nano /var/www/html/index.html

See if you can change the Hello World text on the page to something else, then use CTRL-O to save it.
Now go to http://localhost again to see if it's changed. You might need to press Refresh. 
Editing HTML

Here's the code on your webpage:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Can you see how it works?
How do you change the title?
Adding a heading

Try adding a heading, by changing the body like this:
...
<body>
<h1>Lochgoihead Pi Club</h1>
<p>Hello world</p>
</body>
...
h1 means "Heading One" - a big heading. What happens if you add a h2?
Other tags to try

The code words in <angle brackets> like html body p b h1 are called tags. They tell the web browser how to display the text, but they get hidden from view.
Try these tags out:
<i>Italics</i>
<img src="https://bit.ly/32h6rUY">
<marquee>look at this!</marquee>
Learn more

Read more about HTML here.
## Favicon
Generate one here: https://www.ionos.co.uk/tools/favicon-generator