Manchester Raspberry Jam

Workshop 19: HTML & CSS

This workshop will teach you how to create basic web pages using HTML and CSS.

Difficulty: Intermediate workshop

Contents

0 Introduction

Most pages on the World Wide Web are text documents written in HTML (HyperText Markup Language). A 'stylesheet language' called CSS (Cascading Style Sheets) is often used to change the visuals of the HTML.

In this workshop, we'll learn what both of these languages do, and use them to create our own web pages

The files for this workshop can be found at bit.ly/mcrraspjam

What you'll need

Any computer with a web browser and a text editor, preferably one with syntax highlighting.

The files for this workshop can be found here.

About these booklets

The aim of these booklets is to help you attempt these workshops at home, and to explain concepts in more detail than at the workshop. You don't need to follow these booklets during the workshop, but you can if you'd like to.

When you need to make changes to your code, they'll be presented in listings like the example below:

Everything else

The GitHub repo for these notes can be found at github.com/McrRaspJam/booklet-workshop19

To allow modification and redistribution of our workshop notes, they are distributed under the CC BY-SA 4.0 License.

If you get stuck, find errors or have feedback about these booklets, please email me at: jam@jackjkelly.com

1 Hello, World!

Boot your computer to the desktop. If you're using a Raspberry Pi that does not log in automatically, the default login is:

username: pi
password: raspberry

Once at the desktop, open the text editor of your choice. We will be using Geany, which can be found in the application menu of Raspbian under Programming → Geany IDE

The Geany IDE window

The Geany IDE window (shown on Windows)

The Geany IDE window will open, with a new file already opened. Click File → Save As... and save the empty file inside the workshop 19 folder ~/McrRaspJam/Workshop 19/0_helloworld/ with the name helloworld.html

Writing the content with HTML

HTML is a markup language, which means that it determines the content of a webpage. The following code creates a very simple webpage with a single text message:

You can try opening the .html file in a web browser now, and you should see 'Hello, World!' appear on screen in the tab that opens.

Some additional information about the type of webpage should also be added. It's not too important to know what these changes do yet, but they'll be present in all of our HTML documents.

What the code means

Let's go over the code we just wrote line-by-line, and see what everything does. Following the first line (which just tells any program reading the file what it is) we have our first tag, called html.

Tags almost always come in pairs. The first <html> opens the tag, and the second, which has a /, closes the tag. We know that anything between these tags is part of the HTML code of our webpage.

Next, we have two sets of tags, <head> and <body>. The 'head' elements are anything that won't be drawn on the page, whereas the body element should all appear visually on the page.

The text 'Hello, World!' has been placed inside the <body> tag, so it appears on screen.

Given that <title>Hello, World!</title> therefore does not appear on the webpage itself, what do you think it does? Once you've made a guess, try changing it, then save and reload the page and see what changes.

Changing the look with CSS

We've seen that HTML determines what appears on-screen in a webpage. CSS is a style sheet language, which means it takes a HTML page and applys visual styles to it, allowing us to change the layout and presentation of our pages.

Create a new file and save it in the same folder as your html file with the name style.css. We will write our first rule as follows:

In order to make our CSS apply to our webpage, we need to tell the HTML code to load the stylesheet. We do that by adding a special tag to the page head.

This tag says that we're going to load a stylesheet, and that it's found in the file named 'style.css'.

Now, when you save and reload the page, several things should have changed. What 3 things have happened?

In CSS, parts of the HTML code are chosen using selectors, and then rules are applied to anything that matches the selector. In our small piece of CSS, the selector is body. This looks for all body tags (of which there is only one) and applys the rules to them.

The text in our page is inside the body tag, so if we added a rule to change it, all text we added to our site would be changed. Let's add more tags in our HTML, so we can style specific bits of text.

h1 means 'Heading 1', and suggests that the text within is the page title. We can add the following CSS to change the size and colour of the text. (watch out for the american spelling 'color')

We added an 'id' to our <span> tag which we can use to style just one tag instead of all span tags on the page. To style an id instead of a tag, start the selector with #.

The completed Hello, World! webpage

The completed 'Hello, World!'' webpage

2 Developer Tools

Read more about developer tools on the online notes

Included in most web browsers are a set of tool menus for web developers. These tools are quite comprehensive, and include things like debuggers for Javascript scripting and performance monitors for complex 2D and 3D content. We're going to use the inspector tool to view individual elements and which bits of CSS are affecting them.

The following instructions are for Chromium/Chrome, but can also be followed with Mozilla Firefox, and the process should be similar on other browsers.

If you haven't already, open these notes in your browser, and press F12 to bring up the developer tools panel. The panel should open up in the elements/inspector tab, and a copy of the page's source code should be visible underneath.

The 'Select element' button

Click the button in the top left of the panel. This allows you to select elements on the page using the mouse. You can hover over elements to see their CSS Box Model.

In Chromium, the element is hightlighted in blue, and the margin space is highlighted in orange. Another part of the box model is padding. Try find an element in this page which has padding. How does padding differ to margin?

3 Styling a Webpage

Let's try creating a stylesheet for a more complete web page. Go to ~/McrRaspJam/Workshop 19/1_wikipedia/ and then open the file raspberrypi.html in your text editor.

This file is a truncated copy of the Wikipedia entry for the Raspberry Pi. The page has the same information as the Wikipedia page it came from, but it currently has no stylesheet applied to it. We're going to design our own stylesheet for the page.

The copy of Wikipedia's Raspberry Pi entry

Start by taking a look at the head of the HTML file. You can see that a stylesheet should be being loaded with the line <link rel="stylesheet" href="style.css"> but there isn't a style.css file in the folder yet. Create a new file called style.css and open it in your text editor.

From here on, the notes will provide an example of how a stylesheet could be, but feel free to change sizes, spacing and colours how you prefer.

Page Layout

A typical layout for articles on the web is to display the text in a single column, placed in the centre of the screen.

the first HTML tag that we can select in our stylesheet is the <html> tag itself. We will make this the background of our page, setting the background colour to a light grey. We can also set our font and text size here, as all tags are within the <html> tag and will inherit that font.

Immediately inside the <html> tag in our webpage is the <body> tag, which we will style as the page itself.

We will set the background colour to white so it looks different to the background. We'll limit the width; we could set a pixel value like 800px but we'll use em which is a unit that is relative to the font size. We'll also set the margin to 0 auto, which means the horizontal margins are automatic, centring the tag on the page. Finally, we'll set the padding so the text isn't pressed against the edge of the body tag.

The page after adding html/body rules

Infobox Table

The infobox is a feature on many Wikipedia pages, it is a simple table that outlines many pieces of information about the subject. We won't go into the details of HTML tables today, but let's decorate a few parts of it.

We'll start by putting a border around the table, so it is clear where it begins and ends on the page. A CSS border has three properties; the thickness of the line, the style (solid, dashed, double, etc) and the colour. We'll also give it a background colour and center it in the page.

Next, we'll centre the images inside the table. We'll use the selector #infobox img, which selects any <img> tags inside the tag with id="infobox". We can use the same margin trick to centre images, but we need to change the display rule.

The list of operating systems uses a <ul> (unordered list) tag, which by default is shown as bullet points. Bullet points aren't needed in this case, so we can disable those with CSS as well. We'll also remove the padding that is used to make space for the bullet points.

Extra: Each of the operating systems in the list has a 'class', categorising it into a family of operating systems. Try colouring each item <li> in the list based on these classes. Here are some colour codes you could use:

  • #dfbfff
  • #bfcaff
  • #bfffbf
  • #ffbfbf
  • purple
  • blue
  • green
  • red

To select a class, start the selector with a ., e.g. .os-other {

Floating Images

On Wikipedia, images sit to the right of the text on the page. This is very easy to do with CSS with the float rule. We'll also add a border.

Wikipedia page with a completed stylesheet

4 Creating a Personal Homepage

For our final webpage today, we'll be creating a personalised webpage. You can make it about yourself if you'd like, the version in the notes will be about Babbage the Bear, the Raspberry Pi's official mascot.

Babbage the Bear in full Raspberry Pi regalia.

Page Layout and Header

First, we'll create a new blank HTML page, and add a simple header.

Now we'll create the stylesheet style.css. We need to conside what shape we want our page to be. The thin column we used for the Wikipedia page is great for long pieces of text, but our homepage will only have a small amount of text. Let's try centering our page in the middle of the screen

We've used the same margin: 0 auto; trick to center the page horizontally. To move the page down from the top, we've used a top margin of 25vh, which means 25% of the viewport (screen) height.

Let's add an image of our page subject. If you wanted to, you could use a Raspberry Pi camera to take a picture for your own page, but for now, there are some images from the Raspberry Pi website graphics in the img folder. Pick one you like, and add it as an <img> tag.

In our CSS, we'll select the image using header img and centre the image, set it's width to something smaller, and round the edges with the border-radius rule.

Section will be completed after the jam.