Wikijunior:Raspberry Pi/Raspberry Pi Web Server & HTML Tutorial
Tutorial by Andrew Oakley
Public Domain 28 Jan 2017
www.cotswoldjam.org
The Terminal[edit | edit source]
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:
hostnameIt 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[edit | edit source]
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?[edit | edit source]
<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[edit | edit source]
Create a CSS file for your webpage[edit | edit source]
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.marginadds a margin to separate the tag from other elements on the page. Usingmarginon its own will add a margin to all four sides of the tag.color: #F00changes the colour of the text to red.background-color: #000changes 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?[edit | edit source]
 | 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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
The original PDFs for this tutorial are available on Wikimedia Commons: