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 sudo command to temporarily switch to the superuser (also known as the root user). Enter:

sudo apt update
sudo apt upgrade

The update command gets an up-to-date list of software. The upgrade command installs new versions of any out-of-date software you have. If you are on a slow internet connection, upgrade 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.

sudo apt install apache2

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 epiphany and press ↵ Enter. Epiphany is a simpler browser for slower computers.

In the web browser's address bar, type localhost 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:

hostname

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

hostname.local

… 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:

hostname -I

(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:

cd /var/www/html
ls -lh

/var/www/html 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.

sudo mv index.html index-old.html
sudo leafpad index.html

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

<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>
Hello world
<p>
My name is Andrew
</body>
</html>

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?

<html> tells the browser this is the start of a web page; </html> is the end
<head> says this is the start of the header, where the title goes; </head> is the end
<body> is the start of the text of a web page; </body> is the end
<p> is the start of a new paragraph; the closing tag </p> is optional in HTML5

index.html 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:

<p>
<a href="pet.html">My favourite pet</a>

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

<a> 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):

ls -lh /home/pi/Pictures/pets

cat.jpg	dog.jpg	guineapig.jpg	hamster.jpg

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

sudo cp /home/pi/Pictures/pets/cat.jpg /var/www/html

Create a new web page with:

sudo leafpad pet.html

<html><head>
<title>My favourite pet</title>
</head><body>
<p>
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>

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:

sudo apt remove apache2 && sudo apt-get -y autoremove

Advanced exercises

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 styles.css file just like the corresponding index.html file.

sudo leafpad styles.css

Type this CSS to alter the <p> tags.

p {
   font-weight: bold;
   font-size: 16px;
}

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

<html><head>
<link rel="stylesheet" href="styles.css">
<title>My favourite pet</title>
</head><body>
<p>
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>

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 styles.css file to add a class:

p.pet {
   font-weight: bold;
   font-size: 16px;
}

Then declare the class to the <p> tags.

<html><head>
<link rel="stylesheet" href="styles.css">
<title>My favourite pet</title>
</head><body>
<p class="pet">
My favourite pet is:
<p>
<img src="cat.jpg">
</body></html>

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

font-style: italic; makes the font italic.
margin adds a margin to separate the tag from other elements on the page. Using margin on its own will add a margin to all four sides of the tag.
color: #F00 changes the colour of the text to red.
background-color: #000 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.

Colour	Hexadecimal	RGB	HSL
Black	#000	0, 0, 0	0, 0, 0
Red	#F00	255, 0, 0	0, 0, 0
Green	#0F0	0, 255, 0	0, 0, 0
Blue	#00F	0, 0, 255	0, 0, 0
Cyan	#0FF	0, 255, 255	0, 0, 0
Yellow	#FF0	255, 255, 0	0, 0, 0
Magenta	#F0F	255, 0, 255	0, 0, 0
White	#FFF	255, 255, 255	255, 255, 255

What is hexadecimal?

A binary number is referred to as a "binary digit", which is abbreviated to a "bit". 8 bits make 1 byte.

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

Decimal (base 10)	256	128	64	32	16	8	4	2	1
Binary (base 2)	0	1	1	1	1	1	1	1	1
Hexadecimal (base 16)	0	F				F

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:

sudo systemctl stop apache2

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

sudo systemctl status apache2

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

sudo systemctl start apache2

Reload the browser. It works again.

sudo systemctl status apache2

Shows "Active: active (running)"

sudo systemctl status bing-bong-bop

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:

sudo systemctl disable apache2

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:

sudo systemctl start apache2

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

sudo systemctl enable apache2

Removing installed programs

sudo apt remove apache2
sudo apt-get autoremove

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

sudo apt update
sudo apt upgrade

…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 apt update, you can install new software with:

sudo apt install packagename

…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: