Wikijunior:Raspberry Pi/Raspberry Pi Web Server & HTML Tutorial

Tutorial by Andrew Oakley Public Domain 28 Jan 2017 www.cotswoldjam.org

The Terminal
Start the terminal with the Raspberry Pi menu – Accessories – Terminal.

We’re going to install a web server. A server is a program that other people can connect to.

The ordinary user pi doesn’t have the ability to install software, so we use the  command to temporarily switch to the superuser (also known as the root user). Enter:

The  command gets an up-to-date list of software. The  command installs new versions of any out-of-date software you have. If you are on a slow internet connection,  might take a long time. You might be asked to confirm by pressing Y and Enter. Now let's install the Apache web server, the most commonly used Linux web server.

You’ll see that this asks to install apache2 and a few other programs too. These are called "dependencies" – they are programs which apache2 needs in order to work.

Once Apache is installed, start your web browser. On a Raspberry Pi 2 or 3, you can use the Pi menu – Internet – Chromium web browser.

If you are on an older Pi 1 or Pi Zero, select Pi menu - Run – and then type  and press Enter. Epiphany is a simpler browser for slower computers.

In the web browser's address bar, type  and press Enter.

You should see the Apache2 Default Page. localhost always refers to the computer you're using. So if someone types it into their Raspberry Pi, it'll refer to their Raspberry Pi and not yours.

Go back to the terminal and enter:

It will tell you the name of your computer. This might be  or someone might have customised it for you, such as. Now go back to your web browser, and type:

… where hostname is the name of your computer. You must put .local afterwards on Linux computers. On Microsoft Windows, you'd use .lan instead: hostname.lan

Provided you don't have the same hostname as someone else on the same network (usually "your network" means "your building") then this should find only your computer. This is called Zeroconf and is also known as Avahi or Bonjour. Some computers don't support Zeroconf so you can find your IP address instead:

(note capital i) Your IP address will look like four sets of numbers, such as 192.168.0.42. Now try browsing to your IP address in the web browser.

Creating your own web page in HTML5
Back in the terminal, enter:

is where web pages are kept. You should see index.html. We're going to rename it to -old (to keep a copy, just in case) and create a new index.html of our own.

A text editor program should pop up, with a blank page. Start typing:

Change Andrew to whatever your name is, and save the page with File menu, Save.

Reload the web browser using the reload button near the address bar or by pressing the F5 key.

What did this code do?
  tells the browser this is the start of a web page; is the end   says this is the start of the header, where the title goes; is the end   is the start of the text of a web page; is the end    is the start of a new paragraph; the closing tag   is optional in HTML5

is a special file name that gets loaded if you don't specify a particular web page inside a folder. So http://localhost is the same as http://localhost/index.html

Under "My name is Andrew" now type:

Don’t forget to File, Save, then reload browser.

   is a link to another web page (or any file on a web browser). The href (hypertext reference) can be "relative" such as pets.html - this will become http://hostname.local/pets.html because pets.html is in the same folder as index.html.

To link to web pages in other folders on other computers, you can use an "absolute" address such as: http://www.bbc.co.uk/news/technology-37305200

Close Leafpad with the X at top right. We're going to add a photo. Let's list the photos (if you’re not using the Cotswold Jam preinstalled SD card, you'll need to find your own photos):

Pick a pet (cat, dog, guinea pig, hamster) and copy the picture to the web server directory:

Create a new web page with:

Reload browser and click on the "My favourite pet link". You can use the Back button to go back to the index page.

Now try browsing other classmates' websites. You will need to know their hostname or IP address. For example http://rpi-12ab.local or http://192.168.0.123

If your hostname is raspberrypi (the default) then that might clash with other similarly named computers. You can change it by going to Pi menu - Preferences - Raspberry Pi Configuration and changing the Hostname. You'll be prompted to reboot your machine when done.

If you want to uninstall Apache:

Create a CSS file for your webpage
Cascading style sheets (CSS) are files used by websites to change the appearance of the content on each webpage.

Create the  file just like the corresponding   file.

Type this CSS to alter the  tags.

Now to add the CSS file to the HTML file so that web browser knows to use it.

By just using the name of the tag on its own that will alter all uses of the tag. CSS uses classes which can be used on specific tags. Type the following into the  file to add a class:

Then declare the class to the  tags.

You can try other CSS attributes to style your webpage such as:


 * makes the font italic.
 * adds a margin to separate the tag from other elements on the page. Using  on its own will add a margin to all four sides of the tag.
 * changes the colour of the text to red.
 * changes the background colour of the webpage to black.

You can refer to the colour table below or do a Google search to find your preferred colour. CSS supports RGB, HSL and hexadecimal colour standards, though hexadecimal is preferred because it's the most concise.

What is hexadecimal?
A numerical base is the amount of single-digit numbers that can be used for counting. In everyday maths, we use decimal (base 10) which are the numbers 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9.

Computers are based on binary (base 2) which uses the single-digit numbers 0 and 1. This means they don't count or perform calculations in the same way we do.

Hexadecimal (base 16) is a simplified way to write binary which prevents us from writing out a lot of zeros! Much like binary being the numbers 0 and 1, hexadecimal are the numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

For example: Decimal 255 = Binary 11111111 = Hexadecimal FF

Each binary digit is doubled for each column. So 1+2+4+8+16+32+64+128 = 255

For further information: https://www.mathsisfun.com/numbers/bases.html

Public IP Addresses
To make your website visible to people outside your network (for example, in other buildings or other towns or countries), you will need a Public IP address. Read the manual for your router to find out how to set up Port Forwarding for port 80. You can find your public IP address by searching Google for "what is my ip".

Your public IP address can change; ask your internet service provider for a Static Public IP address. You can then buy a domain name and associate it with your static public IP address. For some UK ISPs, you might already have a subdomain, for example Plusnet gives every customer accountname.plus.com.

Stopping and starting server programs
From the terminal:

Reload localhost in the browser. Note the error message - the web server has been stopped.

Shows "Active: inactive (dead)" – it’s not running.

Reload the browser. It works again.

Shows "Active: active (running)"

Shows "Loaded: not-found". This means bing-bong-pop doesn't exist, isn't installed, or you spelt it wrong. Of course it doesn’t exist, I made it up as an example.

Controlling automatic starts
Reboot the machine with Pi menu - Shutdown... – Reboot.

Once the machine has restarted, browse to localhost. Note how the web server is started automatically on boot. From the terminal:

Reboot again and, once restarted, try browsing to localhost. You get an error message – the web server didn’t automatically start when you rebooted.

You can start it manually with:

or you can reenable it to start automatically every reboot with:

Removing installed programs
Remember those "dependencies", extra programs which Apache needed to install so that it would work? We use the autoremove directive to uninstall them after we’ve uninstalled Apache.

Updating and installing other programs
…to get the latest versions of the software you already have.

You can find names and descriptions of other packages to install on this website: http://www.raspberryconnect.com/raspbian-packages-list

Once you’ve done an, you can install new software with:

…where packagename is the name of the software you want to install.

Be wary of anything that asks to install lots and lots of other packages. Learn how to make a backup of your SD card, for example with Win32DiskImager on a Windows laptop.

Files
The original PDFs for this tutorial are available on Wikimedia Commons: